added resolvers, updated model, updated navbar

app/client/components/BookSearchList.tsx

@@ -0,0 +1,84 @@
+import { gql } from '@apollo/client';
+import { Skeleton, 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 { usePaginatedQuery } from '../hooks/usePaginatedQuery';
+
+export function BookSearchList() {
+  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<BooksListQuery>({
+    query,
+    input: {
+      filter: {
+        terms: workingSearchValue,
+        offset: startIndex,
+        size: workingsListPageSize
+      }
+    }
+  });
+
+  return (
+    <>
+      {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}
+            />
+          )}
+        </>
+      ) : (
+        <>
+          <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} />
+        </>
+      )}
+    </>
+  );
+}
+
+const query = gql`
+  query BooksList($input: BookManyInput!) {
+    bookMany(input: $input) {
+      items {
+        id
+        title
+        description
+        author {
+          id
+          username
+        }
+        updatedAt
+        progressStatus
+        ratingTotal
+        reviewsTotal
+        wordsTotal
+        chaptersTotal
+      }
+      total
+    }
+  }
+`;