Skip to content

Commit

Permalink
Format front-end code (asreview#1511)
Browse files Browse the repository at this point in the history
  • Loading branch information
terrymyc committed Aug 10, 2023
1 parent 8341b95 commit 288b876
Show file tree
Hide file tree
Showing 77 changed files with 875 additions and 860 deletions.
2 changes: 1 addition & 1 deletion asreview/webapp/public/index.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
Expand Down
107 changes: 52 additions & 55 deletions asreview/webapp/src/App.js
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -22,7 +22,7 @@ import {
SettingsDialog,
SignIn,
SignInOAuthCallback,
SignUpForm
SignUpForm,
} from "./Components";
import { HomePage } from "./HomeComponents";
import { ProjectPage } from "./ProjectComponents";
Expand All @@ -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();
Expand All @@ -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 (
Expand Down Expand Up @@ -191,7 +190,7 @@ const App = (props) => {
/>
</Route>
</>
)
);
};

return (
Expand All @@ -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 */}
Expand All @@ -239,7 +237,6 @@ const App = (props) => {
toggleUndoEnabled={toggleUndoEnabled}
/>
<HelpDialog mobileScreen={mobileScreen} />

</ThemeProvider>
</StyledEngineProvider>
</QueryClientProvider>
Expand Down
4 changes: 2 additions & 2 deletions asreview/webapp/src/Components/AppBarWithinDialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ const AppBarWithinDialog = React.forwardRef(
startIconIsClose,
title,
},
ref
ref,
) => {
return (
<StyledAppBar className={classes.root} color={color} position="relative">
Expand Down Expand Up @@ -241,7 +241,7 @@ const AppBarWithinDialog = React.forwardRef(
</Toolbar>
</StyledAppBar>
);
}
},
);

AppBarWithinDialog.propTypes = {
Expand Down
31 changes: 15 additions & 16 deletions asreview/webapp/src/Components/ConfirmAccount.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
2 changes: 1 addition & 1 deletion asreview/webapp/src/Components/DrawerItem.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {
Download,
Edit,
History,
PeopleAlt
PeopleAlt,
} from "@mui/icons-material";

const PREFIX = "DrawerItem";
Expand Down
26 changes: 17 additions & 9 deletions asreview/webapp/src/Components/DrawerItemContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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");
Expand All @@ -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]);
Expand Down Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions asreview/webapp/src/Components/ElasGame.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
Loading

0 comments on commit 288b876

Please sign in to comment.