refactor, added slate, added editor, added book

app/client/components/BookSearchList.tsx

@@ -1,16 +1,18 @@
 import { gql } from '@apollo/client';
-import { Skeleton, Stack } from '@chakra-ui/react';
+import { Stack } from '@chakra-ui/react';
 import { BooksListQuery } from '@generated/types';
 import { useState } from 'react';
 import { Pagination } from '../components/Pagination';
 import { WorkingList } from '../components/WorkingList';
-import { WorkingListSearch } from '../components/WorkingListSearch';
+import { ListSearch } from '../components/ListSearch';
+import { bookFragment } from '../fragments';
 import { usePaginatedQuery } from '../hooks/usePaginatedQuery';
+import { PaginatedListSkeleton } from './PaginatedListSkeleton';
 
 export function BookSearchList() {
   const [workingSearchValue, setWorkingSearchValue] = useState<string>('');
   const [workingsListPage, setWorkingsListPage] = useState<number>(1);
-  const [workingsListPageSize, setWorkingsListPageSize] = useState<number>(2);
+  const [workingsListPageSize, setWorkingsListPageSize] = useState<number>(10);
   const startIndex = (workingsListPage - 1) * workingsListPageSize;
 
   const { data } = usePaginatedQuery<BooksListQuery>({
@@ -26,35 +28,24 @@ export function BookSearchList() {
 
   return (
     <>
+      <ListSearch placeholder="Search works..." onSubmit={value => setWorkingSearchValue(value)} />
       {data != null ? (
         <>
-          <WorkingListSearch
-            onSubmit={value => {
-              setWorkingSearchValue(value);
-            }}
-          />
-
           <WorkingList workingsList={[...data.bookMany.items]} />
-
-          {data.bookMany.items.length !== 0 && (
-            <Pagination
-              total={data.bookMany.total}
-              page={workingsListPage}
-              setPage={setWorkingsListPage}
-              pageSize={workingsListPageSize}
-            />
+          {data.bookMany.total > workingsListPageSize && (
+            <Stack justifyContent="center" alignItems="center">
+              <Pagination
+                total={data.bookMany.total}
+                page={workingsListPage}
+                setPage={setWorkingsListPage}
+                pageSize={workingsListPageSize}
+                setPageSize={setWorkingsListPageSize}
+              />
+            </Stack>
           )}
         </>
       ) : (
-        <>
-          <Stack direction="row" justifyContent="center" alignItems="center" gap={2}>
-            <Skeleton height={10} width="80%" />
-            <Skeleton height={10} width="calc(20% - 6px)" />
-          </Stack>
-          <Skeleton height={20} />
-          <Skeleton height={20} />
-          <Skeleton height={20} />
-        </>
+        <PaginatedListSkeleton />
       )}
     </>
   );
@@ -64,21 +55,10 @@ const query = gql`
   query BooksList($input: BookManyInput!) {
     bookMany(input: $input) {
       items {
-        id
-        title
-        description
-        author {
-          id
-          username
-        }
-        updatedAt
-        progressStatus
-        ratingTotal
-        reviewsTotal
-        wordsTotal
-        chaptersTotal
+        ...Book
       }
       total
     }
   }
+  ${bookFragment}
 `;