Finished NewTicketForm layout

client/src/components/MemberList.tsx

@@ -1,16 +1,7 @@
 import React, { FC, useState, ChangeEvent, MouseEvent } from "react";
-import { TabRouterHeader } from "./TabRouterHeader";
-import { TicketList } from "./TicketList";
-import { FileList } from "./AppFileList";
-import { Ticket } from "../types/Ticket";
-import { AppFile } from "../types/AppFile";
-import { Route, useRouteMatch, Redirect } from "react-router-dom";
-import { ActivityList } from "./ActivityList";
-import { Activity } from "../types/Activity";
-import { NewTicketModal } from "./NewTicketModal";
-import { User } from "../types/User";
 import { UsersModalEntry } from "./UsersModalEntry";
 import { FilterBar } from "./FilterBar";
+import { User } from "../types/User";
 
 interface IProps {
   users: User[];

client/src/components/NewTicketModal.tsx

@@ -1,31 +1,19 @@
 import React, { FC, useState, ChangeEvent, useEffect, FormEvent } from "react";
-import { Modal } from "./Modal";
-import { AvatarList } from "./AvatarList";
-import { User } from "../types/User";
-import { FilterBar } from "./FilterBar";
-import { HttpResponse } from "../types/HttpResponse";
-import { get, put, patch } from "../utils/http";
-import { Constants } from "../utils/Constants";
-import { UsersModalEntry } from "./UsersModalEntry";
 import { useParams } from "react-router-dom";
-import _ from "underscore";
+import { Modal } from "./Modal";
 import { NewTicketTabRouter } from "./NewTicketTabRouter";
+import { User } from "../types/User";
+import { patch } from "../utils/http";
+import { Constants } from "../utils/Constants";
 
 interface IProps {
   show: boolean;
   handleClose(): void;
-  // users: User[];
   allUsers: User[];
 }
 
-export const NewTicketModal: FC<IProps> = ({
+export const NewTicketModal: FC<IProps> = ({ show, handleClose, allUsers }) => {
-  show,
-  handleClose,
-  // users,
-  allUsers
-}) => {
   const [filterText, setFilterText] = useState<string>("");
-  // const [members, setMembers] = useState<User[]>(users);
   const { id } = useParams();
 
   const handleChange: (e: ChangeEvent<HTMLInputElement>) => void = (
@@ -53,6 +41,7 @@ export const NewTicketModal: FC<IProps> = ({
         <div className="col s10">
           <h4 className="white-text">New Ticket</h4>
         </div>
+
         <div className="col s2">
           <i
             className="right material-icons indigo lighten-3 circle"
@@ -62,25 +51,15 @@ export const NewTicketModal: FC<IProps> = ({
           </i>
         </div>
       </div>
-      <div className="row">
-        <NewTicketTabRouter
-          tabNames={["Details", "Members"]}
-          users={allUsers}
-        />
-      </div>
 
       <form onSubmit={handleSubmit}>
-        {/* <ul>
+        <div className="row">
-          {allUsers.map((u: User) => (
+          <NewTicketTabRouter
-            <li key={u.id}>
+            tabNames={["Details", "Members"]}
-              <UsersModalEntry
+            users={allUsers}
-                user={u}
+          />
-                members={members}
+        </div>
-                setMembers={setMembers}
+
-              />
-            </li>
-          ))}
-        </ul> */}
         <div className="modal-footer grey lighten-3">
           <input
             type="submit"

client/src/components/NewTicketTabRouter.tsx

@@ -19,15 +19,13 @@ export const NewTicketTabRouter: FC<IProps> = ({ tabNames, users }) => {
 
         <Redirect from={url} to={`${url}/details`} />
 
-        <form onSubmit={() => {}}>
+        <Route path={`${url}/details`}>
-          <Route path={`${url}/details`}>
+          <NewTicketForm />
-            <NewTicketForm />
+        </Route>
-          </Route>
 
-          <Route path={`${url}/members`}>
+        <Route path={`${url}/members`}>
-            <MemberList users={users} />
+          <MemberList users={users} />
-          </Route>
+        </Route>
-        </form>
       </div>
     </>
   );

client/src/components/ProjectList.tsx

@@ -38,13 +38,6 @@ export const ProjectList: FC<IProps> = ({ projects }) => {
   return (
     <>
       <div className="row valign-wrapper">
-        {/* <NewTicketModal
-          handleClose={() => {
-            setShowNew(false);
-          }}
-          show={showNew}
-          allUsers={users}
-        /> */}
         <h3>Projects</h3>
         <FloatingButton
           color="indigo lighten-1"

client/src/components/TabRouter.tsx

@@ -1,13 +1,12 @@
 import React, { FC } from "react";
+import { Route, useRouteMatch, Redirect } from "react-router-dom";
 import { TabRouterHeader } from "./TabRouterHeader";
 import { TicketList } from "./TicketList";
 import { FileList } from "./AppFileList";
+import { ActivityList } from "./ActivityList";
 import { Ticket } from "../types/Ticket";
 import { AppFile } from "../types/AppFile";
-import { Route, useRouteMatch, Redirect } from "react-router-dom";
-import { ActivityList } from "./ActivityList";
 import { Activity } from "../types/Activity";
-import { NewTicketModal } from "./NewTicketModal";
 import { User } from "../types/User";
 
 interface IProps {

client/src/components/UserTabRouter.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from "react";
 import { Route, useRouteMatch, Redirect } from "react-router-dom";
 import { TabRouterHeader } from "./TabRouterHeader";
-import { TicketList } from "./TicketList";
 import { ProjectList } from "./ProjectList";
 import { Ticket } from "../types/Ticket";
 import { Project } from "../types/Project";