Apply form hook for room page

hotel-management/src/components/Select/index.tsx

@@ -1,5 +1,11 @@
-import { FieldValues, RegisterOptions, useFormContext } from 'react-hook-form';
+import {
+  FieldValues,
+  RegisterOptions,
+  UseFormRegister,
+  useFormContext,
+} from 'react-hook-form';
 import { StyledSelect } from './styled';
+import React, { ReactNode } from 'react';
 
 export interface ISelectOptions {
   value: string;
@@ -8,31 +14,81 @@ export interface ISelectOptions {
 interface ISelect {
   options: ISelectOptions[];
   optionsConfigForm?: RegisterOptions<FieldValues, string> | undefined;
-  value?: number;
-  id: string;
+  value?: string;
+  onChange?: React.ChangeEventHandler<HTMLSelectElement> | undefined;
+  id?: string;
+  ariaLabel: string;
 }
 
-const Select = ({ options, id, optionsConfigForm }: ISelect) => {
-  const { register } = useFormContext() ?? {};
+interface IRender extends ISelect {
+  register: UseFormRegister<FieldValues>;
+  children: ReactNode[];
+}
 
-  if(!register) {
-    return null;
+const RenderSelect = ({
+  options,
+  id,
+  value,
+  optionsConfigForm,
+  onChange,
+  register,
+  children,
+  ariaLabel,
+}: IRender) => {
+  if (options && !register) {
+    return (
+      <StyledSelect
+        aria-label={ariaLabel}
+        id={id}
+        value={value}
+        onChange={onChange}
+      >
+        {children}
+      </StyledSelect>
+    );
   }
 
+  return (
+    <StyledSelect
+      aria-label={ariaLabel}
+      id={id}
+      value={value}
+      {...register(id!, optionsConfigForm)}
+      onChange={onChange}
+    >
+      {children}
+    </StyledSelect>
+  );
+};
+
+const Select = ({
+  options,
+  id,
+  optionsConfigForm,
+  value,
+  onChange,
+  ariaLabel
+}: ISelect) => {
+  const { register } = useFormContext() ?? {};
+
   if (!options) return;
 
   return (
-    <StyledSelect
-      aria-label="Sort"
+    <RenderSelect
+      register={register}
+      options={options}
+      optionsConfigForm={optionsConfigForm}
       id={id}
-      {...register(id, optionsConfigForm)}
+      value={value}
+      onChange={onChange}
+      ariaLabel={ariaLabel}
     >
       {options.map((option) => (
         <option value={option.value} key={option.value}>
           {option.label}
         </option>
       ))}
-    </StyledSelect>
+    </RenderSelect>
   );
 };
 

hotel-management/src/components/SortBy/index.tsx

@@ -20,12 +20,12 @@ const SortBy = memo(({ options }: ISortByProps) => {
     setSearchParams(searchParams);
   };
 
-  // prettier-ignore
   return (
     <Select 
       options={options} 
       value={sortBy} 
       onChange={handleChange} 
+      ariaLabel='Sort'
     />
   );
 });