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