Merge 742c6b6 into b9c3817

thewca · Oct 3, 2020 · 9267fee · 9267fee
2 parents b9c3817 + 742c6b6
commit 9267fee
Show file tree

Hide file tree

Showing 17 changed files with 137 additions and 73 deletions.
diff --git a/tnoodle-ui/.prettierignore b/tnoodle-ui/.prettierignore
@@ -0,0 +1,7 @@
+# Ignore artifacts:
+build
+coverage
+.gradle
+
+public/manifest.json
+src/serviceWorker.js
diff --git a/tnoodle-ui/.prettierrc.json b/tnoodle-ui/.prettierrc.json
@@ -0,0 +1 @@
+{}
diff --git a/tnoodle-ui/build.gradle.kts b/tnoodle-ui/build.gradle.kts
@@ -1,6 +1,6 @@
 import com.moowork.gradle.node.NodeExtension
 
-description = "A web ui for TNoodle that uses modern technology, and finally gets rid of the stupid legacy interface"
+description = "A web ui for TNoodle that uses modern technology"
 
 plugins {
     base
@@ -36,12 +36,17 @@ tasks.getByName("assemble") {
 
 tasks.getByName("check") {
     dependsOn("yarn_test")
+    dependsOn("yarn_prettier")
 }
 
 tasks.getByName("yarn_test") {
     dependsOn("yarn_install")
 }
 
+tasks.getByName("yarn_prettier") {
+    dependsOn("yarn_install")
+}
+
 tasks.create<Zip>("packageReactFrontend") {
     dependsOn("yarn_build")
 

diff --git a/tnoodle-ui/package.json b/tnoodle-ui/package.json
@@ -24,7 +24,8 @@
         "build": "react-scripts build",
         "test": "react-scripts test --watchAll --watchAll=false --coverage",
         "eject": "react-scripts eject",
-        "coveralls": "cat ./coverage/lcov.info | coveralls"
+        "coveralls": "cat ./coverage/lcov.info | coveralls",
+        "prettier": "prettier --check ."
     },
     "browserslist": {
         "production": [
@@ -43,7 +44,8 @@
         "@testing-library/react": "^11.0.4",
         "@testing-library/user-event": "^12.1.4",
         "coveralls": "^3.1.0",
-        "http-proxy-middleware": "^1.0.5"
+        "http-proxy-middleware": "^1.0.5",
+        "prettier": "2.1.2"
     },
     "jest": {
         "collectCoverageFrom": [

diff --git a/tnoodle-ui/public/index.html b/tnoodle-ui/public/index.html
@@ -1,23 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="TNoodle: the official scrambler program for WCA."
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <head>
+        <meta charset="utf-8" />
+        <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <meta
+            name="description"
+            content="TNoodle: the official scrambler program for WCA."
+        />
+        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
-    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 
-    <title>TNoodle</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
+        <title>TNoodle</title>
+    </head>
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+    </body>
 </html>
diff --git a/tnoodle-ui/src/main/api/tnoodle.socket.js b/tnoodle-ui/src/main/api/tnoodle.socket.js
@@ -28,7 +28,7 @@ export class ScrambleClient {
                 if (this.state === SCRAMBLING_STATES.DONE && cls.wasClean) {
                     let resultObject = {
                         contentType: this.contentType,
-                        payload: this.resultPayload
+                        payload: this.resultPayload,
                     };
 
                     resolve(resultObject);
@@ -68,13 +68,13 @@ export class ScrambleClient {
 let wsTNoodleBackend = new URL(tNoodleBackend);
 wsTNoodleBackend.protocol = "ws:";
 
-const BASE_URL = wsTNoodleBackend.toString().replace(/\/$/g, '');
+const BASE_URL = wsTNoodleBackend.toString().replace(/\/$/g, "");
 
 const SCRAMBLING_STATES = {
     IDLE: "IDLE",
     INITIATE: "INITIATE",
     SCRAMBLING: "SCRAMBLING",
     COMPUTED_TYPE: "COMPUTED_TYPE",
     COMPUTED_DATA: "COMPUTED_DATA",
-    DONE: "DONE"
+    DONE: "DONE",
 };
diff --git a/tnoodle-ui/src/main/components/EventPicker.jsx b/tnoodle-ui/src/main/components/EventPicker.jsx
@@ -18,7 +18,7 @@ const mapStateToProps = (store) => ({
     generatingScrambles: store.generatingScrambles,
     scramblingProgressTarget: store.scramblingProgressTarget,
     scramblingProgressCurrent: store.scramblingProgressCurrent,
-    fileZipBlob: store.fileZipBlob
+    fileZipBlob: store.fileZipBlob,
 });
 
 const mapDispatchToProps = {
@@ -196,27 +196,32 @@ const EventPicker = connect(
             let current = this.props.scramblingProgressCurrent[eventId] || 0;
             let target = this.props.scramblingProgressTarget[eventId];
 
-            if (rounds.length === 0 || !this.props.generatingScrambles || target === undefined) {
+            if (
+                rounds.length === 0 ||
+                !this.props.generatingScrambles ||
+                target === undefined
+            ) {
                 return;
             }
 
-            let progress = (current / target) * 100
+            let progress = (current / target) * 100;
             let miniThreshold = 2;
 
             if (progress === 0) {
                 progress = miniThreshold;
             }
 
             return (
-                <ProgressBar animated variant={
-                    progress === 100
-                        ? "success"
-                        : "info"
-                } now={progress} label={
-                    progress === 100 || progress < miniThreshold
-                        ? ""
-                        : `${current} / ${target}`
-                }/>
+                <ProgressBar
+                    animated
+                    variant={progress === 100 ? "success" : "info"}
+                    now={progress}
+                    label={
+                        progress === 100 || progress < miniThreshold
+                            ? ""
+                            : `${current} / ${target}`
+                    }
+                />
             );
         };
 

diff --git a/tnoodle-ui/src/main/components/Main.jsx b/tnoodle-ui/src/main/components/Main.jsx
@@ -10,7 +10,7 @@ import {
     updateGeneratingScrambles,
     updateScramblingProgressTarget,
     updateScramblingProgressCurrentEvent,
-    resetScramblingProgressCurrent
+    resetScramblingProgressCurrent,
 } from "../redux/ActionCreators";
 import { connect } from "react-redux";
 import { isUsingStaging } from "../api/wca.api";
@@ -24,15 +24,15 @@ const mapStateToProps = (store) => ({
     officialZip: store.officialZip,
     fileZipBlob: store.fileZipBlob,
     translations: store.translations,
-    generatingScrambles: store.generatingScrambles
+    generatingScrambles: store.generatingScrambles,
 });
 
 const mapDispatchToProps = {
     updateFileZipBlob,
     updateGeneratingScrambles,
     updateScramblingProgressTarget,
     updateScramblingProgressCurrentEvent,
-    resetScramblingProgressCurrent
+    resetScramblingProgressCurrent,
 };
 
 const Main = connect(
@@ -67,7 +67,10 @@ const Main = connect(
                 ...this.state,
                 competitionNameFileZip: this.props.wcif.name,
             });
-            let scrambleClient = new ScrambleClient(this.props.updateScramblingProgressTarget, this.props.updateScramblingProgressCurrentEvent);
+            let scrambleClient = new ScrambleClient(
+                this.props.updateScramblingProgressTarget,
+                this.props.updateScramblingProgressCurrentEvent
+            );
             fetchZip(
                 scrambleClient,
                 this.props.wcif,

diff --git a/tnoodle-ui/src/main/components/VersionInfo.jsx b/tnoodle-ui/src/main/components/VersionInfo.jsx
@@ -33,7 +33,7 @@ const VersionInfo = connect(
                 if (!response) {
                     return;
                 }
-                let {current, allowed, publicKeyBytes} = response;
+                let { current, allowed, publicKeyBytes } = response;
                 this.setState({
                     ...this.state,
                     currentTnoodle: current,
@@ -48,7 +48,12 @@ const VersionInfo = connect(
                 if (!response) {
                     return;
                 }
-                let {projectName, projectVersion, signedBuild, signatureKeyBytes} = response;
+                let {
+                    projectName,
+                    projectVersion,
+                    signedBuild,
+                    signatureKeyBytes,
+                } = response;
                 this.setState({
                     ...this.state,
                     // Running version is based on projectName and projectVersion
@@ -65,7 +70,10 @@ const VersionInfo = connect(
         }
 
         signatureValid() {
-            return this.state.signedBuild && this.state.signatureKeyBytes === this.state.wcaPublicKeyBytes;
+            return (
+                this.state.signedBuild &&
+                this.state.signatureKeyBytes === this.state.wcaPublicKeyBytes
+            );
         }
 
         // This method avoids global state update while rendering
@@ -102,18 +110,19 @@ const VersionInfo = connect(
                     return (
                         <div className="alert alert-info m-0">
                             You are running {runningVersion}, which is still
-                            allowed, but you should upgrade to {currentTnoodle.name}{" "}
-                            available <a href={currentTnoodle.download}>here</a>{" "}
-                            as soon as possible.
+                            allowed, but you should upgrade to{" "}
+                            {currentTnoodle.name} available{" "}
+                            <a href={currentTnoodle.download}>here</a> as soon
+                            as possible.
                         </div>
                     );
                 }
 
                 return (
                     <div className="alert alert-danger m-0">
                         You are running {runningVersion}, which is not allowed.
-                        Do not use scrambles generated in any official competition
-                        and consider downloading the latest version{" "}
+                        Do not use scrambles generated in any official
+                        competition and consider downloading the latest version{" "}
                         <a href={currentTnoodle.download}>here</a>.
                     </div>
                 );
@@ -123,9 +132,9 @@ const VersionInfo = connect(
             if (!signedBuild) {
                 return (
                     <div className="alert alert-danger m-0">
-                        You are running an unsigned TNoodle release.
-                        Do not use scrambles generated in any official competition
-                        and consider downloading the official program{" "}
+                        You are running an unsigned TNoodle release. Do not use
+                        scrambles generated in any official competition and
+                        consider downloading the official program{" "}
                         <a href={currentTnoodle.download}>here</a>
                     </div>
                 );

diff --git a/tnoodle-ui/src/main/redux/Reducers.js b/tnoodle-ui/src/main/redux/Reducers.js
@@ -126,20 +126,28 @@ export const Reducer = (store, action) => {
     }
 
     if (action.type === ActionTypes.UPDATE_GENERATING_SCRAMBLES) {
-        return { ...store, generatingScrambles: action.payload.generatingScrambles };
+        return {
+            ...store,
+            generatingScrambles: action.payload.generatingScrambles,
+        };
     }
 
     if (action.type === ActionTypes.UPDATE_SCRAMBLING_PROGRESS_TARGET) {
-        return { ...store, scramblingProgressTarget: action.payload.scramblingProgressTarget };
+        return {
+            ...store,
+            scramblingProgressTarget: action.payload.scramblingProgressTarget,
+        };
     }
 
     if (action.type === ActionTypes.UPDATE_SCRAMBLING_PROGRESS_CURRENT_EVENT) {
         return {
             ...store,
             scramblingProgressCurrent: {
                 ...store.scramblingProgressCurrent,
-                [action.payload.eventId]: (store.scramblingProgressCurrent[action.payload.eventId] || 0) + 1
-            }
+                [action.payload.eventId]:
+                    (store.scramblingProgressCurrent[action.payload.eventId] ||
+                        0) + 1,
+            },
         };
     }
 

diff --git a/tnoodle-ui/src/main/redux/Types.js b/tnoodle-ui/src/main/redux/Types.js
@@ -14,7 +14,8 @@ export const ActionTypes = {
     UPDATE_FILE_ZIP_BLOB: "UPDATE_FILE_ZIP_BLOB",
     UPDATE_GENERATING_SCRAMBLES: "UPDATE_GENERATING_SCRAMBLES",
     UPDATE_SCRAMBLING_PROGRESS_TARGET: "UPDATE_SCRAMBLING_PROGRESS_TARGET",
-    UPDATE_SCRAMBLING_PROGRESS_CURRENT_EVENT: "UPDATE_SCRAMBLING_PROGRESS_CURRENT_EVENT",
+    UPDATE_SCRAMBLING_PROGRESS_CURRENT_EVENT:
+        "UPDATE_SCRAMBLING_PROGRESS_CURRENT_EVENT",
     RESET_SCRAMBLING_PROGRESS_CURRENT: "RESET_SCRAMBLING_PROGRESS_CURRENT",
     ADD_CACHED_OBJECT: "ADD_CACHED_OBJECT",
     UPDATE_TRANSLATIONS: "UPDATE_TRANSLATIONS",

diff --git a/tnoodle-ui/src/main/util/competition.name.util.js b/tnoodle-ui/src/main/util/competition.name.util.js
@@ -3,6 +3,6 @@ export const getDefaultCompetitionName = () => {
     return "Scrambles for " + date.toISOString().split("T")[0];
 };
 
-export const competitionName2Id = competitionName => {
+export const competitionName2Id = (competitionName) => {
     return competitionName.replace(/[\W]/gi, "");
 };
diff --git a/tnoodle-ui/src/setupProxy.js b/tnoodle-ui/src/setupProxy.js
@@ -1,10 +1,10 @@
-const { createProxyMiddleware } = require('http-proxy-middleware');
+const { createProxyMiddleware } = require("http-proxy-middleware");
 
-module.exports = function(app) {
+module.exports = function (app) {
     app.use(
-        ['/frontend', '/version', '/wcif'],
+        ["/frontend", "/version", "/wcif"],
         createProxyMiddleware({
-            target: 'http://localhost:2014',
+            target: "http://localhost:2014",
             secure: false,
             changeOrigin: true,
             ws: true,

diff --git a/tnoodle-ui/src/setupTests.js b/tnoodle-ui/src/setupTests.js
@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
+import "@testing-library/jest-dom/extend-expect";