added app context with reducer

components/dateSelect.js

@@ -1,80 +1,102 @@
+import { useContext } from 'react'
+import { AppContext, ACTIONS } from '../context/appStore'
+
+import TimeSelect from './timeSelect'
+
 import moment from 'moment'
 
 import 'react-dates/initialize'
 import { DateRangePicker, SingleDatePicker } from 'react-dates'
 
-import TimeSelect from './timeSelect'
+export default function DateSelect() {
+  const { state, dispatch } = useContext(AppContext)
 
-export default function DateSelect({
-  multipleDays,
-  startDate,
-  setStartDate,
-  endDate,
-  setEndDate,
-  focusedInput,
-  setFocusedInput,
-  pickupTime,
-  setPickupTime,
-  dropoffTime,
-  setDropoffTime,
-}) {
-  const timeSelect = (
+  const {
+    multipleDays,
+    startDate,
+    endDate,
+    focusedInput,
+    pickupTime,
+    dropoffTime,
+    bookedOn,
+  } = state
+
+  function isDayBlocked(momentDay) {
+    return bookedOn.some((rawDay) => momentDay.isSame(rawDay))
+  }
+
+  if (multipleDays === null || multipleDays === undefined) {
+    return null
+  }
+
+  return (
     <>
+      <div>
+        {state.multipleDays === false && (
+          <SingleDatePicker
+            date={startDate && moment(startDate)}
+            onDateChange={(date) =>
+              dispatch({
+                type: ACTIONS.SET_DATE,
+                payload: { startDate: date.toISOString() },
+              })
+            }
+            focused={typeof focusedInput === 'boolean' && focusedInput}
+            onFocusChange={({ focused }) =>
+              dispatch({
+                type: ACTIONS.SET_FOCUSED_INPUT,
+                payload: focused,
+              })
+            }
+            isDayBlocked={isDayBlocked}
+            id="your_unique_id"
+          />
+        )}
+        {state.multipleDays === true && (
+          <DateRangePicker
+            startDate={startDate && moment(startDate)}
+            startDateId="bussle_start_date_id"
+            endDate={endDate && moment(endDate)}
+            endDateId="bussle_end_date_id"
+            onDatesChange={({ startDate, endDate }) => {
+              dispatch({
+                type: ACTIONS.SET_DATE,
+                payload: {
+                  startDate: startDate && startDate.toISOString(),
+                  endDate: endDate && endDate.toISOString(),
+                },
+              })
+            }}
+            focusedInput={focusedInput}
+            onFocusChange={(focusedInput) =>
+              dispatch({
+                type: ACTIONS.SET_FOCUSED_INPUT,
+                payload: focusedInput,
+              })
+            }
+            isDayBlocked={isDayBlocked}
+            minDate={moment()}
+          />
+        )}
+      </div>
       <TimeSelect
         id="pickup"
         name="pickupTime"
         label="Abholung Uhrzeit"
         value={pickupTime}
-        setValue={setPickupTime}
+        setValue={(payload) =>
+          dispatch({ type: ACTIONS.SET_PICKUP_TIME, payload })
+        }
       />
       <TimeSelect
         id="dropoff"
         name="dropoffTime"
         label="Rückgabe Uhrzeit"
         value={dropoffTime}
-        setValue={setDropoffTime}
+        setValue={(payload) =>
+          dispatch({ type: ACTIONS.SET_DROPOFF_TIME, payload })
+        }
       />
     </>
   )
-  if (multipleDays === false) {
-    return (
-      <>
-        <div>
-          <SingleDatePicker
-            date={startDate}
-            onDateChange={(date) => setStartDate(date)}
-            focused={typeof focusedInput === 'boolean' && focusedInput}
-            onFocusChange={({ focused }) => setFocusedInput(focused)}
-            id="your_unique_id"
-          />
-        </div>
-        {timeSelect}
-      </>
-    )
-  }
-
-  if (multipleDays === true) {
-    return (
-      <>
-        <div>
-          <DateRangePicker
-            startDate={startDate}
-            startDateId="bussle_start_date_id"
-            endDate={endDate}
-            endDateId="bussle_end_date_id"
-            onDatesChange={({ startDate, endDate }) => {
-              setStartDate(startDate)
-              setEndDate(endDate)
-            }}
-            focusedInput={focusedInput}
-            onFocusChange={(focusedInput) => setFocusedInput(focusedInput)}
-            minDate={moment()}
-          />
-        </div>
-        {timeSelect}
-      </>
-    )
-  }
-
-  return null
 }