added app context with reducer

components/contact.js

@@ -17,18 +17,6 @@ export default function Contact({}) {
         <label htmlFor="destination">Fahrtziel</label>
         <input id="destination" name="destination" type="text" />
       </div>
-      <div>
-        <label htmlFor="driver1">Fahrer 1</label>
-        <input id="driver1" name="driver1" type="text" />
-        <label htmlFor="driver">Alter</label>
-        <input id="ageDriver1" name="ageDriver1" type="number" min="20" />
-      </div>
-      <div>
-        <label htmlFor="driver">Fahrer 2</label>
-        <input id="driver2" name="driver2" type="text" />
-        <label htmlFor="driver">Alter</label>
-        <input id="ageDriver2" name="ageDriver2" type="number" min="20" />
-      </div>
     </>
   )
 }

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
 }

components/driver.js

@@ -0,0 +1,18 @@
+export default function Driver({}) {
+  return (
+    <>
+      <div>
+        <label htmlFor="driver1">Fahrer 1</label>
+        <input id="driver1" name="driver1" type="text" />
+        <label htmlFor="driver">Alter</label>
+        <input id="ageDriver1" name="ageDriver1" type="number" min="20" />
+      </div>
+      <div>
+        <label htmlFor="driver">Fahrer 2</label>
+        <input id="driver2" name="driver2" type="text" />
+        <label htmlFor="driver">Alter</label>
+        <input id="ageDriver2" name="ageDriver2" type="number" min="20" />
+      </div>
+    </>
+  )
+}

components/rangeSelect.js

@@ -1,23 +1,31 @@
-export default function RangeSelect({ multipleDays, setMultipleDays }) {
-    return (
-        <div>
-            Ich will das Bussle für
-            <input
-                type="radio"
-                id="single"
-                name="days"
-                value="singleDay"
-                onChange={() => setMultipleDays(false)}
-            />
-            <label htmlFor="single">einen Tag</label>
-            <input
-                type="radio"
-                id="multiple"
-                name="days"
-                value="multipleDays"
-                onChange={() => setMultipleDays(true)}
-            />
-            <label htmlFor="multiple">mehrere Tage</label> mieten
-        </div>
-    )
+import { useContext } from 'react'
+import { AppContext, ACTIONS } from '../context/appStore'
+export default function RangeSelect() {
+  const { state, dispatch } = useContext(AppContext)
+
+  return (
+    <div>
+      Ich will das Bussle für
+      <input
+        type="radio"
+        id="single"
+        name="days"
+        checked={state.multipleDays === false}
+        onChange={() =>
+          dispatch({ type: ACTIONS.SET_MULTIPLE_DAYS, payload: false })
+        }
+      />
+      <label htmlFor="single">einen Tag</label>
+      <input
+        type="radio"
+        id="multiple"
+        name="days"
+        checked={state.multipleDays === true}
+        onChange={() =>
+          dispatch({ type: ACTIONS.SET_MULTIPLE_DAYS, payload: true })
+        }
+      />
+      <label htmlFor="multiple">mehrere Tage</label> mieten
+    </div>
+  )
 }