put notifications top of router

src/components/App.tsx

@@ -1,16 +1,54 @@
-import { lazy, Suspense, useContext } from 'react';
+import { lazy, Suspense, useContext, useState, useEffect } from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import AuthenticationContext from './Authentication/AuthenticationContext';
 import WheelShare from './WheelShare';
 import WheelShareLoggedOut from './WheelShareLoggedOut';
+import { INotification } from './Notifications';
+import Notifications from './Notifications';
 
 const Authenticator = lazy(() => import('./Authentication/Authenticator'));
 const Group = lazy(() => import('./Group'));
 
+const dummyNotificationData: INotification[] = ([] = [
+	{
+		user: {
+			id: 0,
+			name: 'Michael Fatemi',
+		},
+		carpool: {
+			id: 0,
+			name: 'Cross Country',
+		},
+		isRequest: true,
+		sentTime: new Date(),
+	},
+	{
+		user: {
+			id: 1,
+			name: 'Joshua Hsueh',
+		},
+		carpool: {
+			id: 0,
+			name: 'TJ Lax',
+		},
+		isRequest: false,
+		sentTime: new Date(),
+	},
+]);
+
 export default function App() {
 	const { user } = useContext(AuthenticationContext);
+	const [notifications, setNotifications] = useState(dummyNotificationData);
+	useEffect(() => {
+		//getNotifications().then(setNotifications);
+	}, []);
 	return (
 		<div style={{ padding: '1rem' }}>
+			{notifications.length > 0 ? (
+				<Notifications notifications={notifications} />
+			) : (
+				<span>No notifications </span>
+			)}
 			<BrowserRouter>
 				<Switch>
 					<Route

src/components/Groups.tsx

@@ -1,54 +1,18 @@
 import { useState, useEffect } from 'react';
 import { getGroups, getNotifications } from './api';
 import { IGroup } from './Group';
-import { INotification } from './Notifications';
 import GroupCreatorLink from './GroupCreatorLink';
 import GroupJoinerLink from './GroupJoinerLink';
 import GroupList from './GroupList';
-import Notifications from './Notifications';
-
-const dummyNotificationData: INotification[] = ([] = [
-	{
-		user: {
-			id: 0,
-			name: 'Michael Fatemi',
-		},
-		carpool: {
-			id: 0,
-			name: 'Cross Country',
-		},
-		isRequest: true,
-		sentTime: new Date(),
-	},
-	{
-		user: {
-			id: 1,
-			name: 'Joshua Hsueh',
-		},
-		carpool: {
-			id: 0,
-			name: 'TJ Lax',
-		},
-		isRequest: false,
-		sentTime: new Date(),
-	},
-]);
 
 export default function Groups() {
 	const [groups, setGroups] = useState<IGroup[]>([]);
-	const [notifications, setNotifications] = useState(dummyNotificationData);
 	useEffect(() => {
 		getGroups().then(setGroups);
-		//getNotifications().then(setNotifications);
 	}, []);
 
 	return (
 		<>
-			{notifications.length > 0 ? (
-				<Notifications notifications={notifications} />
-			) : (
-				<span>No notifications </span>
-			)}
 			<h1>Groups</h1>
 			<GroupJoinerLink />
 			<br />