From 9ba26d7d474eebfeeee6d9720176bc5ea5f0b01a Mon Sep 17 00:00:00 2001 From: johnnadeluy Date: Fri, 2 Feb 2024 10:04:22 +0100 Subject: [PATCH 01/10] Adds a workflow that builds and lints on open pull-requests to develop --- .github/workflows/build-and-lint-on-pr.yaml | 27 +++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 .github/workflows/build-and-lint-on-pr.yaml diff --git a/.github/workflows/build-and-lint-on-pr.yaml b/.github/workflows/build-and-lint-on-pr.yaml new file mode 100644 index 00000000..c5d5dba9 --- /dev/null +++ b/.github/workflows/build-and-lint-on-pr.yaml @@ -0,0 +1,27 @@ +name: 'Build and Lint on Pull Requests' +on: + pull_request: + branches: + - develop + +jobs: + build: + runs-on: ubuntu-latest + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Set up node + uses: actions/setup-node@v3 + with: + node-version: 16.13.x + cache: npm + + - name: Install dependencies + run: npm install + + - name: Build application + run: npm run build + + - name: Run ESLint + run: npm run lint \ No newline at end of file From 8228820725c1b47ab3ea11fac955f3c9b88e061a Mon Sep 17 00:00:00 2001 From: johnnadeluy Date: Fri, 2 Feb 2024 10:14:25 +0100 Subject: [PATCH 02/10] Include auto fix for linting in workflow --- .github/workflows/build-and-lint-on-pr.yaml | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/.github/workflows/build-and-lint-on-pr.yaml b/.github/workflows/build-and-lint-on-pr.yaml index c5d5dba9..390526c0 100644 --- a/.github/workflows/build-and-lint-on-pr.yaml +++ b/.github/workflows/build-and-lint-on-pr.yaml @@ -1,8 +1,6 @@ name: 'Build and Lint on Pull Requests' on: pull_request: - branches: - - develop jobs: build: @@ -23,5 +21,8 @@ jobs: - name: Build application run: npm run build - - name: Run ESLint + - name: Autofix ESLint and Prettier errors/warnings + run: npm run lint:fix && npm run lint:format + + - name: Check for more ESLint errors/warnings run: npm run lint \ No newline at end of file From 68cfb019de7346fa00663fa669619c8605f34451 Mon Sep 17 00:00:00 2001 From: johnnadeluy Date: Fri, 2 Feb 2024 10:32:52 +0100 Subject: [PATCH 03/10] Minor code refactoring and adjust Prettier warnings to error --- .eslintrc.cjs | 2 +- .github/workflows/build-and-lint-on-pr.yaml | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 50f838fa..c68d52cf 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -16,7 +16,7 @@ module.exports = { { allowConstantExport: true }, ], 'prettier/prettier': [ - 'warn', + 'error', {}, { usePrettierrc: true, diff --git a/.github/workflows/build-and-lint-on-pr.yaml b/.github/workflows/build-and-lint-on-pr.yaml index 390526c0..190f0527 100644 --- a/.github/workflows/build-and-lint-on-pr.yaml +++ b/.github/workflows/build-and-lint-on-pr.yaml @@ -21,8 +21,8 @@ jobs: - name: Build application run: npm run build - - name: Autofix ESLint and Prettier errors/warnings + - name: Autofix ESLint and Prettier warnings run: npm run lint:fix && npm run lint:format - - name: Check for more ESLint errors/warnings + - name: Check for more ESLint warnings run: npm run lint \ No newline at end of file From c71c961300808349576c5f21a202059d0d8dc296 Mon Sep 17 00:00:00 2001 From: johnnadeluy Date: Fri, 2 Feb 2024 10:44:16 +0100 Subject: [PATCH 04/10] Fix type error for breadcrumbsUserProfileDisplayName --- src/provider/DaplaCtrlProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/provider/DaplaCtrlProvider.tsx b/src/provider/DaplaCtrlProvider.tsx index e419c146..ac4cf8f9 100644 --- a/src/provider/DaplaCtrlProvider.tsx +++ b/src/provider/DaplaCtrlProvider.tsx @@ -5,7 +5,7 @@ interface BreadcrumbUserProfileDisplayName { } interface DaplaCtrlContextType { - breadcrumbUserProfileDisplayName: object | null + breadcrumbUserProfileDisplayName: BreadcrumbUserProfileDisplayName | null setBreadcrumbUserProfileDisplayName: ( breadcrumbUserProfileDisplayName: BreadcrumbUserProfileDisplayName | null ) => void From 35eed68371f1370121a2f8c6062ee46b54f1a348 Mon Sep 17 00:00:00 2001 From: johnnadeluy Date: Fri, 2 Feb 2024 11:00:10 +0100 Subject: [PATCH 05/10] Temporary hide unused const in TeamDetail to prevent build fail --- src/pages/TeamDetail/TeamDetail.tsx | 55 +++++++++++++++-------------- 1 file changed, 28 insertions(+), 27 deletions(-) diff --git a/src/pages/TeamDetail/TeamDetail.tsx b/src/pages/TeamDetail/TeamDetail.tsx index 7d27c89c..64c81f2d 100644 --- a/src/pages/TeamDetail/TeamDetail.tsx +++ b/src/pages/TeamDetail/TeamDetail.tsx @@ -1,37 +1,38 @@ - -import { useEffect, useState } from 'react' +import { useState, useEffect } from 'react' import PageLayout from '../../components/PageLayout/PageLayout' import { TeamDetailData, getTeamDetail } from '../../api/teamDetail' import { useParams } from 'react-router-dom' import { ErrorResponse } from '../../@types/error' - export default function TeamOverview() { - const { teamId } = useParams<{ teamId: string }>() - const [teamDetailData, setTeamDetailData] = useState() - const [error, setError] = useState() - const [loading, setLoading] = useState(true) - - useEffect(() => { - if (!teamId) return - console.log(teamId) - getTeamDetail(teamId) - .then((response) => { - if ((response as ErrorResponse).error) { - console.log(response) - setError(response as ErrorResponse) - } else { - console.log((response)) - setTeamDetailData(response as TeamDetailData) - } - }) - .finally(() => setLoading(false)) - .catch((error) => { - setError(error.toString()) - }) + const { teamId } = useParams<{ teamId: string }>() + // TODO: Temporary hide these so build doesn't fail + // const [teamDetailData, setTeamDetailData] = useState() + // const [error, setError] = useState() + // const [loading, setLoading] = useState(true) - }, [teamId]) + const [, setTeamDetailData] = useState() + const [, setError] = useState() + const [, setLoading] = useState(true) + useEffect(() => { + if (!teamId) return + console.log(teamId) + getTeamDetail(teamId) + .then((response) => { + if ((response as ErrorResponse).error) { + console.log(response) + setError(response as ErrorResponse) + } else { + console.log(response) + setTeamDetailData(response as TeamDetailData) + } + }) + .finally(() => setLoading(false)) + .catch((error) => { + setError(error.toString()) + }) + }, [teamId]) - return TeamDetail} /> + return TeamDetail} /> } From d530dabb63bee9f321d32aac3debcedc98ed2247 Mon Sep 17 00:00:00 2001 From: johnnadeluy Date: Fri, 2 Feb 2024 11:03:32 +0100 Subject: [PATCH 06/10] Adjustments to not include autofix ESLint and Prettier in workflow --- .github/workflows/build-and-lint-on-pr.yaml | 3 --- 1 file changed, 3 deletions(-) diff --git a/.github/workflows/build-and-lint-on-pr.yaml b/.github/workflows/build-and-lint-on-pr.yaml index 190f0527..97b4b494 100644 --- a/.github/workflows/build-and-lint-on-pr.yaml +++ b/.github/workflows/build-and-lint-on-pr.yaml @@ -21,8 +21,5 @@ jobs: - name: Build application run: npm run build - - name: Autofix ESLint and Prettier warnings - run: npm run lint:fix && npm run lint:format - - name: Check for more ESLint warnings run: npm run lint \ No newline at end of file From 20bff6b0627ceb96d3753e904eda887a934cafe6 Mon Sep 17 00:00:00 2001 From: johnnadeluy Date: Fri, 2 Feb 2024 11:16:49 +0100 Subject: [PATCH 07/10] Update README.md with ESLint and Prettier documentation with ChatGPT assistance --- README.md | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/README.md b/README.md index 2e2ed4ba..b581b3b9 100644 --- a/README.md +++ b/README.md @@ -99,6 +99,42 @@ This is an example of how to list things you need to use the software and how to npm run dev ``` +### ESLint and Prettier + +For ensuring code consistency and adhering to coding standards, our project utilizes ESLint and Prettier. To view linting warnings and errors in the console, it's recommended to run the following script during development: + +```sh +npm run lint +``` + +To automatically fix linting and formatting issues across all files, you can use the following scripts (Note: While these scripts resolve many ESLint warnings or errors, some issues may require manual intervention): + +```sh +npm run lint:fix && npm run lint:format +``` + +### Integrated Development Environments (IDEs) Support + +For seamless integration with popular IDEs such as Visual Studio Code and IntelliJ, consider installing the following plugins: + +#### Visual Studio Code + +1. **ESLint**: Install the ESLint extension to enable real-time linting and error highlighting. + [ESLint Extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + +2. **Prettier**: Enhance code formatting by installing the Prettier extension. + [Prettier Extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) + +#### IntelliJ + +1. **ESLint**: Install the ESLint plugin to enable ESLint integration within IntelliJ. + [ESLint Plugin](https://plugins.jetbrains.com/plugin/7494-eslint) + +2. **Prettier**: Integrate Prettier for code formatting by installing the Prettier plugin. + [Prettier Plugin](https://plugins.jetbrains.com/plugin/10456-prettier) + +By incorporating these plugins into your development environment, you can take full advantage of ESLint and Prettier to maintain code quality and consistent formatting throughout your project. +

(back to top)

From 3e9b5d7783bf06825560e959cac39a35ba2eedcb Mon Sep 17 00:00:00 2001 From: johnnadeluy Date: Fri, 2 Feb 2024 11:23:35 +0100 Subject: [PATCH 08/10] Autofix prettier format errors --- server.js | 54 +++++++++++++++++++++---------------------- src/@types/group.ts | 8 +++---- src/api/teamDetail.ts | 40 ++++++++++++++++---------------- 3 files changed, 51 insertions(+), 51 deletions(-) diff --git a/server.js b/server.js index 02aadbfd..fad923ac 100644 --- a/server.js +++ b/server.js @@ -247,35 +247,35 @@ app.get('/api/userProfile/:principalName/team', tokenVerificationMiddleware, asy app.get('/api/teamDetail/:teamUniformName', tokenVerificationMiddleware, async (req, res, next) => { try { - const token = req.token; - const teamUniformName = req.params.teamUniformName; - const teamInfoUrl = `${DAPLA_TEAM_API_URL}/teams/${teamUniformName}`; - const teamUsersUrl = `${DAPLA_TEAM_API_URL}/teams/${teamUniformName}/users`; + const token = req.token + const teamUniformName = req.params.teamUniformName + const teamInfoUrl = `${DAPLA_TEAM_API_URL}/teams/${teamUniformName}` + const teamUsersUrl = `${DAPLA_TEAM_API_URL}/teams/${teamUniformName}/users` const [teamInfo, teamUsers] = await Promise.all([ - fetchAPIData(token, teamInfoUrl, 'Failed to fetch team info') - .then(async (teamInfo) => { - const manager = await fetchTeamManager(token, teamInfo) - return { ...teamInfo, manager}; - }), - fetchAPIData(token, teamUsersUrl, 'Failed to fetch team users') - .then(async (teamUsers) => { - const resolvedUsers = await fetchTeamUsersWithGroups(token, teamUsers, teamUniformName); - return { ...teamUsers, _embedded: { users: resolvedUsers } }; - }), - ]); - - res.json({ teamInfo, teamUsers: teamUsers._embedded.users }); + fetchAPIData(token, teamInfoUrl, 'Failed to fetch team info').then(async (teamInfo) => { + const manager = await fetchTeamManager(token, teamInfo) + return { ...teamInfo, manager } + }), + fetchAPIData(token, teamUsersUrl, 'Failed to fetch team users').then(async (teamUsers) => { + const resolvedUsers = await fetchTeamUsersWithGroups(token, teamUsers, teamUniformName) + return { ...teamUsers, _embedded: { users: resolvedUsers } } + }), + ]) + + res.json({ teamInfo, teamUsers: teamUsers._embedded.users }) } catch (error) { - next(error); + next(error) } -}); +}) async function fetchTeamManager(token, teamInfo) { const teamManagerUrl = `${DAPLA_TEAM_API_URL}/groups/${teamInfo.uniform_name}-managers/users` - return await fetchAPIData(token, teamManagerUrl, 'Failed to fetch team manager').then((teamManager) => { - return teamManager.count > 0 ? teamManager._embedded.users[0] : managerFallback() - }).catch(() => managerFallback()) + return await fetchAPIData(token, teamManagerUrl, 'Failed to fetch team manager') + .then((teamManager) => { + return teamManager.count > 0 ? teamManager._embedded.users[0] : managerFallback() + }) + .catch(() => managerFallback()) } async function fetchTeamUsersWithGroups(token, teamUsers, teamUniformName) { @@ -287,11 +287,11 @@ async function fetchTeamUsersWithGroups(token, teamUsers, teamUniformName) { .filter((group) => group !== null && group.uniform_name.startsWith(teamUniformName)) .flatMap((group) => group) - user["groups"] = flattenedGroups - + user['groups'] = flattenedGroups + return { ...user } - }); - return await Promise.all(userPromises); + }) + return await Promise.all(userPromises) } async function fetchAPIData(token, url, fallbackErrorMessage) { @@ -381,7 +381,7 @@ function sectionFallback(uniformName) { } function groupFallback() { - return { "_embedded": { "groups": [] }, "count": "0"} + return { _embedded: { groups: [] }, count: '0' } } //const lightship = await createLightship(); diff --git a/src/@types/group.ts b/src/@types/group.ts index 7291388e..44575cff 100644 --- a/src/@types/group.ts +++ b/src/@types/group.ts @@ -1,7 +1,7 @@ import { User } from '../@types/user' export interface Group { - uniform_name: string - display_name: string - manager?: User -} \ No newline at end of file + uniform_name: string + display_name: string + manager?: User +} diff --git a/src/api/teamDetail.ts b/src/api/teamDetail.ts index 44fea5ea..a282597f 100644 --- a/src/api/teamDetail.ts +++ b/src/api/teamDetail.ts @@ -13,24 +13,24 @@ export interface TeamDetailResult { } export const getTeamDetail = async (teamId: string): Promise => { - const accessToken = localStorage.getItem('access_token') - - try { - const response = await fetch(`/api/teamDetail/${teamId}`, { - method: 'GET', - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${accessToken}`, - }, - }) - if (!response.ok) { - const errorData = await response.json() - return errorData as ErrorResponse - } - const data = await response.json() - return data as TeamDetailData - } catch (error) { - console.error('Error during fetching teams:', error) - throw new Error('Error fetching teams') + const accessToken = localStorage.getItem('access_token') + + try { + const response = await fetch(`/api/teamDetail/${teamId}`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${accessToken}`, + }, + }) + if (!response.ok) { + const errorData = await response.json() + return errorData as ErrorResponse } - } \ No newline at end of file + const data = await response.json() + return data as TeamDetailData + } catch (error) { + console.error('Error during fetching teams:', error) + throw new Error('Error fetching teams') + } +} From 4a522443843bc909cf5f06ae18a9908fe5fc1119 Mon Sep 17 00:00:00 2001 From: johnnadeluy Date: Fri, 2 Feb 2024 11:24:03 +0100 Subject: [PATCH 09/10] Bump actions/checkout@v3 to actions/checkout@v4 --- .github/workflows/build-and-lint-on-pr.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/build-and-lint-on-pr.yaml b/.github/workflows/build-and-lint-on-pr.yaml index 97b4b494..8db61c7f 100644 --- a/.github/workflows/build-and-lint-on-pr.yaml +++ b/.github/workflows/build-and-lint-on-pr.yaml @@ -10,9 +10,9 @@ jobs: uses: actions/checkout@v4 - name: Set up node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: - node-version: 16.13.x + node-version: 20 cache: npm - name: Install dependencies From 2c4ee3b5613561fad2803ea26b5ff44796ebafe3 Mon Sep 17 00:00:00 2001 From: johnnadeluy Date: Fri, 2 Feb 2024 11:31:24 +0100 Subject: [PATCH 10/10] Minor code refactoring; rewording --- .github/workflows/build-and-lint-on-pr.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/build-and-lint-on-pr.yaml b/.github/workflows/build-and-lint-on-pr.yaml index 8db61c7f..2247a97a 100644 --- a/.github/workflows/build-and-lint-on-pr.yaml +++ b/.github/workflows/build-and-lint-on-pr.yaml @@ -21,5 +21,5 @@ jobs: - name: Build application run: npm run build - - name: Check for more ESLint warnings + - name: Check for ESLint warnings and errors run: npm run lint \ No newline at end of file