initial commit

frontend/.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

frontend/.prettierrc.json

@@ -0,0 +1 @@
+{}

frontend/package.json

@@ -48,6 +48,7 @@
     ]
   },
   "devDependencies": {
+    "prettier": "2.7.1",
     "sass": "^1.55.0"
   }
 }

frontend/src/App.scss

@@ -1,17 +1,17 @@
 .css-1lwa3th-MuiFormLabel-root-MuiInputLabel-root {
-  color: #F9F4DA !important;
+  color: #f9f4da !important;
 }
 
 .css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input {
-  color: #F9F4DA !important;
+  color: #f9f4da !important;
 }
 
 .css-1wc848c-MuiFormHelperText-root {
   color: #e6a41a !important;
 }
 
 .css-1d3z3hw-MuiOutlinedInput-notchedOutline {
-  border-color: #F9F4DA !important;
+  border-color: #f9f4da !important;
 }
 
 .css-1u3bzj6-MuiFormControl-root-MuiTextField-root {
@@ -20,38 +20,38 @@
 }
 
 .css-1t1j96h-MuiPaper-root-MuiDialog-paper {
-  background-color: #100D0E !important;
-  color: #F9F4DA !important;
+  background-color: #100d0e !important;
+  color: #f9f4da !important;
   form {
     button {
       border: none;
-            border-radius: 6px;
-            font-size: 1.5rem;
-            line-height: 18px;
-            font-weight: 500;
-            color: #100D0E;
-            background: #FCBA28;
-            padding: 23px 50px;
-            border-radius: 9999px;
-            text-transform: uppercase;
-            font-family: 'Paytone One', sans-serif;
-            cursor: pointer;
-            margin-top: 2rem;
+      border-radius: 6px;
+      font-size: 1.5rem;
+      line-height: 18px;
+      font-weight: 500;
+      color: #100d0e;
+      background: #fcba28;
+      padding: 23px 50px;
+      border-radius: 9999px;
+      text-transform: uppercase;
+      font-family: "Paytone One", sans-serif;
+      cursor: pointer;
+      margin-top: 2rem;
     }
   }
   button {
     border: none;
-          border-radius: 6px;
-          font-size: 1.5rem;
-          line-height: 18px;
-          font-weight: 500;
-          color: #100D0E;
-          background: #F9F4DA;
-          padding: 15px 25px;
-          border-radius: 9px;
-          text-transform: uppercase;
-          font-family: 'Paytone One', sans-serif;
-          cursor: pointer;
-          margin-top: 2rem;
+    border-radius: 6px;
+    font-size: 1.5rem;
+    line-height: 18px;
+    font-weight: 500;
+    color: #100d0e;
+    background: #f9f4da;
+    padding: 15px 25px;
+    border-radius: 9px;
+    text-transform: uppercase;
+    font-family: "Paytone One", sans-serif;
+    cursor: pointer;
+    margin-top: 2rem;
   }
-}
+}

frontend/src/App.test.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import App from "./App";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   render(<App />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();

frontend/src/App.tsx

@@ -1,56 +1,54 @@
-import React, {useEffect, useState, Suspense} from 'react';
-import './App.scss';
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import React, { useEffect, useState, Suspense } from "react";
+import "./App.scss";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { UserContextProvider } from "./components/Context/UserContext";
-import mainRoutes from './routes/main';
+import mainRoutes from "./routes/main";
 import ProtectedRoutes from "./routes/ProtectedRoutes";
-import Preloader from './components/Preloader/preloader';
-import Header from './components/Header/header';
-import Footer from './components/Footer/footer';
-import { ToastContainer } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
-const Dashboard = React.lazy(
-  () => import('./components/Dashboard/dashboard')
-);
+import Preloader from "./components/Preloader/preloader";
+import Header from "./components/Header/header";
+import Footer from "./components/Footer/footer";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+const Dashboard = React.lazy(() => import("./components/Dashboard/dashboard"));
 
 function App() {
   const [loading, setLoading] = useState(false);
 
-    useEffect(() => {
-        setLoading(true);
-        setTimeout(() => {setLoading(false);}, 0);
-      }, []);
+  useEffect(() => {
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+    }, 0);
+  }, []);
   return (
     <div className="App">
       <UserContextProvider>
-      { loading ? 
-        (<Preloader />) 
-        : 
-        (
-            <Router>
-              <Header />
-              <Suspense fallback={<p>Loading...</p>}>
-            <Routes>
+        {loading ? (
+          <Preloader />
+        ) : (
+          <Router>
+            <Header />
+            <Suspense fallback={<p>Loading...</p>}>
+              <Routes>
                 {mainRoutes.map((prop, key) => {
-                    return (
-                        <Route
-                            path={prop.path}
-                            key={key}
-                            element={prop.component}
-                        ></Route>
-                    )
+                  return (
+                    <Route
+                      path={prop.path}
+                      key={key}
+                      element={prop.component}
+                    ></Route>
+                  );
                 })}
                 <Route element={<ProtectedRoutes />}>
-        <Route path="/dashboard" element={<Dashboard />} />
-      </Route>
-            </Routes>
+                  <Route path="/dashboard" element={<Dashboard />} />
+                </Route>
+              </Routes>
             </Suspense>
             <Footer />
-        </Router>
-        ) 
-    }
-    </UserContextProvider>
-    <ToastContainer />
+          </Router>
+        )}
+      </UserContextProvider>
+      <ToastContainer />
     </div>
   );
 }

frontend/src/components/Context/UserContext.tsx

@@ -9,33 +9,33 @@ export const UserContextProvider = ({ children }) => {
   const [id, setId] = useState("");
 
   useEffect(() => {
-    const data = window.localStorage.getItem('USER_INFO');
-    setUserInfo(JSON.parse(data))
+    const data = window.localStorage.getItem("USER_INFO");
+    setUserInfo(JSON.parse(data));
   }, []);
   useEffect(() => {
-    const data = window.localStorage.getItem('TOKEN');
-    setToken(JSON.parse(data))
+    const data = window.localStorage.getItem("TOKEN");
+    setToken(JSON.parse(data));
   }, []);
   useEffect(() => {
-    const data = window.localStorage.getItem('ID');
-    setId(JSON.parse(data))
+    const data = window.localStorage.getItem("ID");
+    setId(JSON.parse(data));
   }, []);
   useEffect(() => {
-    const data = window.localStorage.getItem('IS_AUTH');
-    setIsAuth(JSON.parse(data))
+    const data = window.localStorage.getItem("IS_AUTH");
+    setIsAuth(JSON.parse(data));
   }, []);
 
   useEffect(() => {
-    window.localStorage.setItem('USER_INFO', JSON.stringify(userInfo));
+    window.localStorage.setItem("USER_INFO", JSON.stringify(userInfo));
   }, [userInfo]);
   useEffect(() => {
-    window.localStorage.setItem('IS_AUTH', JSON.stringify(isAuth));
+    window.localStorage.setItem("IS_AUTH", JSON.stringify(isAuth));
   }, [isAuth]);
   useEffect(() => {
-    window.localStorage.setItem('TOKEN', JSON.stringify(token));
+    window.localStorage.setItem("TOKEN", JSON.stringify(token));
   }, [token]);
   useEffect(() => {
-    window.localStorage.setItem('ID', JSON.stringify(id));
+    window.localStorage.setItem("ID", JSON.stringify(id));
   }, [id]);
 
   const value = {
@@ -46,12 +46,12 @@ export const UserContextProvider = ({ children }) => {
     token,
     setToken,
     id,
-    setId
+    setId,
   };
 
   return (
     <UserContext.Provider value={value}> {children} </UserContext.Provider>
   );
 };
 
-export default UserContext;
+export default UserContext;