Create new sessions using Drawer form instead of separate page

src/pages/CreateEstimationSession.tsx

@@ -1,48 +0,0 @@
-import { useForm } from '@tanstack/react-form';
-import { useEstimationSessions } from '../lib/context/estimationSession';
-import { useUser } from '../lib/context/user';
-
-const CreateEstimationSession = () => {
-  const user = useUser();
-  const estimationSessions = useEstimationSessions();
-  const form = useForm({
-    defaultValues: {
-      name: '',
-    },
-    onSubmit: async ({ value }) => {
-      await estimationSessions?.add({
-        Name: value.name,
-        UserId: user.current?.$id,
-      });
-    },
-  });
-
-  return (
-    <>
-      <h1>Create Estimation Session</h1>
-      <form
-        onSubmit={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          form.handleSubmit();
-        }}
-      >
-        <form.Field
-          name="name"
-          children={(field) => (
-            <input
-              placeholder="Name"
-              name={field.name}
-              value={field.state.value}
-              onBlur={field.handleBlur}
-              onChange={(e) => field.handleChange(e.target.value)}
-            />
-          )}
-        />
-        <button type="submit">Submit</button>
-      </form>
-    </>
-  );
-};
-
-export default CreateEstimationSession;

src/pages/Home.tsx

@@ -4,7 +4,13 @@ import './Home.css';
 import { getRouteApi, Link } from '@tanstack/react-router';
 import { useUser } from '../lib/context/user';
 import { useEstimationSessions } from '../lib/context/estimationSession';
-import { Card, GridList } from '../components';
+import {
+  Card,
+  CreateEstimationSessionForm,
+  Drawer,
+  GridList,
+} from '../components';
+import { useState } from 'react';
 
 const route = getRouteApi('/');
 
@@ -12,6 +18,7 @@ function Home() {
   const user = useUser();
   const navigate = route.useNavigate();
   const estimationSessions = useEstimationSessions();
+  const [isDrawerOpen, setDrawerOpen] = useState(false);
 
   return (
     <>
@@ -29,9 +36,6 @@ function Home() {
         <li>
           <Link to="/login">Login</Link>
         </li>
-        <li>
-          <Link to="/estimate/new">Create Estimation Session</Link>
-        </li>
       </ul>
       <pre>User Id: {user.current?.$id}</pre>
 
@@ -53,13 +57,13 @@ function Home() {
               }}
             />
           )}
-          onAddItem={() =>
-            navigate({
-              to: '/estimate/new',
-            })
-          }
+          onAddItem={() => setDrawerOpen(true)}
         />
       </div>
+
+      <Drawer isOpen={isDrawerOpen} onClose={() => setDrawerOpen(false)}>
+        <CreateEstimationSessionForm onCreated={() => setDrawerOpen(false)} />
+      </Drawer>
     </>
   );
 }

src/pages/Login.tsx

@@ -25,41 +25,37 @@ const Login = () => {
 
         <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
           <form className="space-y-6">
-            <div>
-              <form.Field
-                name="email"
-                children={(field) => (
-                  <Input
-                    label="Email address"
-                    type="email"
-                    autoComplete="email"
-                    required
-                    name={field.name}
-                    value={field.state.value}
-                    onBlur={field.handleBlur}
-                    onChange={(e) => field.handleChange(e.target.value)}
-                  />
-                )}
-              />
-            </div>
+            <form.Field
+              name="email"
+              children={(field) => (
+                <Input
+                  label="Email address"
+                  type="email"
+                  autoComplete="email"
+                  required
+                  name={field.name}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+              )}
+            />
 
-            <div>
-              <form.Field
-                name="password"
-                children={(field) => (
-                  <Input
-                    label="Password"
-                    type="password"
-                    autoComplete="current-password"
-                    required
-                    name={field.name}
-                    value={field.state.value}
-                    onBlur={field.handleBlur}
-                    onChange={(e) => field.handleChange(e.target.value)}
-                  />
-                )}
-              />
-            </div>
+            <form.Field
+              name="password"
+              children={(field) => (
+                <Input
+                  label="Password"
+                  type="password"
+                  autoComplete="current-password"
+                  required
+                  name={field.name}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+              )}
+            />
 
             <div>
               <div className="flex items-center justify-between gap-4">