1import {useState, useReducer} from 'react';
 2import useAddToEvents from '../../hooks/useAddToEvents';
 3import Step1 from './Step1';
 4import Step2 from './Step2';
 5import {ProfileDocument, useCreateEventMutation} from '../../generated/graphql';
 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 = {
19        ...event,
20        ...eventData,
21      };
22      const {data} = await sendEvent({
23        variables,
24        refetchQueries: [ProfileDocument],
25      });
26      const {id, attributes} = data.createEvent.data;
27      addToUserEvents(id);
28      return {id, ...attributes};
29    } catch (err) {
30      console.error(err);
31      return false;
32    }
33  };
34
35  return (
36    <Step
37      event={event}
38      addToEvent={addToEvent}
39      createEvent={createEvent}
40      nextStep={() => setStep(step + 1)}
41      previousStep={() => setStep(step - 1)}
42      id="NewEvent"
43    />
44  );
45};
46
47const eventReducer = (state, item) => ({...state, ...item});
48
49export default CreateEvent;