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/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);

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 (
+		<InputPicker
+			cleanable={false}
+			data={times}
+			style={{ width: '100%' }}
+			labelKey='time'
+			valueKey='time'
+			onSelect={handleSelect}
+			value={time}
+		/>
+	);
+}

src/components/TimezonePicker.js

@@ -11,7 +11,6 @@ export default function TimezonePicker({
 	return (
 		<InputPicker
 			data={timezones}
-			// cleanable={false}
 			style={{ width: '100%' }}
 			labelKey='timezone'
 			groupBy='area'

src/components/index.js

@@ -1,5 +1,7 @@
 export { default as PrivateRoute } from './PrivateRoute';
 export { default as TimezonePicker } from './TimezonePicker';
+export { default as TimePicker } from './TimePicker';
+
 export { default as IntervalSelector } from './IntervalSelector';
 
 export { default as NavBar } from './Navbar/NavBar';