Merge pull request #25 from Visual-Regression-Tracker/71-project-edit

71 project edit

Author: pashidlos

src/components/ProjectModal.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  TextField,
+  DialogActions,
+  Button,
+} from "@material-ui/core";
+
+interface IProps {
+  open: boolean;
+  title: string;
+  submitButtonText: string;
+  projectState: [
+    {
+      id: string;
+      name: string;
+      mainBranchName: string;
+    },
+    React.Dispatch<
+      React.SetStateAction<{
+        id: string;
+        name: string;
+        mainBranchName: string;
+      }>
+    >
+  ];
+  onSubmit: () => void;
+  onCancel: () => void;
+}
+
+export const ProjectModal: React.FunctionComponent<IProps> = ({
+  open,
+  title,
+  submitButtonText,
+  projectState,
+  onSubmit,
+  onCancel,
+}) => {
+  const [project, setProject] = projectState;
+
+  return (
+    <Dialog open={open} onClose={onCancel} aria-labelledby="form-dialog-title">
+      <DialogTitle id="form-dialog-title">{title}</DialogTitle>
+      <DialogContent>
+        <TextField
+          autoFocus
+          margin="dense"
+          id="name"
+          label="Project name"
+          type="text"
+          fullWidth
+          value={project.name}
+          onChange={(event) =>
+            setProject({
+              ...project,
+              name: event.target.value,
+            })
+          }
+        />
+        <TextField
+          margin="dense"
+          id="branchName"
+          label="Main branch"
+          type="text"
+          fullWidth
+          value={project.mainBranchName}
+          onChange={(event) =>
+            setProject({
+              ...project,
+              mainBranchName: event.target.value,
+            })
+          }
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onCancel} color="primary">
+          Cancel
+        </Button>
+        <Button onClick={onSubmit} color="primary">
+          {submitButtonText}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};

src/contexts/project.context.tsx

@@ -18,12 +18,22 @@ interface ICreateAction {
   payload: Project;
 }
 
+interface IUpdateAction {
+  type: "update";
+  payload: Project;
+}
+
 interface IDeleteAction {
   type: "delete";
   payload: string;
 }
 
-type IAction = IRequestAction | IGetction | ICreateAction | IDeleteAction;
+type IAction =
+  | IRequestAction
+  | IGetction
+  | ICreateAction
+  | IDeleteAction
+  | IUpdateAction;
 
 type Dispatch = (action: IAction) => void;
 type State = { projectList: Project[] };
@@ -51,6 +61,16 @@ function projectReducer(state: State, action: IAction): State {
         ...state,
         projectList: [action.payload, ...state.projectList],
       };
+    case "update":
+      return {
+        ...state,
+        projectList: state.projectList.map((p) => {
+          if (p.id === action.payload.id) {
+            return action.payload;
+          }
+          return p;
+        }),
+      };
     case "delete":
       return {
         ...state,
@@ -109,7 +129,10 @@ async function getProjectList(dispatch: Dispatch) {
     });
 }
 
-async function createProject(dispatch: Dispatch, project: { name: string }) {
+async function createProject(
+  dispatch: Dispatch,
+  project: { name: string; mainBranchName: string }
+) {
   dispatch({ type: "request" });
 
   projectsService
@@ -122,6 +145,22 @@ async function createProject(dispatch: Dispatch, project: { name: string }) {
     });
 }
 
+async function updateProject(
+  dispatch: Dispatch,
+  project: { id: string; name: string; mainBranchName: string }
+) {
+  dispatch({ type: "request" });
+
+  projectsService
+    .update(project)
+    .then((project: Project) => {
+      dispatch({ type: "update", payload: project });
+    })
+    .catch((error) => {
+      console.log(error.toString());
+    });
+}
+
 async function deleteProject(dispatch: Dispatch, id: string) {
   dispatch({ type: "request" });
 
@@ -142,6 +181,7 @@ export {
   useProjectState,
   useProjectDispatch,
   createProject,
+  updateProject,
   getProjectList,
   deleteProject,
 };

src/pages/ProjectListPage.tsx

@@ -23,30 +23,41 @@ import {
   getProjectList,
   deleteProject,
   createProject,
+  updateProject,
 } from "../contexts";
 import { Link } from "react-router-dom";
-import { Delete, Add } from "@material-ui/icons";
+import { Delete, Add, Edit } from "@material-ui/icons";
 import { routes } from "../constants";
 import { formatDateTime } from "../_helpers/format.helper";
+import { ProjectModal } from "../components/ProjectModal";
 
 const ProjectsListPage = () => {
   const theme = useTheme();
   const projectState = useProjectState();
   const projectDispatch = useProjectDispatch();
 
   const [createDialogOpen, setCreateDialogOpen] = React.useState(false);
-  const [newProjectName, setNewProjectName] = React.useState<string>("");
+  const [updateDialogOpen, setUpdateDialogOpen] = React.useState(false);
+  const [project, setProject] = React.useState<{
+    id: string;
+    name: string;
+    mainBranchName: string;
+  }>({
+    id: "",
+    name: "",
+    mainBranchName: "",
+  });
 
   useEffect(() => {
     getProjectList(projectDispatch);
   }, [projectDispatch]);
 
-  const handleCreateClickOpen = () => {
-    setCreateDialogOpen(true);
+  const toggleCreateDialogOpen = () => {
+    setCreateDialogOpen(!createDialogOpen);
   };
 
-  const handleCreateClose = () => {
-    setCreateDialogOpen(false);
+  const toggleUpdateDialogOpen = () => {
+    setUpdateDialogOpen(!updateDialogOpen);
   };
 
   return (
@@ -66,49 +77,44 @@ const ProjectsListPage = () => {
             <Fab
               color="primary"
               aria-label="add"
-              onClick={handleCreateClickOpen}
+              onClick={() => {
+                toggleCreateDialogOpen();
+                setProject({
+                  id: "",
+                  name: "",
+                  mainBranchName: "",
+                });
+              }}
             >
               <Add />
             </Fab>
           </Box>
 
-          <Dialog
+          <ProjectModal
             open={createDialogOpen}
-            onClose={handleCreateClose}
-            aria-labelledby="form-dialog-title"
-          >
-            <DialogTitle id="form-dialog-title">Create Project</DialogTitle>
-            <DialogContent>
-              <TextField
-                autoFocus
-                margin="dense"
-                id="name"
-                label="Project name"
-                type="text"
-                fullWidth
-                value={newProjectName}
-                onChange={(event) => setNewProjectName(event.target.value)}
-              />
-            </DialogContent>
-            <DialogActions>
-              <Button onClick={handleCreateClose} color="primary">
-                Cancel
-              </Button>
-              <Button
-                onClick={() => {
-                  createProject(projectDispatch, {
-                    name: newProjectName,
-                  }).then((project) => {
-                    setNewProjectName("");
-                    handleCreateClose();
-                  });
-                }}
-                color="primary"
-              >
-                Create
-              </Button>
-            </DialogActions>
-          </Dialog>
+            title={"Create Project"}
+            submitButtonText={"Create"}
+            onCancel={toggleCreateDialogOpen}
+            projectState={[project, setProject]}
+            onSubmit={() =>
+              createProject(projectDispatch, project).then((project) => {
+                toggleCreateDialogOpen();
+              })
+            }
+          />
+
+          <ProjectModal
+            open={updateDialogOpen}
+            title={"Update Project"}
+            submitButtonText={"Update"}
+            onCancel={toggleUpdateDialogOpen}
+            projectState={[project, setProject]}
+            onSubmit={() =>
+              updateProject(projectDispatch, project).then((project) => {
+                toggleUpdateDialogOpen();
+              })
+            }
+          />
         </Grid>
         {projectState.projectList.map((project) => (
           <Grid item xs={4} key={project.id}>
@@ -117,14 +123,12 @@ const ProjectsListPage = () => {
                 <Typography>Key: {project.id}</Typography>
                 <Typography>Name: {project.name}</Typography>
                 <Typography>Main branch: {project.mainBranchName}</Typography>
-                <Typography>Created: {formatDateTime(project.createdAt)}</Typography>
+                <Typography>
+                  Created: {formatDateTime(project.createdAt)}
+                </Typography>
               </CardContent>
               <CardActions>
-                <Button
-                  color="primary"
-                  component={Link}
-                  to={`${project.id}`}
-                >
+                <Button color="primary" component={Link} to={`${project.id}`}>
                   Builds
                 </Button>
                 <Button
@@ -136,10 +140,15 @@ const ProjectsListPage = () => {
                 </Button>
                 <IconButton
                   onClick={(event: React.MouseEvent<HTMLElement>) => {
-                    deleteProject(projectDispatch, project.id);
+                    toggleUpdateDialogOpen();
+                    setProject(project);
                   }}
-                  style={{
-                    marginLeft: "auto",
+                >
+                  <Edit />
+                </IconButton>
+                <IconButton
+                  onClick={(event: React.MouseEvent<HTMLElement>) => {
+                    deleteProject(projectDispatch, project.id);
                   }}
                 >
                   <Delete />

src/services/projects.service.ts

@@ -6,6 +6,7 @@ export const projectsService = {
   getAll,
   remove,
   create,
+  update,
 };
 
 function getAll(): Promise<Project[]> {
@@ -28,7 +29,10 @@ function remove(id: string): Promise<number> {
   );
 }
 
-function create(project: { name: string }): Promise<Project> {
+function create(project: {
+  name: string;
+  mainBranchName: string;
+}): Promise<Project> {
   const requestOptions = {
     method: "POST",
     headers: { "Content-Type": "application/json", ...authHeader() },
@@ -37,3 +41,17 @@ function create(project: { name: string }): Promise<Project> {
 
   return fetch(`${API_URL}/projects`, requestOptions).then(handleResponse);
 }
+
+function update(project: {
+  id: string;
+  name: string;
+  mainBranchName: string;
+}): Promise<Project> {
+  const requestOptions = {
+    method: "PUT",
+    headers: { "Content-Type": "application/json", ...authHeader() },
+    body: JSON.stringify(project),
+  };
+
+  return fetch(`${API_URL}/projects`, requestOptions).then(handleResponse);
+}