Format Javascript code with Prettier (asreview#540)

PeterLombaers · Apr 1, 2021 · 720b9fd · 720b9fd
1 parent cb912a4
commit 720b9fd
Show file tree

Hide file tree

Showing 77 changed files with 4,018 additions and 4,503 deletions.
diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
@@ -20,12 +20,12 @@ Start the Python API server with the Flask development environment
 
 	export FLASK_ENV=development
 	asreview lab
-	
-For Windows, use 
+
+For Windows, use
 
 	set FLASK_ENV=development
 	asreview lab
-	
+
 ### Front end
 
 Install both [npm][1] and Python
@@ -34,8 +34,8 @@ Start the Python API server with the Flask development environment. Before the f
 
 	export FLASK_ENV=development
 	asreview lab
-	
-For Windows, use 
+
+For Windows, use
 
 	set FLASK_ENV=development
 	asreview lab
@@ -53,6 +53,15 @@ Open the web browser at `localhost:3000`
 
 **Important**: Ignore `localhost:5000`. You can also find a front end on `:5000` but this is not relevant for the current front end development step.
 
+Please make use of Prettier (https://prettier.io/docs/en/install.html) to
+format React/Javascript code. Use the following code to format all files in
+the webapp folder.
+
+```
+cd asreview/webapp
+npx prettier --write .
+```
+
 [1]:	https://www.npmjs.com/get-npm
 [2]:	https://reactjs.org/
 

diff --git a/asreview/webapp/.prettierignore b/asreview/webapp/.prettierignore
@@ -0,0 +1,5 @@
+node_modules
+build
+*.py
+package-lock.json
+package.json
diff --git a/asreview/webapp/public/index.html b/asreview/webapp/public/index.html
@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Smart software for systematic reviews."
-    />
+    <meta name="description" content="Smart software for systematic reviews." />
     <link rel="apple-touch-icon" href="logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

diff --git a/asreview/webapp/src/App.css b/asreview/webapp/src/App.css
@@ -3,33 +3,33 @@
 }
 
 .navBar {
-  background-color:#ffcc00
+  background-color: #ffcc00;
 }
 .btnGrey {
-  background-color:#bcbcbb
+  background-color: #bcbcbb;
 }
-.btnBlue { 
-  background-color:#00a6e1
+.btnBlue {
+  background-color: #00a6e1;
 }
 .btnGreen {
-  background-color:#5dd41b
+  background-color: #5dd41b;
 }
 .btnRed {
-  background-color:#df462e
+  background-color: #df462e;
 }
 
 .textSizesmallest {
-	font-size: 80%!important;
+  font-size: 80% !important;
 }
 .textSizesmall {
-	font-size: 90%!important;
+  font-size: 90% !important;
 }
 .textSizenormal {
-	font-size: 100%!important;
+  font-size: 100% !important;
 }
 .textSizelarge {
-	font-size: 120%!important;
+  font-size: 120% !important;
 }
 .textSizelargest {
-	font-size: 140%!important;
-}
+  font-size: 140% !important;
+}
diff --git a/asreview/webapp/src/App.js b/asreview/webapp/src/App.js
@@ -1,62 +1,47 @@
-import React from 'react'
-import {
-  CssBaseline,
-  createMuiTheme
-} from '@material-ui/core'
-import { ThemeProvider } from '@material-ui/core/styles';
-import './App.css';
-
-import {
-  Header,
-  ReviewZone,
-  ExportDialog,
-  HistoryDialog,
-}
-from './Components'
-import {
-  PreReviewZone,
-  StartReview,
-  ProjectPage,
-} from './PreReviewComponents'
-import ReviewZoneComplete from './PostReviewComponents/ReviewZoneComplete'
-import Projects from './Projects'
-import SettingsDialog from './SettingsDialog'
-import ExitDialog from './ExitDialog'
-import WelcomeScreen from './WelcomeScreen'
+import React from "react";
+import { CssBaseline, createMuiTheme } from "@material-ui/core";
+import { ThemeProvider } from "@material-ui/core/styles";
+import "./App.css";
+
+import { Header, ReviewZone, ExportDialog, HistoryDialog } from "./Components";
+import { PreReviewZone, StartReview, ProjectPage } from "./PreReviewComponents";
+import ReviewZoneComplete from "./PostReviewComponents/ReviewZoneComplete";
+import Projects from "./Projects";
+import SettingsDialog from "./SettingsDialog";
+import ExitDialog from "./ExitDialog";
+import WelcomeScreen from "./WelcomeScreen";
 import {
   useDarkMode,
   useTextSize,
   useUndoEnabled,
   useKeyPressEnabled,
-} from './hooks/SettingsHooks'
+} from "./hooks/SettingsHooks";
 
-import 'typeface-roboto'
+import "typeface-roboto";
 
 import { connect } from "react-redux";
 
 // redux config
-import { setAppState } from './redux/actions'
+import { setAppState } from "./redux/actions";
 
-
-const mapStateToProps = state => {
+const mapStateToProps = (state) => {
   return {
     app_state: state.app_state,
     project_id: state.project_id,
   };
 };
 
-
 function mapDispatchToProps(dispatch) {
-    return({
-        setAppState: (app_state) => {dispatch(setAppState(app_state))}
-    })
+  return {
+    setAppState: (app_state) => {
+      dispatch(setAppState(app_state));
+    },
+  };
 }
 
-
 const App = (props) => {
-
-  const [theme, toggleDarkMode] = useDarkMode()
-  const muiTheme = createMuiTheme(theme)
+  const [theme, toggleDarkMode] = useDarkMode();
+  const muiTheme = createMuiTheme(theme);
 
   const [openSettings, setSettingsOpen] = React.useState(false);
   const [exit, setExit] = React.useState(false);
@@ -69,7 +54,7 @@ const App = (props) => {
   const [keyPressEnabled, toggleKeyPressEnabled] = useKeyPressEnabled();
 
   const toggleAuthors = () => {
-    setAuthors(a => (!a));
+    setAuthors((a) => !a);
   };
 
   const handleClickOpen = () => {
@@ -80,82 +65,71 @@ const App = (props) => {
     setSettingsOpen(false);
   };
 
-
   const toggleExit = () => {
-    setExit(a => (!a));
+    setExit((a) => !a);
   };
 
   const toggleExportResult = () => {
-    setExportResult(a => (!a));
+    setExportResult((a) => !a);
   };
 
   const toggleHistory = () => {
-    setHistory(a => (!a));
+    setHistory((a) => !a);
   };
 
-
   return (
-      <ThemeProvider theme={muiTheme}>
-      <CssBaseline/>
-      {props.app_state === 'boot' &&
-      <WelcomeScreen/>
-      }
-      {props.app_state !== 'boot' &&
-      <Header
-
-        /* Handle the app review drawer */
-        toggleExportResult={toggleExportResult}
-        toggleHistory={toggleHistory}
-        toggleDarkMode={toggleDarkMode}
-        handleClickOpen={handleClickOpen}
-        handleTextSizeChange={handleTextSizeChange}
-        toggleExit={toggleExit}
-      />
-      }
-
-      {props.app_state === 'projects' &&
-      <Projects
-        handleAppState={props.setAppState}
-      />
-      }
-
-      {props.app_state === 'project-page' &&
-      <ProjectPage
-        handleAppState={props.setAppState}
-        toggleExportResult={toggleExportResult}
-      />
-      }
-
-      {props.app_state === 'review-init' &&
-      <PreReviewZone
-        handleAppState={props.setAppState}
-      />
-      }
-
-      {props.app_state === 'train-first-model' &&
-      <StartReview
-        handleAppState={props.setAppState}
-      />
-      }
-
-      {(props.app_state === 'review') &&
-      <ReviewZone
-        handleAppState={props.setAppState}
-        showAuthors={authors}
-        textSize={textSize}
-        undoEnabled={undoEnabled}
-        keyPressEnabled={keyPressEnabled}
-      />
-      }
-
-      {props.app_state === 'review-complete' &&
-      <ReviewZoneComplete
-        handleAppState={props.setAppState}
-        toggleExportResult={toggleExportResult}
-      />
-      }
-
-    {/* Dialogs */}
+    <ThemeProvider theme={muiTheme}>
+      <CssBaseline />
+      {props.app_state === "boot" && <WelcomeScreen />}
+      {props.app_state !== "boot" && (
+        <Header
+          /* Handle the app review drawer */
+          toggleExportResult={toggleExportResult}
+          toggleHistory={toggleHistory}
+          toggleDarkMode={toggleDarkMode}
+          handleClickOpen={handleClickOpen}
+          handleTextSizeChange={handleTextSizeChange}
+          toggleExit={toggleExit}
+        />
+      )}
+
+      {props.app_state === "projects" && (
+        <Projects handleAppState={props.setAppState} />
+      )}
+
+      {props.app_state === "project-page" && (
+        <ProjectPage
+          handleAppState={props.setAppState}
+          toggleExportResult={toggleExportResult}
+        />
+      )}
+
+      {props.app_state === "review-init" && (
+        <PreReviewZone handleAppState={props.setAppState} />
+      )}
+
+      {props.app_state === "train-first-model" && (
+        <StartReview handleAppState={props.setAppState} />
+      )}
+
+      {props.app_state === "review" && (
+        <ReviewZone
+          handleAppState={props.setAppState}
+          showAuthors={authors}
+          textSize={textSize}
+          undoEnabled={undoEnabled}
+          keyPressEnabled={keyPressEnabled}
+        />
+      )}
+
+      {props.app_state === "review-complete" && (
+        <ReviewZoneComplete
+          handleAppState={props.setAppState}
+          toggleExportResult={toggleExportResult}
+        />
+      )}
+
+      {/* Dialogs */}
       <SettingsDialog
         openSettings={openSettings}
         handleClose={handleClose}
@@ -170,25 +144,16 @@ const App = (props) => {
         toggleKeyPressEnabled={toggleKeyPressEnabled}
         keyPressEnabled={keyPressEnabled}
       />
-      <ExitDialog
-        toggleExit={toggleExit}
-        exit={exit}
-      />
+      <ExitDialog toggleExit={toggleExit} exit={exit} />
       <ExportDialog
         toggleExportResult={toggleExportResult}
         exportResult={exportResult}
       />
-      {(props.app_state === 'review') &&
-      <HistoryDialog
-        toggleHistory={toggleHistory}
-        history={history}
-      />
-      }
+      {props.app_state === "review" && (
+        <HistoryDialog toggleHistory={toggleHistory} history={history} />
+      )}
     </ThemeProvider>
   );
-}
+};
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(App);
+export default connect(mapStateToProps, mapDispatchToProps)(App);
diff --git a/asreview/webapp/src/App.test.js b/asreview/webapp/src/App.test.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
 
-it('renders without crashing', () => {
-  const div = document.createElement('div');
+it("renders without crashing", () => {
+  const div = document.createElement("div");
   ReactDOM.render(<App />, div);
   ReactDOM.unmountComponentAtNode(div);
 });