create Header component, fix Notifications

src/components/App.tsx

@@ -1,9 +1,6 @@
-import { CSSProperties, lazy, Suspense, useEffect, useState } from 'react';
+import { CSSProperties, lazy, Suspense } from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
-import { getReceivedInvitationsAndRequests } from './api';
 import { useMe } from './hooks';
-import Notifications from './Notifications/Notifications';
-import { IInvitation } from './types';
 import WheelShare from './WheelShare';
 import WheelShareLoggedOut from './WheelShareLoggedOut';
 
@@ -11,33 +8,6 @@ const Authenticator = lazy(() => import('./Authentication/Authenticator'));
 const Carpool = lazy(() => import('./Carpool/Carpool'));
 const Group = lazy(() => import('./Group'));
 
-const dummyNotificationData: IInvitation[] = [
-	{
-		user: {
-			id: 0,
-			name: 'Michael Fatemi',
-		},
-		carpool: {
-			id: 0,
-			name: 'Cross Country',
-		},
-		isRequest: true,
-		sentTime: new Date().toISOString(),
-	},
-	{
-		user: {
-			id: 1,
-			name: 'Joshua Hsueh',
-		},
-		carpool: {
-			id: 0,
-			name: 'TJ Lax',
-		},
-		isRequest: false,
-		sentTime: new Date().toISOString(),
-	},
-];
-
 const style: CSSProperties = {
 	display: 'flex',
 	flexDirection: 'column',
@@ -48,27 +18,11 @@ const style: CSSProperties = {
 	marginRight: 'auto',
 };
 
-function useNotifications() {
-	const [notifications, setNotifications] = useState(dummyNotificationData);
-
-	useEffect(() => {
-		getReceivedInvitationsAndRequests().then(setNotifications);
-	}, []);
-
-	return notifications;
-}
-
 export default function App() {
 	const user = useMe();
-	const notifications = useNotifications();
 	return (
 		<div style={{ padding: '1rem', maxWidth: '100vw' }}>
 			<div style={style}>
-				{notifications.length > 0 ? (
-					<Notifications notifications={notifications} />
-				) : (
-					<span>No notifications</span>
-				)}
 				<BrowserRouter>
 					<Switch>
 						<Route

src/components/Carpool/Carpool.tsx

@@ -1,10 +1,10 @@
 import MailOutlineIcon from '@material-ui/icons/MailOutline';
 import PersonAddIcon from '@material-ui/icons/PersonAdd';
-import { createContext } from 'react';
+import { createContext, useCallback, useEffect, useState } from 'react';
-import { useCallback, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { cancelCarpoolInvite, getCarpool, sendCarpoolInvite } from '../api';
 import { lightgrey } from '../colors';
+import Header from '../Header/Header';
 import { ICarpool } from '../types';
 import UIButton from '../UI/UIButton';
 import UISecondaryBox from '../UI/UISecondaryBox';
@@ -84,6 +84,7 @@ export default function Carpool() {
 
 	return (
 		<CarpoolContext.Provider value={{ carpool, sendInvite, cancelInvite }}>
+			<Header />
 			<UISecondaryBox style={{ width: '100%', alignItems: 'center' }}>
 				{carpool ? (
 					<>

src/components/Header/Header.tsx

@@ -0,0 +1,36 @@
+import logout from '../Authentication/logout';
+import { useMe, useNotifications } from '../hooks';
+import Notifications from '../Notifications/Notifications';
+import UIPressable from '../UI/UIPressable';
+import UIPrimaryTitle from '../UI/UIPrimaryTitle';
+
+export default function Header() {
+	const me = useMe();
+	const notifications = useNotifications();
+	return (
+		<div
+			style={{
+				marginBottom: '0.5rem',
+				display: 'flex',
+				flexDirection: 'column',
+				alignItems: 'center',
+			}}
+		>
+			<UIPrimaryTitle>WheelShare</UIPrimaryTitle>
+			{me ? (
+				<>
+					{me.name}
+					<UIPressable onClick={logout}>Log out</UIPressable>
+					<br />
+					{notifications.length > 0 ? (
+						<Notifications notifications={notifications} />
+					) : (
+						<span>No notifications</span>
+					)}
+				</>
+			) : (
+				<span>Log In</span>
+			)}
+		</div>
+	);
+}

src/components/Notifications/Notification.tsx

@@ -36,7 +36,7 @@ export default function Notification({
 			) : (
 				<span> invited you to join </span>
 			)}
-			{notification.carpool.name + sentTime.toLocaleString()}
+			{notification.carpool.name + ' at ' + sentTime.toLocaleString()}
 			{notification.isRequest ? (
 				<div className="notification-buttons" style={{ display: 'flex' }}>
 					<UIButton onClick={acceptReq}>Accept</UIButton>

src/components/Notifications/Notifications.tsx

@@ -7,16 +7,14 @@ export default function Notifications({
 	notifications: IInvitation[];
 }) {
 	return (
-		<div className="notifications">
+		<div style={{ display: 'flex', flexDirection: 'column' }}>
-			<div style={{ display: 'flex', flexDirection: 'column' }}>
+			<h3 style={{ marginBlockEnd: '0' }}>Notifications</h3>
-				<h3 style={{ marginBlockEnd: '0' }}>Notifications</h3>
+			{notifications.map((notification) => (
-				{notifications.map((notification) => (
+				<Notification
-					<Notification
+					notification={notification}
-						notification={notification}
+					key={`${notification.user.id}:${notification.carpool.id}`}
-						key={`${notification.user.id}:${notification.carpool.id}`}
+				/>
-					/>
+			))}
-				))}
-			</div>
 		</div>
 	);
 }

src/components/WheelShare.tsx

@@ -1,19 +1,11 @@
-import logout from './Authentication/logout';
 import Events from './Events';
 import Groups from './Groups/Groups';
-import { useMe } from './hooks';
+import Header from './Header/Header';
-import UIPressable from './UI/UIPressable';
-import UIPrimaryTitle from './UI/UIPrimaryTitle';
 
 export default function WheelShare() {
-	const { name } = useMe()!;
-
 	return (
 		<>
-			<UIPrimaryTitle>WheelShare</UIPrimaryTitle>
+			<Header />
-
-			{name}
-			<UIPressable onClick={logout}>Log out</UIPressable>
 
 			<Groups />
 			<Events />

src/components/hooks.ts

@@ -1,5 +1,17 @@
-import { useContext } from 'react';
+import { useContext, useEffect, useState } from 'react';
+import { getReceivedInvitationsAndRequests } from './api';
 import AuthenticationContext from './Authentication/AuthenticationContext';
+import { IInvitation } from './types';
 
 export const useAuth = () => useContext(AuthenticationContext);
 export const useMe = () => useAuth().user;
+
+export function useNotifications() {
+	const [notifications, setNotifications] = useState<IInvitation[]>([]);
+
+	useEffect(() => {
+		getReceivedInvitationsAndRequests().then(setNotifications);
+	}, []);
+
+	return notifications;
+}