eventModal.jsx

import { useEffect } from "react";

import { useTranslation } from "next-i18next";

import {
  Button,
  Checkbox,
  Divider,
  Grid,
  Modal,
  Select,
  Space,
  Text,
  Textarea,
  TextInput,
} from "@mantine/core";

import { useForm } from "@mantine/form";
import { DatePicker, TimeRangeInput } from "@mantine/dates";

import { useEditor } from "@tiptap/react";
import { Link } from "@mantine/tiptap";
import StarterKit from "@tiptap/starter-kit";
import Underline from "@tiptap/extension-underline";

import Editor from "../components/editor";

import templates from "../content/eventTemplates.json";

import { gql, useMutation } from "@apollo/client";

const addEventMutation = gql`
  mutation addEvent(
    $title: String
    $speaker: String
    $description: String
    $date: DateTime
    $time: [DateTime]
    $place: String
    $signUp: String
    $isStammtisch: Boolean
  ) {
    addEvent(
      title: $title
      speaker: $speaker
      description: $description
      date: $date
      time: $time
      place: $place
      signUp: $signUp
      isStammtisch: $isStammtisch
    )
  }
`;

const editEventMutation = gql`
  mutation editEvent(
    $id: Int
    $title: String
    $speaker: String
    $description: String
    $date: DateTime
    $time: [DateTime]
    $place: String
    $signUp: String
    $isStammtisch: Boolean
  ) {
    editEvent(
      id: $id
      title: $title
      speaker: $speaker
      description: $description
      date: $date
      time: $time
      place: $place
      signUp: $signUp
      isStammtisch: $isStammtisch
    )
  }
`;

export default function EventModal({ open, close, event, refetch }) {
  const [addEvent] = useMutation(addEventMutation);
  const [editEvent] = useMutation(editEventMutation);

  const { t } = useTranslation("common");

  const initialValues = {
    title: "",
    speaker: "",
    date: null,
    time: null,
    place: "",
    signUp: "",
    isStammtisch: false,
  };

  const form = useForm({
    initialValues: initialValues,

    validate: {
      title: (value) => (value ? null : t("ENotEmpty")),
      date: (value) => (value ? null : t("ENotEmpty")),
      time: (value) => (value ? null : t("ENotEmpty")),
      place: (value) => (value ? null : t("ENotEmpty")),
    },
  });

  const content = "";

  const editor = useEditor({
    extensions: [StarterKit, Underline, Link],
    content,
  });

  const templatesFmt = templates.map((template) => ({
    label: template.title,
    value: template.title,
  }));

  const setTemplate = (t) => {
    const template = templates.filter((temp) => temp.title === t)[0];
    let timeArr = [new Date(), new Date()];
    if (template.time) {
      timeArr[0].setHours(
        Number(template.time[0].split(":")[0]),
        Number(template.time[0].split(":")[1]),
        0
      );
      timeArr[1].setHours(
        Number(template.time[1].split(":")[0]),
        Number(template.time[1].split(":")[1]),
        0
      );
    }

    form.setValues({
      ...template,
      time: template.time ? [...timeArr] : null,
    });
    editor.commands.setContent(template.description);
  };

  const setEvent = () => {
    if (event) {
      form.setValues({
        ...event,
        date: new Date(event.date),
        time: [new Date(event.startTime), new Date(event.endTime)],
      });
      if (editor) editor.commands.setContent(event.description);
    } else {
      form.setValues(initialValues);
      if (editor) editor.commands.setContent(content);
    }
  };

  useEffect(() => {
    setEvent();
  }, [open]);

  const submit = async (values) => {
    if (event) {
      const res = await editEvent({
        variables: {
          id: event.id,
          ...values,
          description: editor.getHTML(),
        },
      });
      if (res.data.editEvent) {
        refetch();
        close();
      }
    } else {
      const res = await addEvent({
        variables: {
          ...values,
          description: editor.getHTML(),
        },
      });
      if (res.data.addEvent) {
        refetch();
        close();
      }
    }
  };

  return (
    <Modal opened={open} onClose={close} fz="xl" size="xl">
      <Text variant="h2" fw={700}>
        {event ? t("editEvent") : t("addEvent")}
      </Text>

      <Space h="xl" />

      <Select
        data={templatesFmt}
        placeholder={t("loadTemplate")}
        onChange={(e) => setTemplate(e)}
      />

      <Space h="xl" />

      <Divider />

      <Space h="xs" />

      <form onSubmit={form.onSubmit((values) => submit(values))}>
        <Grid>
          <Grid.Col sm={12} md={6}>
            <TextInput
              withAsterisk
              label={t("title")}
              placeholder="Introduction to Free Software"
              {...form.getInputProps("title")}
            />
          </Grid.Col>
          <Grid.Col sm={12} md={6}>
            <TextInput
              withAsterisk
              label={t("speaker")}
              placeholder="Maxime Musterfrau"
              {...form.getInputProps("speaker")}
            />
          </Grid.Col>
          <Grid.Col sm={12}>
            <Text fz="sm">{t("description")}</Text>
            {editor && <Editor editor={editor} />}
          </Grid.Col>
          <Grid.Col sm={12} md={6}>
            <DatePicker
              placeholder="January 1, 1970"
              label={t("date")}
              withAsterisk
              {...form.getInputProps("date")}
            />
          </Grid.Col>
          <Grid.Col sm={12} md={6}>
            <TimeRangeInput
              label={t("time")}
              withAsterisk
              clearable
              {...form.getInputProps("time")}
            />
          </Grid.Col>
          <Grid.Col sm={12} md={6}>
            <TextInput
              withAsterisk
              label={t("place")}
              placeholder="ETH HG F 7"
              {...form.getInputProps("place")}
            />
          </Grid.Col>
          <Grid.Col sm={12} md={6}>
            <TextInput
              label={t("signUp")}
              placeholder="https://..."
              {...form.getInputProps("signUp")}
            />
          </Grid.Col>
          <Grid.Col sm={12} md={3}>
            <Checkbox
              mt="xl"
              label={t("stammtisch")}
              {...form.getInputProps("isStammtisch", { type: "checkbox" })}
            />
          </Grid.Col>
          <Grid.Col sm={12}>
            <Button type="submit">{t("submit")}</Button>
          </Grid.Col>
        </Grid>
      </form>
    </Modal>
  );
}