Updated Users and New Ticket Modals to Material UI

client/src/components/Modals/Modal.tsx

@@ -1,15 +1,74 @@
 import React, { FC } from "react";
 import Dialog from "@material-ui/core/Dialog";
+import {
+  DialogTitle,
+  Typography,
+  IconButton,
+  DialogContent,
+  makeStyles,
+  Theme,
+  createStyles,
+  DialogActions,
+  Button,
+} from "@material-ui/core";
+import CloseIcon from "@material-ui/icons/Close";
 
 interface IProps {
   handleClose: () => void;
   show: boolean;
+  action: string;
+  handleAction: (e: React.FormEvent) => Promise<void>;
+  name: string;
 }
 
-export const Modal: FC<IProps> = ({ handleClose, show, children }) => {
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      margin: 0,
+      padding: theme.spacing(2),
+    },
+    closeButton: {
+      position: "absolute",
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+      color: theme.palette.grey[500],
+    },
+  })
+);
+
+export const Modal: FC<IProps> = ({
+  handleClose,
+  show,
+  action,
+  handleAction,
+  children,
+  name,
+}) => {
+  const classes = useStyles();
+
   return (
     <Dialog open={show} onClose={handleClose}>
-      {children}
+      <DialogTitle disableTypography className={classes.root}>
+        <Typography variant="h6">{name}</Typography>
+        {handleClose ? (
+          <IconButton
+            aria-label="close"
+            className={classes.closeButton}
+            onClick={handleClose}
+          >
+            <CloseIcon />
+          </IconButton>
+        ) : null}
+      </DialogTitle>
+      <DialogContent dividers>{children}</DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose} color="primary">
+          Cancel
+        </Button>
+        <Button onClick={handleAction} color="primary">
+          {action}
+        </Button>
+      </DialogActions>
     </Dialog>
   );
 };

client/src/components/Modals/NewTicketModal.tsx

@@ -6,6 +6,21 @@ import { Ticket } from "../../types/Ticket";
 import { Project } from "../../types/Project";
 import { post } from "../../utils/http";
 import { Constants } from "../../utils/Constants";
+import {
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  TextField,
+  DialogActions,
+  Button,
+  Typography,
+  IconButton,
+  Theme,
+  createStyles,
+  makeStyles,
+} from "@material-ui/core";
+import MuiDialogTitle from "@material-ui/core/DialogTitle";
+import MuiDialogContent from "@material-ui/core/DialogContent";
 
 interface IProps {
   show: boolean;
@@ -26,9 +41,7 @@ export const NewTicketModal: FC<IProps> = ({
   const id = url.split("/")[2];
   const [projectId, setProjectId] = useState(id);
 
-  const handleSubmit: (event: FormEvent<HTMLFormElement>) => void = async (
+  const handleSubmit = async (e: FormEvent) => {
-    e: FormEvent
-  ) => {
     e.preventDefault();
     let newTicket = {
       title: title,
@@ -44,11 +57,17 @@ export const NewTicketModal: FC<IProps> = ({
   };
 
   return (
-    <Modal show={show} handleClose={handleClose}>
+    <Modal
+      name="New Ticket"
+      show={show}
+      handleClose={handleClose}
+      action="New Ticket"
+      handleAction={handleSubmit}
+    >
       <div className="row valign-wrapper indigo">
-        <div className="col s10">
+        {/* <div className="col s10">
           <h4 className="white-text">New Ticket</h4>
-        </div>
+        </div> */}
 
         <div className="col s2">
           <i

client/src/components/Modals/UsersModal.tsx

@@ -29,9 +29,7 @@ export const UsersModal: FC<IProps> = ({
     setFilterText(e.target.value);
   };
 
-  const handleSubmit: (event: FormEvent<HTMLFormElement>) => void = async (
+  const handleSubmit = async (e: FormEvent) => {
-    e: FormEvent
-  ) => {
     e.preventDefault();
     await patch<User[]>(
       `${Constants.projectsURI}/${id}/members`,
@@ -41,7 +39,13 @@ export const UsersModal: FC<IProps> = ({
   };
 
   return (
-    <Modal show={show} handleClose={handleClose}>
+    <Modal
+      name="Manage Users"
+      show={show}
+      handleClose={handleClose}
+      action="Submit"
+      handleAction={handleSubmit}
+    >
       <div className="row valign-wrapper indigo">
         <div className="col s10">
           <h4 className="white-text">Manage users</h4>