move rest into pages

pages/components/contact.js

@@ -0,0 +1,84 @@
+import { useContext } from 'react'
+import { WizardContext, ACTIONS } from '../context/wizardStore'
+import Required from './required'
+
+import Form from 'react-bootstrap/Form'
+import Col from 'react-bootstrap/Col'
+
+export default function Contact() {
+  const { state, onChangeEvent } = useContext(WizardContext)
+
+  const { name, email, street, zip, city } = state.formData
+
+  return (
+    <>
+      <Form.Group>
+        <Form.Label>
+          Name <Required />
+        </Form.Label>
+        <Form.Control
+          type="text"
+          name="name"
+          placeholder="Name"
+          value={name}
+          onChange={onChangeEvent}
+          required
+        />
+      </Form.Group>
+      <Form.Group>
+        <Form.Label>
+          E-Mail <Required />
+        </Form.Label>
+        <Form.Control
+          type="email"
+          name="email"
+          placeholder="E-Mail"
+          value={email}
+          onChange={onChangeEvent}
+          required
+        />
+      </Form.Group>
+      <Form.Group>
+        <Form.Label>
+          Straße <Required />
+        </Form.Label>
+        <Form.Control
+          type="text"
+          name="street"
+          placeholder="Straße"
+          value={street}
+          onChange={onChangeEvent}
+          required
+        />
+      </Form.Group>
+      <Form.Row>
+        <Form.Group as={Col} xs={4}>
+          <Form.Label>
+            PLZ <Required />
+          </Form.Label>
+          <Form.Control
+            type="text"
+            name="zip"
+            placeholder="PLZ"
+            value={zip}
+            onChange={onChangeEvent}
+            required
+          />
+        </Form.Group>
+        <Form.Group as={Col}>
+          <Form.Label>
+            Stadt <Required />
+          </Form.Label>
+          <Form.Control
+            type="text"
+            name="city"
+            placeholder="Stadt"
+            value={city}
+            onChange={onChangeEvent}
+            required
+          />
+        </Form.Group>
+      </Form.Row>
+    </>
+  )
+}

pages/components/dateSelect.js

@@ -0,0 +1,131 @@
+import { useContext, useState } from 'react'
+import useSWR from 'swr'
+
+import { WizardContext, ACTIONS } from '../context/wizardStore'
+
+import Form from 'react-bootstrap/Form'
+
+import moment from 'moment'
+import 'react-dates/initialize'
+import { DateRangePicker, SingleDatePicker } from 'react-dates'
+
+import Required from './required'
+import { dateFormat } from '../helpers/date'
+
+const fetcher = (path) => fetch(path).then((r) => r.json())
+
+export default function DateSelect() {
+  const [focusedInput, setFocusedInput] = useState(null)
+  const { state, onChange } = useContext(WizardContext)
+  const { data: daysBooked, error: fetchBookedOnError } = useSWR(
+    '/api/daysbooked',
+    fetcher
+  )
+
+  const { multipleDays, startDate, endDate } = state.formData
+
+  function isDayBlocked(momentDay) {
+    return (
+      daysBooked && daysBooked.some((rawDay) => momentDay.isSame(rawDay, 'day'))
+    )
+  }
+
+  if (fetchBookedOnError) {
+    return (
+      <div>
+        Entschuldige, aber die Buchungszeiten konnten nicht geladen werden.
+        Versuchen Sie es später nochmals.
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <Form.Group controlId="dateSelect">
+        <Form.Label>
+          Willst du einen odere mehrere Tage buchen? <Required />
+        </Form.Label>
+        <Form.Check
+          type="radio"
+          id={'multipleDays-single'}
+          label="Einen Tag"
+          name="multipleDays"
+          value="single"
+          checked={multipleDays === false}
+          onChange={() => {
+            setFocusedInput(null)
+            onChange({
+              multipleDays: false,
+              startDate: null,
+              endDate: null,
+            })
+          }}
+        />
+        <Form.Check
+          type="radio"
+          id={'multipleDays-multiple'}
+          label="Mehrere Tage"
+          name="multipleDays"
+          value="multiple"
+          checked={multipleDays === true}
+          onChange={() => {
+            setFocusedInput(null)
+            onChange({
+              multipleDays: true,
+              startDate: null,
+              endDate: null,
+            })
+          }}
+        />
+      </Form.Group>
+      {multipleDays !== null && (
+        <Form.Group>
+          <Form.Label component="legend" style={{ display: 'block' }}>
+            Datum <Required />
+          </Form.Label>
+          {multipleDays === false && (
+            <SingleDatePicker
+              small={true}
+              date={startDate && moment(startDate)}
+              placeholder="Datum"
+              numberOfMonths={1}
+              required
+              onDateChange={(date) =>
+                onChange({
+                  startDate: date && dateFormat(date),
+                })
+              }
+              focused={typeof focusedInput === 'boolean' && focusedInput}
+              onFocusChange={({ focused }) => setFocusedInput(focused)}
+              isDayBlocked={isDayBlocked}
+              id="startDate"
+            />
+          )}
+          {multipleDays === true && (
+            <DateRangePicker
+              small={true}
+              startDate={startDate && moment(startDate)}
+              startDateId="startDate"
+              startDatePlaceholderText="Start"
+              endDatePlaceholderText="Ende"
+              required
+              numberOfMonths={1}
+              endDate={endDate && moment(endDate)}
+              endDateId="endDate"
+              onDatesChange={({ startDate, endDate }) => {
+                onChange({
+                  startDate: startDate && dateFormat(startDate),
+                  endDate: endDate && dateFormat(endDate),
+                })
+              }}
+              focusedInput={focusedInput}
+              onFocusChange={(focusedInput) => setFocusedInput(focusedInput)}
+              isDayBlocked={isDayBlocked}
+              minDate={moment()}
+            />
+          )}
+        </Form.Group>
+      )}
+    </>
+  )
+}

pages/components/reason.js

@@ -0,0 +1,52 @@
+import { useContext } from 'react'
+import { WizardContext, ACTIONS } from '../context/wizardStore'
+import Required from './required'
+
+import Form from 'react-bootstrap/Form'
+
+export default function Contact() {
+  const { state, onChangeEvent } = useContext(WizardContext)
+
+  const { purpose, destination, org } = state.formData
+
+  return (
+    <>
+      <Form.Group>
+        <Form.Label>
+          Zweck der Fahrt <Required />
+        </Form.Label>
+        <Form.Control
+          type="text"
+          name="purpose"
+          placeholder="Zweck der Fahrt"
+          value={purpose}
+          onChange={onChangeEvent}
+          required
+        />
+      </Form.Group>
+      <Form.Group>
+        <Form.Label>Verein</Form.Label>
+        <Form.Control
+          type="text"
+          name="org"
+          placeholder="Verein"
+          value={org}
+          onChange={onChangeEvent}
+        />
+      </Form.Group>
+      <Form.Group>
+        <Form.Label>
+          Ziel der Fahrt <Required />
+        </Form.Label>
+        <Form.Control
+          type="text"
+          name="destination"
+          placeholder="Fahrtziel"
+          value={destination}
+          onChange={onChangeEvent}
+          required
+        />
+      </Form.Group>
+    </>
+  )
+}

pages/components/required.js

@@ -0,0 +1,2 @@
+const Required = () => <span>*</span>
+export default Required

pages/components/wizard.js

@@ -0,0 +1,58 @@
+import { useContext } from 'react'
+
+import Button from 'react-bootstrap/Button'
+import Form from 'react-bootstrap/Form'
+
+import WizardStore, { WizardContext, ACTIONS } from '../context/wizardStore'
+
+import DateSelect from './dateSelect'
+import Reason from './reason'
+import Contact from './contact'
+//import Driver from './driver'
+
+function WizardInternal() {
+  const { onSubmit, state, storeData } = useContext(WizardContext)
+  const { postData, postDataSuccess, postDataError } = state
+
+  if (postDataSuccess) {
+    return (
+      <>
+        <h3>Danke, die Buchung ist in Bearbeitung!</h3>
+        <p>Wir melden uns per E-Mail sobald die Buchung bestätigt ist.</p>
+        <p>
+          Sollen die eingegebenen Daten in Deinem Browser für die nächste
+          Buchung gespeichert werden?
+        </p>
+        <Button onClick={storeData}>Ja, bitte speichern</Button>
+      </>
+    )
+  }
+
+  const onChange = (payload) =>
+    dispatch({ action: ACTIONS.SET_FORM_DATA, payload })
+
+  return (
+    <Form
+      onSubmit={(event) => {
+        event.preventDefault()
+        onSubmit()
+      }}
+    >
+      <DateSelect />
+      <Reason />
+      <Contact />
+      <div>{postDataError}</div>
+      <Button type="submit" disabled={postData}>
+        {postData ? 'Speichern...' : 'Absenden'}
+      </Button>
+    </Form>
+  )
+}
+
+export default function Wizard() {
+  return (
+    <WizardStore>
+      <WizardInternal />
+    </WizardStore>
+  )
+}

pages/context/wizardStore.js

@@ -0,0 +1,140 @@
+import React, { useReducer, useEffect } from 'react'
+
+import { storeFormData, loadFormData } from '../helpers/storage'
+
+export const WizardContext = React.createContext()
+
+export const ACTIONS = {
+  SET_FORM_DATA: 'setFormData',
+  POST_DATA: 'postData',
+  POST_DATA_ERROR: 'postDataError',
+  POST_DATA_SUCCESS: 'postDataSuccess',
+}
+
+function reducer(state, action) {
+  switch (action.type) {
+    case ACTIONS.SET_FORM_DATA:
+      return {
+        ...state,
+        formData: {
+          ...state.formData,
+          ...action.payload,
+        },
+      }
+    case ACTIONS.POST_DATA:
+      return {
+        ...state,
+        postData: true,
+        postDataError: null,
+        postDataSuccess: null,
+      }
+    case ACTIONS.POST_DATA_ERROR:
+      return {
+        ...state,
+        postData: false,
+        postDataError: action.payload,
+        postDataSuccess: null,
+      }
+    case ACTIONS.POST_DATA_SUCCESS:
+      return {
+        ...state,
+        formData: {
+          ...state.formData,
+          ...action.payload,
+        },
+        postData: false,
+        postDataError: null,
+        postDataSuccess: true,
+      }
+    default:
+      throw new Error(`Unkown Action type ${action.type}`)
+  }
+}
+
+function debugReducer(state, action) {
+  console.debug('applying action', action)
+  const newState = reducer(state, action)
+  console.debug(newState)
+  return newState
+}
+
+const initialState = {
+  postData: false,
+  postDataError: null,
+  postDataSuccess: null,
+  formData: {
+    multipleDays: true,
+    //startDate: '2020-08-10',
+    //endDate: '2020-08-17',
+    //purpose: 'Sommerlager 2021',
+    //org: 'VCP Rosenfeld',
+    //destination: 'Lüneburger Heide',
+    //name: 'Thomas Ruoff',
+    //email: 'thomasruoff@gmail.com',
+    //street: 'Mömpelgardgasse 25',
+    //zip: '72348',
+    //city: 'Rosenfeld',
+  },
+}
+
+async function createBooking(formData) {
+  const response = await fetch('/api/booking', {
+    method: 'POST',
+    mode: 'cors',
+    cache: 'no-cache',
+    credentials: 'same-origin',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    referrerPolicy: 'no-referrer',
+    body: JSON.stringify(formData),
+  })
+  return response.json()
+}
+
+export default function WizardStore({ children }) {
+  const [state, dispatch] = useReducer(debugReducer, initialState)
+
+  useEffect(() => {
+    const data = loadFormData()
+    dispatch({ type: ACTIONS.SET_FORM_DATA, payload: data })
+  }, [])
+
+  const onChangeEvent = (event) => {
+    const { name, value } = event.target
+
+    dispatch({
+      type: ACTIONS.SET_FORM_DATA,
+      payload: { [name]: value },
+    })
+  }
+
+  const onChange = (data) => {
+    dispatch({
+      type: ACTIONS.SET_FORM_DATA,
+      payload: data,
+    })
+  }
+
+  const onSubmit = async () => {
+    dispatch({ type: ACTIONS.POST_DATA })
+
+    try {
+      const bookingData = await createBooking(state.formData)
+      dispatch({ type: ACTIONS.POST_DATA_SUCCESS, payload: bookingData })
+    } catch (error) {
+      console.error(error)
+      dispatch({ type: ACTIONS.POST_DATA_ERROR, payload: error.message })
+    }
+  }
+
+  const storeData = () => storeFormData(state.formData)
+
+  return (
+    <WizardContext.Provider
+      value={{ state, dispatch, onChangeEvent, onChange, onSubmit, storeData }}
+    >
+      {children}
+    </WizardContext.Provider>
+  )
+}

pages/helpers/date.js

@@ -0,0 +1,25 @@
+import moment from 'moment'
+
+export function getDays({ startDate, endDate }) {
+  let currentDay = moment(startDate)
+  const days = [dateFormat(currentDay)]
+
+  if (!endDate) {
+    return days
+  }
+
+  const end = moment(endDate)
+  while (currentDay < end) {
+    currentDay = currentDay.add(1, 'day')
+    days.push(dateFormat(currentDay))
+  }
+
+  return days
+}
+
+export function dateFormat(date) {
+  if (!date) {
+    return null
+  }
+  return moment(date).format('YYYY-MM-DD')
+}

pages/helpers/storage.js

@@ -0,0 +1,17 @@
+const FORM_DATA_KEY = 'pfadiBussleFormData'
+
+function getStorage() {
+  return localStorage
+}
+
+export function storeFormData({ org, name, email, street, zip, city }) {
+  getStorage().setItem(
+    FORM_DATA_KEY,
+    JSON.stringify({ org, name, email, street, zip, city })
+  )
+}
+
+export function loadFormData() {
+  const dataAsString = getStorage().getItem(FORM_DATA_KEY)
+  return JSON.parse(dataAsString || '{}')
+}

pages/index.js

@@ -1,6 +1,6 @@
 import Head from 'next/head'
 
-import Wizard from '../components/wizard'
+import Wizard from './components/wizard'
 
 export default function Home() {
   return (