chore: init web project

web/src/hooks/useLoading.ts

@@ -0,0 +1,35 @@
+import { useState } from "react";
+
+const useLoading = (initialState = true) => {
+  const [state, setState] = useState({ isLoading: initialState, isFailed: false, isSucceed: false });
+
+  return {
+    ...state,
+    setLoading: () => {
+      setState({
+        ...state,
+        isLoading: true,
+        isFailed: false,
+        isSucceed: false,
+      });
+    },
+    setFinish: () => {
+      setState({
+        ...state,
+        isLoading: false,
+        isFailed: false,
+        isSucceed: true,
+      });
+    },
+    setError: () => {
+      setState({
+        ...state,
+        isLoading: false,
+        isFailed: true,
+        isSucceed: false,
+      });
+    },
+  };
+};
+
+export default useLoading;

web/src/hooks/useRefresh.ts

@@ -0,0 +1,15 @@
+import { useCallback, useState } from "react";
+
+const useRefresh = () => {
+  const [, setBoolean] = useState<boolean>(false);
+
+  const refresh = useCallback(() => {
+    setBoolean((ps) => {
+      return !ps;
+    });
+  }, []);
+
+  return refresh;
+};
+
+export default useRefresh;

web/src/hooks/useToggle.ts

@@ -0,0 +1,21 @@
+import { useCallback, useState } from "react";
+
+// Parameter is the boolean, with default "false" value
+const useToggle = (initialState = false): [boolean, (nextState?: boolean) => void] => {
+  // Initialize the state
+  const [state, setState] = useState(initialState);
+
+  // Define and memorize toggler function in case we pass down the comopnent,
+  // This function change the boolean value to it's opposite value
+  const toggle = useCallback((nextState?: boolean) => {
+    if (nextState !== undefined) {
+      setState(nextState);
+    } else {
+      setState((state) => !state);
+    }
+  }, []);
+
+  return [state, toggle];
+};
+
+export default useToggle;