Merge pull request #551 from AFP-Medialab/fix-sideNavigation

Navigation Refactoring

jsconfig.json

@@ -1,7 +1,7 @@
 {
     "compilerOptions": {
       "baseUrl": "./src",
-      "checkJs": true,
+      "checkJs": false,
       "jsx": "react"
     },
     "exclude": ["node_modules", "**/node_modules", "dist", "build"]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "weverify-plugin",
-  "version": "0.81",
+  "version": "0.82",
   "description": "",
   "main": "index.js",
   "scripts": {

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Fake news debunker by InVID & WeVerify",
-  "version": "0.81",
+  "version": "0.82",
   "description": "InVID WeVerify extension",
   "short_name": "Verification Plugin",
   "action": {

src/App.jsx

@@ -2,14 +2,14 @@ import React, { useEffect, useState } from "react";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import { HashRouter, Route, Routes } from "react-router-dom";
 import PopUp from "./components/PopUp/PopUp";
-import NavBar from "./components/NavBar/NavBar";
 import useAuthenticationAPI from "./components/Shared/Authentication/useAuthenticationAPI";
 import { useDispatch } from "react-redux";
 import {
   cleanErrorNetwork,
   setErrorNetwork,
 } from "redux/reducers/errorReducer";
 import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
+import ApplicationLayout from "./components/ApplicationLayout";
 
 const theme = createTheme({
   palette: {
@@ -103,7 +103,7 @@ const App = () => {
       <ThemeProvider theme={theme}>
         <Routes>
           <Route index path="/" element={<PopUp />} />
-          <Route path={"/app/*"} element={<NavBar />} />
+          <Route path={"/app/*"} element={<ApplicationLayout />} />
         </Routes>
       </ThemeProvider>
     </HashRouter>

src/Hooks/useAnalytics.jsx

@@ -1,14 +1,14 @@
 import { useSelector } from "react-redux";
 import { useEffect } from "react";
 import {
-  trackPageView,
-  trackPageViewAnonymous,
   trackEvent,
   trackEventAnonymous,
+  trackPageView,
+  trackPageViewAnonymous,
 } from "../components/Shared/GoogleAnalytics/MatomoAnalytics";
 import { history } from "../components/Shared/History/History";
 
-export const useTrackPageView = (path, client_id, uid, index) => {
+export const useTrackPageView = (path, client_id, uid, toolName) => {
   const analytics = useSelector((state) => state.cookies.analytics);
   useEffect(() => {
     //console.log("general page view");
@@ -18,7 +18,7 @@ export const useTrackPageView = (path, client_id, uid, index) => {
     } else {
       trackPageViewAnonymous(path, history);
     }
-  }, [index]);
+  }, [toolName]);
 };
 
 export const useTrackEvent = (

src/components/ApplicationLayout/index.jsx

@@ -0,0 +1,93 @@
+import React, { useState } from "react";
+import NotificationSnackbar from "../NotificationSnackbar";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import TopMenu from "../TopMenu";
+import { TOP_MENU_ITEMS } from "../../constants/topMenuItems";
+import SideMenu from "../SideMenu";
+import { tools } from "../../constants/tools";
+import MainContent from "../MainContent";
+import useMyStyles from "../Shared/MaterialUiStyles/useMyStyles";
+
+const ApplicationLayout = () => {
+  const theme = createTheme({
+    palette: {
+      primary: {
+        light: "#00926c",
+        main: "#00926c",
+        dark: "#00926c",
+        contrastText: "#fff",
+      },
+    },
+    components: {
+      MuiAppBar: {
+        styleOverrides: {
+          colorPrimary: {
+            backgroundColor: "#ffffff",
+          },
+          root: {
+            zIndex: 1300,
+            height: "87px",
+            boxShadow: "none",
+            paddingTop: "12px",
+          },
+        },
+      },
+      MuiListItem: {
+        styleOverrides: {
+          gutters: {
+            paddingLeft: "26px",
+          },
+        },
+      },
+      MuiAutocomplete: {
+        styleOverrides: {
+          popupIndicatorOpen: {
+            transform: "none!important",
+          },
+          popper: {
+            zIndex: 99999,
+          },
+        },
+      },
+      MuiCard: {
+        styleOverrides: {
+          root: {
+            borderRadius: "10px!important",
+          },
+        },
+      },
+      MuiIconButton: {
+        styleOverrides: {
+          root: {
+            padding: 0,
+          },
+        },
+      },
+      MuiTab: {
+        styleOverrides: {
+          root: {
+            minWidth: "160px",
+          },
+        },
+      },
+    },
+  });
+
+  // Used to display warning messages
+  const [openAlert, setOpenAlert] = useState(false);
+
+  const classes = useMyStyles();
+
+  return (
+    <div className={classes.flex}>
+      <NotificationSnackbar openAlert={openAlert} setOpenAlert={setOpenAlert} />
+      <ThemeProvider theme={theme}>
+        <SideMenu tools={tools} setOpenAlert={setOpenAlert} />
+        <TopMenu topMenuItems={TOP_MENU_ITEMS} />
+        <MainContent tools={tools} />
+      </ThemeProvider>
+    </div>
+  );
+};
+
+export default ApplicationLayout;

src/components/MainContent/index.jsx

@@ -0,0 +1,194 @@
+import React from "react";
+import MainContentMenuTopMenuItems from "../NavBar/MainContentMenuTabItems/MainContentMenuTopMenuItems";
+import ScrollTop from "../Shared/ScrollTop/ScrollTop";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { Button, Fab, Snackbar } from "@mui/material";
+import { KeyboardArrowUp } from "@mui/icons-material";
+import MySnackbar from "../MySnackbar/MySnackbar";
+import {
+  cleanError,
+  cleanErrorNetwork,
+} from "../../redux/reducers/errorReducer";
+import { setFalse, setTrue } from "../../redux/reducers/cookiesReducers";
+import Feedback from "../Feedback/Feedback";
+import useMyStyles from "../Shared/MaterialUiStyles/useMyStyles";
+import { TOOL_STATUS_ICON } from "../../constants/tools";
+import { useDispatch, useSelector } from "react-redux";
+import { i18nLoadNamespace } from "../Shared/Languages/i18nLoadNamespace";
+import { TOP_MENU_ITEMS } from "../../constants/topMenuItems";
+
+/**
+ *
+ * @param tools {Tool[]}
+ * @returns {Element}
+ * @constructor
+ */
+const MainContent = ({ tools }) => {
+  const classes = useMyStyles();
+
+  const keyword = i18nLoadNamespace("components/NavBar");
+
+  const dispatch = useDispatch();
+
+  const currentLang = useSelector((state) => state.language);
+  const isCurrentLanguageLeftToRight = currentLang !== "ar";
+
+  const error = useSelector((state) => state.error.tools);
+  const errorNetwork = useSelector((state) => state.error.network);
+
+  const cookiesUsage = useSelector((state) => state.cookies);
+
+  const role = useSelector((state) => state.userSession.user.roles);
+
+  const toolsAllowedForRole = tools.filter((tool) => {
+    if (
+      !tool.rolesNeeded ||
+      tool.rolesNeeded.length === 0 ||
+      tool.rolesNeeded.includes(TOOL_STATUS_ICON.LOCK)
+    )
+      return true;
+    else if (tool.rolesNeeded.some((restriction) => role.includes(restriction)))
+      return true;
+    else return false;
+  });
+
+  const themeFab = createTheme({
+    palette: {
+      primary: {
+        light: "#00926c",
+        main: "#00926c",
+        dark: "#00926c",
+        contrastText: "#fff",
+      },
+    },
+    components: {
+      MuiAppBar: {
+        styleOverrides: {
+          colorPrimary: {
+            backgroundColor: "#ffffff",
+          },
+          root: {
+            zIndex: 1300,
+            height: "87px",
+            boxShadow: "none",
+            paddingTop: "12px",
+          },
+        },
+      },
+      MuiListItem: {
+        styleOverrides: {
+          gutters: {
+            paddingLeft: "26px",
+          },
+        },
+      },
+      MuiAutocomplete: {
+        styleOverrides: {
+          popupIndicatorOpen: {
+            transform: "none!important",
+          },
+          popper: {
+            zIndex: 99999,
+          },
+        },
+      },
+      MuiCard: {
+        styleOverrides: {
+          root: {
+            borderRadius: "10px!important",
+          },
+        },
+      },
+      MuiIconButton: {
+        styleOverrides: {
+          root: {
+            padding: 0,
+          },
+        },
+      },
+      MuiTab: {
+        styleOverrides: {
+          root: {
+            minWidth: "160px",
+          },
+        },
+      },
+    },
+  });
+
+  return (
+    <main className={classes.content}>
+      <div className={classes.toolbar} id="back-to-top-anchor" />
+      <MainContentMenuTopMenuItems
+        className={classes.noMargin}
+        topMenuItems={TOP_MENU_ITEMS}
+        tools={toolsAllowedForRole}
+      />
+      <ScrollTop
+        {...{ isCurrentLanguageLeftToRight: isCurrentLanguageLeftToRight }}
+      >
+        <ThemeProvider theme={themeFab}>
+          <Fab
+            color="primary"
+            size="large"
+            aria-label="scroll back to top"
+            className={classes.fabTop}
+          >
+            <KeyboardArrowUp />
+          </Fab>
+        </ThemeProvider>
+      </ScrollTop>
+      {error !== null && (
+        <MySnackbar
+          variant="error"
+          message={error}
+          onClick={() => dispatch(cleanError())}
+          onClose={() => {}}
+          sx={{ mr: 8 }}
+        />
+      )}
+      {errorNetwork !== null && (
+        <MySnackbar
+          variant="error"
+          message={errorNetwork}
+          onClick={() => dispatch(cleanErrorNetwork())}
+          onClose={() => {}}
+          sx={{ mr: 8 }}
+        />
+      )}
+      {cookiesUsage.active === null && (
+        <Snackbar
+          anchorOrigin={{
+            vertical: "top",
+            horizontal: "center",
+          }}
+          open={true}
+          message={keyword("cookies_message")}
+          action={[
+            <Button
+              key={"cookies_decline"}
+              color={"secondary"}
+              size={"small"}
+              onClick={() => dispatch(setFalse())}
+            >
+              {" "}
+              {keyword("cookies_decline")}{" "}
+            </Button>,
+            <Button
+              key={"cookies_accept"}
+              color={"primary"}
+              size={"small"}
+              onClick={() => dispatch(setTrue())}
+            >
+              {" "}
+              {keyword("cookies_accept")}{" "}
+            </Button>,
+          ]}
+        />
+      )}
+      <Feedback />
+    </main>
+  );
+};
+
+export default MainContent;