diff --git a/.github/workflows/fronttest.yaml b/.github/workflows/fronttest.yaml index 95550a05..5313de60 100644 --- 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 index b6fcf099..3ba0dfa6 100644 --- 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 index d6c95379..6e8698b7 100644 --- 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 index 65d1c81d..a3e98673 100644 --- 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 index 484053cb..fa6019fe 100644 --- 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 index 3c339b3a..82168627 100644 --- a/client/src/main/components/StatisticsDisplay.tsx +++ b/client/src/main/components/StatisticsDisplay.tsx @@ -18,7 +18,7 @@ const StatisticsDisplay = () => { const [statistics, setStatistics] = useState(); const [selectedKeys, setSelectedKeys] = useState( - getQueryParameter("selectedKeys") || undefined + getQueryParameter("selectedKeys") || undefined, ); const [filteredStatistics, setFilteredStatistics] = useState(); @@ -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 index d6ddb4b5..cf360ac2 100644 --- 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 index eab0d5ab..a28cf946 100644 --- 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 index a12afec1..98f27f22 100644 --- 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,