Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Format front-end code #1511

Merged
merged 1 commit into from
Aug 10, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
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