implemented ratings, fixes

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

@@ -0,0 +1,119 @@
+import { gql } from '@apollo/client';
+import { BookOverviewTabs } from '@app/client/components/BookOverviewTabs';
+import { Pagination } from '@app/client/components/Pagination';
+import { reviewFragment } from '@app/client/fragments';
+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 { createFileRoute } from '@tanstack/react-router';
+import { useState } from 'react';
+import { bookQuery } from '../overview';
+import { ReviewInput } from '@app/client/components/ReviewInput';
+import { ReviewCard } from '@app/client/components/ReviewCard';
+
+export const Route = createFileRoute('/work/book/$bookId/overview/reviews')({
+  component: RouteComponent
+});
+
+function RouteComponent() {
+  const { bookId: id } = Route.useParams();
+  const identity = useIdentity();
+
+  const [reviewsPage, setChaptersListPage] = useState<number>(1);
+  const [reviewsPageSize, setChaptersListPageSize] = useState<number>(10);
+  const startIndex = (reviewsPage - 1) * reviewsPageSize;
+
+  const { data } = usePaginatedQuery<BookReviewsQuery>({
+    query: bookReviewsQuery,
+    input: {
+      bookId: id,
+      filter: {
+        offset: startIndex,
+        size: reviewsPageSize
+      }
+    }
+  });
+
+  const { update: reviewCreate } = useToastMutation<BookReviewCreateMutation>({
+    mutation: bookReviewCreateMutation,
+    successMsg: 'Review posted!',
+    refetchQueries: [bookReviewsQuery, bookQuery]
+  });
+
+  if (data == null) return <Skeleton />;
+
+  return (
+    <>
+      <BookOverviewTabs bookId={id} currentTab="reviews" />
+
+      {identity != null && reviewsPage === 1 && (
+        <ReviewInput
+          username={identity?.data.user.username}
+          onReviewSubmit={async text => {
+            await reviewCreate({
+              variables: {
+                input: {
+                  bookId: id,
+                  text
+                }
+              }
+            });
+          }}
+        />
+      )}
+
+      {data.reviewMany.items.length === 0 ? (
+        <Stack justifyContent="center" alignItems="center" pt={8}>
+          <Text>No reviews here yet!</Text>
+        </Stack>
+      ) : (
+        data.reviewMany.items.map(item => (
+          <ReviewCard
+            key={`bookReview#${item.id}`}
+            review={{
+              id: item.id,
+              username: item.author.username,
+              text: item.text,
+              createdAt: item.createdAt
+            }}
+          />
+        ))
+      )}
+
+      {data.reviewMany.total > reviewsPageSize && (
+        <Stack justifyContent="center" alignItems="center">
+          <Pagination
+            total={data.reviewMany.total}
+            page={reviewsPage}
+            setPage={setChaptersListPage}
+            pageSize={reviewsPageSize}
+            setPageSize={setChaptersListPageSize}
+          />
+        </Stack>
+      )}
+    </>
+  );
+}
+
+const bookReviewsQuery = gql`
+  query BookReviews($input: ReviewManyInput!) {
+    reviewMany(input: $input) {
+      items {
+        ...Review
+      }
+      total
+    }
+  }
+  ${reviewFragment}
+`;
+
+const bookReviewCreateMutation = gql`
+  mutation BookReviewCreate($input: ReviewCreateInput!) {
+    reviewCreate(input: $input) {
+      ...Review
+    }
+  }
+  ${reviewFragment}
+`;