Update hooks and add content for room page

hotel-management/src/hooks/useFetch.ts

@@ -2,12 +2,25 @@ import { useEffect, useState } from 'react';
 
 // Constants
 import { BASE_URL } from '../constants/path';
-import { searchQuery } from '../helpers/utils';
 import { DEFAULT_ORDER_BY, DEFAULT_SORT_BY } from '../constants/config';
 
-export const useFetch = (
+// Utils
+import { searchQuery } from '../helpers/utils';
+
+/**
+ *
+ * @param path The path of url
+ * @param columnSearch Column need to search
+ * @param keyWord The key word to search
+ * @param tempSortBy Sort by
+ * @param tempOrderBy Order by
+ * @param reload Fetch again
+ * @returns data: A data after fetch, isPending: A boolean indicating whether or not the progress of fetch data is done, errorMsg: A error message from the server.
+ */
+const useFetch = (
   path: string,
-  phoneNum: string,
+  columnSearch: string,
+  keyWord: string,
   tempSortBy: string,
   tempOrderBy: string,
   reload?: boolean,
@@ -35,7 +48,7 @@ export const useFetch = (
         : DEFAULT_ORDER_BY;
 
       // Query search
-      const query = searchQuery(phoneNum, sortBy, orderBy);
+      const query = searchQuery(columnSearch, keyWord, sortBy, orderBy);
 
       try {
         const response = await fetch(BASE_URL + path + '?' + query);
@@ -56,6 +69,8 @@ export const useFetch = (
     };
 
     fetchData();
-  }, [path, reload, phoneNum, tempOrderBy, tempSortBy]);
+  }, [path, reload, columnSearch, keyWord, tempOrderBy, tempSortBy]);
   return { data, isPending, errorMsg };
 };
+
+export { useFetch };

hotel-management/src/hooks/useForm.ts

@@ -1,16 +1,11 @@
 import { useState, useEffect, useCallback, ChangeEvent } from 'react';
 
 // Utils
-import {
-  ERROR,
-  VALUE,
-  getPropValues,
-  isObject,
-  isRequired,
-} from '../helpers/utils';
+import { getPropValues, isObject, isRequired } from '../helpers/utils';
 
 // Types
 import { TKeyValue, TValidator } from '../globals/types';
+import { ERROR, VALUE } from '../constants/variables';
 
 /**
  * Custom hooks to validate your Form...
@@ -36,11 +31,11 @@ const useForm = (
   useEffect(() => {
     setInitialErrorState(initialValue);
     setDisable(true);
+    setDirty(getPropValues(stateSchema));
 
     // If initial value true, setValues again from stateSchema
     // and enabled button
     if (initialValue) {
-      setValues({});
       setValues(getPropValues(stateSchema, VALUE));
       setDisable(false);
     }
@@ -116,10 +111,19 @@ const useForm = (
     (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
       setIsDirty(true);
 
+      let error = '';
       const name = (event.target! as HTMLInputElement).name;
-      const value = (event.target! as HTMLInputElement).value;
+      let value: string | boolean = '';
 
-      const error = validateFormFields(name, value);
+      if ((event.target! as HTMLInputElement).type === 'checkbox') {
+        value = (event.target! as HTMLInputElement).checked;
+      } else {
+        value = (event.target! as HTMLInputElement).value;
+      }
+
+      if (typeof value === 'string') {
+        error = validateFormFields(name, value)!;
+      }
 
       setValues((prevState) => ({ ...prevState, [name]: value }));
       setErrors((prevState) => ({ ...prevState, [name]: error }));

hotel-management/src/hooks/useOutsideClick.ts

@@ -1,5 +1,11 @@
 import { useEffect, useRef } from 'react';
 
+/**
+ * Custom hook to call handler when click outside element
+ * @param handler Handler function
+ * @param listeningCapturing A boolean value indicating that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree. If not specified, defaults to false.
+ * @returns Return a mutable ref object
+ */
 export const useOutsideClick = (
   handler: () => void,
   listeningCapturing = true,