From 850921eb255b3b5ce9e5182c6a5fc7e231967a64 Mon Sep 17 00:00:00 2001 From: rui hildt Date: Wed, 26 Aug 2020 20:13:12 +0200 Subject: [PATCH] Connect TimezonePicker/TimePicker in Availability - create TimePicker, import and connect it in Availability to state - create 'times' assets for TimePicker - connect TimezonePicker to state --- src/assets/data/times.js | 51 ++++++++++++++ src/components/IntervalSelector.js | 18 ++--- src/components/TimePicker.js | 18 +++++ src/components/TimezonePicker.js | 1 - src/components/index.js | 2 + src/helpers/http-common.js | 4 +- src/screens/Availability.js | 104 +++++++++++++++++++++++------ src/screens/Schedule.js | 2 + 8 files changed, 168 insertions(+), 32 deletions(-) create mode 100644 src/assets/data/times.js create mode 100644 src/components/TimePicker.js diff --git a/src/assets/data/times.js b/src/assets/data/times.js new file mode 100644 index 0000000..bb0dbac --- /dev/null +++ b/src/assets/data/times.js @@ -0,0 +1,51 @@ +export const times = [ + { time: '00:00' }, + { time: '00:30' }, + { time: '01:00' }, + { time: '01:30' }, + { time: '02:00' }, + { time: '02:30' }, + { time: '03:00' }, + { time: '03:30' }, + { time: '04:00' }, + { time: '04:30' }, + { time: '05:00' }, + { time: '05:30' }, + { time: '06:00' }, + { time: '06:30' }, + { time: '07:00' }, + { time: '07:30' }, + { time: '08:00' }, + { time: '08:30' }, + { time: '09:00' }, + { time: '09:30' }, + { time: '10:00' }, + { time: '10:30' }, + { time: '11:00' }, + { time: '11:30' }, + { time: '12:00' }, + { time: '12:30' }, + { time: '13:00' }, + { time: '13:30' }, + { time: '14:00' }, + { time: '14:30' }, + { time: '15:00' }, + { time: '15:30' }, + { time: '16:00' }, + { time: '16:30' }, + { time: '17:00' }, + { time: '17:30' }, + { time: '18:00' }, + { time: '18:30' }, + { time: '19:00' }, + { time: '19:30' }, + { time: '20:00' }, + { time: '20:30' }, + { time: '21:00' }, + { time: '21:30' }, + { time: '22:00' }, + { time: '22:30' }, + { time: '23:00' }, + { time: '23:30' }, + { time: '24:00' }, +]; diff --git a/src/components/IntervalSelector.js b/src/components/IntervalSelector.js index a734bd1..56da28f 100644 --- a/src/components/IntervalSelector.js +++ b/src/components/IntervalSelector.js @@ -9,14 +9,14 @@ import { Icon, IconButton } from 'rsuite'; // FullCalendar props const dayMinWidth = 110; -const slotMinTime = '08:00:00'; -const slotMaxTime = '18:00:00'; export default function IntervalSelector({ selectedDates, handleSelect, availability, setAvailability, + slotMinTime, + slotMaxTime, }) { /// DATES DISPLAY let startDate = selectedDates[0].start; @@ -52,12 +52,6 @@ export default function IntervalSelector({ }; /// AVAILABILITY INTERACTION - // Create an array of stringified availability - let avListJson = []; - availability.forEach((event) => { - avListJson.push(JSON.stringify(event)); - }); - const handleClick = (eventStart, eventEnd) => { let updatedAvailability = []; // Create an event object to compare @@ -68,10 +62,18 @@ export default function IntervalSelector({ // Make it to JSON let currentAvJson = JSON.stringify(currentAvailability); + // Create an array of stringified availability + let avListJson = availability.map((event) => { + delete event['id']; + return JSON.stringify(event); + }); + // Check if there's a similar event obj in the availability let index = avListJson.findIndex( (availability) => currentAvJson === availability, ); + + // Remove event from availability at index if (index > -1) { updatedAvailability = [...availability]; updatedAvailability.splice(index, 1); diff --git a/src/components/TimePicker.js b/src/components/TimePicker.js new file mode 100644 index 0000000..0a05758 --- /dev/null +++ b/src/components/TimePicker.js @@ -0,0 +1,18 @@ +import React from 'react'; +import { InputPicker } from 'rsuite'; + +import { times } from '../assets/data/times'; + +export default function TimePicker({ time, handleSelect}) { + return ( + + ); +} diff --git a/src/components/TimezonePicker.js b/src/components/TimezonePicker.js index c16cf4c..a826253 100644 --- a/src/components/TimezonePicker.js +++ b/src/components/TimezonePicker.js @@ -11,7 +11,6 @@ export default function TimezonePicker({ return ( { setAvailability([]); }; const handleSelect = ({ start, end }) => { - let updatedEvents = []; - let newAvailability = { - start: start, - end: end, - }; - updatedEvents.push(newAvailability); - - // console.log("NEW AVAILABILITY UNIX EPOCH: ", Math.floor(newAvailability.start / 1000)) - setAvailability([...availability, ...updatedEvents]); + setAvailability([ + ...availability, + { + start: start, + end: end, + }, + ]); }; const handleSubmit = () => { + //TODO post intervals to backend + // Post it as UNIX EPOCH TIME + // timezone = UTC always + + // 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, + // ); + console.log(availability); }; + const handleSelectTimezone = (value, item, event) => { + setTimezone(item.timezone); + }; + + const handleClearTimezone = () => { + setTimezone(currentUser.timezone); + }; + + const handleEarliest = (value, item, event) => { + setTimes({ + ...times, + earliest: value, + }); + }; + + const handleLatest = (value, item, event) => { + setTimes({ + ...times, + latest: value, + }); + }; + if (!possibleDates) { - return ; + return ; } return ( @@ -55,15 +105,25 @@ export default function Availability({ possibleDates, currentUser }) {
Earliest time - + Latest time - + Timezone - +
@@ -100,6 +160,8 @@ export default function Availability({ possibleDates, currentUser }) { setAvailability={setAvailability} handleSelect={handleSelect} handleClear={handleClear} + slotMinTime={times.earliest} + slotMaxTime={times.latest} />
diff --git a/src/screens/Schedule.js b/src/screens/Schedule.js index ae42487..5810ef0 100644 --- a/src/screens/Schedule.js +++ b/src/screens/Schedule.js @@ -185,6 +185,8 @@ export default function Schedule({ addID(result), ); + console.log('WITH ID', possibleDatesWithID) + setPossibleDates(possibleDatesWithID); }); };