feat(projects): list, create and update.
This commit is contained in:
Ivan Li
203
src/projects/project-editor.tsx
Normal file
203
src/projects/project-editor.tsx
Normal file
@@ -0,0 +1,203 @@
|
||||
import { gql, useMutation } from "@apollo/client";
|
||||
import { Button, LinearProgress, makeStyles, Paper } from "@material-ui/core";
|
||||
import { Form, Formik, Field, FormikHelpers } from "formik";
|
||||
import { TextField } from "formik-material-ui";
|
||||
import { not } from "ramda";
|
||||
import React, { FC } from "react";
|
||||
import {
|
||||
CreateProjectInput,
|
||||
UpdateProjectInput,
|
||||
Project,
|
||||
} from "../generated/graphql";
|
||||
import * as Yup from "yup";
|
||||
import { useRouter } from "@curi/react-dom";
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
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: {
|
||||
findProjects(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 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,
|
||||
},
|
||||
});
|
||||
}
|
||||
router.navigate({
|
||||
url: router.url({
|
||||
name: "project-detail",
|
||||
params: {
|
||||
projectId,
|
||||
},
|
||||
}),
|
||||
method: "replace",
|
||||
});
|
||||
} finally {
|
||||
formikHelpers.setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<Paper className={classes.root}>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
82
src/projects/project-panel.tsx
Normal file
82
src/projects/project-panel.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
import { gql, useQuery } from '@apollo/client';
|
||||
import { Link, useRouter } from '@curi/react-dom';
|
||||
import { Box, List, ListItem } from '@material-ui/core';
|
||||
import { makeStyles, Theme, createStyles } from '@material-ui/core';
|
||||
import { find, propEq } from 'ramda';
|
||||
import React, { useState, FC, useEffect } from 'react';
|
||||
import { Project } from '../generated/graphql';
|
||||
import { ListItemText } from '@material-ui/core';
|
||||
import { Button } from '@material-ui/core';
|
||||
import { AddBox } from '@material-ui/icons';
|
||||
|
||||
const PROJECTS = gql`
|
||||
query Projects {
|
||||
projects {
|
||||
id
|
||||
name
|
||||
comment
|
||||
sshUrl
|
||||
webUrl
|
||||
webHookSecret
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
|
||||
})
|
||||
);
|
||||
|
||||
export function ProjectPanel() {
|
||||
return (
|
||||
<section>
|
||||
<Box m={2}>
|
||||
<Link
|
||||
name="create-project"
|
||||
>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
title="New Project"
|
||||
startIcon={<AddBox />}
|
||||
>
|
||||
New Project
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
<ProjectList />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
const ProjectList: FC<{}> = () => {
|
||||
const { data, refetch } = useQuery<{
|
||||
projects: Project[];
|
||||
}>(PROJECTS);
|
||||
const projects = data?.projects;
|
||||
const [currentProject, setCurrentProject] = useState<Project | undefined>(
|
||||
undefined
|
||||
);
|
||||
const { current } = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
const currId = current()?.response?.params.projectId;
|
||||
console.log(currId);
|
||||
setCurrentProject(find(propEq("id", currId), projects ?? []));
|
||||
}, [current, projects]);
|
||||
|
||||
const items = projects?.map((item) => (
|
||||
<Link
|
||||
name="edit-project"
|
||||
params={{ projectId: item.id }}
|
||||
key={item.id}
|
||||
onNav={() => setCurrentProject(item)}
|
||||
>
|
||||
<ListItem button>
|
||||
<ListItemText primary={item.name} secondary={item.comment} />
|
||||
</ListItem>
|
||||
</Link>
|
||||
));
|
||||
return <List>{items}</List>;
|
||||
};
|
||||
14
src/projects/queries.ts
Normal file
14
src/projects/queries.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { gql } from '@apollo/client';
|
||||
|
||||
export const PROJECT = gql`
|
||||
query Project($id:String!) {
|
||||
project(id: $id) {
|
||||
id
|
||||
name
|
||||
comment
|
||||
webUrl
|
||||
sshUrl
|
||||
webHookSecret
|
||||
}
|
||||
}
|
||||
`
|
||||
Reference in New Issue
Block a user