feat: Add LoanForm

hackerspace-ntnu · Sep 19, 2024 · 7404d42 · 7404d42
1 parent 4dac0e6
commit 7404d42
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 46 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/messages/en.json b/messages/en.json
@@ -87,7 +87,19 @@
       "tableDescription": "A list of your shopping cart items.",
       "backToStorage": "Back to storage",
       "cartEmpty": "Your shopping cart is empty.",
-      "clearCart": "Empty shopping cart"
+      "clearCart": "Empty shopping cart",
+      "borrowNow": "Borrow now"
+    },
+    "loanForm": {
+      "name": "Name",
+      "nameDescription": "Person lending the item(s).",
+      "email": "Email",
+      "emailExample": "[email protected]",
+      "phoneNumber": "Phone number",
+      "phoneNumberDescription": "Phone number for contact. Include country code if the number isn't Norwegian.",
+      "returnBy": "Return by",
+      "returnByDescription": "Select how long you would like to borrow the item for.",
+      "submit": "Submit"
     }
   }
 }
diff --git a/messages/no.json b/messages/no.json
@@ -87,7 +87,19 @@
       "tableDescription": "En liste over handlekurven din.",
       "backToStorage": "Tilbake til lageret",
       "cartEmpty": "Handlekurven din er tom.",
-      "clearCart": "Tøm handlekurven"
+      "clearCart": "Tøm handlekurven",
+      "borrowNow": "Lån nå"
+    },
+    "loanForm": {
+      "name": "Navn",
+      "nameDescription": "Personen som låner gjenstanden(e).",
+      "email": "Epost",
+      "emailExample": "[email protected]",
+      "phoneNumber": "Mobilnummer",
+      "phoneNumberDescription": "Mobilnummer for kontakt. Inkluder landskode hvis mobilnummeret er ikke norsk.",
+      "returnBy": "Lån fram til",
+      "returnByDescription": "Velg hvor lenge du ønsker å låne gjenstanden(e)",
+      "submit": "Send"
     }
   }
 }
diff --git a/package.json b/package.json
@@ -13,10 +13,12 @@
     "start": "next start"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.9.0",
     "@libsql/client": "^0.6.2",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
@@ -31,6 +33,7 @@
     "cmdk": "1.0.0",
     "country-flag-icons": "^1.5.12",
     "cva": "^1.0.0-beta.1",
+    "date-fns": "^4.1.0",
     "drizzle-orm": "^0.31.2",
     "lucide-react": "^0.429.0",
     "next": "^14.2.4",
@@ -39,7 +42,9 @@
     "next-themes": "^0.3.0",
     "nuqs": "^1.17.4",
     "react": "^18.3.1",
+    "react-day-picker": "8.10.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.0",
     "reading-time": "^1.5.0",
     "server-only": "^0.0.1",
     "sharp": "^0.33.4",

diff --git a/src/app/[locale]/(default)/storage/page.tsx b/src/app/[locale]/(default)/storage/page.tsx
@@ -6,7 +6,6 @@ import { createSearchParamsCache, parseAsInteger } from 'nuqs/parsers';
 import { PaginationCarousel } from '@/components/layout/PaginationCarousel';
 import { ItemCard } from '@/components/storage/ItemCard';
 import { Button } from '@/components/ui/Button';
-import { Combobox } from '@/components/ui/Combobox';
 import { SearchBar } from '@/components/ui/SearchBar';
 
 import {

diff --git a/src/app/[locale]/(default)/storage/shopping-cart/page.tsx b/src/app/[locale]/(default)/storage/shopping-cart/page.tsx
@@ -14,6 +14,7 @@ export default function StorageShoppingCartPage({
 }) {
   unstable_setRequestLocale(locale);
   const t = useTranslations('storage.shoppingCart');
+  const tLoanForm = useTranslations('storage.loanForm');
 
   const tableMessages = {
     tableDescription: t('tableDescription'),
@@ -24,6 +25,18 @@ export default function StorageShoppingCartPage({
     cartEmpty: t('cartEmpty'),
   };
 
+  const loanFormMessages = {
+    name: tLoanForm('name'),
+    nameDescription: tLoanForm('nameDescription'),
+    email: tLoanForm('email'),
+    emailExample: tLoanForm('emailExample'),
+    phoneNumber: tLoanForm('phoneNumber'),
+    phoneNumberDescription: tLoanForm('phoneNumberDescription'),
+    returnBy: tLoanForm('returnBy'),
+    returnByDescription: tLoanForm('returnByDescription'),
+    submit: tLoanForm('submit'),
+  };
+
   return (
     <>
       <h1 className='my-4 md:text-center'>{t('title')}</h1>
@@ -37,7 +50,10 @@ export default function StorageShoppingCartPage({
         </Link>
         <ShoppingCartClearButton caption={t('clearCart')} />
       </div>
-      <LoanForm />
+      <div className='my-6'>
+        <h2 className='text-center'>{t('borrowNow')}</h2>
+        <LoanForm t={loanFormMessages} />
+      </div>
     </>
   );
 }
diff --git a/src/components/storage/LoanForm.tsx b/src/components/storage/LoanForm.tsx
@@ -19,11 +19,25 @@ import { z } from 'zod';
 const formSchema = z.object({
   name: z.string().min(1),
   email: z.string().email(),
-  phone: z.string(),
+  phone: z.string().min(1),
   returnBy: z.date().min(new Date()),
 });
 
-function LoanForm() {
+type LoanFormParams = {
+  t: {
+    name: string;
+    nameDescription: string;
+    email: string;
+    emailExample: string;
+    phoneNumber: string;
+    phoneNumberDescription: string;
+    returnBy: string;
+    returnByDescription: string;
+    submit: string;
+  };
+};
+
+function LoanForm({ t }: LoanFormParams) {
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -35,6 +49,7 @@ function LoanForm() {
   });
 
   function onSubmit(values: z.infer<typeof formSchema>) {
+    // TODO: Add new loan to database
     console.log(values);
   }
 
@@ -47,11 +62,11 @@ function LoanForm() {
             name='name'
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Username</FormLabel>
+                <FormLabel>{t.name}</FormLabel>
                 <FormControl>
-                  <Input placeholder='name' {...field} />
+                  <Input placeholder={t.name} {...field} />
                 </FormControl>
-                <FormDescription>Person lending the item(s).</FormDescription>
+                <FormDescription>{t.nameDescription}</FormDescription>
                 <FormMessage />
               </FormItem>
             )}
@@ -61,13 +76,10 @@ function LoanForm() {
             name='email'
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Email</FormLabel>
+                <FormLabel>{t.email}</FormLabel>
                 <FormControl>
-                  <Input placeholder='name' {...field} />
+                  <Input placeholder={t.emailExample} {...field} />
                 </FormControl>
-                {/* <FormDescription>
-                  This is your public display name.
-                </FormDescription> */}
                 <FormMessage />
               </FormItem>
             )}
@@ -77,59 +89,39 @@ function LoanForm() {
             name='phone'
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Phone number</FormLabel>
+                <FormLabel>{t.phoneNumber}</FormLabel>
                 <FormControl>
-                  <Input placeholder='name' {...field} />
+                  <Input placeholder='123 456 789' {...field} />
                 </FormControl>
-                {/* <FormDescription>
-                  This is your public display name.
-                </FormDescription> */}
+                <FormDescription>{t.phoneNumberDescription}</FormDescription>
                 <FormMessage />
               </FormItem>
             )}
           />
         </div>
-        <div className='flex justify-center'>
+        <div className='mx-auto max-w-[280px]'>
           <FormField
             control={form.control}
             name='returnBy'
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Username</FormLabel>
+                <FormLabel>{t.returnBy}</FormLabel>
                 <FormControl>
                   <DatePicker
                     buttonClassName='flex'
                     dateCallback={field.onChange}
                     disabled={{ before: new Date() }}
                   />
                 </FormControl>
-                <FormDescription>
-                  This is your public display name.
-                </FormDescription>
+                <FormDescription>{t.returnByDescription}</FormDescription>
                 <FormMessage />
               </FormItem>
             )}
           />
         </div>
-        <Button type='submit' className='flex mx-auto w-fit'>
-          Submit
+        <Button type='submit' className='mx-auto flex w-fit'>
+          {t.submit}
         </Button>
-        {/* <FormField
-          control={form.control}
-          name='username'
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Username</FormLabel>
-              <FormControl>
-                <Input placeholder='example' {...field} />
-              </FormControl>
-              <FormDescription>
-                This is your public display name.
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        /> */}
       </form>
     </Form>
   );

diff --git a/src/components/ui/Label.tsx b/src/components/ui/Label.tsx
@@ -1,14 +1,14 @@
 'use client';
 
 import * as LabelPrimitive from '@radix-ui/react-label';
-import { type VariantProps, cva } from 'class-variance-authority';
+import { type VariantProps, cva } from 'cva';
 import * as React from 'react';
 
 import { cx } from '@/lib/utils';
 
-const labelVariants = cva(
-  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
-);
+const labelVariants = cva({
+  base: 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+});
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,