Skip to content

Commit

Permalink
refactored the accountTabs functions and resolved the issue of nested…
Browse files Browse the repository at this point in the history
… paragraph tags
  • Loading branch information
anshhhhhhh authored and anshhhhhhh committed Mar 30, 2024
1 parent df4a52f commit 5093940
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 35 deletions.
62 changes: 34 additions & 28 deletions client/src/route/auth/AccountTabs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,41 +3,46 @@ import TabComponent from 'components/tab/TabComponent';
import { useAuth } from 'react-oidc-context';
import { TabData } from 'components/tab/subcomponents/TabRender';

function AccountTabs() {
const {user} = useAuth();
const name=user?.profile.preferred_username;
const pfp=user?.profile.picture;
const profileUrl=user?.profile.profile;
function renderProfileTab() {
const {user}=useAuth();
const name = user?.profile.preferred_username;
const pfp = user?.profile.picture;
const profileUrl = user?.profile.profile;
const groupsLength = ((user?.profile.groups_direct as string[] | undefined)?.length ?? 0);

return (
<div>
<h2>Profile</h2>
<img src={pfp} data-testid="profile-picture" />
<p>
The username is <b>{name}</b>. See more details on the user on <b><a href={profileUrl}>SSO OAuth Provider.</a></b>
</p>
{groupsLength === 1 && <p>{name} belongs to {groupsLength} group.</p>}
{groupsLength > 1 && <p>{name} belongs to {groupsLength} groups.</p>}
</div>
);
}

function renderSettingsTab() {
const profileUrl=useAuth().user?.profile.profile;
return (
<div>
<h2>Settings</h2>
<p>Edit the profile on <b><a href={profileUrl}>SSO OAuth Provider.</a></b></p>
</div>
);
}

function AccountTabs() {

const accountTab: TabData[] = [
{
label: 'Profile',
body: (
<>
<div>
<h2>Profile</h2>
<img src={pfp} data-testid="profile-picture" />
<p>
The username is <b>{name}</b>. See more details on the user on <b><a href={profileUrl}>SSO OAuth Provider.</a></b>
</p>
<p>
{groupsLength===1 && <p>{name} belongs to {groupsLength} group.</p>}
{groupsLength>1 && <p>{name} belongs to {groupsLength} groups.</p>}
</p>
</div>
</>
),
body: renderProfileTab(),
},
{
label: 'Settings',
body: (
<>
<div>
<h2>Settings</h2>
<p>Edit the profile on <b><a href={profileUrl}>SSO OAuth Provider.</a></b></p>
</div>
</>
),
body: renderSettingsTab(),
},
];

Expand All @@ -47,3 +52,4 @@ function AccountTabs() {
}

export default AccountTabs;

9 changes: 2 additions & 7 deletions client/test/unitTests/Routes/AccountTabs.test.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as React from 'react';
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import AccountTabs from 'route/auth/AccountTabs';
import { useAuth } from 'react-oidc-context';

Expand All @@ -22,9 +21,7 @@ describe('AccountTabs', () => {
});

render(
<MemoryRouter>
<AccountTabs />
</MemoryRouter>
<AccountTabs />
);

const profilePicture = screen.getByTestId('profile-picture');
Expand All @@ -51,9 +48,7 @@ describe('AccountTabs', () => {
});

render(
<MemoryRouter>
<AccountTabs />
</MemoryRouter>
<AccountTabs />
);

const profilePicture = screen.getByTestId('profile-picture');
Expand Down

0 comments on commit 5093940

Please sign in to comment.