From b368d515c5b1ace8afba56b678aa7f2908c6d18a Mon Sep 17 00:00:00 2001 From: Liam Stevens <8955671+liamstevens111@users.noreply.github.com> Date: Thu, 9 Mar 2023 09:46:42 +0700 Subject: [PATCH] [#19] Display user information in header and add sidebar for logging the user out --- package-lock.json | 2 +- src/adapters/authAdapter.ts | 11 ++++++ src/components/Header/index.tsx | 22 ++++++++++-- src/components/Sidebar/Sidebar.module.scss | 5 +++ src/components/Sidebar/index.tsx | 39 ++++++++++++++++++++++ 5 files changed, 75 insertions(+), 4 deletions(-) create mode 100644 src/components/Sidebar/Sidebar.module.scss create mode 100644 src/components/Sidebar/index.tsx diff --git a/package-lock.json b/package-lock.json index 3a221b0..b121a2c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,7 +38,7 @@ "danger": "10.9.0", "danger-plugin-istanbul-coverage": "1.6.2", "eslint": "8.11.0", - "jest-localstorage-mock": "^2.4.26", + "jest-localstorage-mock": "2.4.26", "nock": "13.3.0", "postcss": "8.4.21", "postcss-import": "14.1.0", diff --git a/src/adapters/authAdapter.ts b/src/adapters/authAdapter.ts index c648015..b7729b7 100644 --- a/src/adapters/authAdapter.ts +++ b/src/adapters/authAdapter.ts @@ -36,6 +36,17 @@ class AuthAdapter extends BaseAdapter { return this.prototype.postRequest('oauth/token', { data: requestParams }); } + static logout(accessToken: string) { + /* eslint-disable camelcase */ + const requestParams = { + ...commonParams, + token: accessToken, + }; + /* eslint-enable camelcase */ + + return this.prototype.postRequest('oauth/revoke', { data: requestParams }); + } + static getUser() { return this.prototype.getRequest('me', {}); } diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index ef1f11f..1e0bf4a 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,3 +1,7 @@ +import { useState } from 'react'; + +import logo from 'assets/images/logo.svg'; +import Sidebar from 'components/Sidebar'; import { User } from 'types/User'; type HeaderProps = { @@ -5,10 +9,22 @@ type HeaderProps = { }; function Header({ user }: HeaderProps) { + const [sidebarVisible, setSidebarVisible] = useState(false); + return ( -
-
Test logo for {user.email}
-
Test image for {user.name}
+
+
+ logo +
+
setSidebarVisible(!sidebarVisible)} role="presentation"> + {sidebarVisible ? ( + + ) : ( +
+ profile +
+ )} +
); } diff --git a/src/components/Sidebar/Sidebar.module.scss b/src/components/Sidebar/Sidebar.module.scss new file mode 100644 index 0000000..99fcc90 --- /dev/null +++ b/src/components/Sidebar/Sidebar.module.scss @@ -0,0 +1,5 @@ +.sidebar { + border: 5px bla solid; + + background: rgba(30, 30, 30, 0.9); +} diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx new file mode 100644 index 0000000..f6f1a86 --- /dev/null +++ b/src/components/Sidebar/index.tsx @@ -0,0 +1,39 @@ +import { useNavigate } from 'react-router-dom'; + +import AuthAdapter from 'adapters/authAdapter'; +import { getItem, clearItem } from 'helpers/localStorage'; +import { User } from 'types/User'; + +import styles from './Sidebar.module.scss'; +import { LOGIN_URL } from '../../constants'; + +type SidebarProps = { + user: User; +}; + +function Sidebar({ user }: SidebarProps) { + const navigate = useNavigate(); + + const performLogout = async (e: React.SyntheticEvent) => { + e.stopPropagation(); + + const accessToken = getItem('UserProfile')?.auth.access_token; + await AuthAdapter.logout(accessToken); + clearItem('UserProfile'); + navigate(LOGIN_URL); + }; + + return ( + + ); +} + +export default Sidebar;