chore(ui): migrate more code to typescript

ui/src/Hooks/useDebounce.ts

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 
 // https://usehooks.com/useDebounce/
-function useDebounce(value, delay) {
+function useDebounce(value: any, delay: number) {
   const [debouncedValue, setDebouncedValue] = useState(value);
 
   useEffect(() => {

ui/src/Hooks/useFetchAny.ts

@@ -4,14 +4,26 @@ import merge from "lodash.merge";
 
 import { CommonOptions } from "Common/Fetch";
 
-const useFetchAny = (upstreams, { fetcher = null } = {}) => {
+interface Upstream {
+  uri: string;
+  options: RequestInit;
+}
+
+interface ResponseState {
+  response: string | null;
+  error: string | null;
+  responseURI: string | null;
+  inProgress: boolean;
+}
+
+const useFetchAny = (upstreams: Upstream[], { fetcher = null } = {}) => {
   const [index, setIndex] = useState(0);
   const [response, setResponse] = useState({
     response: null,
     error: null,
     responseURI: null,
     inProgress: false,
-  });
+  } as ResponseState);
 
   const reset = useCallback(() => {
     setIndex(0);
@@ -39,7 +51,7 @@ const useFetchAny = (upstreams, { fetcher = null } = {}) => {
       try {
         const res = await (fetcher || fetch)(
           uri,
-          merge({}, { method: "GET" }, CommonOptions, options)
+          merge({}, { method: "GET" }, CommonOptions, options) as RequestInit
         );
 
         if (!isCancelled) {

ui/src/Hooks/useFetchDelete.ts

@@ -4,9 +4,9 @@ import merge from "lodash.merge";
 
 import { CommonOptions } from "Common/Fetch";
 
-const useFetchDelete = (uri, options, deps = []) => {
-  const [response, setResponse] = useState(null);
-  const [error, setError] = useState(null);
+const useFetchDelete = (uri: string, options: RequestInit, deps = []) => {
+  const [response, setResponse] = useState(null as string | null);
+  const [error, setError] = useState(null as string | null);
   const [isDeleting, setIsDeleting] = useState(true);
 
   useEffect(() => {

ui/src/Hooks/useFetchGet.ts

@@ -7,11 +7,11 @@ import promiseRetry from "promise-retry";
 import { CommonOptions, FetchRetryConfig } from "Common/Fetch";
 
 const useFetchGet = (
-  uri,
+  uri: string,
   { autorun = true, deps = [], fetcher = null } = {}
 ) => {
-  const [response, setResponse] = useState(null);
-  const [error, setError] = useState(null);
+  const [response, setResponse] = useState(null as any);
+  const [error, setError] = useState(null as string | null);
   const [isLoading, setIsLoading] = useState(true);
   const [isRetrying, setIsRetrying] = useState(false);
   const [retryCount, setRetryCount] = useState(0);
@@ -29,7 +29,7 @@ const useFetchGet = (
       setRetryCount(0);
       setError(null);
       const res = await promiseRetry(
-        (retry, number) =>
+        (retry: Function, number: number) =>
           (fetcher || fetch)(
             uri,
             merge(
@@ -41,7 +41,7 @@ const useFetchGet = (
               {
                 mode: number <= FetchRetryConfig.retries ? "cors" : "no-cors",
               }
-            )
+            ) as RequestInit
           ).catch((err) => {
             if (!isCanceled.current) {
               setIsRetrying(true);

ui/src/Hooks/useFlashTransition.ts

@@ -1,8 +1,10 @@
 import { useState, useEffect, useRef } from "react";
 
+import { TransitionProps } from "react-transition-group/Transition";
+
 import { useInView } from "react-intersection-observer";
 
-const defaultProps = {
+const defaultProps: TransitionProps = {
   in: false,
   classNames: "components-animation-flash",
   timeout: 800,
@@ -11,7 +13,7 @@ const defaultProps = {
   exit: false,
 };
 
-const useFlashTransition = (flashOn) => {
+const useFlashTransition = (flashOn: any) => {
   const mountRef = useRef(false);
   const [ref, inView] = useInView();
   const [isPending, setIsPending] = useState(false);

ui/src/Hooks/useGrid.ts

@@ -1,15 +1,15 @@
 import { useEffect, useRef, useState } from "react";
 
-import Bricks from "bricks.js";
+import Bricks, { SizeDetail, Instance } from "bricks.js";
 
-const useGrid = (sizes) => {
-  const ref = useRef(null);
-  const grid = useRef(null);
+const useGrid = (sizes: SizeDetail[]) => {
+  const ref = useRef(null as Node | null);
+  const grid = useRef(null as Instance | null);
   const [repack, setRepack] = useState(() => () => {});
 
   useEffect(() => {
     if (!grid.current && ref.current) {
-      grid.current = new Bricks({
+      grid.current = Bricks({
         container: ref.current,
         sizes: sizes,
         packed: "packed",

ui/src/Hooks/useOnClickOutside.ts

@@ -1,10 +1,18 @@
-import { useEffect } from "react";
+import { useEffect, RefObject } from "react";
+
+type Handler = (event: MouseEvent | TouchEvent) => void;
 
 // https://usehooks.com/useOnClickOutside/
-function useOnClickOutside(ref, handler, enabled) {
+function useOnClickOutside(
+  ref: RefObject<HTMLElement>,
+  handler: Handler,
+  enabled: boolean
+) {
   useEffect(() => {
-    const listener = (event) => {
-      if (!ref.current || ref.current.contains(event.target)) {
+    const listener: { (event: MouseEvent | TouchEvent): void } = (
+      event: MouseEvent | TouchEvent
+    ) => {
+      if (!ref.current || ref.current.contains(event.target as Node)) {
         return;
       }
       handler(event);