Task review app - linted code with Prettier

examples/remote_procedure/mnist_for_review/webapp/src/app.jsx

@@ -34,15 +34,15 @@ function uuidv4() {
 
 function RemoteProcedureApp() {
   const searchParams = new URLSearchParams(window.location.search);
-  const reviewMode = searchParams.get('review_mode');
+  const reviewMode = searchParams.get("review_mode");
 
   const [reviewData, setReviewData] = React.useState(null);
 
   // [RECEIVING WIDGET DATA]
   // ---
-  window.onmessage = function(e) {
+  window.onmessage = function (e) {
     const data = JSON.parse(e.data);
-    setReviewData(data['REVIEW_DATA']);
+    setReviewData(data["REVIEW_DATA"]);
   };
   // ---
 
@@ -52,13 +52,9 @@ function RemoteProcedureApp() {
   // ---
   // Return review before other code that contains any request to server
   if (reviewMode) {
-    return <div>
-      {reviewData && (
-        <ReviewFrontend
-          reviewData={reviewData}
-        />
-      )}
-    </div>;
+    return (
+      <div>{reviewData && <ReviewFrontend reviewData={reviewData} />}</div>
+    );
   }
   // ---
 

examples/remote_procedure/mnist_for_review/webapp/src/components/core_components.jsx

@@ -210,7 +210,7 @@ function ReviewAnnotationCanvas({ index, value }) {
       style={{ float: "left", padding: "3px", borderStyle: "solid" }}
     >
       <div data-cy={`canvas-mouse-down-container-${index}`}>
-        <img src={value['imgData']} key={'img' + index} alt={'img' + index} />
+        <img src={value["imgData"]} key={"img" + index} alt={"img" + index} />
       </div>
       <button
         data-cy={`clear-button-${index}`}
@@ -222,15 +222,15 @@ function ReviewAnnotationCanvas({ index, value }) {
       </button>
       <br />
       <span data-cy={`current-annotation-${index}`}>
-        Current Annotation: {value['currentAnnotation']}
+        Current Annotation: {value["currentAnnotation"]}
       </span>
       <br />
       Annotation Correct?{" "}
       <input
         type="checkbox"
         data-cy={`correct-checkbox-${index}`}
         disabled={true}
-        checked={!!value['isCorrect']}
+        checked={!!value["isCorrect"]}
       />
       <Fragment>
         <br />
@@ -239,7 +239,7 @@ function ReviewAnnotationCanvas({ index, value }) {
         <input
           type="text"
           disabled={true}
-          value={value['trueAnnotation']}
+          value={value["trueAnnotation"]}
           data-cy={`correct-text-input-${index}`}
         />
       </Fragment>
@@ -250,14 +250,12 @@ function ReviewAnnotationCanvas({ index, value }) {
 
 // [RECEIVING WIDGET DATA]
 // ---
-function ReviewFrontend({
-  reviewData,
-}) {
+function ReviewFrontend({ reviewData }) {
   return (
     <div>
       <Instructions taskData={{}} />
       <div>
-        {reviewData['final_submission']['annotations'].map((_d, idx) => (
+        {reviewData["final_submission"]["annotations"].map((_d, idx) => (
           <ReviewAnnotationCanvas
             index={idx}
             key={"Annotation-" + String(idx)}
@@ -281,4 +279,9 @@ function ReviewFrontend({
 }
 // ---
 
-export { LoadingScreen, TaskFrontend as BaseFrontend, ReviewFrontend,Instructions };
+export {
+  LoadingScreen,
+  TaskFrontend as BaseFrontend,
+  ReviewFrontend,
+  Instructions,
+};

mephisto/abstractions/databases/local_database.py

@@ -219,12 +219,12 @@ def is_unique_failure(e: sqlite3.IntegrityError) -> bool:
         tips INTEGER,
         blocked_worker BOOLEAN DEFAULT false,
         /* ID of `db.qualifications` (not `db.granted_qualifications`) */
-        updated_qualification_id INTEGER,  
+        updated_qualification_id INTEGER,
         updated_qualification_value INTEGER,
         /* ID of `db.qualifications` (not `db.granted_qualifications`) */
         revoked_qualification_id INTEGER,
         created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-        
+
         FOREIGN KEY (unit_id) REFERENCES units (unit_id),
         FOREIGN KEY (worker_id) REFERENCES workers (worker_id),
         FOREIGN KEY (task_id) REFERENCES tasks (task_id)

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/public/index.html

@@ -1,10 +1,10 @@
 <!--
-  Copyright (c) Facebook, Inc. and its affiliates.
-  This source code is licensed under the MIT license found in the
-  LICENSE file in the root directory of this source tree.
+Copyright 2017-present, Facebook, Inc.
+All rights reserved.
+This source code is licensed under the license found in the
+LICENSE file in the root directory of this source tree.
 -->
 
-
 <!DOCTYPE html>
 <html lang="en">
   <head>

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/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,16 +4,13 @@
  * 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>