implemented identity, updated session, added 'workings' list
added paginated querying, added 'common'
This commit is contained in:
lnn0q
parent
027deba422
commit
6ada519e06
36 changed files with 1422 additions and 279 deletions
|
|
@ -1,12 +1,13 @@
|
|||
import { Separator, Icon, Menu, Stack, Text } from '@chakra-ui/react';
|
||||
import { Icon, Input, InputGroup, Kbd, Menu, Separator, Stack, Text } from '@chakra-ui/react';
|
||||
import { createRootRouteWithContext, Link, Outlet } from '@tanstack/react-router';
|
||||
import React from 'react';
|
||||
import { Avatar } from '../components/ui/avatar';
|
||||
import { Button } from '../components/ui/button';
|
||||
import { ColorModeButton } from '../components/ui/color-mode';
|
||||
import { Tooltip } from '../components/ui/tooltip';
|
||||
import { useAuth } from '../hooks/auth';
|
||||
import { useIdentity } from '../hooks/identity';
|
||||
import { appName } from '../main';
|
||||
import { ColorModeButton } from '../components/ui/color-mode';
|
||||
|
||||
const TanStackRouterDevtools =
|
||||
process.env.NODE_ENV === 'production'
|
||||
|
|
@ -26,48 +27,82 @@ interface RouterContext {
|
|||
|
||||
export const Route = createRootRouteWithContext<RouterContext>()({
|
||||
component: () => {
|
||||
const { isAuthenticated, logout } = useAuth();
|
||||
const { logout } = useAuth();
|
||||
const identity = useIdentity();
|
||||
|
||||
return (
|
||||
<Stack padding={3}>
|
||||
<Stack flexDirection="row" justifyContent="space-between" alignItems="center">
|
||||
<Stack flexDirection="row" alignItems="center" gap={4}>
|
||||
<Stack flexDirection="row" justifyContent="center" alignItems="center" gap={4}>
|
||||
<Link to="/">
|
||||
<Text color="colorPalette.500" fontSize="xl">
|
||||
[{appName}]
|
||||
</Text>
|
||||
</Link>
|
||||
<Link to="/about">
|
||||
<Icon color="colorPalette.500" fontSize="md">
|
||||
<i className="nf nf-oct-question" />
|
||||
</Icon>
|
||||
<Stack direction="row" justifyContent="center" alignItems="center" gap={1}>
|
||||
<Icon fontSize={24} color="colorPalette.500">
|
||||
<i className="nf nf-md-bird" />
|
||||
</Icon>
|
||||
<Text fontSize="lg" fontWeight="bold">
|
||||
{appName}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Link>
|
||||
{/* <Stack hideBelow="md"> */}
|
||||
{/* <Link to="/about"> */}
|
||||
{/* <Icon color="colorPalette.500" fontSize="md"> */}
|
||||
{/* <i className="nf nf-oct-question" /> */}
|
||||
{/* </Icon> */}
|
||||
{/* </Link> */}
|
||||
{/* </Stack> */}
|
||||
</Stack>
|
||||
|
||||
<Stack flexDirection="row" alignItems="center" gap={4}>
|
||||
<InputGroup
|
||||
hideBelow="md"
|
||||
flex={1}
|
||||
alignItems="center"
|
||||
startElement={
|
||||
<Icon color="colorPalette.500">
|
||||
<i className="nf nf-oct-search" />
|
||||
</Icon>
|
||||
}
|
||||
endElement={<Kbd>⌘K</Kbd>}
|
||||
>
|
||||
<Input height={8} placeholder="Search works..." />
|
||||
</InputGroup>
|
||||
|
||||
<ColorModeButton />
|
||||
|
||||
{isAuthenticated ? (
|
||||
{identity != null ? (
|
||||
<Menu.Root>
|
||||
<Menu.Trigger>
|
||||
<Menu.Trigger css={{ '&:hover': { cursor: 'pointer' } }}>
|
||||
<Avatar
|
||||
// src={'https://avatars.githubusercontent.com/u/40203084?v=4'}
|
||||
fallback={'A'}
|
||||
size="sm"
|
||||
// src="https://avatars.githubusercontent.com/u/40203084?v=4"
|
||||
/>
|
||||
</Menu.Trigger>
|
||||
<Menu.Positioner mt={2}>
|
||||
<Menu.Content>
|
||||
<>
|
||||
<Menu.Item value="logout" onClick={async () => logout()}>
|
||||
<Tooltip content="Log out">
|
||||
<Menu.Content backgroundColor={'bg.subtle'}>
|
||||
<Link to={`/profile/${identity.data.user.username}`}>
|
||||
<Menu.Item value="/">
|
||||
<Tooltip content="My profile">
|
||||
<Stack direction="row">
|
||||
<Icon color="colorPalette.500" fontSize="xl">
|
||||
<i className="nf nf-fa-sign_out" />
|
||||
<i className="nf nf-fa-user" />
|
||||
</Icon>
|
||||
Log out
|
||||
My profile
|
||||
</Stack>
|
||||
</Tooltip>
|
||||
</Menu.Item>
|
||||
</>
|
||||
</Link>
|
||||
|
||||
<Menu.Item value="logout" onClick={async () => logout()}>
|
||||
<Tooltip content="Log out">
|
||||
<Stack direction="row">
|
||||
<Icon color="colorPalette.500" fontSize="xl">
|
||||
<i className="nf nf-fa-sign_out" />
|
||||
</Icon>
|
||||
Log out
|
||||
</Stack>
|
||||
</Tooltip>
|
||||
</Menu.Item>
|
||||
</Menu.Content>
|
||||
</Menu.Positioner>
|
||||
</Menu.Root>
|
||||
|
|
@ -75,30 +110,13 @@ export const Route = createRootRouteWithContext<RouterContext>()({
|
|||
<>
|
||||
<Separator orientation="vertical" height={5} />
|
||||
<Link to="/login">
|
||||
<Button>Sign in</Button>
|
||||
<Button height={8}>Sign in</Button>
|
||||
</Link>
|
||||
<Link to="/register">
|
||||
<Button>Sign up</Button>
|
||||
<Button height={8}>Sign up</Button>
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* {!isAuthenticated ? (
|
||||
<>
|
||||
<Link to="/login">
|
||||
<Button>Sign in</Button>
|
||||
</Link>
|
||||
<Link to="/register">
|
||||
<Button>Sign up</Button>
|
||||
</Link>
|
||||
</>
|
||||
) : (
|
||||
<Tooltip content="Log out">
|
||||
<Icon color="colorPalette.500" fontSize="xl" onClick={async () => logout()}>
|
||||
<i className="nf nf-fa-sign_out" />
|
||||
</Icon>
|
||||
</Tooltip>
|
||||
)} */}
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Separator style={{ padding: '4px' }} />
|
||||
|
|
|
|||
15
app/client/pages/editor.tsx
Normal file
15
app/client/pages/editor.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { Stack } from '@chakra-ui/react';
|
||||
import { createFileRoute } from '@tanstack/react-router';
|
||||
import { Editor } from '../components/Editor';
|
||||
|
||||
export const Route = createFileRoute('/editor')({
|
||||
component: RouteComponent
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return (
|
||||
<Stack justifyContent="center" alignItems="center">
|
||||
<Editor />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
46
app/client/pages/example.tsx
Normal file
46
app/client/pages/example.tsx
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
import { Box, Button, Stack, Text } from '@chakra-ui/react'
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
|
||||
import { gql, useQuery } from '@apollo/client'
|
||||
|
||||
import { BooksManyQuery } from '@generated/types'
|
||||
|
||||
export const Route = createFileRoute('/example')({
|
||||
component: Dashboard,
|
||||
})
|
||||
|
||||
function Dashboard() {
|
||||
const { data, refetch } = useQuery<BooksManyQuery>(getBooksQuery)
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<Text>Hello world!</Text>
|
||||
<Text>This is my template!</Text>
|
||||
<Stack>
|
||||
{data && (
|
||||
<>
|
||||
{data.booksMany.map((book: any) => (
|
||||
<Stack key={book.id}>
|
||||
<Text>{book.title}</Text>
|
||||
<Text>{book.author}</Text>
|
||||
</Stack>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
<Box>
|
||||
<Button onClick={async () => refetch()}>Refetch</Button>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
const getBooksQuery = gql`
|
||||
query BooksMany {
|
||||
booksMany {
|
||||
id
|
||||
author
|
||||
title
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
@ -1,46 +1,139 @@
|
|||
import { Box, Button, Stack, Text } from '@chakra-ui/react';
|
||||
import { gql } from '@apollo/client';
|
||||
import { Skeleton, Stack } from '@chakra-ui/react';
|
||||
import { WorkingListQuery } from '@generated/types';
|
||||
import { createFileRoute } from '@tanstack/react-router';
|
||||
|
||||
import { gql, useQuery } from '@apollo/client';
|
||||
|
||||
import { BooksManyQuery } from '@generated/types';
|
||||
import { useState } from 'react';
|
||||
import { Pagination } from '../components/Pagination';
|
||||
import { WorkingList } from '../components/WorkingList';
|
||||
import { WorkingListSearch } from '../components/WorkingListSearch';
|
||||
import { usePaginatedQuery } from '../hooks/usePaginatedQuery';
|
||||
|
||||
export const Route = createFileRoute('/')({
|
||||
component: Dashboard
|
||||
component: RouteComponent
|
||||
});
|
||||
|
||||
function Dashboard() {
|
||||
const { data, refetch } = useQuery<BooksManyQuery>(getBooksQuery);
|
||||
function RouteComponent() {
|
||||
const [workingSearchValue, setWorkingSearchValue] = useState<string>('');
|
||||
const [workingsListPage, setWorkingsListPage] = useState<number>(1);
|
||||
const [workingsListPageSize, setWorkingsListPageSize] = useState<number>(2);
|
||||
const startIndex = (workingsListPage - 1) * workingsListPageSize;
|
||||
|
||||
const { data } = usePaginatedQuery<WorkingListQuery>({
|
||||
query,
|
||||
input: {
|
||||
filter: {
|
||||
terms: workingSearchValue,
|
||||
offset: startIndex,
|
||||
size: workingsListPageSize
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<Text>Hello world!</Text>
|
||||
<Text>This is my template!</Text>
|
||||
<Stack>
|
||||
{data && (
|
||||
<Stack justifyContent="center" alignItems="center">
|
||||
<Stack width="90%">
|
||||
<WorkingListSearch
|
||||
value={workingSearchValue}
|
||||
onSubmit={value => {
|
||||
alert(value);
|
||||
}}
|
||||
onChange={value => setWorkingSearchValue(value)}
|
||||
/>
|
||||
|
||||
{data != null ? (
|
||||
<>
|
||||
{data.booksMany.map((book: any) => (
|
||||
<Stack key={book.id}>
|
||||
<Text>{book.title}</Text>
|
||||
<Text>{book.author}</Text>
|
||||
</Stack>
|
||||
))}
|
||||
<WorkingList
|
||||
workingsList={data.workingMany.items.map(item => ({
|
||||
...item,
|
||||
chaptersTotal: item.chapters.total,
|
||||
reviewsTotal: item.reviews.total
|
||||
}))}
|
||||
/>
|
||||
|
||||
<Pagination
|
||||
total={data.workingMany.total}
|
||||
page={workingsListPage}
|
||||
setPage={setWorkingsListPage}
|
||||
pageSize={workingsListPageSize}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<Skeleton />
|
||||
)}
|
||||
<Box>
|
||||
<Button onClick={async () => refetch()}>Refetch</Button>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
const getBooksQuery = gql`
|
||||
query BooksMany {
|
||||
booksMany {
|
||||
id
|
||||
author
|
||||
title
|
||||
const query = gql`
|
||||
query WorkingList($input: WorkingManyInput!) {
|
||||
workingMany(input: $input) {
|
||||
items {
|
||||
id
|
||||
title
|
||||
description
|
||||
author {
|
||||
id
|
||||
username
|
||||
}
|
||||
progressStatus
|
||||
updatedAt
|
||||
chapters {
|
||||
total
|
||||
}
|
||||
wordsTotal
|
||||
ratingTotal
|
||||
reviews {
|
||||
total
|
||||
}
|
||||
}
|
||||
total
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// const workingData1: WorkingCardProps = {
|
||||
// id: '1',
|
||||
// title: 'Worth the Candle',
|
||||
// description: `A teenager struggling after the death of his best friend finds himself in a fantasy
|
||||
// world - one which seems to be an amalgamation of every Dungeons and Dragons campaign
|
||||
// they ever played together. Now he's stuck trying to find the answers to why he's there
|
||||
// and what this world is trying to say. The most terrifying answer might be that this
|
||||
// world is an expression of the person he was back on Earth.`,
|
||||
// author: {
|
||||
// id: '1',
|
||||
// createdAt: '12.8.2025',
|
||||
// updatedAt: '4.9.2025',
|
||||
// username: 'AlexanderWhales'
|
||||
// },
|
||||
// progressStatus: WorkingProgressStatus.Finished,
|
||||
// updatedAt: '20.10.2025',
|
||||
// chaptersTotal: 10,
|
||||
// wordsTotal: 34000,
|
||||
// ratingTotal: 10,
|
||||
// reviewsTotal: 3
|
||||
// };
|
||||
//
|
||||
// const workingData2: WorkingCardProps = {
|
||||
// id: '2',
|
||||
// title: 'Test',
|
||||
// description: `Description.`,
|
||||
// author: {
|
||||
// id: '1',
|
||||
// createdAt: '12.8.2025',
|
||||
// updatedAt: '4.9.2025',
|
||||
// username: 'JohnSmith'
|
||||
// },
|
||||
// progressStatus: WorkingProgressStatus.InProgress,
|
||||
// updatedAt: '20.10.2025',
|
||||
// chaptersTotal: 10,
|
||||
// wordsTotal: 1200,
|
||||
// ratingTotal: -10,
|
||||
// reviewsTotal: 0
|
||||
// };
|
||||
//
|
||||
// const mockWorkingData = {
|
||||
// total: 4,
|
||||
// items: [workingData1, workingData2, { ...workingData1, id: '3' }, { ...workingData2, id: '4' }]
|
||||
// };
|
||||
//
|
||||
|
|
|
|||
10
app/client/pages/profile/$username.tsx
Normal file
10
app/client/pages/profile/$username.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { createFileRoute } from '@tanstack/react-router';
|
||||
|
||||
export const Route = createFileRoute('/profile/$username')({
|
||||
component: RouteComponent
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
const { username } = Route.useParams();
|
||||
return <div>{`Hello, "${username}"!`}</div>;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue