Format front-end code (asreview#1511)

cskaandorp · Aug 10, 2023 · 288b876 · 288b876
1 parent 8341b95
commit 288b876
Show file tree

Hide file tree

Showing 77 changed files with 875 additions and 860 deletions.
diff --git a/asreview/webapp/public/index.html b/asreview/webapp/public/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/asreview/webapp/src/App.js b/asreview/webapp/src/App.js
@@ -1,10 +1,10 @@
 import React from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector, useDispatch } from "react-redux";
 import { Routes, Route } from "react-router-dom";
 import "typeface-roboto";
 import { Box, CssBaseline, createTheme, useMediaQuery } from "@mui/material";
-import CircularProgress from '@mui/material/CircularProgress';
+import CircularProgress from "@mui/material/CircularProgress";
 import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles";
 import "./App.css";
 
@@ -22,7 +22,7 @@ import {
   SettingsDialog,
   SignIn,
   SignInOAuthCallback,
-  SignUpForm
+  SignUpForm,
 } from "./Components";
 import { HomePage } from "./HomeComponents";
 import { ProjectPage } from "./ProjectComponents";
@@ -37,19 +37,21 @@ import { useToggle } from "./hooks/useToggle";
 // Ensure that on localhost we use 'localhost' instead of '127.0.0.1'
 const currentDomain = window.location.href;
 if (currentDomain.includes("127.0.0.1")) {
-  let newDomain = currentDomain.replace("127.0.0.1", "localhost")
+  let newDomain = currentDomain.replace("127.0.0.1", "localhost");
   window.location.replace(newDomain);
 }
 
 const queryClient = new QueryClient();
 
 const App = (props) => {
   // state related stuff for booting the app
-  const [appReady, setAppReadyState] = React.useState(false)
+  const [appReady, setAppReadyState] = React.useState(false);
   const dispatch = useDispatch();
-  const authentication = useSelector(state => state.authentication);
-  const allowAccountCreation = useSelector(state => state.allow_account_creation);
-  const emailVerification = useSelector(state => state.email_verification);
+  const authentication = useSelector((state) => state.authentication);
+  const allowAccountCreation = useSelector(
+    (state) => state.allow_account_creation,
+  );
+  const emailVerification = useSelector((state) => state.email_verification);
 
   // Dialog state
   const [onSettings, toggleSettings] = useToggle();
@@ -75,74 +77,71 @@ const App = (props) => {
   // Navigation drawer state
   const [onNavDrawer, toggleNavDrawer] = useToggle(mobileScreen ? false : true);
 
-  // This effect does a boot request to gather information 
+  // This effect does a boot request to gather information
   // from the backend
   React.useEffect(() => {
     BaseAPI.boot({})
-    .then(response => {
-      dispatch(setBootData(response));
-      // set oauth services if there are any
-      if (response?.oauth) {
-        dispatch(setOAuthServices(response.oauth));
-      }
-    })
-    .catch(err => { console.log(err); });
-  }, [dispatch])
-
-  // This effect makes sure we handle routing at the 
+      .then((response) => {
+        dispatch(setBootData(response));
+        // set oauth services if there are any
+        if (response?.oauth) {
+          dispatch(setOAuthServices(response.oauth));
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, [dispatch]);
+
+  // This effect makes sure we handle routing at the
   // moment we know for sure if there is, or isn't authentication.
   React.useEffect(() => {
     if (
-        authentication !== undefined &&
-        allowAccountCreation !== undefined &&
-        emailVerification !== undefined
-      ) {
-        setAppReadyState(true);
+      authentication !== undefined &&
+      allowAccountCreation !== undefined &&
+      emailVerification !== undefined
+    ) {
+      setAppReadyState(true);
     } else {
-        setAppReadyState(false);
+      setAppReadyState(false);
     }
-  }, [authentication, allowAccountCreation, emailVerification])
-
+  }, [authentication, allowAccountCreation, emailVerification]);
 
   const render_sign_routes = () => {
     return (
       <>
-        { allowAccountCreation &&
+        {allowAccountCreation && (
           <Route
             path="/signup"
             element={<SignUpForm mobileScreen={mobileScreen} />}
           />
-        }
+        )}
         <Route
-            path="/signin"
-            element={<SignIn mobileScreen={mobileScreen} />}
+          path="/signin"
+          element={<SignIn mobileScreen={mobileScreen} />}
         />
         <Route
-            path="/oauth_callback"
-            element={<SignInOAuthCallback mobileScreen={mobileScreen} />}
+          path="/oauth_callback"
+          element={<SignInOAuthCallback mobileScreen={mobileScreen} />}
         />
         <Route
           path="/forgot_password"
           element={<ForgotPassword mobileScreen={mobileScreen} />}
         />
-        <Route
-          path="/confirm_account"
-          element={<ConfirmAccount/>}
-        />
+        <Route path="/confirm_account" element={<ConfirmAccount />} />
         <Route
           path="/reset_password"
           element={<ResetPassword mobileScreen={mobileScreen} />}
         />
-        {
-          emailVerification &&
+        {emailVerification && (
           <Route
             path="/confirm_account"
             element={<SignUpForm mobileScreen={mobileScreen} />}
           />
-        }
+        )}
       </>
     );
-  }
+  };
 
   const render_routes = () => {
     return (
@@ -191,7 +190,7 @@ const App = (props) => {
           />
         </Route>
       </>
-    )
+    );
   };
 
   return (
@@ -201,27 +200,26 @@ const App = (props) => {
           <CssBaseline />
 
           <div aria-label="nav and main content">
-            { (appReady === false) && 
+            {appReady === false && (
               <Box
                 display="flex"
                 justifyContent="center"
                 alignItems="center"
                 minHeight="100vh"
               >
-                <CircularProgress/>
+                <CircularProgress />
               </Box>
-            }
-            { (appReady === true) && (authentication === false) && 
-              <Routes>{render_routes()}</Routes> }
+            )}
+            {appReady === true && authentication === false && (
+              <Routes>{render_routes()}</Routes>
+            )}
 
-            { (appReady === true) && (authentication === true) && 
+            {appReady === true && authentication === true && (
               <Routes>
-                { render_sign_routes() }
-                <Route element={<PersistSignIn />}>
-                  { render_routes() }
-                </Route>
+                {render_sign_routes()}
+                <Route element={<PersistSignIn />}>{render_routes()}</Route>
               </Routes>
-            }
+            )}
           </div>
 
           {/* Dialogs */}
@@ -239,7 +237,6 @@ const App = (props) => {
             toggleUndoEnabled={toggleUndoEnabled}
           />
           <HelpDialog mobileScreen={mobileScreen} />
-
         </ThemeProvider>
       </StyledEngineProvider>
     </QueryClientProvider>

diff --git a/asreview/webapp/src/Components/AppBarWithinDialog.js b/asreview/webapp/src/Components/AppBarWithinDialog.js
@@ -134,7 +134,7 @@ const AppBarWithinDialog = React.forwardRef(
       startIconIsClose,
       title,
     },
-    ref
+    ref,
   ) => {
     return (
       <StyledAppBar className={classes.root} color={color} position="relative">
@@ -241,7 +241,7 @@ const AppBarWithinDialog = React.forwardRef(
         </Toolbar>
       </StyledAppBar>
     );
-  }
+  },
 );
 
 AppBarWithinDialog.propTypes = {

diff --git a/asreview/webapp/src/Components/ConfirmAccount.js b/asreview/webapp/src/Components/ConfirmAccount.js
@@ -8,33 +8,32 @@ const ConfirmAccount = () => {
   const [searchParams] = useSearchParams();
   const [errorMessage, setErrorMessage] = React.useState(false);
 
-  // This effect does a boot request to gather information 
+  // This effect does a boot request to gather information
   // from the backend
   React.useEffect(() => {
-    let userId = searchParams.get('user_id')
-    let token = searchParams.get('token');
+    let userId = searchParams.get("user_id");
+    let token = searchParams.get("token");
     console.log(userId, token);
 
     AuthAPI.confirmAccount({
       userId: userId,
-      token: token
+      token: token,
     })
-    .then(response => {
-      navigate('/signin')
-    })
-    .catch(err => {
-      // I'd like to have a flash!
-      console.log(err);
-      setErrorMessage('Could not confirm account: ' + err.message);
-    });
-  }, [navigate, searchParams])
+      .then((response) => {
+        navigate("/signin");
+      })
+      .catch((err) => {
+        // I'd like to have a flash!
+        console.log(err);
+        setErrorMessage("Could not confirm account: " + err.message);
+      });
+  }, [navigate, searchParams]);
 
   return (
     <div>
       {Boolean(errorMessage) && <InlineErrorHandler message={errorMessage} />}
     </div>
-  )
-
+  );
 };
 
-export default ConfirmAccount;
+export default ConfirmAccount;
diff --git a/asreview/webapp/src/Components/DrawerItem.js b/asreview/webapp/src/Components/DrawerItem.js
@@ -20,7 +20,7 @@ import {
   Download,
   Edit,
   History,
-  PeopleAlt
+  PeopleAlt,
 } from "@mui/icons-material";
 
 const PREFIX = "DrawerItem";

diff --git a/asreview/webapp/src/Components/DrawerItemContainer.js b/asreview/webapp/src/Components/DrawerItemContainer.js
@@ -24,7 +24,12 @@ import { Diversity3, Help, Payment, Settings } from "@mui/icons-material";
 
 import { DrawerItem, ElasGame } from "../Components";
 import { ProjectAPI } from "../api/index.js";
-import { communityURL, donateURL, projectModes, projectStatuses } from "../globals.js";
+import {
+  communityURL,
+  donateURL,
+  projectModes,
+  projectStatuses,
+} from "../globals.js";
 import Finished from "../images/ElasHoldingSIGNS_Finished.svg";
 import InReview from "../images/ElasHoldingSIGNS_InReview.svg";
 import SetUp from "../images/ElasHoldingSIGNS_SetUp.svg";
@@ -91,8 +96,8 @@ const StyledList = styled(List)(({ theme }) => ({
 
 const DrawerItemContainer = (props) => {
   const { project_id } = useParams();
-  const authentication = useSelector(state => state.authentication);
-  const allowTeams = useSelector(state => state.allow_teams);
+  const authentication = useSelector((state) => state.authentication);
+  const allowTeams = useSelector((state) => state.allow_teams);
   const queryClient = useQueryClient();
 
   const isFetchingInfo = useIsFetching("fetchInfo");
@@ -102,7 +107,7 @@ const DrawerItemContainer = (props) => {
   const fetchProjectInfo = React.useCallback(async () => {
     const data = await queryClient.fetchQuery(
       ["fetchInfo", { project_id }],
-      ProjectAPI.fetchInfo
+      ProjectAPI.fetchInfo,
     );
     setProjectInfo(data);
   }, [project_id, queryClient]);
@@ -154,11 +159,14 @@ const DrawerItemContainer = (props) => {
       path: "history",
       label: "History",
     },
-    ...(authentication && allowTeams ? 
-      [{
-        path: "team",
-        label: "Team",
-      }] : []),
+    ...(authentication && allowTeams
+      ? [
+          {
+            path: "team",
+            label: "Team",
+          },
+        ]
+      : []),
     {
       path: "export",
       label: "Export",

diff --git a/asreview/webapp/src/Components/ElasGame.js b/asreview/webapp/src/Components/ElasGame.js
@@ -71,13 +71,13 @@ const ElasGame = (props) => {
     if (paperSelected?.length < 2) {
       setPaperSelected((paperSelected) => paperSelected?.concat(image));
       setPaperSelectedIds((paperSelectedIds) =>
-        paperSelectedIds?.concat(index)
+        paperSelectedIds?.concat(index),
       );
 
       if (paperSelected?.length === 1) {
         if (paperSelected[0] === image) {
           setOpenCards((openCards) =>
-            openCards?.concat([paperSelected[0], image])
+            openCards?.concat([paperSelected[0], image]),
           );
         }
         setTimeout(() => {