useAPI hook with demonstration on the login component

pwa/src/components/Login.tsx

@@ -1,8 +1,11 @@
 import React, { ReactElement } from 'react'
+import useApi from '../hooks/useApi'
 import {InputItem, Button} from 'antd-mobile'
 import '../scss/Login.scss'
 
 export default function Login(): ReactElement {
+  const {response, error, isLoading} = useApi("")
+
   return (
     <>
       <div id="loginWrapper">
@@ -19,6 +22,10 @@ export default function Login(): ReactElement {
             </div>
         </div>
       </div>
+      <p>Loading API Fetch: {isLoading.toString()}</p>
+      {response && 
+        <p>API Fetch Result: {JSON.stringify(response)}</p>
+      }
     </>
   )
 }

pwa/src/hooks/useApi.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+
+const useFetch = (route: string) => {
+  const [response, setResponse] = React.useState(null);
+  const [error, setError] = React.useState(null);
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  React.useEffect(() => {
+    const fetchData = async () => {
+      setIsLoading(true);
+      try {
+        const res = await fetch("http://localhost:4000/" + route);
+        const json = await res.json();
+        setResponse(json);
+        setIsLoading(false)
+      } catch (error) {
+        setError(error);
+      }
+    };
+    fetchData();
+  }, []);
+  return { response, error, isLoading };
+};
+
+export default useFetch

pwa/tsconfig.json

@@ -6,6 +6,7 @@
       "dom.iterable",
       "esnext"
     ],
+    "strictNullChecks": false,
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,