Add NFC point features + Improve Hacker Portal

components/Organizer/EventsTab/EventsTab.tsx

@@ -1,87 +1,108 @@
-import { Button, Input, InputRef, Modal, notification, Table } from 'antd';
+import { Button, Input, InputRef, Modal, notification, Table, InputNumber } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import { useEffect, useRef, useState } from 'react';
 import { EventCountData, EventData } from '../../../types/database';
 import { RequestType, useCustomSWR } from '../../../utils/request-utils';
 import { mutate } from 'swr';
+import { ObjectId } from 'mongoose';
+import { handleSubmitFailure, handleSubmitSuccess } from '../../../lib/helpers';
 
 interface EventDisplay extends EventData {
 	setCurEvent: (open: EventDisplay) => void;
 }
 
-const columns: ColumnsType<EventDisplay> = [
-	{
-		title: 'Day',
-		dataIndex: 'startTime',
-		key: 'day',
-		render: (startTime: string) => {
-			let date = new Date(startTime).toDateString();
-			// TODO use a date format string instead for clarity
-			date = date.substring(0, date.length - 5);
-			return date;
+export default function Events() {
+	const [curEvent, setCurEvent] = useState<EventDisplay | null>(null);
+	const [events, setEvents] = useState<EventDisplay[]>([]);
+	const [nfcId, setNfcId] = useState<string>('');
+	const [loading, setLoading] = useState(false);
+	const [showSaveButton, setShowSaveButton] = useState(false);
+
+	const columns: ColumnsType<EventDisplay> = [
+		{
+			title: 'Day',
+			dataIndex: 'startTime',
+			key: 'day',
+			render: (startTime: string) => {
+				let date = new Date(startTime).toDateString();
+				// TODO use a date format string instead for clarity
+				date = date.substring(0, date.length - 5);
+				return date;
+			},
+			width: '15%',
 		},
-		width: '15%',
-	},
-	{
-		title: 'Time',
-		dataIndex: 'startTime',
-		key: 'time',
-		render: (startTime: string, record: EventDisplay) => {
-			// TODO use a date format string instead for clarity
-			const start = new Date(startTime);
-			const end = new Date(record.endTime.toString());
-			const startHours = start.getHours() % 12 || 12;
-			const startMinutes = start.getMinutes();
-			const endHours = end.getHours() % 12 || 12;
-			const endMinutes = end.getMinutes();
-			const startAmPm = start.getHours() >= 12 ? 'PM' : 'AM';
-			const endAmPm = end.getHours() >= 12 ? 'PM' : 'AM';
-			return (
-				<span>
-					{startHours}:{startMinutes < 10 ? `0${startMinutes}` : startMinutes} {startAmPm} - {endHours}:
-					{endMinutes < 10 ? `0${endMinutes}` : endMinutes} {endAmPm}
-				</span>
-			);
+		{
+			title: 'Time',
+			dataIndex: 'startTime',
+			key: 'time',
+			render: (startTime: string, record: EventDisplay) => {
+				// TODO use a date format string instead for clarity
+				const start = new Date(startTime);
+				const end = new Date(record.endTime.toString());
+				const startHours = start.getHours() % 12 || 12;
+				const startMinutes = start.getMinutes();
+				const endHours = end.getHours() % 12 || 12;
+				const endMinutes = end.getMinutes();
+				const startAmPm = start.getHours() >= 12 ? 'PM' : 'AM';
+				const endAmPm = end.getHours() >= 12 ? 'PM' : 'AM';
+				return (
+					<span>
+						{startHours}:{startMinutes < 10 ? `0${startMinutes}` : startMinutes} {startAmPm} - {endHours}:
+						{endMinutes < 10 ? `0${endMinutes}` : endMinutes} {endAmPm}
+					</span>
+				);
+			},
+			sorter: (a: EventDisplay, b: EventDisplay) => {
+				const aStart = new Date(a.startTime.toString());
+				const bStart = new Date(b.startTime.toString());
+				return aStart.getTime() - bStart.getTime();
+			},
+			sortOrder: 'ascend',
+			width: '15%',
 		},
-		sorter: (a: EventDisplay, b: EventDisplay) => {
-			const aStart = new Date(a.startTime.toString());
-			const bStart = new Date(b.startTime.toString());
-			return aStart.getTime() - bStart.getTime();
+		{
+			title: 'Name',
+			dataIndex: 'name',
+			key: 'name',
+			width: '30%',
 		},
-		sortOrder: 'ascend',
-		width: '15%',
-	},
-	{
-		title: 'Name',
-		dataIndex: 'name',
-		key: 'name',
-		width: '40%',
-	},
-	{
-		title: 'Count',
-		dataIndex: 'count',
-		key: 'count',
-		width: '10%',
-		render: (count: number) => {
-			return <span>{count ? count : 0}</span>;
+		{
+			title: 'NFC Points',
+			dataIndex: 'nfcPoints',
+			key: 'nfcPoints',
+			width: '10%',
+			render: (nfcPoints: number, record: EventDisplay, index: number) => {
+				return (
+					<>
+						<InputNumber
+							defaultValue={nfcPoints ? nfcPoints : 0}
+							onChange={(newNfcPoints: number | null) =>
+								handleNFCPointChanges(record._id, newNfcPoints || 0)
+							}
+						/>
+					</>
+				);
+			},
 		},
-	},
-	{
-		title: 'Check In',
-		dataIndex: 'checkIn',
-		key: 'checkIn',
-		render: (_: any, record: EventDisplay) => {
-			return <Button onClick={() => record.setCurEvent(record)}>Check In</Button>;
+		{
+			title: 'Count',
+			dataIndex: 'count',
+			key: 'count',
+			width: '10%',
+			render: (count: number) => {
+				return <span>{count ? count : 0}</span>;
+			},
 		},
-		width: '20%',
-	},
-];
-
-const EventsTab = () => {
-	const [curEvent, setCurEvent] = useState<EventDisplay | null>(null);
-	const [events, setEvents] = useState<EventDisplay[]>([]);
-	const [nfcId, setNfcId] = useState<string>('');
-	const [loading, setLoading] = useState(false);
+		{
+			title: 'Check In',
+			dataIndex: 'checkIn',
+			key: 'checkIn',
+			render: (_: any, record: EventDisplay) => {
+				return <Button onClick={() => record.setCurEvent(record)}>Check In</Button>;
+			},
+			width: '20%',
+		},
+	];
 
 	const input = useRef<InputRef>(null);
 
@@ -131,6 +152,19 @@ const EventsTab = () => {
 			.finally(() => setLoading(false));
 	};
 
+	const handleNFCPointChanges = (eventId: ObjectId, nfcPoints: number) => {
+		// Deep copy and update array
+		const newEvents = JSON.parse(JSON.stringify(events));
+		newEvents.map((event: EventDisplay) => {
+			if (event._id === eventId) event.nfcPoints = nfcPoints;
+			return event;
+		});
+		setEvents(newEvents);
+
+		// Show the save button
+		setShowSaveButton(true);
+	};
+
 	const handleCheckIn = async () => {
 		const response = await fetch('/api/event-checkin', {
 			method: 'POST',
@@ -140,24 +174,36 @@ const EventsTab = () => {
 			body: JSON.stringify({
 				nfcId,
 				eventId: curEvent?._id,
+				nfcPoints: curEvent?.nfcPoints,
 			}),
 		});
 		if (response.ok) {
-			notification['success']({
-				message: `Successfully checked in!`,
-				placement: 'bottomRight',
-			});
+			handleSubmitSuccess('Successfully checked in!');
 		} else {
-			notification['error']({
-				message: 'Failed to check-in hacker',
-				description: await response.text(),
-				placement: 'bottomRight',
-			});
+			handleSubmitFailure('Failed to check in user!');
 		}
 		setNfcId('');
 		refreshData();
 	};
 
+	const handleSaveChanges = async () => {
+		// Send POST request
+		const response = await fetch('/api/event-save-changes', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify(events),
+		});
+
+		// Display the success/failure messages
+		if (response.ok) {
+			handleSubmitSuccess('Successfully saved changes!');
+		} else {
+			handleSubmitFailure('Failed to save changes!');
+		}
+	};
+
 	const handleCancel = () => {
 		setCurEvent(null);
 		setNfcId('');
@@ -169,11 +215,23 @@ const EventsTab = () => {
 		refreshData();
 	};
 
+	const ButtonBoxStyle = {
+		display: 'flex',
+		justifyContent: 'space-between',
+	};
 	return (
 		<>
-			<Button loading={loading} onClick={syncCalendar}>
-				Sync Calendar Events
-			</Button>
+			<div style={ButtonBoxStyle}>
+				<Button loading={loading} onClick={syncCalendar}>
+					Sync Calendar Events
+				</Button>
+				{showSaveButton && (
+					<Button loading={loading} onClick={handleSaveChanges}>
+						Save Changes
+					</Button>
+				)}
+			</div>
+
 			<br />
 			<br />
 			<Table sticky bordered dataSource={events} columns={columns} />
@@ -197,6 +255,4 @@ const EventsTab = () => {
 			</Modal>
 		</>
 	);
-};
-
-export default EventsTab;
+}