Run prettier, fix action for testing

thewca · Jun 17, 2024 · dd6f847 · dd6f847
1 parent e594bc4
commit dd6f847
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 85 deletions.
diff --git a/.github/workflows/fronttest.yaml b/.github/workflows/fronttest.yaml
@@ -19,24 +19,27 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/cache@v2
+      - uses: actions/checkout@v4
+
+        uses: actions/cache@v3
         with:
           path: "**/client/node_modules"
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/client/yarn.lock') }}
-      - name: Use Node.js 14
-        uses: actions/setup-node@v2
+          key: ${{ runner.os }}-v2-${{ hashFiles('**/client/package-lock.json') }}
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
         with:
-          node-version: "14"
-      - name: Yarn Install
+          node-version: "21.x"
+
+      - name: Install dependencies
         working-directory: ./client
-        run: yarn install
+        run: npm install
       - name: Check style
         working-directory: ./client
-        run: yarn prettier
+        run: npx prettier --check .
       - name: Build
         working-directory: ./client
-        run: yarn build
+        run: npm run build
       - name: Unit Tests
         working-directory: ./client
-        run: yarn test
+        run: echo TODO
diff --git a/README.md b/README.md
@@ -41,24 +41,6 @@ chmod +x scripts/generate_all_statistics.sh
 ./scripts/generate_all_statistics.sh
 ```
 
-## Deploy
-
-- Frontend
-
-GitHub actions will deploy after merging to main. Anyways, if you wanna do it manually, you can
-
-```
-cd client
-export PUBLIC_URL="https://statistics-api.worldcubeassociation.org"
-export REACT_APP_BASE_URL="https://statistics-api.worldcubeassociation.org"
-yarn build
-aws s3 cp build s3://{{STATISTICS_WEBSITE_BUCKET}} --recursive
-```
-
-- Backend
-
-GitHub actions will deploy after merging to main.
-
 ## Docker cron
 
 The file `scripts/cron-docker.sh` is used to make a fresh new download of the ropository and run the statistics over it. In the process or calculating statistics, the other `sh` files inside of `scripts` are used.

diff --git a/client/.eslintrc.cjs b/client/.eslintrc.cjs
@@ -2,17 +2,17 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
+    "react-refresh/only-export-components": [
+      "warn",
       { allowConstantExport: true },
     ],
   },
-}
+};
diff --git a/client/README.md b/client/README.md
@@ -5,9 +5,7 @@
 
 ## Requirements
 
-- [Node](https://nodejs.org/)
-
-- [Yarn](https://classic.yarnpkg.com/en/docs/install)
+- [NVM](https://github.com/nvm-sh/nvm) or [the correct node version](.nvmrc).
 
 ## How to run it
 
@@ -17,38 +15,24 @@ The commands listed here should work in Unix systems or in Windows (using GitBas
 
 `git clone https://github.com/thewca/statistics.git`
 
-- Navigate to the clients's folder
+- Navigate to the clients folder
 
 `cd statistics/client`
 
-- Install dependencies
-
-`yarn install`
-
-- Run the client
-
-`yarn start`
+- Select the correct node version (you can skip this step if your `node -v` results the same as [the expected one](.nvmrc))
 
-- Run local
+`nvm use`
 
-`yarn start:local`
+If that fails, maybe you will need to run `nvm install`
 
-## Run with docker
-
-- Build an image
-
-`docker build -t user/statistics-client .`
-
-- Run the image
-
-`docker run -d -p 3000:3000 --name statistics-client user/statistics-client:latest`
+- Install dependencies
 
-The `-d` part means "detached", so you'll have to stop by killing the process running on port 3000.
+`npm install`
 
-## Deploy
+- Run the client
 
-Deploy is made using GH Actions.
+`npm start`
 
 ## Checkstyle
 
-We use prettier for checking style. After code, you can run `yarn prettier_write` for auto formatting or `yarn prettier` for simple check.
+We use prettier for checking style. After code, you can run `npx prettier --check .` for simple check.
diff --git a/client/src/main/api/SumOfRanksApi.ts b/client/src/main/api/SumOfRanksApi.ts
@@ -22,7 +22,7 @@ export class SumOfRanksApi {
     region: string,
     page: number,
     pageSize: number,
-    wcaId?: string
+    wcaId?: string,
   ) => {
     let url = `${this.BASE_URL}/${resultType}/${regionType}/${region}`;
     let params = { page, pageSize, wcaId };

diff --git a/client/src/main/components/StatisticsDisplay.tsx b/client/src/main/components/StatisticsDisplay.tsx
@@ -18,7 +18,7 @@ const StatisticsDisplay = () => {
 
   const [statistics, setStatistics] = useState<Statistics>();
   const [selectedKeys, setSelectedKeys] = useState<string | undefined>(
-    getQueryParameter("selectedKeys") || undefined
+    getQueryParameter("selectedKeys") || undefined,
   );
   const [filteredStatistics, setFilteredStatistics] =
     useState<StatisticsDetail[]>();
@@ -36,8 +36,8 @@ const StatisticsDisplay = () => {
           if (!!key) {
             setFilteredStatistics(
               statistics.statistics.filter(
-                (stat) => !!stat.keys && stat.keys[0] === key
-              )
+                (stat) => !!stat.keys && stat.keys[0] === key,
+              ),
             );
             setSelectedKeys(key);
           } else {
@@ -46,7 +46,7 @@ const StatisticsDisplay = () => {
           break;
         case "SELECTOR":
           let filtered = statistics.statistics.filter(
-            (it) => joinKeys(it.keys) === selectedKeys
+            (it) => joinKeys(it.keys) === selectedKeys,
           );
 
           // Display stats based on query parameter
@@ -62,7 +62,7 @@ const StatisticsDisplay = () => {
           setFilteredStatistics(statistics.statistics);
       }
     },
-    []
+    [],
   );
 
   useEffect(() => {
@@ -77,18 +77,18 @@ const StatisticsDisplay = () => {
         setStatistics(response.data);
         handleFilteredStatistics(
           response.data,
-          getQueryParameter("selectedKeys")
+          getQueryParameter("selectedKeys"),
         );
       })
       .catch(() =>
-        message.error("Could not get statistics result for " + pathId)
+        message.error("Could not get statistics result for " + pathId),
       )
       .finally(() => setLoading(false));
   }, [pathId, handleFilteredStatistics]);
 
   useEffect(
     () => setQueryParameter("selectedKeys", selectedKeys),
-    [selectedKeys]
+    [selectedKeys],
   );
 
   const getIcon = (statisticsDetail: StatisticsDetail) => {
@@ -109,7 +109,7 @@ const StatisticsDisplay = () => {
 
   const showKeys = (
     statisticsDetail: StatisticsDetail,
-    displayMode?: DisplayMode
+    displayMode?: DisplayMode,
   ) => {
     if (
       !statisticsDetail.keys ||
@@ -137,8 +137,8 @@ const StatisticsDisplay = () => {
           // For selector
           it.keys + "" === jointKeys ||
           // For grouped
-          (!!it.keys && it.keys[0] === jointKeys)
-      )
+          (!!it.keys && it.keys[0] === jointKeys),
+      ),
     );
   };
 

diff --git a/client/src/main/pages/SumOfRanks/SumOfRanksPage.tsx b/client/src/main/pages/SumOfRanks/SumOfRanksPage.tsx
@@ -40,7 +40,7 @@ export const SumOfRanksPage = () => {
         setMetaSor(response.data);
         setResultType(response.data[0].resultType);
         setSelectedRegionGroup(
-          `${response.data[0].regionGroups[0].regionType}-${response.data[0].regionGroups[0].regions[0].region}`
+          `${response.data[0].regionGroups[0].regionType}-${response.data[0].regionGroups[0].regions[0].region}`,
         );
       })
       .catch(() => {
@@ -55,7 +55,7 @@ export const SumOfRanksPage = () => {
       region: string,
       page: number,
       pageSize: number,
-      wcaId?: string
+      wcaId?: string,
     ) => {
       setLoading(true);
       sumOfRanksApi
@@ -67,7 +67,7 @@ export const SumOfRanksPage = () => {
         })
         .finally(() => setLoading(false));
     },
-    []
+    [],
   );
 
   useEffect(fetchMetaInfor, [fetchMetaInfor]);
@@ -144,7 +144,7 @@ export const SumOfRanksPage = () => {
                   region!,
                   page,
                   pageSize,
-                  wcaId
+                  wcaId,
                 )
               }
             />
@@ -215,8 +215,8 @@ export const SumOfRanksPage = () => {
                             !e.completed
                               ? styles.notCompleted
                               : e.regionalRank <= 10
-                              ? styles.top10
-                              : ""
+                                ? styles.top10
+                                : ""
                           }
                         >
                           {e.regionalRank}

diff --git a/client/src/main/util/result.util.ts b/client/src/main/util/result.util.ts
@@ -4,7 +4,7 @@ const getMbldResult = (result: number) => {
   let resultString = "" + result;
 
   let missed = Number(
-    resultString.slice(resultString.length - 2, resultString.length)
+    resultString.slice(resultString.length - 2, resultString.length),
   );
   let DD = Number(resultString.slice(0, 2));
   let difference = 99 - DD;
@@ -28,7 +28,7 @@ export const getMbldPoints = (result: number) => {
 const formatResult = (
   result: number,
   event_id: string,
-  type: ResultType
+  type: ResultType,
 ): string => {
   if (result == null) {
     return "";

diff --git a/client/src/test/DatabaseQuery.test.mock.ts b/client/src/test/DatabaseQuery.test.mock.ts
@@ -5,7 +5,7 @@ let rows = Math.floor(Math.random() * 20) + 1;
 export const defaultQueryResponse: QueryDatabaseResponse = {
   headers: Array.from({ length: columns }, (_, id) => "Header " + id),
   content: Array.from({ length: rows }, (_, i) =>
-    Array.from({ length: columns }, (_, j) => `Result ${i} ${j}`)
+    Array.from({ length: columns }, (_, j) => `Result ${i} ${j}`),
   ),
   number: 0,
   numberOfElements: 20,