fix & refactor code from feedback

GenerateNU · May 17, 2024 · 8fd955a · 8fd955a
1 parent 2a33c0d
commit 8fd955a
Show file tree

Hide file tree

Showing 7 changed files with 12,649 additions and 110 deletions.
diff --git a/frontend/dashboard/components/ui/inputWithLabel.tsx b/frontend/dashboard/components/ui/inputWithLabel.tsx
@@ -7,14 +7,15 @@ interface InputProps {
     label: string;
     placeholder: string;
     value: string;
-    onChange: () => void;
+    onChange: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
 }
 
-const InputWithLabel = (props: InputProps) => {
+const InputWithLabel = ({ type, id, label, placeholder, value, onChange, onBlur }: InputProps) => {
     return (
         <div className="grid w-full items-center gap-1.5">
-            <Label htmlFor={props.id}>{props.label}</Label>
-            <Input value={props.value} onChange={props.onChange} type={props.type} id={props.id} placeholder={props.placeholder} />
+            <Label htmlFor={id}>{label}</Label>
+            <Input onBlur={onBlur} value={value} onChange={onChange} type={type} id={id} placeholder={placeholder} />
         </div>
     )
 }

diff --git a/frontend/dashboard/components/ui/multiSelect.tsx b/frontend/dashboard/components/ui/multiSelect.tsx
@@ -18,6 +18,7 @@ interface GroupOption {
 interface MultipleSelectorProps {
   value?: Option[];
   label: string;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
   defaultOptions?: Option[];
   /** manually controlled options */
   options?: Option[];
@@ -155,6 +156,7 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
     {
       value,
       onChange,
+      onBlur,
       placeholder,
       defaultOptions: arrayDefaultOptions = [],
       options: arrayOptions,
@@ -414,6 +416,7 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
               }}
               onBlur={(event) => {
                 setOpen(false);
+                onBlur?.(event);
                 inputProps?.onBlur?.(event);
               }}
               onFocus={(event) => {

diff --git a/frontend/dashboard/components/ui/selectScrollable.tsx b/frontend/dashboard/components/ui/selectScrollable.tsx
@@ -16,19 +16,20 @@ interface ScrollableProps {
     placeholder: string;
     value: string;
     onChange: () => void;
+    onBlur: (open: boolean) => void;
 }
 
-const SelectScrollable = (props : ScrollableProps) => {
+const SelectScrollable = ({label, value, placeholder, data, onBlur, onChange}: ScrollableProps) => {
     return (
         <div className="grid w-full items-center gap-1.5">
-            <Label htmlFor="timezone">{props.label}</Label>
-            <Select value={props.value} onValueChange={props.onChange}>
+            <Label htmlFor="timezone">{label}</Label>
+            <Select value={value} onOpenChange={onBlur} onValueChange={onChange}>
                 <SelectTrigger>
-                    <SelectValue placeholder={props.placeholder} />
+                    <SelectValue placeholder={placeholder} />
                 </SelectTrigger>
                 <SelectContent>
                     <SelectGroup>
-                        {props.data.map((item: Option) => (
+                        {data.map((item: Option) => (
                             <SelectItem key={item.value} value={item.value}>{item.label}</SelectItem>
                         ))}
                     </SelectGroup>