diff --git a/src/App.js b/src/App.js index 3c1e82b..25a5936 100644 --- a/src/App.js +++ b/src/App.js @@ -82,6 +82,7 @@ export default function App() { component={Availability} possibleDates={possibleDates} currentUser={currentUser} + currentMeeting={currentMeeting} /> diff --git a/src/components/IntervalSelector.js b/src/components/IntervalSelector.js index 56da28f..f8b1a1f 100644 --- a/src/components/IntervalSelector.js +++ b/src/components/IntervalSelector.js @@ -119,7 +119,6 @@ export default function IntervalSelector({ return ( { + // 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; diff --git a/src/screens/Availability.js b/src/screens/Availability.js index 9a185a9..29d0538 100644 --- a/src/screens/Availability.js +++ b/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) => {