added error handling, fixed authenticaton, added toaster

app/client/pages/login.tsx

@@ -1,23 +1,24 @@
-// import { gql, useQuery } from '@apollo/client';
+import { gql } from '@apollo/client';
 import { Heading, Input, Stack } from '@chakra-ui/react';
 import { Button } from '@client/components/ui/button';
 import { Field } from '@client/components/ui/field';
 import { valibotResolver } from '@hookform/resolvers/valibot';
 import { createFileRoute } from '@tanstack/react-router';
+import { Session } from 'inspector';
 import { useForm } from 'react-hook-form';
 import * as v from 'valibot';
+import { sessionFragment } from '../fragments';
+import { useToastMutation } from '../hooks/useToastMutation';
 
 export const Route = createFileRoute('/login')({
   component: LoginComponent
 });
 
 function LoginComponent() {
-  // const { data } = useQuery(getBooksQuery);
-
   return (
     <Stack flexDirection={'column'} justifyContent={'center'} alignItems={'center'}>
       <Heading>Login</Heading>
-      <Login />
+      <LoginForm />
     </Stack>
   );
 }
@@ -27,7 +28,12 @@ interface FormValues {
   password: string;
 }
 
-function Login() {
+function LoginForm() {
+  const { update: login } = useToastMutation<Session>({
+    mutation,
+    successMsg: 'Logged in successfully.'
+  });
+
   const schema = v.pipe(
     v.object({
       email: v.pipe(v.string(), v.nonEmpty('Email is required'), v.email('Invalid email')),
@@ -42,7 +48,19 @@ function Login() {
   } = useForm<FormValues>({ resolver: valibotResolver(schema) });
 
   return (
-    <form onSubmit={handleSubmit(data => alert(data))}>
+    <form
+      onSubmit={handleSubmit(async values => {
+        const { data } = await login({
+          variables: {
+            input: {
+              email: values.email,
+              password: values.password
+            }
+          }
+        });
+        alert(JSON.stringify(data));
+      })}
+    >
       <Stack>
         <Field label="Email" invalid={errors.email != null} errorText={errors.email?.message}>
           <Input {...register('email')} />
@@ -60,12 +78,12 @@ function Login() {
   );
 }
 
-/* const getBooksQuery = gql`
-  query BooksMany {
-    booksMany {
-      id
-      author
-      title
+const mutation = gql`
+  mutation AuthLogin($input: LoginInput!) {
+    login(input: $input) {
+      ...Session
     }
   }
-`; */
+
+  ${sessionFragment}
+`;

app/client/pages/register.tsx

@@ -1,23 +1,23 @@
-// import { gql, useQuery } from '@apollo/client';
+import { gql } from '@apollo/client';
 import { Heading, Input, Stack } from '@chakra-ui/react';
 import { Button } from '@client/components/ui/button';
 import { Field } from '@client/components/ui/field';
+import { Session } from '@generated/types';
 import { valibotResolver } from '@hookform/resolvers/valibot';
-import { createFileRoute } from '@tanstack/react-router';
+import { createFileRoute, redirect } from '@tanstack/react-router';
 import { useForm } from 'react-hook-form';
 import * as v from 'valibot';
+import { useToastMutation } from '../hooks/useToastMutation';
 
 export const Route = createFileRoute('/register')({
   component: RegisterComponent
 });
 
 function RegisterComponent() {
-  // const { data } = useQuery(getBooksQuery);
-
   return (
     <Stack flexDirection={'column'} justifyContent={'center'} alignItems={'center'}>
       <Heading>Sign up</Heading>
-      <Register />
+      <SignUpForm />
     </Stack>
   );
 }
@@ -29,7 +29,9 @@ interface FormValues {
   confirm_password: string;
 }
 
-function Register() {
+function SignUpForm() {
+  const { update: signUp } = useToastMutation<Session>({ mutation });
+
   const schema = v.pipe(
     v.object({
       email: v.pipe(v.string(), v.nonEmpty('Email is required'), v.email('Invalid email')),
@@ -53,7 +55,20 @@ function Register() {
     formState: { errors }
   } = useForm<FormValues>({ resolver: valibotResolver(schema) });
 
-  const onSubmit = handleSubmit(data => alert(data));
+  const onSubmit = handleSubmit(async values => {
+    await signUp({
+      variables: {
+        input: {
+          email: values.email,
+          username: values.username,
+          password: values.password
+        }
+      }
+    });
+    redirect({
+      to: '/login'
+    });
+  });
 
   return (
     <form onSubmit={onSubmit}>
@@ -88,12 +103,8 @@ function Register() {
   );
 }
 
-/* const getBooksQuery = gql`
-  query BooksMany {
-    booksMany {
-      id
-      author
-      title
-    }
+const mutation = gql`
+  mutation AuthSignUp($input: RegisterInput!) {
+    signUp(input: $input)
   }
-`; */
+`;