refactor, added slate, added editor, added book

app/client/pages/new/book.tsx

@@ -1,8 +1,11 @@
+import { gql } from '@apollo/client';
+import { useToastMutation } from '@app/client/hooks/useToastMutation';
 import { Heading, Input, Stack, Textarea } from '@chakra-ui/react';
 import { Button } from '@client/components/ui/button';
 import { Field } from '@client/components/ui/field';
+import { CreateNewBookMutation } from '@generated/types';
 import { valibotResolver } from '@hookform/resolvers/valibot';
-import { createFileRoute, redirect } from '@tanstack/react-router';
+import { createFileRoute, redirect, useNavigate } from '@tanstack/react-router';
 import { useForm } from 'react-hook-form';
 import * as v from 'valibot';
 
@@ -28,10 +31,16 @@ interface FormValues {
 }
 
 function NewBookForm() {
+  const navigate = useNavigate();
+  const { update: bookCreate } = useToastMutation<CreateNewBookMutation>({
+    mutation: bookCreateMutation,
+    successMsg: 'Book created successfully!'
+  });
+
   const schema = v.pipe(
     v.object({
-      title: v.pipe(v.string(), v.nonEmpty('Title is required')),
-      description: v.pipe(v.string(), v.nonEmpty('Password is required'))
+      title: v.pipe(v.string(), v.nonEmpty('Title is required'), v.maxLength(60)),
+      description: v.pipe(v.string(), v.nonEmpty('Description is required'), v.maxLength(900))
     })
   );
 
@@ -42,7 +51,23 @@ function NewBookForm() {
   } = useForm<FormValues>({ resolver: valibotResolver(schema) });
 
   return (
-    <form style={{ width: '80%' }} onSubmit={handleSubmit(async values => {})}>
+    <form
+      style={{ width: '80%', maxWidth: '840px' }}
+      onSubmit={handleSubmit(async values => {
+        const { data } = await bookCreate({
+          variables: {
+            input: {
+              title: values.title,
+              description: values.description
+            }
+          }
+        });
+        if (data != null)
+          navigate({
+            to: `/work/book/${data.bookCreate.id}`
+          });
+      })}
+    >
       <Stack>
         <Field label="Title" invalid={errors.title != null} errorText={errors.title?.message}>
           <Input {...register('title')} />
@@ -52,7 +77,7 @@ function NewBookForm() {
           invalid={errors.description != null}
           errorText={errors.description?.message}
         >
-          <Textarea width="100%" lineHeight={4} {...register('description')} />
+          <Textarea width="100%" height={'sm'} {...register('description')} />
         </Field>
         <Button type="submit">Create new book</Button>
       </Stack>
@@ -60,38 +85,12 @@ function NewBookForm() {
   );
 }
 
-// function LoginForm() {
-//   const schema = v.pipe(
-//     v.object({
-//       email: v.pipe(v.string(), v.nonEmpty('Email is required'), v.email('Invalid email')),
-//       password: v.pipe(v.string(), v.nonEmpty('Password is required'))
-//     })
-//   );
-//
-//   const {
-//     register,
-//     handleSubmit,
-//     formState: { errors }
-//   } = useForm<FormValues>({ resolver: valibotResolver(schema) });
-//
-//   const { login } = useAuth();
-//
-//   return (
-//     <form
-//     >
-//       <Stack>
-//         <Field label="Email" invalid={errors.email != null} errorText={errors.email?.message}>
-//           <Input {...register('email')} />
-//         </Field>
-//         <Field
-//           label="Password"
-//           invalid={errors.password != null}
-//           errorText={errors.password?.message}
-//         >
-//           <PasswordInput {...register('password')} />
-//         </Field>
-//         <Button type="submit">Sign in</Button>
-//       </Stack>
-//     </form>
-//   );
-// }
+const bookCreateMutation = gql`
+  mutation CreateNewBook($input: BookCreateInput!) {
+    bookCreate(input: $input) {
+      id
+      title
+      description
+    }
+  }
+`;