Merge pull request #2 from TharindaPrabhath/frontend-day-09-stepper

Frontend day 09 stepper
TharindaPrabhath · Sep 24, 2021 · df63a24 · df63a24
2 parents bfdd70d + a5ee680
commit df63a24
Show file tree

Hide file tree

Showing 101 changed files with 7,304 additions and 91 deletions.
diff --git a/package.json b/package.json
@@ -5,20 +5,41 @@
   "dependencies": {
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.60",
+    "@mui/x-data-grid": "^4.0.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "@types/axios": "^0.14.0",
     "@types/jest": "^26.0.15",
+    "@types/jspdf": "^2.0.0",
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-redux": "^7.1.18",
     "@types/react-router-dom": "^5.1.8",
+    "@types/react-swipeable-views": "^0.13.1",
+    "@types/recharts": "^2.0.0",
+    "@types/redux-thunk": "^2.1.0",
+    "axios": "^0.21.1",
+    "formik": "^2.2.9",
+    "html2canvas": "^1.3.2",
+    "jspdf": "^2.4.0",
+    "moment": "^2.29.1",
+    "notistack": "^1.0.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.5",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "react-share": "^4.4.0",
+    "react-swipeable-views": "^0.14.0",
+    "recharts": "^2.1.2",
+    "redux-devtools-extension": "^2.13.9",
+    "redux-thunk": "^2.3.0",
     "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
+    "web-vitals": "^1.0.1",
+    "yup": "^0.32.9"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/favicon (2).ico b/public/favicon (2).ico
diff --git a/public/index.html b/public/index.html
@@ -27,7 +27,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Certify</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo.png b/public/logo.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -3,17 +3,17 @@
   "name": "Create React App Sample",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "logo.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "logo.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "logo.png",
       "type": "image/png",
       "sizes": "512x512"
     }

diff --git a/src/App.css b/src/App.css
@@ -1,19 +1,22 @@
 a{
     text-decoration: none;
     color: var(--primary-font-clr);
-  }
+}
 
 .app{
     position: relative;
     height: 100vh;
     background-color: var(--primary-bg-clr);
     color: var(--primary-font-clr);
+    overflow-y: hidden;
+    overflow-x: hidden;
 }
 
 .app__topbar{
-    position: absolute;
+    position: fixed;
     top: 0;
     width: 100%;
+    z-index: 1;
 }
 
 .app__sidebar{
@@ -23,4 +26,35 @@ a{
 .app__screen{
     position: absolute;
     top: 4em;
+    height: 100vh;
+    width: 100vw;
+}
+
+@media only screen and (min-width: 900px) {
+    .app__sidebar{
+        display: initial;
+        position: fixed;
+        top: 0em;
+    }
+
+    .app__topbar{
+        position: fixed;
+        left: 17em;
+        width: calc(100% - 17em);
+    }
+
+    .app__screen{
+        position: fixed;
+        left: 17em;
+        width: calc(100% - 17em);
+    }
+
+    .topbar .menu-btn{
+        display: none;
+    }
+
+    .topbar .topbar__content-right-col{
+        position: absolute;
+        right: 1em;
+    }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,34 +1,128 @@
-import React from "react";
+import React, { useEffect } from "react";
+
 import "./App.css";
+import "./components/Topbar.css";
 
-import { BrowserRouter as Router, Route } from "react-router-dom";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import Sidebar from "./components/Sidebar";
 import Dashboard from "./screens/Dashboard";
 import Topbar from "./components/Topbar";
 import User from "./screens/User";
+import NewUser from "./screens/NewUser";
+import { createTheme, ThemeProvider } from "@material-ui/core";
+import colors from "./data/colors";
+import Certificate from "./screens/Certificate";
+import NewCertificate from "./screens/NewCertificate";
+import EditUser from "./screens/EditUser";
+import Signin from "./screens/Signin";
+import CertificateVerification from "./screens/CertficateVerification";
+import CertificateView from "./screens/CertificateView";
+import UserProfile from "./screens/UserProfile";
+import { SnackbarProvider } from "notistack";
+import ProtectedRoute from "./components/ProtectedRoute";
+import AuthRoute from "./components/AuthRoute";
+import useLocalStorage from "./utils/useLocalStorage";
+import { useDispatch, useSelector } from "react-redux";
+import { ReducerType } from "./redux/store";
+import { fetchAdminByUsername } from "./utils/requestHelper";
+import Activity from "./screens/Activity";
+import { bindActionCreators } from "redux";
+import { actionCreators } from "../src/redux";
+import Settings from "./screens/Settings";
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: colors.primaryBrandClr,
+    },
+    secondary: {
+      main: colors.primaryFontClr,
+    },
+  },
+});
 
 function App() {
+  const { saveAdmin, getAdmin } = useLocalStorage();
+  const currentAdmin = useSelector(
+    (state: ReducerType) => state.adminReducer.currentAdmin
+  );
+  const dispatch = useDispatch();
+  const { setAdmin } = bindActionCreators(actionCreators, dispatch);
+
+  useEffect(() => {
+    fetchAdminByUsername(currentAdmin?.username!)
+      .then((res) => {
+        saveAdmin({ id: res.data.id, username: currentAdmin?.username });
+      })
+      .catch((err) => console.error(err));
+    // if (currentAdmin === null) {
+    //   const admin = getAdmin();
+    //   setAdmin({ id: parseInt(admin.id!), username: admin.username! });
+    // }
+  }, [currentAdmin?.username]);
+
   return (
-    <Router>
-      <div className="app">
-        <div className="app__topbar">
-          <Topbar />
-        </div>
-
-        <div className="app__sidebar">
-          <Sidebar />
-        </div>
-
-        <div className="app__screen">
-          <Route path="/dashboard">
-            <Dashboard />
-          </Route>
-          <Route path="/user">
-            <User />
-          </Route>
-        </div>
-      </div>
-    </Router>
+    <ThemeProvider theme={theme}>
+      <Router>
+        <SnackbarProvider>
+          <div className="app">
+            <div className="signin-screen">
+              <Switch>
+                <AuthRoute path="/signin" exact>
+                  <Signin />
+                </AuthRoute>
+                <Route path="/certificate/verify" exact>
+                  <CertificateVerification />
+                </Route>
+                <Route path="/certificate/view" exact>
+                  <CertificateView />
+                </Route>
+              </Switch>
+            </div>
+
+            <div className="app__topbar">
+              <Topbar />
+            </div>
+
+            <div className="app__sidebar">
+              <Sidebar />
+            </div>
+
+            <div className="app__screen">
+              <Switch>
+                <ProtectedRoute path="/dashboard" exact>
+                  <Dashboard />
+                </ProtectedRoute>
+                <ProtectedRoute path="/user" exact>
+                  <User />
+                </ProtectedRoute>
+                <ProtectedRoute path="/user/new" exact>
+                  <NewUser />
+                </ProtectedRoute>
+                <ProtectedRoute path="/user/edit/:uid" exact>
+                  <EditUser />
+                </ProtectedRoute>
+                <ProtectedRoute path="/user/:uid" exact>
+                  <UserProfile />
+                </ProtectedRoute>
+                <ProtectedRoute path="/certificate" exact>
+                  <Certificate />
+                </ProtectedRoute>
+                <ProtectedRoute path="/certificate/new" exact>
+                  <NewCertificate />
+                </ProtectedRoute>
+                <ProtectedRoute path="/activity" exact>
+                  <Activity />
+                </ProtectedRoute>
+                <ProtectedRoute path="/settings" exact>
+                  <Settings />
+                </ProtectedRoute>
+              </Switch>
+            </div>
+          </div>
+        </SnackbarProvider>
+      </Router>
+    </ThemeProvider>
   );
 }
 

diff --git a/src/assets/admins.svg b/src/assets/admins.svg
diff --git a/src/assets/certificate.svg b/src/assets/certificate.svg