simplified newticketform

client/src/components/NewTicketModal.tsx

@@ -1,33 +1,21 @@
-import React, { FC, useState, ChangeEvent, useEffect, FormEvent } from "react";
+import React, { FC, useState, useEffect, FormEvent } from "react";
-import { useParams } from "react-router-dom";
 import { Modal } from "./Modal";
-import { NewTicketTabRouter } from "./NewTicketTabRouter";
-import { User } from "../types/User";
 import { Ticket } from "../types/Ticket";
-import { patch, post } from "../utils/http";
+import { post } from "../utils/http";
 import { Constants } from "../utils/Constants";
-import { Project } from "../types/Project";
 import { HttpResponse } from "../types/HttpResponse";
+import { NewTicketForm } from "./NewTicketForm";
 
 interface IProps {
   show: boolean;
   handleClose(): void;
-  allUsers: User[];
 }
 
-export const NewTicketModal: FC<IProps> = ({ show, handleClose, allUsers }) => {
+export const NewTicketModal: FC<IProps> = ({ show, handleClose }) => {
-  const [filterText, setFilterText] = useState<string>("");
-  const { id } = useParams();
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
   const [endingDate, setEndingDate] = useState("");
 
-  const handleChange: (e: ChangeEvent<HTMLInputElement>) => void = (
-    e: ChangeEvent<HTMLInputElement>
-  ) => {
-    setFilterText(e.target.value);
-  };
-
   const handleSubmit: (event: FormEvent<HTMLFormElement>) => void = async (
     e: FormEvent
   ) => {
@@ -39,12 +27,12 @@ export const NewTicketModal: FC<IProps> = ({ show, handleClose, allUsers }) => {
       creatorId: "20bf4b2a-7209-4826-96cd-29c2bc937a94",
       projectId: 1
     };
-    console.log(newTicket);
+    // console.log(newTicket);
     const response: HttpResponse<Ticket> = await post<Ticket>(
       `${Constants.ticketsURI}`,
       newTicket
     );
-    console.log(response.parsedBody);
+    // console.log(response.parsedBody);
     handleClose();
   };
 
@@ -68,9 +56,7 @@ export const NewTicketModal: FC<IProps> = ({ show, handleClose, allUsers }) => {
 
       <form onSubmit={handleSubmit}>
         <div className="row">
-          <NewTicketTabRouter
+          <NewTicketForm
-            tabNames={["Details", "Members"]}
-            users={allUsers}
             title={title}
             setTitle={setTitle}
             description={description}

client/src/components/NewTicketTabRouter.tsx

@@ -1,14 +1,10 @@
 import React, { FC } from "react";
-import { Route, useRouteMatch, Redirect } from "react-router-dom";
+import { useRouteMatch } from "react-router-dom";
 import { TabRouterHeader } from "./TabRouterHeader";
 import { NewTicketForm } from "./NewTicketForm";
-import { MemberList } from "./MemberList";
-import { User } from "../types/User";
-import { Ticket } from "../types/Ticket";
 
 interface IProps {
   tabNames: string[];
-  users: User[];
   description: string;
   setDescription: React.Dispatch<React.SetStateAction<string>>;
   title: string;
@@ -19,7 +15,6 @@ interface IProps {
 
 export const NewTicketTabRouter: FC<IProps> = ({
   tabNames,
-  users,
   description,
   setDescription,
   title,
@@ -33,22 +28,14 @@ export const NewTicketTabRouter: FC<IProps> = ({
       <div className="row">
         <TabRouterHeader tabNames={tabNames} />
 
-        <Redirect from={url} to={`${url}/details`} />
+        <NewTicketForm
-
+          title={title}
-        <Route path={`${url}/details`}>
+          setTitle={setTitle}
-          <NewTicketForm
+          description={description}
-            title={title}
+          setDescription={setDescription}
-            setTitle={setTitle}
+          endingDate={endingDate}
-            description={description}
+          setEndingDate={setEndingDate}
-            setDescription={setDescription}
+        />
-            endingDate={endingDate}
-            setEndingDate={setEndingDate}
-          />
-        </Route>
-
-        <Route path={`${url}/members`}>
-          <MemberList users={users} />
-        </Route>
       </div>
     </>
   );

client/src/components/TabRouter.tsx

@@ -3,11 +3,10 @@ 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 { ActivityList } from "./ActivityList";
 import { Ticket } from "../types/Ticket";
 import { AppFile } from "../types/AppFile";
 import { Activity } from "../types/Activity";
-import { User } from "../types/User";
 
 interface IProps {
   tickets: Ticket[];
@@ -15,15 +14,13 @@ interface IProps {
   tabNames: string[];
   files: AppFile[];
   activities: Activity[];
-  allUsers: User[];
 }
 
 export const TabRouter: FC<IProps> = ({
   tickets,
   tabNames,
   files,
-  activities,
+  activities
-  allUsers
 }) => {
   const { url } = useRouteMatch();
 
@@ -35,16 +32,16 @@ export const TabRouter: FC<IProps> = ({
         <Redirect from={url} to={`${url}/tickets`} />
 
         <Route path={`${url}/tickets`}>
-          <TicketList tickets={tickets} users={allUsers} />
+          <TicketList tickets={tickets} />
         </Route>
 
         <Route path={`${url}/files`}>
           <FileList files={files} />
         </Route>
 
-        <Route path={`${url}/activity`}>
+        {/* <Route path={`${url}/activity`}>
           <ActivityList activities={activities} />
-        </Route>
+        </Route> */}
       </div>
     </>
   );

client/src/components/TicketList.tsx

@@ -3,7 +3,6 @@ import { Ticket } from "../types/Ticket";
 import { FloatingButton } from "./FloatingButton";
 import { HorizontalCard } from "./HorizontalCard";
 import { FilterBar } from "./FilterBar";
-import { User } from "../types/User";
 import { HttpResponse } from "../types/HttpResponse";
 import { put } from "../utils/http";
 import { Constants } from "../utils/Constants";
@@ -11,15 +10,13 @@ import { NewTicketModal } from "./NewTicketModal";
 
 type TicketListProps = {
   tickets: Ticket[];
-  users: User[];
 };
 
-export const TicketList: FC<TicketListProps> = ({ tickets, users }) => {
+export const TicketList: FC<TicketListProps> = ({ tickets }) => {
   const [filterText, setFilterText] = useState<string>("");
   const clearFilterText: (e: MouseEvent) => void = (e: MouseEvent) => {
     setFilterText("");
   };
-  // const archiveTicket = () => {};
 
   const onClick: (e: MouseEvent) => void = (e: MouseEvent) => {
     e.preventDefault();
@@ -45,7 +42,6 @@ export const TicketList: FC<TicketListProps> = ({ tickets, users }) => {
             setShowNew(false);
           }}
           show={showNew}
-          allUsers={users}
         />
         <h3>Tickets</h3>
         <FloatingButton
@@ -59,7 +55,7 @@ export const TicketList: FC<TicketListProps> = ({ tickets, users }) => {
           clearFilterText={clearFilterText}
         />
       </div>
-      <div className="col s12 grey">
+      <div className="col s12 grey lighten-1">
         <ul>
           {filteredTickets.length === 0 ? (
             <HorizontalCard />
@@ -76,7 +72,6 @@ export const TicketList: FC<TicketListProps> = ({ tickets, users }) => {
                     {}
                   );
                 }}
-                // archiveTicket={archiveTicket}
               />
             ))
           )}

client/src/components/UsersModalEntry.tsx

@@ -12,7 +12,7 @@ export const UsersModalEntry: FC<IProps> = ({ user, setMembers, members }) => {
     return Boolean(members.find(m => m.id === id));
   };
   return (
-    <div className="row">
+    <div className="valign-wrapper">
       <label htmlFor={user.id}>
         <input
           id={user.id}
@@ -27,15 +27,16 @@ export const UsersModalEntry: FC<IProps> = ({ user, setMembers, members }) => {
         />
         <span>
           {user.fullName}
-          <img
+          {"  "}
-            className="circle"
-            src={user.picture}
-            width="32vh"
-            height="32vh"
-            alt={user.fullName}
-          />
         </span>
       </label>
+      <img
+        className="circle"
+        src={user.picture}
+        width="32vh"
+        height="32vh"
+        alt={user.fullName}
+      />
     </div>
   );
 };

client/src/pages/ProjectPage.tsx

@@ -26,7 +26,7 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
     activities
   } = viewModel;
 
-  const tabNames: string[] = ["Tickets", "Files", "Activity"];
+  const tabNames: string[] = ["Tickets", "Files"]; //, "Activity"];
   const [showModal, setShowModal] = useState<boolean>(false);
 
   return (
@@ -59,7 +59,6 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
           tickets={tickets}
           files={files}
           activities={activities}
-          allUsers={allUsers}
         />
       </div>
     </div>