Format availibility to post

src/App.js

@@ -82,6 +82,7 @@ export default function App() {
 						component={Availability}
 						possibleDates={possibleDates}
 						currentUser={currentUser}
+						currentMeeting={currentMeeting}
 					/>
 					<PrivateRoute path='/invite' component={Invite} />
 				</Switch>

src/components/IntervalSelector.js

@@ -119,7 +119,6 @@ export default function IntervalSelector({
 	return (
 		<FullCalendar
 			plugins={[dayGridPlugin, interaction, timeGridPlugin, scrollGrid]}
-			// timeZone={'UTC'}
 			events={availability}
 			// View props
 			headerToolbar={{ right: '' }}

src/helpers/datetimeToUTC.js

@@ -0,0 +1,18 @@
+import { DateTime } from 'luxon';
+
+const dtToUTC = (datetime, timezone) => {
+	// Create a date object with the selected timezone
+	const dt = DateTime.fromObject({
+		year: datetime.getFullYear(),
+		month: datetime.getMonth(),
+		day: datetime.getDate(),
+		hour: datetime.getHours(),
+		minute: datetime.getMinutes(),
+		zone: timezone,
+	});
+
+	// Convert and return a UTC Timestamp
+	return dt.toUTC().toISO();
+};
+
+export default dtToUTC;

src/screens/Availability.js

@@ -1,6 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { Redirect } from 'react-router-dom';
-
 import {
 	Panel,
 	Form,
@@ -17,6 +16,7 @@ import {
 	TimePicker,
 	IntervalSelector,
 } from '../components';
+import dtToUTC from '../helpers/datetimeToUTC';
 import './styles/Availability.less';
 import './styles/layout.less';
 
@@ -34,7 +34,13 @@ const possibleDates = [
 	},
 ];
 
-export default function Availability({ currentUser }) {
+// NOTES:
+// Even though Fullcalendar is supposed to work with timezone,
+// it seems the custom rendering code breaks it.
+// Possible Dates ID are also striped by custom code.
+// That's why timezone and possible dates id are only set when posting an availability.
+
+export default function Availability({ currentUser, currentMeeting }) {
 	const [availability, setAvailability] = useState([]);
 	const [timezone, setTimezone] = useState(currentUser.timezone);
 	const [times, setTimes] = useState({
@@ -56,19 +62,29 @@ export default function Availability({ currentUser }) {
 		]);
 	};
 
+	// console.log(availability, possibleDates);
+
 	const handleSubmit = () => {
-		//TODO post intervals to backend
-		// Post it as UNIX EPOCH TIME
-		// timezone = UTC always
+		// Create list of events to post
+		const events = availability.map((event) => {
+			// Format start date to availability
+			const selectedDate = event.start.toISOString().substring(0, 10);
+			// Find the date id
+			const [date] = possibleDates.filter(
+				(date) => date.start === selectedDate,
+			);
 
-		// Use Map to add id to events
-		// // Find corresponding id
-		// const selectedDate = start.toISOString().substring(0, 10);
-		// const [date] = possibleDates.filter(
-		// 	(date) => date.start === selectedDate,
-		// );
+			return {
+				meeting: currentMeeting.id,
+				account_id: currentUser.id,
+				possible_date_id: date.id,
+				preference: false, // set to 'true" when implementing preference
+				start_time: dtToUTC(event.start, timezone),
+				end_time: dtToUTC(event.end, timezone),
+			};
+		});
 
-		console.log(availability);
+		console.log(events);
 	};
 
 	const handleSelectTimezone = (value, item, event) => {