mirror of
https://github.com/tomru/pfadi-bussle.git
synced 2026-03-03 06:27:11 +01:00
move contexts all out in own toplevel dir
- rename wizard to book
This commit is contained in:
Thomas Ruoff
@@ -1,9 +1,9 @@
|
||||
import React, { useContext } from 'react'
|
||||
import { WizardContext } from './context/wizardStore'
|
||||
import { BookContext } from '../../context/book'
|
||||
import Input from '../input'
|
||||
|
||||
export default function Contact() {
|
||||
const { state, onChangeEvent } = useContext(WizardContext)
|
||||
const { state, onChangeEvent } = useContext(BookContext)
|
||||
|
||||
const { org, name, email, phone, street, zip, city } = state.formData
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import React, { useContext } from 'react'
|
||||
import { WizardContext } from './context/wizardStore'
|
||||
import { BookContext } from '../../context/book'
|
||||
import InputWrapper from '../inputWrapper'
|
||||
import Calendar from '../calendar'
|
||||
|
||||
export default function DateSelect() {
|
||||
const { onChangeEvent, onChange, state } = useContext(WizardContext)
|
||||
const { onChangeEvent, onChange, state } = useContext(BookContext)
|
||||
const { startDate, endDate } = state.formData
|
||||
|
||||
const today = new Date().toISOString().substring(0, 10)
|
||||
@@ -1,11 +1,11 @@
|
||||
import React, { useContext } from 'react'
|
||||
import Contact from './contact'
|
||||
import WizardStore, { WizardContext } from './context/wizardStore'
|
||||
import BookStore, { BookContext } from '../../context/book'
|
||||
import DateSelect from './dateSelect'
|
||||
import Reason from './reason'
|
||||
|
||||
function WizardInternal() {
|
||||
const { onSubmit, state, forgetData } = useContext(WizardContext)
|
||||
function BookForm() {
|
||||
const { onSubmit, state, forgetData } = useContext(BookContext)
|
||||
const { postData, postDataError, dataStoredLoaded } = state
|
||||
|
||||
return (
|
||||
@@ -41,10 +41,10 @@ function WizardInternal() {
|
||||
)
|
||||
}
|
||||
|
||||
export default function Wizard() {
|
||||
export default function Book() {
|
||||
return (
|
||||
<WizardStore>
|
||||
<WizardInternal />
|
||||
</WizardStore>
|
||||
<BookStore>
|
||||
<BookForm />
|
||||
</BookStore>
|
||||
)
|
||||
}
|
||||
@@ -1,9 +1,9 @@
|
||||
import React, { useContext } from 'react'
|
||||
import { WizardContext } from './context/wizardStore'
|
||||
import { BookContext } from '../../context/book'
|
||||
import Input from '../input'
|
||||
|
||||
export default function Contact() {
|
||||
const { state, onChangeEvent } = useContext(WizardContext)
|
||||
const { state, onChangeEvent } = useContext(BookContext)
|
||||
|
||||
const { purpose, destination } = state.formData
|
||||
|
||||
@@ -2,7 +2,7 @@ import { useContext } from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
import Link from 'next/link'
|
||||
import User from './user'
|
||||
import UserContext from './user/context'
|
||||
import UserContext from '../context/user'
|
||||
import { USER_ROLE } from '../lib/session'
|
||||
|
||||
const pathNameLabelMap = {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useContext } from 'react'
|
||||
|
||||
import UserContext from './user/context'
|
||||
import UserContext from '../context/user'
|
||||
|
||||
export default function User() {
|
||||
const { username, role } = useContext(UserContext)
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
import React from 'react'
|
||||
import { UserData } from '../../lib/session'
|
||||
|
||||
const UserContext = React.createContext<UserData>({
|
||||
username: undefined,
|
||||
role: undefined,
|
||||
})
|
||||
|
||||
export default UserContext
|
||||
@@ -1,200 +0,0 @@
|
||||
import React, { useEffect, useReducer } from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
import { clearBookingData, loadBookingData } from '../../../helpers/storage'
|
||||
|
||||
import { createBooking } from '../../../helpers/booking'
|
||||
|
||||
interface WizardFormData {
|
||||
startDate: string
|
||||
endDate: string
|
||||
purpose: string
|
||||
org: string
|
||||
destination: string
|
||||
name: string
|
||||
email: string
|
||||
phone: string
|
||||
street: string
|
||||
zip: string
|
||||
city: string
|
||||
storeData?: boolean
|
||||
}
|
||||
|
||||
interface Booking {
|
||||
uuid: string
|
||||
}
|
||||
|
||||
interface WizardStoreState {
|
||||
postData?: boolean
|
||||
postDataError?: string
|
||||
postDataSuccess?: boolean
|
||||
formData: WizardFormData
|
||||
formDataChanged: string[]
|
||||
booking?: Booking
|
||||
dataStored: boolean
|
||||
dataStoredLoaded: boolean
|
||||
}
|
||||
|
||||
interface WizardStore {
|
||||
state: WizardStoreState
|
||||
dispatch: React.Dispatch<WizardAction>
|
||||
onChange: (data: object) => void
|
||||
onChangeEvent: (event: React.ChangeEvent<React.ElementRef<'input'>>) => void
|
||||
onSubmit: () => void
|
||||
forgetData: () => void
|
||||
}
|
||||
|
||||
interface WizardAction {
|
||||
type: string
|
||||
payload?: any
|
||||
}
|
||||
|
||||
export const WizardContext: React.Context<WizardStore> = React.createContext<
|
||||
WizardStore
|
||||
>(null)
|
||||
|
||||
export const ACTIONS = {
|
||||
SET_FORM_DATA: 'setFormData',
|
||||
POST_DATA: 'postData',
|
||||
POST_DATA_ERROR: 'postDataError',
|
||||
DATA_STORED: 'dataStored',
|
||||
DATA_STORED_LOADED: 'dataStoredLoaded',
|
||||
DATA_STORED_FORGOTTEN: 'dataStoredForgotten',
|
||||
}
|
||||
|
||||
function reducer(state: WizardStoreState, action: WizardAction) {
|
||||
switch (action.type) {
|
||||
case ACTIONS.SET_FORM_DATA:
|
||||
return {
|
||||
...state,
|
||||
formData: {
|
||||
...state.formData,
|
||||
...action.payload,
|
||||
},
|
||||
formDataChanged: [
|
||||
...state.formDataChanged,
|
||||
...Object.keys(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.DATA_STORED_LOADED:
|
||||
return {
|
||||
...state,
|
||||
dataStoredLoaded: true,
|
||||
formData: {
|
||||
...state.formData,
|
||||
...action.payload,
|
||||
},
|
||||
}
|
||||
case ACTIONS.DATA_STORED_FORGOTTEN:
|
||||
return {
|
||||
...state,
|
||||
dataStored: undefined,
|
||||
dataStoredLoaded: undefined,
|
||||
formData: { ...initialState.formData },
|
||||
}
|
||||
case ACTIONS.DATA_STORED:
|
||||
return {
|
||||
...state,
|
||||
dataStored: action.payload,
|
||||
}
|
||||
default:
|
||||
throw new Error(`Unkown Action type ${action.type}`)
|
||||
}
|
||||
}
|
||||
|
||||
const initialState: WizardStoreState = {
|
||||
postData: false,
|
||||
postDataError: null,
|
||||
postDataSuccess: null,
|
||||
formData: {
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
purpose: '',
|
||||
org: '',
|
||||
destination: '',
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
street: '',
|
||||
zip: '',
|
||||
city: '',
|
||||
},
|
||||
formDataChanged: [],
|
||||
dataStored: undefined,
|
||||
dataStoredLoaded: undefined,
|
||||
}
|
||||
|
||||
export default function WizardStore({ children }) {
|
||||
const router = useRouter()
|
||||
const [state, dispatch] = useReducer(reducer, initialState)
|
||||
|
||||
useEffect(() => {
|
||||
const data = loadBookingData()
|
||||
if (data !== null) {
|
||||
dispatch({ type: ACTIONS.DATA_STORED_LOADED, payload: data })
|
||||
}
|
||||
}, [])
|
||||
|
||||
const onChangeEvent = (
|
||||
event: React.ChangeEvent<React.ElementRef<'input'>>
|
||||
) => {
|
||||
const { name, value } = event.target
|
||||
|
||||
dispatch({
|
||||
type: ACTIONS.SET_FORM_DATA,
|
||||
payload: { [name]: value },
|
||||
})
|
||||
}
|
||||
|
||||
const onChange = (data: object) => {
|
||||
dispatch({
|
||||
type: ACTIONS.SET_FORM_DATA,
|
||||
payload: data,
|
||||
})
|
||||
}
|
||||
|
||||
const onSubmit = async () => {
|
||||
dispatch({ type: ACTIONS.POST_DATA })
|
||||
|
||||
try {
|
||||
const booking = await createBooking(state.formData)
|
||||
router.push(`/booking/${booking.uuid}/stored`)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
dispatch({ type: ACTIONS.POST_DATA_ERROR, payload: error.message })
|
||||
}
|
||||
}
|
||||
|
||||
const forgetData = () => {
|
||||
clearBookingData()
|
||||
dispatch({ type: ACTIONS.DATA_STORED_FORGOTTEN })
|
||||
}
|
||||
|
||||
return (
|
||||
<WizardContext.Provider
|
||||
value={{
|
||||
state,
|
||||
dispatch,
|
||||
onChangeEvent,
|
||||
onChange,
|
||||
onSubmit,
|
||||
forgetData,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</WizardContext.Provider>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user