eventCard.jsx

import { useRouter } from "next/router";

import { useSession, signIn } from "next-auth/react";

import { useTranslation } from "next-i18next";

import {
  Alert,
  Button,
  Card,
  Group,
  List,
  Space,
  useMantineTheme,
} from "@mantine/core";
import { showNotification } from "@mantine/notifications";

import { Icon, ICONS } from "vseth-canine-ui";

import parse from "html-react-parser";

import hasAccess from "../utilities/hasAccess";
import { getAccentColor } from "../utilities/colors";
import { formatDateFromDB, formatTimeFromDB } from "../utilities/dates";
import { isRegistered } from "../utilities/signUp";

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

const addSignUpMutation = gql`
  mutation addSignUp($id: Int) {
    addSignUp(id: $id)
  }
`;

const removeSignUpMutation = gql`
  mutation removeSignUp($id: Int) {
    removeSignUp(id: $id)
  }
`;

export default function EventCard({
  event,
  setEvent,
  setOpen,
  refetch,
  setSignUpOpen,
}) {
  const [addSignUp] = useMutation(addSignUpMutation);
  const [removeSignUp] = useMutation(removeSignUpMutation);

  const { data: session } = useSession();
  const { t } = useTranslation("common");
  const theme = useMantineTheme();

  const { locale } = useRouter();

  const accentColor = getAccentColor(theme);
  const signedUp = isRegistered(session, event);

  const signUp = async (id) => {
    if (!session) signIn({ callbackUrl: "/" });
    const status = await addSignUp({
      variables: {
        id: event.id,
      },
    });
    refetch();
    if (status.data.addSignUp) {
      showNotification({
        title: t("successfulSignup"),
        message: t("successfulSignupText"),
        color: "green",
      });
    } else {
      showNotification({
        title: t("alreadySignedUp"),
        message: t("alreadySignedUpText"),
        color: "green",
      });
    }
  };

  const signOff = async (id) => {
    await removeSignUp({
      variables: {
        id: event.id,
      },
    });
    refetch();
    showNotification({
      title: t("successfulSignoff"),
      message: t("successfulSignoffText"),
      color: "green",
    });
  };

  const editEvent = (event) => {
    setEvent(event);
    setOpen(true);
  };

  const viewSignUps = (event) => {
    setEvent(event);
    setSignUpOpen(true);
  };

  return (
    <Card
      shadow="md"
      radius="md"
      style={{
        display: "flex",
        justifyContent: "space-between",
        flexDirection: "column",
        width: "100%",
        color: event.isStammtisch ? "" : "",
      }}
      withBorder
    >
      <div>
        <Group>
          <h2 style={{ margin: 0 }}>{event.title}</h2>
        </Group>

        {signedUp && (
          <>
            <Space h="xs" />
            <Alert
              color="green"
              variant="light"
              icon={<Icon icon={ICONS.CHECK} color="green" />}
              title={t("signedUpTitle")}
            >
              {t("signedUpText")}
            </Alert>
          </>
        )}

        <Space h="lg" />
        <List
          spacing="md"
          size="md"
          center
          style={{ color: event.isStammtisch ? "" : "" }}
        >
          {event.speaker && (
            <List.Item
              icon={<Icon icon={ICONS.USER} color="#f28a20" size={16} />}
            >
              <p>{event.speaker}</p>
            </List.Item>
          )}
          <List.Item
            icon={<Icon icon={ICONS.LOCATION} color="#f28a20" size={16} />}
          >
            <p>{event.place}</p>
          </List.Item>
          <List.Item
            icon={<Icon icon={ICONS.CALENDAR} color="#f28a20" size={16} />}
          >
            <p>{formatDateFromDB(event.date, locale)}</p>
          </List.Item>
          <List.Item
            icon={<Icon icon={ICONS.CLOCK} color="#f28a20" size={16} />}
          >
            <p>{formatTimeFromDB(event.startTime, event.endTime)}</p>
          </List.Item>
        </List>
        <Space h="lg" />

        <p>{parse(event.description)}</p>
      </div>
      <div>
        {event.isStammtisch ? (
          <Button
            disabled
            fullWidth
            leftIcon={<Icon icon={ICONS.USER_PLUS} color="gray" />}
          >
            {t("noSignupNeeded")}
          </Button>
        ) : (
          <Group mt="xl" style={{ verticalAlign: "middle" }} grow>
            {event.signUp ? (
              <Button
                href={event.signUp}
                target="_blank"
                rightIcon={<Icon icon={ICONS.RIGHT} color="#f28a20" />}
                component="a"
              >
                {t("externalSignUp")}
              </Button>
            ) : (
              <>
                {signedUp ? (
                  <Button
                    onClick={() => signOff(event.id)}
                    leftIcon={<Icon icon={ICONS.USER_MINUS} color="white" />}
                  >
                    {t("signOff")}
                  </Button>
                ) : (
                  <Button
                    onClick={() => signUp(event.id)}
                    leftIcon={<Icon icon={ICONS.USER_PLUS} color="#f28a20" />}
                    style={{ color: "#f28a20" }}
                  >
                    {t("signUp")}
                  </Button>
                )}
              </>
            )}
          </Group>
        )}
        {hasAccess(session, true) && (
          <Group grow mt="md" style={{ verticalAlign: "middle" }}>
            <Button
              leftIcon={<Icon icon={ICONS.EDIT} color={accentColor} />}
              variant="light"
              onClick={() => editEvent(event)}
            >
              {t("editEvent")}
            </Button>
            {!event.isStammtisch && (
              <Button
                leftIcon={<Icon icon={ICONS.LIST} color={accentColor} />}
                variant="light"
                onClick={() => viewSignUps(event)}
              >
                {t("viewParticipants")}
              </Button>
            )}
          </Group>
        )}
      </div>
    </Card>
  );
}