pfadi-bussle/context/wizardStore.js

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>
  )
}