From 9bd4c1b735ac7cc2b9cac02910bccea72eebfc6b Mon Sep 17 00:00:00 2001
From: atomicgamedeveloper
<109801255+atomicgamedeveloper@users.noreply.github.com>
Date: Thu, 4 Jul 2024 15:57:56 +0200
Subject: [PATCH] Update Account tabs and add group list (#838)
- Uses the existing user profile information obtained
in OAuth signin process and updates the profile page.
- Downgrades the ESLint version to make it compatible
with eslintrc configuration file.
---
client/package.json | 2 +-
client/src/route/auth/Account.tsx | 3 +-
client/src/route/auth/AccountTabData.tsx | 92 +++++++++++++-
client/test/unitTests/Routes/Account.test.tsx | 113 ++++++++++++++++--
client/yarn.lock | 91 +-------------
5 files changed, 200 insertions(+), 101 deletions(-)
diff --git a/client/package.json b/client/package.json
index 93a2190d3..768bc4214 100644
--- a/client/package.json
+++ b/client/package.json
@@ -51,7 +51,7 @@
"@typescript-eslint/eslint-plugin": "^6.12.0",
"@typescript-eslint/parser": "^6.12.0",
"dotenv": "^16.1.4",
- "eslint": "^8.54.0",
+ "eslint": "8.54.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-import": "^2.29.0",
diff --git a/client/src/route/auth/Account.tsx b/client/src/route/auth/Account.tsx
index 352897655..6b2623ff6 100644
--- a/client/src/route/auth/Account.tsx
+++ b/client/src/route/auth/Account.tsx
@@ -1,6 +1,5 @@
import * as React from 'react';
import Layout from 'page/Layout';
-import { Typography } from '@mui/material';
import TabComponent from 'components/tab/TabComponent';
import { TabData } from 'components/tab/subcomponents/TabRender';
import tabs from './AccountTabData';
@@ -8,7 +7,7 @@ import tabs from './AccountTabData';
function AccountContent() {
const AccountTab: TabData[] = tabs.map((tab) => ({
label: tab.label,
- body: {tab.body},
+ body: tab.body,
}));
return (
diff --git a/client/src/route/auth/AccountTabData.tsx b/client/src/route/auth/AccountTabData.tsx
index e072642fa..a2b6a8bf1 100644
--- a/client/src/route/auth/AccountTabData.tsx
+++ b/client/src/route/auth/AccountTabData.tsx
@@ -1,13 +1,97 @@
-import { ITabs } from 'route/IData';
+import * as React from 'react';
+import { useAuth } from 'react-oidc-context';
+import { TabData } from 'components/tab/subcomponents/TabRender';
-const tabs: ITabs[] = [
+function ListGroups(groups: string[]): React.ReactNode[] {
+ const boldGroups = groups.map((group) =>
+ React.createElement('b', null, group),
+ );
+
+ const userBelongsToOneGroup = groups.length === 1;
+ if (userBelongsToOneGroup) {
+ return boldGroups;
+ }
+
+ const groupListing: React.ReactNode[] = [];
+ boldGroups
+ .slice(0, -1)
+ .map((groupElement) => groupListing.push(groupElement, ', '));
+ groupListing.splice(groupListing.length - 1, 1, [
+ ' and ',
+ boldGroups.slice(-1),
+ ]);
+ return groupListing;
+}
+
+function GroupParagraph(groups: string[], name: React.ReactNode) {
+ const userBelongsToAnyGroups = groups.length > 0;
+ if (!userBelongsToAnyGroups) {
+ return (
+
+ {name} does not belong to any groups.
+
+ );
+ }
+
+ const groupListing = ListGroups(groups);
+ const groupSuffix = groups.length > 1 ? 's' : '';
+ return (
+
+ {name} belongs to {React.Children.toArray(groupListing)} group
+ {groupSuffix}.
+
+ );
+}
+
+function ProfileTab() {
+ const { user } = useAuth();
+ const name = (user?.profile.preferred_username as string | undefined) ?? '';
+ const pfp = user?.profile.picture;
+ const profileUrl = user?.profile.profile;
+
+ const groups = (user?.profile.groups as string[] | string | undefined) ?? [];
+ const isGroupsAString = typeof groups === 'string';
+ const groupsArray = isGroupsAString ? [groups] : groups;
+ const groupParagraph = GroupParagraph(groupsArray, name);
+
+ return (
+
+
Profile
+
+
+ The username is {name}. See more details on{' '}
+
+ SSO OAuth Provider.
+
+
+ {groupParagraph}
+