Task review app - linted code with Prettier

mephisto/client/review_app/client/package.json

@@ -9,6 +9,7 @@
     "lodash": "^4.17.21",
     "mephisto-task": "^2.0.4",
     "moment": "^2.29.4",
+    "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-bootstrap": "^2.8.0",
     "react-canvas-draw": "^1.2.1",
@@ -21,7 +22,8 @@
   },
   "scripts": {
     "start": "REACT_APP__MOCK_RESPONSES=false react-scripts start",
-    "build": "react-scripts build"
+    "build": "react-scripts build",
+    "lint": "prettier --write '{src,test}/**/*.{css,html,js,jsx,json,ts,tsx,yaml,yml}'"
   },
   "eslintConfig": {
     "extends": [

mephisto/client/review_app/client/src/App/App.css

@@ -4,7 +4,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-
 .app {
   text-align: center;
 }

mephisto/client/review_app/client/src/App/App.tsx

@@ -4,33 +4,40 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import 'bootstrap/dist/css/bootstrap.min.css';
-import 'bootstrap/dist/js/bootstrap.bundle.min';
-import Errors from 'components/Errors/Errors';
-import HomePage from 'pages/HomePage/HomePage';
-import TaskPage from 'pages/TaskPage/TaskPage';
-import TasksPage from 'pages/TasksPage/TasksPage';
-import * as React from 'react';
-import { Route, Routes } from 'react-router-dom';
-import urls from 'urls';
-import css from './App.css';
-
+import "bootstrap/dist/css/bootstrap.min.css";
+import "bootstrap/dist/js/bootstrap.bundle.min";
+import Errors from "components/Errors/Errors";
+import HomePage from "pages/HomePage/HomePage";
+import TaskPage from "pages/TaskPage/TaskPage";
+import TasksPage from "pages/TasksPage/TasksPage";
+import * as React from "react";
+import { Route, Routes } from "react-router-dom";
+import urls from "urls";
+import css from "./App.css";
 
 function App() {
   const [errors, setErrors] = React.useState<string[]>([]);
 
   return (
     <div className={css.app}>
       <Routes>
-        <Route path={urls.client.home} element={<HomePage setErrors={setErrors} />} />
-        <Route path={urls.client.task(':id')} element={<TaskPage setErrors={setErrors} />} />
-        <Route path={urls.client.tasks} element={<TasksPage setErrors={setErrors} />} />
+        <Route
+          path={urls.client.home}
+          element={<HomePage setErrors={setErrors} />}
+        />
+        <Route
+          path={urls.client.task(":id")}
+          element={<TaskPage setErrors={setErrors} />}
+        />
+        <Route
+          path={urls.client.tasks}
+          element={<TasksPage setErrors={setErrors} />}
+        />
       </Routes>
 
       <Errors errorList={errors} />
     </div>
   );
 }
 
-
 export default App;

mephisto/client/review_app/client/src/components/ClosableErrorAlert/ClosableErrorAlert.css

@@ -16,7 +16,7 @@
 
 .error-alert .btn-close {
   padding: 10px;
-  font-size: 13px
+  font-size: 13px;
 }
 
 .error-alert .alert-heading {

mephisto/client/review_app/client/src/components/ClosableErrorAlert/ClosableErrorAlert.tsx

@@ -4,17 +4,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import * as React from 'react';
-import { useState } from 'react';
-import { Alert } from 'react-bootstrap';
-import './ClosableErrorAlert.css';
-
+import * as React from "react";
+import { useState } from "react";
+import { Alert } from "react-bootstrap";
+import "./ClosableErrorAlert.css";
 
 interface PropsType {
   children: any;
 }
 
-
 function ClosableErrorAlert(props: PropsType) {
   const [show, setShow] = useState<boolean>(true);
 
@@ -33,5 +31,4 @@ function ClosableErrorAlert(props: PropsType) {
   }
 }
 
-
 export default ClosableErrorAlert;

mephisto/client/review_app/client/src/components/Errors/Errors.tsx

@@ -4,23 +4,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import * as React from 'react';
-import './Errors.css';
-import ClosableErrorAlert from '../ClosableErrorAlert/ClosableErrorAlert';
-
+import * as React from "react";
+import "./Errors.css";
+import ClosableErrorAlert from "../ClosableErrorAlert/ClosableErrorAlert";
 
 interface PropsType {
   errorList: string[];
 }
 
-
 function Errors(props: PropsType) {
-  return <div className={"errors"}>
-    {props.errorList.map((error: string, i: number) => {
-      return <ClosableErrorAlert key={"error-alert-" + i}>{error}</ClosableErrorAlert>
-    })}
-  </div>;
+  return (
+    <div className={"errors"}>
+      {props.errorList.map((error: string, i: number) => {
+        return (
+          <ClosableErrorAlert key={"error-alert-" + i}>
+            {error}
+          </ClosableErrorAlert>
+        );
+      })}
+    </div>
+  );
 }
 
-
 export default Errors;

mephisto/client/review_app/client/src/components/mnist_core_components_copied.js

@@ -146,14 +146,14 @@ export function TaskFrontend({ taskData, classifyDigit, handleSubmit }) {
   const [annotations, updateAnnotations] = React.useReducer(
     (currentAnnotation, { updateIdx, updatedAnnotation }) => {
       return currentAnnotation.map((val, idx) =>
-        idx == updateIdx ? updatedAnnotation : val
+        idx == updateIdx ? updatedAnnotation : val,
       );
     },
     Array(NUM_ANNOTATIONS).fill({
       currentAnnotation: null,
       trueAnnotation: null,
       isCorrect: null,
-    })
+    }),
   );
   let canSubmit =
     annotations.filter((a) => a.isCorrect === true || a.trueAnnotation !== "")

mephisto/client/review_app/client/src/consts/http.ts

@@ -4,12 +4,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-
 export const Status = {
   HTTP_200_OK: 200,
   HTTP_201_CREATED: 201,
   HTTP_400_BAD_REQUEST: 400,
   HTTP_403_FORBIDDEN: 403,
   HTTP_404_NOT_FOUND: 404,
   HTTP_500_INTERNAL_SERVER_ERROR: 500,
-}
+};

mephisto/client/review_app/client/src/consts/review.ts

@@ -4,7 +4,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-
 export const ReviewType = {
   APPROVE: "approve",
   REJECT: "reject",

mephisto/client/review_app/client/src/default.css

@@ -4,16 +4,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
 }

mephisto/client/review_app/client/src/index.tsx

@@ -4,19 +4,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import App from "App/App";
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import "./default.css";
 
-import App from 'App/App';
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom';
-import './default.css';
-
-
-const root = createRoot(document.getElementById('root'));
-
+const root = createRoot(document.getElementById("root"));
 
 root.render(
   <BrowserRouter>
     <App />
-  </BrowserRouter>
+  </BrowserRouter>,
 );

mephisto/client/review_app/client/src/pages/HomePage/HomePage.css

@@ -4,7 +4,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-
 .home {
-
 }

mephisto/client/review_app/client/src/pages/HomePage/HomePage.tsx

@@ -4,19 +4,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-
-import { useEffect } from 'react';
-import * as React from 'react';
-import { useNavigate } from 'react-router-dom';
-import urls from 'urls';
-import './HomePage.css';
-
+import * as React from "react";
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import urls from "urls";
+import "./HomePage.css";
 
 interface PropsType {
   setErrors: Function;
 }
 
-
 function HomePage(props: PropsType) {
   const navigate = useNavigate();
   const { localStorage } = window;
@@ -29,5 +26,4 @@ function HomePage(props: PropsType) {
   return null;
 }
 
-
 export default HomePage;

mephisto/client/review_app/client/src/pages/TaskPage/ModalForm/ModalForm.css

@@ -4,9 +4,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.review-form >* input,
-.review-form >* select,
-.review-form >* textarea {
+.review-form > * input,
+.review-form > * select,
+.review-form > * textarea {
   border: 1px solid black;
 }