1import {useState, useReducer} from 'react';
 2import {useCreateEventMutation} from '../../generated/graphql';
 3import useAddToEvents from '../../hooks/useAddToEvents';
 4import Step1 from './Step1';
 5import Step2 from './Step2';
 6
 7const STEPS = [Step1, Step2];
 8
 9const CreateEvent = () => {
10  const [step, setStep] = useState(0);
11  const [event, addToEvent] = useReducer(eventReducer, {});
12  const [sendEvent] = useCreateEventMutation();
13  const {addToEvent: addToUserEvents} = useAddToEvents();
14  const Step = STEPS[step];
15
16  const createEvent = async eventData => {
17    try {
18      const variables = {...event, ...eventData};
19      const {data} = await sendEvent({variables});
20      const returnedEvent = data.createEvent.event;
21      addToUserEvents(returnedEvent.id);
22      return returnedEvent;
23    } catch (err) {
24      console.error(err);
25      return false;
26    }
27  };
28
29  return (
30    <Step
31      event={event}
32      addToEvent={addToEvent}
33      createEvent={createEvent}
34      nextStep={() => setStep(step + 1)}
35      previousStep={() => setStep(step - 1)}
36      id="NewEvent"
37    />
38  );
39};
40
41const eventReducer = (state, item) => ({...state, ...item});
42
43export default CreateEvent;