Skip to content

Commit

Permalink
[#19] Display user information in header and add sidebar for logging …
Browse files Browse the repository at this point in the history
…the user out
  • Loading branch information
liamstevens111 committed Mar 9, 2023
1 parent 856692f commit 997ef75
Show file tree
Hide file tree
Showing 5 changed files with 75 additions and 4 deletions.
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 11 additions & 0 deletions src/adapters/authAdapter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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', {});
}
Expand Down
22 changes: 19 additions & 3 deletions src/components/Header/index.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,30 @@
import { useState } from 'react';

import logo from 'assets/images/logo.svg';
import Sidebar from 'components/Sidebar';
import { User } from 'types/User';

type HeaderProps = {
user: User;
};

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>
);
}
Expand Down
5 changes: 5 additions & 0 deletions src/components/Sidebar/Sidebar.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.sidebar {
border: 5px bla solid;

background: rgba(30, 30, 30, 0.9);
}
39 changes: 39 additions & 0 deletions src/components/Sidebar/index.tsx
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 997ef75

Please sign in to comment.