migrate frontend

web/src/hooks/useDebounce.ts

@@ -0,0 +1,27 @@
+import { useCallback, useRef } from "react";
+
+/**
+ * useDebounce: useRef + useCallback
+ * @param func function
+ * @param delay delay duration
+ * @param deps depends
+ * @returns debounced function
+ */
+export default function useDebounce<T extends (...args: any[]) => any>(func: T, delay: number, deps: any[] = []): T {
+  const timer = useRef<number>();
+
+  const cancel = useCallback(() => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+  }, []);
+
+  const run = useCallback((...args) => {
+    cancel();
+    timer.current = window.setTimeout(() => {
+      func(...args);
+    }, delay);
+  }, deps);
+
+  return run as T;
+}

web/src/hooks/useLoading.ts

@@ -0,0 +1,35 @@
+import { useState } from "react";
+
+function useLoading(initialState: boolean = 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";
+
+function 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,19 @@
+import { useCallback, useState } from "react";
+
+// Parameter is the boolean, with default "false" value
+export default function 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];
+}