feat(frontend): add backend and error contexts

frontend/src/contexts/backend-context.js

@@ -0,0 +1,91 @@
+import { createContext, useContext, } from 'react';
+import { useRouter } from 'next/router';
+import { useAlertContext } from './error-context';
+
+export const BackendContext = createContext({ undefined });
+
+export const BackendProvider = (props) => {
+    const { children } = props;
+
+    const { setAlert } = useAlertContext();
+    
+    const router = useRouter();
+
+    var myHeaders = new Headers();
+    myHeaders.append("Content-Type", "application/json");
+    myHeaders.append("Authorization", localStorage.getItem("token"));
+
+    const httpRequest = async (path, method, body, headers, encoding) => {
+        
+        var requestOptions = {
+            method: method,
+            redirect: 'follow',
+        };
+
+        if (body) {
+            requestOptions.body = body
+        }
+
+        console.log("headers:", headers)
+        if (headers) {
+            requestOptions.headers = headers
+        }else {
+            requestOptions.headers = myHeaders
+        }
+
+        const response = await fetch(`${process.env.NEXT_PUBLIC_REST_ENDPOINT || ""}${path}`, requestOptions)
+        console.log("status:", response.status)
+        if (response.status != 200) {
+            if (response.status == 401) {
+                router.push("/auth/login")
+            }
+            if (response.status == 204 || response.status == 201) {
+                return {status : response.status, result: null}
+            }
+            const data = await response.text()
+            // setAlert({
+            //     severity: "error",
+            //     title: "Error",
+            //     message: `Status: ${response.status}, Content: ${data}`,
+            // })
+            setAlert({
+                severity: "error",
+                // title: "Error",
+                message: `${data}`,
+            })
+            return {status : response.status, result: null}
+        }
+        if (encoding) {
+            console.log("encoding:", encoding)
+            if (encoding == "text") {
+                const data = await response.text()
+                return {status: response.status, result: data}
+            }else if (encoding == "blob") {
+                const data = await response.blob()
+                return {status: response.status, result: data}
+            }else if (encoding == "json") {
+                const data = await response.json()
+                return {status: response.status, result: data}
+            }else{
+                return {status: response.status, result: response}
+            }
+        }
+        const data = await response.json()
+        return {status: response.status, result: data}
+    }
+    
+    return (
+        <BackendContext.Provider
+        value={{
+            httpRequest,
+            setAlert,
+        }}
+        >
+        {children}
+        </BackendContext.Provider>
+    );
+};
+
+export const BackendConsumer = BackendContext.Consumer;
+
+export const useBackendContext = () => useContext(BackendContext);

frontend/src/contexts/error-context.js

@@ -0,0 +1,32 @@
+import { createContext, useContext, useState } from 'react';
+
+
+export const AlertContext = createContext({ undefined });
+
+export const AlertProvider = (props) => {
+    const { children } = props;
+    /*
+    {
+        severity: '', // options => error, warning, info, success
+        message: '',
+        title: '',
+    }
+    */
+    // const [alert, setAlert] = useState(null);
+    const [alert, setAlert] = useState();
+    
+    return (
+        <AlertContext.Provider
+        value={{
+            alert,
+            setAlert,
+        }}
+        >
+        {children}
+        </AlertContext.Provider>
+    );
+};
+
+export const AlertConsumer = AlertContext.Consumer;
+
+export const useAlertContext = () => useContext(AlertContext);

frontend/src/pages/_app.js

@@ -9,9 +9,10 @@ import { useNProgress } from 'src/hooks/use-nprogress';
 import { createTheme } from 'src/theme';
 import { createEmotionCache } from 'src/utils/create-emotion-cache';
 import 'simplebar-react/dist/simplebar.min.css';
-import { WsProvider } from 'src/contexts/socketio-context';
 import '../utils/map.css';
 import { useEffect, useState } from 'react';
+import { BackendProvider } from 'src/contexts/backend-context';
+import { AlertProvider } from 'src/contexts/error-context';
 
 const clientSideEmotionCache = createEmotionCache();
 
@@ -33,7 +34,7 @@ const App = (props) => {
     <CacheProvider value={emotionCache}>
       <Head>
         <title>
-          Oktopus | TR-369 Controller
+          Oktopus | Controller
         </title>
         <meta
           name="viewport"
@@ -42,16 +43,22 @@ const App = (props) => {
       </Head>
       <LocalizationProvider dateAdapter={AdapterDateFns}>
         <AuthProvider>
-            <ThemeProvider theme={theme}>
-              <CssBaseline />
-              <AuthConsumer>
-                {
-                  (auth) => auth.isLoading
-                    ? <SplashScreen />
-                    : getLayout(<Component {...pageProps} />)
-                }
-              </AuthConsumer>
-            </ThemeProvider>
+          {/* <WsProvider> */}
+          <AlertProvider>
+            <BackendProvider>
+                <ThemeProvider theme={theme}>
+                  <CssBaseline />
+                  <AuthConsumer>
+                    {
+                      (auth) => auth.isLoading
+                        ? <SplashScreen />
+                        : getLayout(<Component {...pageProps} />)
+                    }
+                  </AuthConsumer>
+                </ThemeProvider>
+            </BackendProvider>
+          </AlertProvider>
+          {/* </WsProvider> */}
         </AuthProvider>
       </LocalizationProvider>
     </CacheProvider>