From fee53592860cd1ecfd12608bc6a2b766981a6b3f Mon Sep 17 00:00:00 2001 From: Samuel Poirier Date: Sun, 24 Mar 2024 16:17:18 -0400 Subject: [PATCH] SiteSummaryCard Code cleanup (#71) Co-authored-by: Samuel Poirier Co-authored-by: Olivier B <93934995+BesOlivierBouchard@users.noreply.github.com> --- .devcontainer/devcontainer.json | 12 +- .vscode/settings.json | 2 +- canopeum_frontend/package-lock.json | 165 +++++++++++++++--- canopeum_frontend/package.json | 1 + .../src/components/PrimaryIconBadge.tsx | 38 ++++ .../src/components/site/SiteSummaryCard.tsx | 49 +++--- canopeum_frontend/src/pages/MapSite.tsx | 48 +++-- canopeum_frontend/src/pages/Utilities.tsx | 10 ++ canopeum_frontend/tsconfig.json | 6 + canopeum_frontend/vite.config.ts | 7 + 10 files changed, 270 insertions(+), 68 deletions(-) create mode 100644 canopeum_frontend/src/components/PrimaryIconBadge.tsx diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index b96124687..c8ea6c7fb 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -16,7 +16,17 @@ "features": { "ghcr.io/devcontainers/features/node:1": {} }, - "runArgs": ["--env-file",".devcontainer/devcontainer.env"] +"runArgs": [ + "--env-file", + ".devcontainer/devcontainer.env" +], +"customizations": { + "vscode": { + "extensions": [ + "dprint.dprint" + ] + } +} // Configure tool-specific properties. // "customizations": {}, diff --git a/.vscode/settings.json b/.vscode/settings.json index d8df4f690..3fe474659 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -97,7 +97,7 @@ "[dockerfile]": { "editor.defaultFormatter": "dprint.dprint" }, - "dprint.path": "canopeum_frontend/node_modules/dprint/dprint.exe", + "dprint.path": "canopeum_frontend/node_modules/dprint/dprint", "typescript.tsdk": "canopeum_frontend/node_modules/typescript/lib", "typescript.enablePromptUseWorkspaceTsdk": true, "js/ts.implicitProjectConfig.checkJs": true, diff --git a/canopeum_frontend/package-lock.json b/canopeum_frontend/package-lock.json index c5622c02c..256b007c3 100644 --- a/canopeum_frontend/package-lock.json +++ b/canopeum_frontend/package-lock.json @@ -31,6 +31,7 @@ "@typescript-eslint/eslint-plugin": "^7.1.1", "@typescript-eslint/parser": "^7.1.1", "@vitejs/plugin-react": "^4.2.1", + "dprint": "^0.45.0", "eslint-config-beslogic": "^1.6.5", "eslint-plugin-jsx-a11y": "^6.8.0", "eslint-plugin-react": "^7.34.1", @@ -663,9 +664,9 @@ } }, "node_modules/@dprint/darwin-arm64": { - "version": "0.39.1", - "resolved": "https://registry.npmjs.org/@dprint/darwin-arm64/-/darwin-arm64-0.39.1.tgz", - "integrity": "sha512-zMvy5y1OA8ZIdk1lM5170xERuj3nlhpipEhr1l7YmkA9nPJB+NhP4RXjaPbFf+Zxd1Y9+rJW6rpIcqImCbxRug==", + "version": "0.45.0", + "resolved": "https://registry.npmjs.org/@dprint/darwin-arm64/-/darwin-arm64-0.45.0.tgz", + "integrity": "sha512-pkSSmixIKXr5t32bhXIUbpIBm8F8uhsJcUUvfkFNsRbQvNwRp71ribZpE8dKl0ZFOlAFeWD6WLE8smp/QtiGUA==", "cpu": [ "arm64" ], @@ -676,9 +677,9 @@ ] }, "node_modules/@dprint/darwin-x64": { - "version": "0.39.1", - "resolved": "https://registry.npmjs.org/@dprint/darwin-x64/-/darwin-x64-0.39.1.tgz", - "integrity": "sha512-Uq4X21k/dQ2Hl1CDsPcSrX27NJbTyLovLM0eBrtErgbE95RQiT8y8rwCfjT32/XtOYzK38uBPpgP6tVYWsQb9g==", + "version": "0.45.0", + "resolved": "https://registry.npmjs.org/@dprint/darwin-x64/-/darwin-x64-0.45.0.tgz", + "integrity": "sha512-PHcXSrRO53KH9N+YPbPtr40NnDo2t7hO7KLMfl2ktRNLjrmKg6F8XDDsr2C7Z11k3jyEEU2Jq8hhpaKHwNapmQ==", "cpu": [ "x64" ], @@ -689,9 +690,22 @@ ] }, "node_modules/@dprint/linux-arm64-glibc": { - "version": "0.39.1", - "resolved": "https://registry.npmjs.org/@dprint/linux-arm64-glibc/-/linux-arm64-glibc-0.39.1.tgz", - "integrity": "sha512-BsCMgWoppKTnvVQCr4IX7X4FjkTUUXgb7Jc9vdeSAOyO6nK87Rt9w3WOYVBZXnaZ+5i1uqqaROn7uKtrF/51mg==", + "version": "0.45.0", + "resolved": "https://registry.npmjs.org/@dprint/linux-arm64-glibc/-/linux-arm64-glibc-0.45.0.tgz", + "integrity": "sha512-NgIpvZHpiQaY4DxSygxknxBtvKE2KLK9dEbUNKNE098yTHhGq7ouPsoM7RtsO34RHJ3tEZLLJEuBHn20XP8LMg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@dprint/linux-arm64-musl": { + "version": "0.45.0", + "resolved": "https://registry.npmjs.org/@dprint/linux-arm64-musl/-/linux-arm64-musl-0.45.0.tgz", + "integrity": "sha512-Y8p+FC0RNyKCGQjy99Uh1LSPrlQtUTvo4brdvU1THF3pyWu6Bg1p6NiP5a6SjE/6t9CMKZJz39zPreQtnDkSDA==", "cpu": [ "arm64" ], @@ -702,9 +716,9 @@ ] }, "node_modules/@dprint/linux-x64-glibc": { - "version": "0.39.1", - "resolved": "https://registry.npmjs.org/@dprint/linux-x64-glibc/-/linux-x64-glibc-0.39.1.tgz", - "integrity": "sha512-LXecU6xAvDp+w2Oyw/9+fkHnYtKJs+PFdh8/uf1axU/S/3SIKYxrNsMgpO8nRtRwzXQOoFWOu+UYvhB+p0leYA==", + "version": "0.45.0", + "resolved": "https://registry.npmjs.org/@dprint/linux-x64-glibc/-/linux-x64-glibc-0.45.0.tgz", + "integrity": "sha512-u03NCZIpJhE5gIl9Q7jNL4sOPBFd/8BLVBiuLoLtbiTZQ+NNudHKgGNATJBU67q1MKpqKnt8/gQm139cJkHhrw==", "cpu": [ "x64" ], @@ -715,9 +729,9 @@ ] }, "node_modules/@dprint/linux-x64-musl": { - "version": "0.39.1", - "resolved": "https://registry.npmjs.org/@dprint/linux-x64-musl/-/linux-x64-musl-0.39.1.tgz", - "integrity": "sha512-mBXTLZ7Z0NUcAEYCU1GyaoXv8+u5O9wW1gVCq7DdaLkksOiGGJcc1YMVgT1mE2Zp/o6MPyW1BgSKbmTRikOkRQ==", + "version": "0.45.0", + "resolved": "https://registry.npmjs.org/@dprint/linux-x64-musl/-/linux-x64-musl-0.45.0.tgz", + "integrity": "sha512-DQN8LPtxismkeU1X+sQywa80kWwCBcpQh9fXoJcvTEHrgzHBqbG2SEsUZpM12oKEua1KE/iBh+vgZ+4I3TdI2A==", "cpu": [ "x64" ], @@ -728,9 +742,9 @@ ] }, "node_modules/@dprint/win32-x64": { - "version": "0.39.1", - "resolved": "https://registry.npmjs.org/@dprint/win32-x64/-/win32-x64-0.39.1.tgz", - "integrity": "sha512-RRS4VzEnIgIxhVDyLXg5HqnX3iGgkLMueVbH0w7CPeEOTN2Nu7y21JigOe85dg4w2l4tGInipzqQyFs4QIC9iw==", + "version": "0.45.0", + "resolved": "https://registry.npmjs.org/@dprint/win32-x64/-/win32-x64-0.45.0.tgz", + "integrity": "sha512-aZHIWG2jIlEp4BER1QG6YYqPd6TxT9S77AeUkWJixNiMEo+33mPRVCBcugRWI/WJWveX8yWFVXkToORtnSFeEA==", "cpu": [ "x64" ], @@ -4412,21 +4426,22 @@ } }, "node_modules/dprint": { - "version": "0.39.1", - "resolved": "https://registry.npmjs.org/dprint/-/dprint-0.39.1.tgz", - "integrity": "sha512-+tdldu28NJq1OEBIMWyAAON3Oe8DIgJN8Q3WuNN00KEw1Ni6qlVWzx/b50u4xggUmiL8uh9Xr4YAyO5cSPyaAA==", + "version": "0.45.0", + "resolved": "https://registry.npmjs.org/dprint/-/dprint-0.45.0.tgz", + "integrity": "sha512-3444h7V47XoA16qgIWjw3CV/Eo/rQbT/XTGlbJ/6vJ+apQyuo0+M3Ai0GS3wu7X9HBUDcA0zIHA3mOxWNz6toA==", "dev": true, "hasInstallScript": true, "bin": { "dprint": "bin.js" }, "optionalDependencies": { - "@dprint/darwin-arm64": "0.39.1", - "@dprint/darwin-x64": "0.39.1", - "@dprint/linux-arm64-glibc": "0.39.1", - "@dprint/linux-x64-glibc": "0.39.1", - "@dprint/linux-x64-musl": "0.39.1", - "@dprint/win32-x64": "0.39.1" + "@dprint/darwin-arm64": "0.45.0", + "@dprint/darwin-x64": "0.45.0", + "@dprint/linux-arm64-glibc": "0.45.0", + "@dprint/linux-arm64-musl": "0.45.0", + "@dprint/linux-x64-glibc": "0.45.0", + "@dprint/linux-x64-musl": "0.45.0", + "@dprint/win32-x64": "0.45.0" } }, "node_modules/earcut": { @@ -4846,6 +4861,84 @@ "eslint-plugin-testing-library": "^5.10.2" } }, + "node_modules/eslint-config-beslogic/node_modules/@dprint/darwin-arm64": { + "version": "0.39.1", + "resolved": "https://registry.npmjs.org/@dprint/darwin-arm64/-/darwin-arm64-0.39.1.tgz", + "integrity": "sha512-zMvy5y1OA8ZIdk1lM5170xERuj3nlhpipEhr1l7YmkA9nPJB+NhP4RXjaPbFf+Zxd1Y9+rJW6rpIcqImCbxRug==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/eslint-config-beslogic/node_modules/@dprint/darwin-x64": { + "version": "0.39.1", + "resolved": "https://registry.npmjs.org/@dprint/darwin-x64/-/darwin-x64-0.39.1.tgz", + "integrity": "sha512-Uq4X21k/dQ2Hl1CDsPcSrX27NJbTyLovLM0eBrtErgbE95RQiT8y8rwCfjT32/XtOYzK38uBPpgP6tVYWsQb9g==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/eslint-config-beslogic/node_modules/@dprint/linux-arm64-glibc": { + "version": "0.39.1", + "resolved": "https://registry.npmjs.org/@dprint/linux-arm64-glibc/-/linux-arm64-glibc-0.39.1.tgz", + "integrity": "sha512-BsCMgWoppKTnvVQCr4IX7X4FjkTUUXgb7Jc9vdeSAOyO6nK87Rt9w3WOYVBZXnaZ+5i1uqqaROn7uKtrF/51mg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/eslint-config-beslogic/node_modules/@dprint/linux-x64-glibc": { + "version": "0.39.1", + "resolved": "https://registry.npmjs.org/@dprint/linux-x64-glibc/-/linux-x64-glibc-0.39.1.tgz", + "integrity": "sha512-LXecU6xAvDp+w2Oyw/9+fkHnYtKJs+PFdh8/uf1axU/S/3SIKYxrNsMgpO8nRtRwzXQOoFWOu+UYvhB+p0leYA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/eslint-config-beslogic/node_modules/@dprint/linux-x64-musl": { + "version": "0.39.1", + "resolved": "https://registry.npmjs.org/@dprint/linux-x64-musl/-/linux-x64-musl-0.39.1.tgz", + "integrity": "sha512-mBXTLZ7Z0NUcAEYCU1GyaoXv8+u5O9wW1gVCq7DdaLkksOiGGJcc1YMVgT1mE2Zp/o6MPyW1BgSKbmTRikOkRQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/eslint-config-beslogic/node_modules/@dprint/win32-x64": { + "version": "0.39.1", + "resolved": "https://registry.npmjs.org/@dprint/win32-x64/-/win32-x64-0.39.1.tgz", + "integrity": "sha512-RRS4VzEnIgIxhVDyLXg5HqnX3iGgkLMueVbH0w7CPeEOTN2Nu7y21JigOe85dg4w2l4tGInipzqQyFs4QIC9iw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, "node_modules/eslint-config-beslogic/node_modules/@typescript-eslint/eslint-plugin": { "version": "6.21.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz", @@ -5037,6 +5130,24 @@ "url": "https://opencollective.com/typescript-eslint" } }, + "node_modules/eslint-config-beslogic/node_modules/dprint": { + "version": "0.39.1", + "resolved": "https://registry.npmjs.org/dprint/-/dprint-0.39.1.tgz", + "integrity": "sha512-+tdldu28NJq1OEBIMWyAAON3Oe8DIgJN8Q3WuNN00KEw1Ni6qlVWzx/b50u4xggUmiL8uh9Xr4YAyO5cSPyaAA==", + "dev": true, + "hasInstallScript": true, + "bin": { + "dprint": "bin.js" + }, + "optionalDependencies": { + "@dprint/darwin-arm64": "0.39.1", + "@dprint/darwin-x64": "0.39.1", + "@dprint/linux-arm64-glibc": "0.39.1", + "@dprint/linux-x64-glibc": "0.39.1", + "@dprint/linux-x64-musl": "0.39.1", + "@dprint/win32-x64": "0.39.1" + } + }, "node_modules/eslint-etc": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/eslint-etc/-/eslint-etc-5.2.1.tgz", diff --git a/canopeum_frontend/package.json b/canopeum_frontend/package.json index 237cf8414..419897748 100644 --- a/canopeum_frontend/package.json +++ b/canopeum_frontend/package.json @@ -37,6 +37,7 @@ "@typescript-eslint/eslint-plugin": "^7.1.1", "@typescript-eslint/parser": "^7.1.1", "@vitejs/plugin-react": "^4.2.1", + "dprint": "^0.45.0", "eslint-config-beslogic": "^1.6.5", "eslint-plugin-jsx-a11y": "^6.8.0", "eslint-plugin-react": "^7.34.1", diff --git a/canopeum_frontend/src/components/PrimaryIconBadge.tsx b/canopeum_frontend/src/components/PrimaryIconBadge.tsx new file mode 100644 index 000000000..fbf131f6b --- /dev/null +++ b/canopeum_frontend/src/components/PrimaryIconBadge.tsx @@ -0,0 +1,38 @@ +type Props = { + readonly type: 'account_circle' + | 'add_a_photo' + | 'add' + | 'cancel' + | 'donut_small' + | 'eco' + | 'edit_square' + | 'forest' + | 'home_work' + | 'home' + | 'location_on' + | 'mail' + | 'mood' + | 'perm_phone_msg' + | 'person' + | 'pin_drop' + | 'psychiatry' + | 'school' + | 'smart_display' + | 'sms' + | 'source_environment' + | 'workspaces' +} + +const PrimaryIconBadge = (props: Props) => ( +
+ + {props.type} + +
+) + +export default PrimaryIconBadge diff --git a/canopeum_frontend/src/components/site/SiteSummaryCard.tsx b/canopeum_frontend/src/components/site/SiteSummaryCard.tsx index e90d6bb7a..87450cc91 100644 --- a/canopeum_frontend/src/components/site/SiteSummaryCard.tsx +++ b/canopeum_frontend/src/components/site/SiteSummaryCard.tsx @@ -1,36 +1,37 @@ import headerLogo from '@assets/images/map/MARR4059.png' - -import type { SiteSocial } from '../../services/api' +import PrimaryIconBadge from '@components/PrimaryIconBadge' +import type { SiteSocial } from '@services/api' type Props = { readonly site: SiteSocial, } const SiteSummaryCard = ({ site }: Props) => ( -
- {/* TODO: replace img source when backend offers an image endpoint */} - header logo -
-

{site.name}

- -
-
- - school - -
-

{site.type.en}

+
+
+
+ {/* TODO: replace img source when backend offers an image endpoint */} + header logo
-

{site.description ?? ''}

-
-
-
- personSponsors: +
+
+

{site.name}

+
+ +

{site.type.en}

+
+

{site.description ?? ''}

+
+
+ person + Sponsors: +
+
+ {site.sponsors.map(sponsorName => ( +
{sponsorName}
+ ))} +
- {site.sponsors.map(sponsorName =>
{sponsorName}
)}
diff --git a/canopeum_frontend/src/pages/MapSite.tsx b/canopeum_frontend/src/pages/MapSite.tsx index 1f6bbdf2c..026cee81e 100644 --- a/canopeum_frontend/src/pages/MapSite.tsx +++ b/canopeum_frontend/src/pages/MapSite.tsx @@ -1,29 +1,47 @@ +import SiteSummaryCard from '@components/site/SiteSummaryCard' +import type { SiteSocial } from '@services/api' +import api from '@services/apiInterface' +import { ensureError } from '@services/errors' import { useEffect, useState } from 'react' import { useParams } from 'react-router-dom' -import SiteSummaryCard from '../components/site/SiteSummaryCard' -import type { SiteSocial } from '../services/api' -import api from '../services/apiInterface' - -const fetchSite = async (siteId: number, setSite: (site: SiteSocial) => void) => { - try { - const site = await api().social.site(siteId) - setSite(site) - } catch (error) { - console.error(error) - } -} const MapSite = () => { const { siteId } = useParams() + const [isLoadingSite, setIsLoadingSite] = useState(true) + const [error, setError] = useState(undefined) const [site, setSite] = useState() + const fetchSiteData = async (parsedSiteId: number) => { + setIsLoadingSite(true) + try { + const fetchedSite = await api().social.site(parsedSiteId) + setSite(fetchedSite) + } catch (error_: unknown) { + setError(ensureError(error_)) + } finally { + setIsLoadingSite(false) + } + } + useEffect((): void => { - void fetchSite(Number(siteId) || 1, setSite) - }, [setSite, siteId]) + void fetchSiteData(Number(siteId) || 1) + }, [siteId]) return (
- {site && } + {isLoadingSite + ? +
+

Loading...

+
+ : error + ? +
+

{error.message}

+
+ + : (site && ) + }
diff --git a/canopeum_frontend/src/pages/Utilities.tsx b/canopeum_frontend/src/pages/Utilities.tsx index 8a4cd3195..c3ae6b764 100644 --- a/canopeum_frontend/src/pages/Utilities.tsx +++ b/canopeum_frontend/src/pages/Utilities.tsx @@ -1,5 +1,6 @@ import facebookLogo from '@assets/icons/facebook-regular.svg' import canopeumLogo from '@assets/images/Canopeum_Logo.jpg' +import PrimaryIconBadge from '@components/PrimaryIconBadge' const Utilities = () => (
@@ -53,6 +54,15 @@ const Utilities = () => ( psychiatry iconHome
+
+

Badges

+
+ + + + +
+

Buttons

diff --git a/canopeum_frontend/tsconfig.json b/canopeum_frontend/tsconfig.json index 9f4b155e4..5aa94fe5b 100644 --- a/canopeum_frontend/tsconfig.json +++ b/canopeum_frontend/tsconfig.json @@ -9,6 +9,12 @@ "paths": { "@assets/*": [ "./src/assets/*" + ], + "@components/*": [ + "./src/components/*" + ], + "@services/*": [ + "./src/services/*" ] }, /* Bundler mode */ diff --git a/canopeum_frontend/vite.config.ts b/canopeum_frontend/vite.config.ts index 73bcc071f..413acb7f2 100644 --- a/canopeum_frontend/vite.config.ts +++ b/canopeum_frontend/vite.config.ts @@ -9,7 +9,14 @@ export default ({ mode }: { mode: string }) => { resolve: { alias: { '@assets': '/src/assets', + '@components': '/src/components', + '@services': '/src/services', }, }, + server: { + watch: { + usePolling: true + } + } }) }