started notifications

src/components/Groups.tsx

@@ -1,19 +1,54 @@
 import { useState, useEffect } from 'react';
-import { getGroups } from './api';
+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 />

src/components/Notification.tsx

@@ -0,0 +1,57 @@
+import { INotification } from './Notifications';
+import { useCallback } from 'react';
+import { acceptInvite, acceptRequest, denyInvite, denyRequest } from './api';
+import UIButton from './UIButton';
+
+export default function Notification({
+	notification,
+}: {
+	notification: INotification;
+}) {
+	const acceptReq = useCallback(() => {
+		acceptRequest(notification.user.id);
+	}, [notification.user.id]);
+
+	const rejectReq = useCallback(() => {
+		denyRequest(notification.user.id);
+	}, [notification.user.id]);
+
+	const acceptInv = useCallback(() => {
+		acceptInvite(notification.user.id);
+	}, [notification.user.id]);
+
+	const rejectInv = useCallback(() => {
+		denyInvite(notification.user.id);
+	}, []);
+
+	return (
+		<div className="notification">
+			{notification.user.name}
+			{notification.isRequest ? (
+				<span> request you to join </span>
+			) : (
+				<span> invited you to join </span>
+			)}
+			{notification.carpool.name +
+				' ' +
+				(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>
+					<UIButton onClick={rejectReq}>Reject</UIButton>
+				</div>
+			) : (
+				<div className="notification-buttons" style={{ display: 'flex' }}>
+					<UIButton onClick={acceptInv}>Accept</UIButton>
+					<UIButton onClick={rejectInv}>Reject</UIButton>
+				</div>
+			)}
+		</div>
+	);
+}

src/components/Notifications.tsx

@@ -0,0 +1,32 @@
+import { userInfo } from 'node:os';
+import Notification from './Notification';
+
+export type INotification = {
+	user: {
+		id: number;
+		name: string;
+	};
+	carpool: {
+		id: number;
+		name: string;
+	};
+	isRequest: boolean;
+	sentTime: Date;
+};
+
+export default function Notifications({
+	notifications,
+}: {
+	notifications: INotification[];
+}) {
+	return (
+		<div className="notifications">
+			<div style={{ display: 'flex', flexDirection: 'column' }}>
+				<h3 style={{ marginBlockEnd: '0' }}>Notifications</h3>
+				{notifications.map((notification) => {
+					return <Notification notification={notification} />;
+				})}
+			</div>
+		</div>
+	);
+}

src/components/api.ts

@@ -128,6 +128,26 @@ export async function createGroup(name: string) {
 	};
 }
 
+export async function getNotifications() {
+	return await get('/users/@me/received_requests_and_invites');
+}
+
+export async function acceptRequest(userId: number) {
+	return await post('/carpools/:id/accept_request', { userId });
+}
+
+export async function acceptInvite(userId: number) {
+	return await post('/carpools/:id/accept_invite', { userId });
+}
+
+export async function denyRequest(userId: number) {
+	return await post('/carpools/:id/deny_request', { userId });
+}
+
+export async function denyInvite(userId: number) {
+	return await post('/carpools/:id/deny_invite', { userId });
+}
+
 export async function getMe() {
 	return await get('/users/@me');
 }