From 0d85972bfbbc63ea2eb91b89a0c268969237bc5d 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 (
-    <header className="flex w-screen flex-row items-center justify-between p-0">
-      <div className="">Test logo for {user.email}</div>
-      <div className="profile-image">Test image for {user.name}</div>
+    <header className="fixed top-5 flex w-11/12 flex-row items-center justify-between p-0">
+      <div>
+        <img src={logo} alt="logo"></img>
+      </div>
+      <div onClick={() => setSidebarVisible(!sidebarVisible)} role="presentation">
+        {sidebarVisible ? (
+          <Sidebar user={user} />
+        ) : (
+          <div>
+            <img className="cursor-pointer rounded-full" height={36} width={36} src={user.avatarUrl} alt="profile"></img>
+          </div>
+        )}
+      </div>
     </header>
   );
 }
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 (
+    <aside className={`${styles.sidebar} fixed top-0 right-0 flex h-screen w-1/6 min-w-fit flex-col gap-10 p-0`}>
+      <div className="flex h-16 flex-col items-center justify-between px-5 md:flex-row md:border-b md:border-b-white">
+        <span className="pt-2 font-bold text-white">{user.name}</span>
+        <img className="cursor-pointer rounded-full" height={36} width={36} src={user.avatarUrl} alt="profile"></img>
+      </div>
+      <button onClick={performLogout} className="left-5 text-xl text-white opacity-50">
+        Logout
+      </button>
+    </aside>
+  );
+}
+
+export default Sidebar;