hook up invitations api with notifications bar

src/components/App.tsx

@@ -3,13 +3,14 @@ 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';
+import { getReceivedInvitationsAndRequests } from './api';
+import { IInvitation } from './types';
 
 const Authenticator = lazy(() => import('./Authentication/Authenticator'));
 const Group = lazy(() => import('./Group'));
 
-const dummyNotificationData: INotification[] = ([] = [
+const dummyNotificationData: IInvitation[] = [
 	{
 		user: {
 			id: 0,
@@ -20,7 +21,7 @@ const dummyNotificationData: INotification[] = ([] = [
 			name: 'Cross Country',
 		},
 		isRequest: true,
-		sentTime: new Date(),
+		sentTime: new Date().toISOString(),
 	},
 	{
 		user: {
@@ -32,22 +33,23 @@ const dummyNotificationData: INotification[] = ([] = [
 			name: 'TJ Lax',
 		},
 		isRequest: false,
-		sentTime: new Date(),
+		sentTime: new Date().toISOString(),
 	},
-]);
+];
 
 export default function App() {
 	const { user } = useContext(AuthenticationContext);
+	// eslint-disable-next-line
 	const [notifications, setNotifications] = useState(dummyNotificationData);
 	useEffect(() => {
-		//getNotifications().then(setNotifications);
+		getReceivedInvitationsAndRequests().then(setNotifications);
 	}, []);
 	return (
 		<div style={{ padding: '1rem' }}>
 			{notifications.length > 0 ? (
 				<Notifications notifications={notifications} />
 			) : (
-				<span>No notifications </span>
+				<span>No notifications</span>
 			)}
 			<BrowserRouter>
 				<Switch>

src/components/Notification.tsx

@@ -1,12 +1,12 @@
-import { INotification } from './Notifications';
 import { useCallback } from 'react';
 import { acceptInvite, acceptRequest, denyInvite, denyRequest } from './api';
+import { IInvitation } from './types';
 import UIButton from './UIButton';
 
 export default function Notification({
 	notification,
 }: {
-	notification: INotification;
+	notification: IInvitation;
 }) {
 	const carpoolId = notification.carpool.id;
 
@@ -26,6 +26,8 @@ export default function Notification({
 		denyInvite(carpoolId, notification.user.id);
 	}, [carpoolId, notification.user.id]);
 
+	const sentTime = new Date(notification.sentTime);
+
 	return (
 		<div className="notification">
 			{notification.user.name}
@@ -34,15 +36,7 @@ export default function Notification({
 			) : (
 				<span> invited you to join </span>
 			)}
-			{notification.carpool.name +
+			{notification.carpool.name + sentTime.toLocaleString()}
-				' ' +
-				(notification.sentTime.getMonth() + 1) +
-				'/' +
-				notification.sentTime.getDate() +
-				'/' +
-				notification.sentTime.getFullYear() +
-				' ' +
-				notification.sentTime.toLocaleTimeString()}
 			{notification.isRequest ? (
 				<div className="notification-buttons" style={{ display: 'flex' }}>
 					<UIButton onClick={acceptReq}>Accept</UIButton>

src/components/Notifications.tsx

@@ -1,22 +1,10 @@
 import Notification from './Notification';
-
+import { IInvitation } from './types';
-export type INotification = {
-	user: {
-		id: number;
-		name: string;
-	};
-	carpool: {
-		id: number;
-		name: string;
-	};
-	isRequest: boolean;
-	sentTime: Date;
-};
 
 export default function Notifications({
 	notifications,
 }: {
-	notifications: INotification[];
+	notifications: IInvitation[];
 }) {
 	return (
 		<div className="notifications">

src/components/api.ts

@@ -1,5 +1,6 @@
 import { IEventSignup } from './Event';
 import { GroupPreview } from './GroupJoinerLink';
+import { IInvitation } from './types';
 
 async function post(path: string, data: any) {
 	const res = await fetch('http://localhost:5000/api' + path, {
@@ -163,3 +164,17 @@ export async function joinGroup(id: number, code: string) {
 		status: result.status,
 	};
 }
+
+export async function generateCode(groupId: number) {
+	return await post('/groups/' + groupId + '/generate_code', {});
+}
+
+export async function resetCode(groupId: number) {
+	return await post('/groups/' + groupId + '/reset_code', {});
+}
+
+export async function getReceivedInvitationsAndRequests() {
+	return (await get(
+		'/users/@me/received_requests_and_invites'
+	)) as IInvitation[];
+}

src/components/types.ts

@@ -8,17 +8,6 @@ export type IUser = {
 	name: string | null;
 };
 
-/**
- * Model Invitation
- */
-
-export type IInvitation = {
-	userId: number;
-	carpoolId: number;
-	isRequest: boolean;
-	sentTime: Date;
-};
-
 /**
  * Model Carpool
  */
@@ -75,3 +64,16 @@ export type IEventSignup = {
 	latitude: number | null;
 	longitude: number | null;
 };
+
+export type IInvitation = {
+	user: {
+		id: number;
+		name: string;
+	};
+	carpool: {
+		id: number;
+		name: string;
+	};
+	sentTime: string;
+	isRequest: boolean;
+};