file.tsx

import { Editor } from "@endwise/ui/Editor";
import { ErrorView } from "@endwise/ui/query";
import {
  Box,
  Button,
  Group,
  Input,
  Select,
  SimpleGrid,
  Stack,
  Text,
  TextInput,
} from "@mantine/core";
import { DatePickerInput } from "@mantine/dates";
import { useForm } from "@mantine/form";
import { useHotkeys } from "@mantine/hooks";
import { notifications } from "@mantine/notifications";
import { IconClick, IconLoader } from "@tabler/icons-react";
import { RecurrenceOptions, Task } from "../../../prisma/generated/prisma";
import { api } from "../../utils/api";
import { z } from "zod";
import { TaskCreateWithoutUserInputSchema } from "../../../prisma/generated/zod";

export const EditTaskView = ({
  task,
  onSuccess,
}: {
  task?: Task;
  onSuccess: () => void;
}) => {
  const tasksQuery = api.tasks.findAll.useQuery();

  const onSuccessInner = () => {
    tasksQuery.refetch().catch((e) => console.error(e));
    notifications.show({
      message: "Successfully created task.",
      color: "green",
    });
    onSuccess();
  };

  const createMutation = api.tasks.create.useMutation({
    onSuccess: onSuccessInner,
  });
  const updateMutation = api.tasks.update.useMutation({
    onSuccess: onSuccessInner,
  });

  const initialValues: z.input<typeof TaskCreateWithoutUserInputSchema> = {
    title: "",
    description: "",
    recurrence: RecurrenceOptions.NONE,
  };

  const form = useForm({ initialValues: task ?? initialValues });

  useHotkeys([
    [
      "enter",
      () => {
        task
          ? updateMutation.mutate({
              id: task.id,
              data: form.values,
            })
          : createMutation.mutate({
              data: form.values,
            });
      },
    ],
  ]);

  return (
    <Stack>
      <TextInput required {...form.getInputProps("title")} label={"Title"} />

      <Input.Wrapper>
        <Input.Label>Description</Input.Label>
        <Editor
          editable={true}
          get={() => form.values.description ?? ""}
          set={(v) => form.setFieldValue("description", v)}
        />
      </Input.Wrapper>

      <SimpleGrid cols={2} breakpoints={[{ maxWidth: 600, cols: 1 }]}>
        <DatePickerInput
          value={form.values.start}
          onChange={(v) => form.setFieldValue("start", v)}
          label={"Start Date"}
          minDate={new Date()}
          popoverProps={{ withinPortal: true }}
        />
        <DatePickerInput
          value={form.values.end}
          onChange={(v) => form.setFieldValue("end", v)}
          label={"Due Date"}
          maxDate={form.values.start ?? new Date(2222, 0)}
          popoverProps={{ withinPortal: true }}
        />
        <Select
          data={Object.values(RecurrenceOptions)}
          {...form.getInputProps("recurrence")}
          label={"Recurrence"}
        />
      </SimpleGrid>
      {updateMutation.isError && <ErrorView error={updateMutation.error} />}

      {task && (
        <Button
          onClick={() =>
            updateMutation.mutate({
              id: task.id,
              data: form.values,
            })
          }
        >
          <Group>
            <IconClick />
            <Text>Save Changes</Text>
            {updateMutation.isLoading && <IconLoader />}
          </Group>
        </Button>
      )}

      {!task && (
        <Button
          onClick={() =>
            createMutation.mutate({
              data: form.values,
            })
          }
        >
          <Group>
            <IconClick />
            <Text>Save Changes</Text>
            {updateMutation.isLoading && <IconLoader />}
          </Group>
        </Button>
      )}
    </Stack>
  );
};