added mappers, updated models

app/client/pages/example.tsx

@@ -1,46 +0,0 @@
-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
-    }
-  }
-`

app/client/pages/index.tsx

@@ -32,16 +32,16 @@ function RouteComponent() {
   return (
     <Stack justifyContent="center" alignItems="center">
       <Stack width="90%">
-        <WorkingListSearch
-          value={workingSearchValue}
-          onSubmit={value => {
-            alert(value);
-          }}
-          onChange={value => setWorkingSearchValue(value)}
-        />
-
         {data != null ? (
           <>
+            <WorkingListSearch
+              value={workingSearchValue}
+              onSubmit={value => {
+                alert(value);
+              }}
+              onChange={value => setWorkingSearchValue(value)}
+            />
+
             <WorkingList
               workingsList={data.workingMany.items.map(item => ({
                 ...item,
@@ -58,7 +58,15 @@ function RouteComponent() {
             />
           </>
         ) : (
-          <Skeleton />
+          <>
+            <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} />
+          </>
         )}
       </Stack>
     </Stack>
@@ -70,21 +78,21 @@ const query = gql`
     workingMany(input: $input) {
       items {
         id
+        type
         title
         description
         author {
           id
           username
         }
-        progressStatus
         updatedAt
-        chapters {
-          total
-        }
-        wordsTotal
+        progressStatus
         ratingTotal
-        reviews {
-          total
+        reviewsTotal
+        book {
+          id
+          chaptersTotal
+          wordsTotal
         }
       }
       total