From 5d81d6621e91318baae97e1c8294f9b6b528db72 Mon Sep 17 00:00:00 2001
From: Sang Dang <sang@dang.to>
Date: Fri, 9 Feb 2024 15:19:18 +0200
Subject: [PATCH] working on edit candidate

---
 .eslintrc.js                                  |   2 +-
 .../components/EditCandidateItem.tsx          | 117 +++++++++++-------
 components/client/Spinner.tsx                 |  21 ++--
 3 files changed, 86 insertions(+), 54 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 63bf2f8..2a9a7e0 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -10,8 +10,8 @@ module.exports = {
   ],
   rules: {
     'import/no-cycle': 'error',
-    'react/display-name': 'off',
     'no-unused-vars': 'off',
+    'react/display-name': 'off',
     '@typescript-eslint/no-unused-vars': [
       'warn',
       {
diff --git a/app/(dashboard)/candidates/components/EditCandidateItem.tsx b/app/(dashboard)/candidates/components/EditCandidateItem.tsx
index 3d50c15..473c448 100644
--- a/app/(dashboard)/candidates/components/EditCandidateItem.tsx
+++ b/app/(dashboard)/candidates/components/EditCandidateItem.tsx
@@ -7,8 +7,13 @@ import {
   DialogTitle,
   DialogTrigger,
   DropdownMenuItem,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   Input,
-  Label,
 } from '@/components/ui';
 import { useDisclosure, useForm } from '@/hooks';
 import { updateUser } from '@/services/users';
@@ -31,11 +36,7 @@ export const EditCandidateItem = ({
     email: candidate.email,
   };
 
-  const {
-    register,
-    handleSubmit,
-    formState: { isSubmitting },
-  } = useForm<ManualInputs>({ defaultValues });
+  const form = useForm<ManualInputs>({ defaultValues });
 
   const handleOpenChange = (isOpen: boolean) => {
     if (isOpen) {
@@ -46,7 +47,7 @@ export const EditCandidateItem = ({
   };
 
   const onSubmit: SubmitHandler<ManualInputs> = async (data) => {
-    if (isSubmitting) return;
+    console.log('### onSubmit');
 
     const result = await updateUser(candidate.id, data);
 
@@ -57,6 +58,14 @@ export const EditCandidateItem = ({
     handleOpenChange(false);
   };
 
+  // useKeyPressEvent('Enter', (e) => {
+  //   if (isOpen && formRef && formRef.current) {
+  //     e.preventDefault();
+  //     console.log('### isOpen: ', { isOpen });
+  //     form.handleSubmit(onSubmit)
+  //   }
+  // });
+
   return (
     <Dialog onOpenChange={handleOpenChange} open={isOpen}>
       <DialogTrigger asChild>
@@ -75,49 +84,69 @@ export const EditCandidateItem = ({
           <DialogTitle>Edit Candidate</DialogTitle>
         </DialogHeader>
 
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <div className="flex flex-col gap-4">
-            <div className="flex flex-col gap-2">
-              <Label htmlFor="name">Name</Label>
-              <Input
-                id="name"
-                placeholder="Name"
-                {...register('name', { required: true })}
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="flex flex-col gap-4">
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Candidate Name</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Name"
+                        {...field}
+                        value={field.value ?? ''}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-            </div>
 
-            <div className="flex flex-col gap-2">
-              <Label htmlFor="email">Email</Label>
-              <Input
-                id="email"
-                placeholder="email@example.com"
-                {...register('email', { required: true })}
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Candidate Email</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Email"
+                        {...field}
+                        value={field.value ?? ''}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
             </div>
-          </div>
 
-          <DialogFooter className="mt-6 w-full justify-between">
-            <Button
-              onClick={(e) => {
-                e.preventDefault();
-                handleOpenChange(false);
-              }}
-              className="max-w-fit"
-              variant="ghost"
-            >
-              Cancel
-            </Button>
+            <DialogFooter className="mt-6 w-full justify-between">
+              <Button
+                onClick={(e) => {
+                  e.preventDefault();
+                  handleOpenChange(false);
+                }}
+                className="max-w-fit"
+                variant="ghost"
+              >
+                Cancel
+              </Button>
 
-            <Button
-              isLoading={isSubmitting}
-              disabled={isSubmitting}
-              className="max-w-fit"
-              type="submit"
-            >
-              Save
-            </Button>
-          </DialogFooter>
-        </form>
+              <Button
+                isLoading={form.formState.isSubmitting}
+                disabled={form.formState.isSubmitting}
+                className="max-w-fit"
+                type="submit"
+              >
+                Save
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
       </DialogContent>
     </Dialog>
   );
diff --git a/components/client/Spinner.tsx b/components/client/Spinner.tsx
index f3a44ff..b05e88b 100644
--- a/components/client/Spinner.tsx
+++ b/components/client/Spinner.tsx
@@ -1,11 +1,14 @@
-import { Loader2, LucideIcon } from '@/components/icons';
-import { ComponentProps } from '@/types';
+import { Loader2, LucideIcon } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import * as React from 'react';
 
-export type SpinnerProps = ComponentProps<LucideIcon>;
-
-export const Spinner = ({ className, ...rest }: SpinnerProps) => {
-  return (
-    <Loader2 className={cn('h-4 w-4 animate-spin', className)} {...rest} />
-  );
-};
+export const Spinner = React.forwardRef<
+  React.ElementRef<LucideIcon>,
+  React.ComponentPropsWithoutRef<LucideIcon>
+>(({ className, ...rest }, ref) => (
+  <Loader2
+    ref={ref}
+    className={cn('h-4 w-4 animate-spin', className)}
+    {...rest}
+  />
+));