lnn0q/ln
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added book details, update, delete. fixes

Browse source
This commit is contained in:
lnn0q 2025-06-01 19:37:13 +03:00
parent d1da980501
commit b5738c610d
12 changed files with 290 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

11
app/client/components/BookOverviewTabs.tsx
View file

@ -3,10 +3,12 @@ import { Link } from '@tanstack/react-router';
export function BookOverviewTabs({
bookId,
currentTab
currentTab,
isAuthor
}: {
readonly bookId: string;
readonly currentTab: 'contents' | 'reviews';
readonly currentTab: 'contents' | 'reviews' | 'details';
readonly isAuthor: boolean;
}) {
return (
<Tabs.Root defaultValue="members" value={currentTab}>
@ -17,6 +19,11 @@ export function BookOverviewTabs({
<Link to={`/work/book/${bookId}/overview/reviews`}>
<Tabs.Trigger value="reviews">Reviews</Tabs.Trigger>
</Link>
{isAuthor && (
<Link to={`/work/book/${bookId}/overview/details`}>
<Tabs.Trigger value="details">Details</Tabs.Trigger>
</Link>
)}
</Tabs.List>
</Tabs.Root>
);

6
app/client/main.tsx
View file

@ -1,7 +1,7 @@
import { ApolloClient, ApolloProvider, HttpLink, InMemoryCache, from } from '@apollo/client';
import { loadDevMessages, loadErrorMessages } from '@apollo/client/dev';
import { onError } from '@apollo/client/link/error';
import { Box, Center, Spinner } from '@chakra-ui/react';
import { Box, Center, Spinner, Stack } from '@chakra-ui/react';
import '@client/assets/styles/index.css';
import '@client/assets/styles/nerd-fonts-icons.css';
import { Provider as ChakraProvider } from '@client/components/ui/provider';
@ -118,7 +118,9 @@ function App() {
<ApolloProvider client={client}>
<ChakraProvider>
<Toaster />
<RouterProviderWrapper authHeaders={authHeaders} />
<Stack maxWidth="100vw">
<RouterProviderWrapper authHeaders={authHeaders} />
</Stack>
</ChakraProvider>
</ApolloProvider>
</AuthProvider>

5
app/client/pages/profile/$username.tsx
View file

@ -1,4 +1,5 @@
import { createFileRoute } from '@tanstack/react-router';
import {Stack} from '@chakra-ui/react';
import {createFileRoute} from '@tanstack/react-router';
export const Route = createFileRoute('/profile/$username')({
component: RouteComponent
@ -6,5 +7,5 @@ export const Route = createFileRoute('/profile/$username')({
function RouteComponent() {
const { username } = Route.useParams();
return <div>{`Hello, "${username}"!`}</div>;
return <Stack>{`Hello, "${username}"!`}</Stack>;
}

8
app/client/pages/work/book/$bookId/overview/contents.tsx
View file

@ -32,10 +32,14 @@ function RouteComponent() {
return (
<>
<BookOverviewTabs bookId={id} currentTab="contents" />
{data != null ? (
<>
<BookOverviewTabs
isAuthor={data?.bookOne.author.id === identity?.data.id}
bookId={id}
currentTab="contents"
/>
<BookChapterList
id={data.bookOne.id}
isAuthor={identity?.data.id === data.bookOne.author.id}

151
app/client/pages/work/book/$bookId/overview/details.tsx Normal file
View file

@ -0,0 +1,151 @@
import { gql, useQuery } from '@apollo/client';
import { BookOverviewTabs } from '@app/client/components/BookOverviewTabs';
import { bookListQuery } from '@app/client/components/BookSearchList';
import { bookFragment } from '@app/client/fragments';
import { useIdentity } from '@app/client/hooks/identity';
import { useToastMutation } from '@app/client/hooks/useToastMutation';
import { Button, Input, NativeSelect, Skeleton, Stack, Textarea } from '@chakra-ui/react';
import { BookDetailsQuery, WorkingProgressStatus } from '@generated/types';
import { useNavigate } from '@tanstack/react-router';
import { createFileRoute } from '@tanstack/react-router';
import { useState } from 'react';
export const Route = createFileRoute('/work/book/$bookId/overview/details')({
component: RouteComponent
});
function RouteComponent() {
const { bookId: id } = Route.useParams();
const identity = useIdentity();
const navigate = useNavigate();
const { data } = useQuery<BookDetailsQuery>(bookQuery, {
variables: { id }
});
const { update: bookUpdate } = useToastMutation({
mutation: bookUpdateMutation,
successMsg: 'Book updated successfully'
});
const { update: bookDelete } = useToastMutation({
mutation: bookDeleteMutation,
successMsg: 'Book deleted successfully',
refetchQueries: [bookListQuery]
});
const [title, setTitle] = useState<string | undefined>(data?.bookOne.title);
const [description, setDescription] = useState<string | undefined>(data?.bookOne.description);
const [progress, setProgress] = useState<WorkingProgressStatus | undefined>(
data?.bookOne.progressStatus
);
if (data == null) return <Skeleton />;
return (
<>
<BookOverviewTabs
isAuthor={data.bookOne.author.id === identity?.data.id}
bookId={id}
currentTab="details"
/>
<Stack justifyContent="center" alignItems="center">
<Stack width="70%">
<Input
value={title}
onChange={event => setTitle(event.currentTarget.value)}
placeholder="title"
maxLength={60}
/>
<NativeSelect.Root>
<NativeSelect.Field
value={progress}
onChange={event => {
const updatedStatus = event.currentTarget.value;
ensureProgressStatus(updatedStatus);
setProgress(updatedStatus);
}}
>
<option value={WorkingProgressStatus.InProgress}>In progress</option>
<option value={WorkingProgressStatus.Frozen}>Frozen</option>
<option value={WorkingProgressStatus.Complete}>Complete</option>
</NativeSelect.Field>
<NativeSelect.Indicator />
</NativeSelect.Root>
<Textarea
value={description}
onChange={event => setDescription(event.currentTarget.value)}
placeholder="description"
maxLength={500}
autoresize
/>
<Button
width="100%"
onClick={async () => {
await bookUpdate({
variables: {
input: {
id,
title,
description,
progressStatus: progress
}
}
});
}}
>
Update
</Button>
<Button
width="100%"
backgroundColor="red.500"
onClick={async () => {
await bookDelete({ variables: { id } });
navigate({ to: '/' });
}}
>
Delete
</Button>
</Stack>
</Stack>
</>
);
}
function ensureProgressStatus(value: string): asserts value is WorkingProgressStatus {
if (value === WorkingProgressStatus.Complete) return;
if (value === WorkingProgressStatus.InProgress) return;
if (value === WorkingProgressStatus.Frozen) return;
throw new Error('Invalid WorkingPrgoressStatus');
}
const bookQuery = gql`
query BookDetails($id: ID!) {
bookOne(id: $id) {
...Book
}
}
${bookFragment}
`;
const bookUpdateMutation = gql`
mutation BookDetailsUpdate($input: BookUpdateInput!) {
bookUpdate(input: $input) {
...Book
}
}
${bookFragment}
`;
const bookDeleteMutation = gql`
mutation BookDetailsDelete($id: ID!) {
bookDelete(id: $id)
}
`;

27
app/client/pages/work/book/$bookId/overview/reviews.tsx
View file

@ -1,4 +1,4 @@
import { gql } from '@apollo/client';
import { gql, useQuery } from '@apollo/client';
import { BookOverviewTabs } from '@app/client/components/BookOverviewTabs';
import { Pagination } from '@app/client/components/Pagination';
import { reviewFragment } from '@app/client/fragments';
@ -6,7 +6,7 @@ import { useIdentity } from '@app/client/hooks/identity';
import { usePaginatedQuery } from '@app/client/hooks/usePaginatedQuery';
import { useToastMutation } from '@app/client/hooks/useToastMutation';
import { Skeleton, Stack, Text } from '@chakra-ui/react';
import { BookReviewCreateMutation, BookReviewsQuery } from '@generated/types';
import { BookReviewCreateMutation, BookReviewsDataQuery, BookReviewsQuery } from '@generated/types';
import { createFileRoute } from '@tanstack/react-router';
import { useState } from 'react';
import { bookQuery } from '../overview';
@ -36,17 +36,25 @@ function RouteComponent() {
}
});
const { data: authorData } = useQuery<BookReviewsDataQuery>(bookAuthorQuery, {
variables: { id }
});
const { update: reviewCreate } = useToastMutation<BookReviewCreateMutation>({
mutation: bookReviewCreateMutation,
successMsg: 'Review posted!',
refetchQueries: [bookReviewsQuery, bookQuery]
});
if (data == null) return <Skeleton />;
if (data == null || authorData == null) return <Skeleton />;
return (
<>
<BookOverviewTabs bookId={id} currentTab="reviews" />
<BookOverviewTabs
isAuthor={authorData.bookOne.author.id === identity?.data.id}
bookId={id}
currentTab="reviews"
/>
{identity != null && reviewsPage === 1 && (
<ReviewInput
@ -97,6 +105,17 @@ function RouteComponent() {
);
}
const bookAuthorQuery = gql`
query BookReviewsData($id: ID!) {
bookOne(id: $id) {
id
author {
id
}
}
}
`;
const bookReviewsQuery = gql`
query BookReviews($input: ReviewManyInput!) {
reviewMany(input: $input) {

28
app/client/routeTree.gen.ts
View file

@ -20,6 +20,7 @@ import { Route as ProfileUsernameImport } from './pages/profile/$username'
import { Route as NewBookImport } from './pages/new/book'
import { Route as WorkBookBookIdOverviewImport } from './pages/work/book/$bookId/overview'
import { Route as WorkBookBookIdOverviewReviewsImport } from './pages/work/book/$bookId/overview/reviews'
import { Route as WorkBookBookIdOverviewDetailsImport } from './pages/work/book/$bookId/overview/details'
import { Route as WorkBookBookIdOverviewContentsImport } from './pages/work/book/$bookId/overview/contents'
import { Route as WorkBookBookIdChapterNewImport } from './pages/work/book/$bookId/chapter/new'
import { Route as WorkBookBookIdChapterChapterIdViewImport } from './pages/work/book/$bookId/chapter/$chapterId/view'
@ -82,6 +83,13 @@ const WorkBookBookIdOverviewReviewsRoute =
getParentRoute: () => WorkBookBookIdOverviewRoute,
} as any)
const WorkBookBookIdOverviewDetailsRoute =
WorkBookBookIdOverviewDetailsImport.update({
id: '/details',
path: '/details',
getParentRoute: () => WorkBookBookIdOverviewRoute,
} as any)
const WorkBookBookIdOverviewContentsRoute =
WorkBookBookIdOverviewContentsImport.update({
id: '/contents',
@ -183,6 +191,13 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof WorkBookBookIdOverviewContentsImport
parentRoute: typeof WorkBookBookIdOverviewImport
}
'/work/book/$bookId/overview/details': {
id: '/work/book/$bookId/overview/details'
path: '/details'
fullPath: '/work/book/$bookId/overview/details'
preLoaderRoute: typeof WorkBookBookIdOverviewDetailsImport
parentRoute: typeof WorkBookBookIdOverviewImport
}
'/work/book/$bookId/overview/reviews': {
id: '/work/book/$bookId/overview/reviews'
path: '/reviews'
@ -211,12 +226,14 @@ declare module '@tanstack/react-router' {
interface WorkBookBookIdOverviewRouteChildren {
WorkBookBookIdOverviewContentsRoute: typeof WorkBookBookIdOverviewContentsRoute
WorkBookBookIdOverviewDetailsRoute: typeof WorkBookBookIdOverviewDetailsRoute
WorkBookBookIdOverviewReviewsRoute: typeof WorkBookBookIdOverviewReviewsRoute
}
const WorkBookBookIdOverviewRouteChildren: WorkBookBookIdOverviewRouteChildren =
{
WorkBookBookIdOverviewContentsRoute: WorkBookBookIdOverviewContentsRoute,
WorkBookBookIdOverviewDetailsRoute: WorkBookBookIdOverviewDetailsRoute,
WorkBookBookIdOverviewReviewsRoute: WorkBookBookIdOverviewReviewsRoute,
}
@ -236,6 +253,7 @@ export interface FileRoutesByFullPath {
'/work/book/$bookId/overview': typeof WorkBookBookIdOverviewRouteWithChildren
'/work/book/$bookId/chapter/new': typeof WorkBookBookIdChapterNewRoute
'/work/book/$bookId/overview/contents': typeof WorkBookBookIdOverviewContentsRoute
'/work/book/$bookId/overview/details': typeof WorkBookBookIdOverviewDetailsRoute
'/work/book/$bookId/overview/reviews': typeof WorkBookBookIdOverviewReviewsRoute
'/work/book/$bookId/chapter/$chapterId/edit': typeof WorkBookBookIdChapterChapterIdEditRoute
'/work/book/$bookId/chapter/$chapterId/view': typeof WorkBookBookIdChapterChapterIdViewRoute
@ -252,6 +270,7 @@ export interface FileRoutesByTo {
'/work/book/$bookId/overview': typeof WorkBookBookIdOverviewRouteWithChildren
'/work/book/$bookId/chapter/new': typeof WorkBookBookIdChapterNewRoute
'/work/book/$bookId/overview/contents': typeof WorkBookBookIdOverviewContentsRoute
'/work/book/$bookId/overview/details': typeof WorkBookBookIdOverviewDetailsRoute
'/work/book/$bookId/overview/reviews': typeof WorkBookBookIdOverviewReviewsRoute
'/work/book/$bookId/chapter/$chapterId/edit': typeof WorkBookBookIdChapterChapterIdEditRoute
'/work/book/$bookId/chapter/$chapterId/view': typeof WorkBookBookIdChapterChapterIdViewRoute
@ -269,6 +288,7 @@ export interface FileRoutesById {
'/work/book/$bookId/overview': typeof WorkBookBookIdOverviewRouteWithChildren
'/work/book/$bookId/chapter/new': typeof WorkBookBookIdChapterNewRoute
'/work/book/$bookId/overview/contents': typeof WorkBookBookIdOverviewContentsRoute
'/work/book/$bookId/overview/details': typeof WorkBookBookIdOverviewDetailsRoute
'/work/book/$bookId/overview/reviews': typeof WorkBookBookIdOverviewReviewsRoute
'/work/book/$bookId/chapter/$chapterId/edit': typeof WorkBookBookIdChapterChapterIdEditRoute
'/work/book/$bookId/chapter/$chapterId/view': typeof WorkBookBookIdChapterChapterIdViewRoute
@ -287,6 +307,7 @@ export interface FileRouteTypes {
| '/work/book/$bookId/overview'
| '/work/book/$bookId/chapter/new'
| '/work/book/$bookId/overview/contents'
| '/work/book/$bookId/overview/details'
| '/work/book/$bookId/overview/reviews'
| '/work/book/$bookId/chapter/$chapterId/edit'
| '/work/book/$bookId/chapter/$chapterId/view'
@ -302,6 +323,7 @@ export interface FileRouteTypes {
| '/work/book/$bookId/overview'
| '/work/book/$bookId/chapter/new'
| '/work/book/$bookId/overview/contents'
| '/work/book/$bookId/overview/details'
| '/work/book/$bookId/overview/reviews'
| '/work/book/$bookId/chapter/$chapterId/edit'
| '/work/book/$bookId/chapter/$chapterId/view'
@ -317,6 +339,7 @@ export interface FileRouteTypes {
| '/work/book/$bookId/overview'
| '/work/book/$bookId/chapter/new'
| '/work/book/$bookId/overview/contents'
| '/work/book/$bookId/overview/details'
| '/work/book/$bookId/overview/reviews'
| '/work/book/$bookId/chapter/$chapterId/edit'
| '/work/book/$bookId/chapter/$chapterId/view'
@ -401,6 +424,7 @@ export const routeTree = rootRoute
"filePath": "work/book/$bookId/overview.tsx",
"children": [
"/work/book/$bookId/overview/contents",
"/work/book/$bookId/overview/details",
"/work/book/$bookId/overview/reviews"
]
},
@ -411,6 +435,10 @@ export const routeTree = rootRoute
"filePath": "work/book/$bookId/overview/contents.tsx",
"parent": "/work/book/$bookId/overview"
},
"/work/book/$bookId/overview/details": {
"filePath": "work/book/$bookId/overview/details.tsx",
"parent": "/work/book/$bookId/overview"
},
"/work/book/$bookId/overview/reviews": {
"filePath": "work/book/$bookId/overview/reviews.tsx",
"parent": "/work/book/$bookId/overview"