fennec-fe/src/projects/project-editor.tsx

import { gql, Reference, useMutation } from "@apollo/client";
import {
  Button,
  LinearProgress,
  makeStyles,
  Paper,
  Portal,
  Typography,
  Grid,
  IconButton,
} from "@material-ui/core";
import { Form, Formik, Field, FormikHelpers } from "formik";
import { TextField } from "formik-material-ui";
import { not } from "ramda";
import { FC } from "react";
import { Project } from "../generated/graphql";
import * as Yup from "yup";
import { useRouter } from "@curi/react-dom";
import { useHeaderContainer } from "../layouts";
import DeleteIcon from "@material-ui/icons/Delete";
import { useConfirm } from "material-ui-confirm";
import { useSnackbar } from "notistack";

type Values = Partial<Project>;

interface Props {
  project: Values;
}

const useStyles = makeStyles({
  root: {
    overflow: "hidden",
  },
  form: {
    margin: 16,
  },
});

const CREATE_PROJECT = gql`
  mutation CreateProject($input: CreateProjectInput!) {
    createProject(project: $input) {
      id
      name
      comment
      webUrl
      webHookSecret
      sshUrl
    }
  }
`;

const UPDATE_PROJECT = gql`
  mutation UpdateProject($input: UpdateProjectInput!) {
    updateProject(project: $input) {
      id
      name
      comment
      webUrl
      webHookSecret
      sshUrl
    }
  }
`;

const REMOVE_PROJECT = gql`
  mutation RemoveProject($id: String!) {
    removeProject(id: $id)
  }
`;

export const ProjectEditor: FC<Props> = ({ project }) => {
  const isCreate = not("id" in project);

  const [createProject] = useMutation<{ createProject: Project }>(
    CREATE_PROJECT,
    {
      update(cache, { data }) {
        cache.modify({
          fields: {
            projects(exitingProjects = []) {
              const newProjectRef = cache.writeFragment({
                data: data!.createProject,
                fragment: gql`
                  fragment newProject on Project {
                    id
                    name
                    comment
                    webUrl
                    sshUrl
                    webHookSecret
                  }
                `,
              });
              return [newProjectRef, ...exitingProjects];
            },
          },
        });
      },
    }
  );
  const [updateProject] = useMutation(UPDATE_PROJECT);

  const router = useRouter();

  const { enqueueSnackbar } = useSnackbar();

  const submitForm = async (
    values: Values,
    formikHelpers: FormikHelpers<Values>
  ) => {
    try {
      let projectId: string | undefined = project.id;
      if (isCreate) {
        await createProject({
          variables: {
            input: values,
          },
        }).then(({ data }) => (projectId = data!.createProject.id));
      } else {
        await updateProject({
          variables: {
            id: (project as Project).id,
            input: values,
          },
        });
      }
      enqueueSnackbar("Saved successfully", {
        variant: "success",
      });
      router.navigate({
        url: router.url({
          name: "project-detail",
          params: {
            projectId,
          },
        }),
        method: "replace",
      });
    } finally {
      formikHelpers.setSubmitting(false);
    }
  };

  const [removeProject, { loading: deleting }] = useMutation(REMOVE_PROJECT, {
    variables: { id: project.id },
    update(cache) {
      cache.modify({
        fields: {
          projects(exitingProjects: Reference[] = [], { readField }) {
            return exitingProjects.filter(
              (ref) => project.id !== readField("id", ref)
            );
          },
        },
      });
    },
  });

  const confirm = useConfirm();
  const handleDelete = async () => {
    try {
      await confirm({ description: `This will delete ${project.name}.` });
      await removeProject();
      enqueueSnackbar("Deleted successfully", {
        variant: "success",
      });
      router.navigate({
        url: router.url({
          name: "dashboard",
        }),
      });
    } catch {}
  };

  const headerContainer = useHeaderContainer();

  const classes = useStyles();
  return (
    <Paper className={classes.root}>
      <Portal container={headerContainer}>
        <Grid container justify="space-between" alignItems="center">
          <Typography variant="h6" component="h1">
            {isCreate ? "Create" : "Edit"} Project
          </Typography>
          {isCreate ? null : (
            <IconButton
              color="inherit"
              onClick={handleDelete}
              disabled={deleting}
            >
              <DeleteIcon />
            </IconButton>
          )}
        </Grid>
      </Portal>
      <Formik
        initialValues={project}
        validationSchema={Yup.object({
          name: Yup.string()
            .max(32, "Must be 32 characters or less")
            .required("Required"),
          comment: Yup.string()
            .max(32, "Must be 32 characters or less")
            .required("Required"),
          webUrl: Yup.string()
            .matches(
              /^(https?:\/\/)?([\da-z.-]+\.[a-z.]{2,6}|[\d.]+)([\\/:?=&#]{1}[\da-z.-]+)*[/\\?]?$/i,
              "Enter correct url!"
            )
            .max(256, "Must be 256 characters or less")
            .required("Required"),
          sshUrl: Yup.string()
            .matches(
              /^(?:ssh:\/\/)?(?:[\w\d-_]+@)?(?:[\w\d-_]+\.)*\w{2,10}(?::\d{1,5})?(?:\/[\w\d-_.]+)*$/,
              "Enter correct url!"
            )
            .max(256, "Must be 256 characters or less")
            .required("Required"),
          webHookSecret: Yup.string()
            .max(16, "Must be 16 characters or less")
            .required("Required"),
        })}
        onSubmit={submitForm}
      >
        {({ submitForm, isSubmitting }) => (
          <Form className={classes.form}>
            <Field component={TextField} name="name" label="Name" fullWidth />
            <Field
              component={TextField}
              name="comment"
              label="Comment"
              fullWidth
              margin="normal"
            />
            <Field
              component={TextField}
              name="webUrl"
              label="Project URL"
              placeholder="The project website url"
              fullWidth
              margin="normal"
            />
            <Field
              component={TextField}
              name="sshUrl"
              label="Git SSH URL"
              placeholder="The Git remote SSH URL"
              fullWidth
              margin="normal"
            />
            <Field
              component={TextField}
              name="webHookSecret"
              label="Webhook Secret"
              fullWidth
              margin="normal"
            />
            {isSubmitting && <LinearProgress />}
            <Button
              variant="contained"
              color="primary"
              disabled={isSubmitting}
              onClick={submitForm}
              fullWidth
            >
              Submit
            </Button>
          </Form>
        )}
      </Formik>
    </Paper>
  );
};