From 97b45fcd2d76bcf40ac8f1ccf9316b9d8e964812 Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Thu, 27 Feb 2020 19:17:31 +0100
Subject: [PATCH 1/9] added validateTicket Method, UserModal updates
 memberslist

---
 README.md                                 |  1 +
 client/src/components/HorizontalCard.tsx  |  8 ++++----
 client/src/components/TabRouter.tsx       |  2 ++
 client/src/components/TicketList.tsx      | 23 +++++++++++++++++------
 client/src/components/UsersModal.tsx      |  9 ++++-----
 client/src/components/UsersModalEntry.tsx |  1 -
 6 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index 416e763..2ac4cd8 100644
--- a/README.md
+++ b/README.md
@@ -50,3 +50,4 @@
 - [ ] think about public/private DTO's constructor, getters and setters
 - [x] write dtos without circular dependencies
 - [ ] use dtoRequest for PutProjects
+- [ ] render avatarlist after UserModal Update
diff --git a/client/src/components/HorizontalCard.tsx b/client/src/components/HorizontalCard.tsx
index f9b7f2c..aea8283 100644
--- a/client/src/components/HorizontalCard.tsx
+++ b/client/src/components/HorizontalCard.tsx
@@ -6,13 +6,13 @@ interface IProps {
   title: string;
   remainingDays: string;
   validateTicket: (event: MouseEvent) => void;
-  archiveTicket: (event: MouseEvent) => void;
+  // archiveTicket: (event: MouseEvent) => void;
 }
 
 export const HorizontalCard: FC<IProps> = ({
   title,
   remainingDays,
-  archiveTicket,
+  // archiveTicket,
   validateTicket
 }) => {
   return (
@@ -34,11 +34,11 @@ export const HorizontalCard: FC<IProps> = ({
                   check
                 </i>
               </Link>
-              <Link to="#">
+              {/* <Link to="#">
                 <i className="material-icons" onClick={archiveTicket}>
                   archive
                 </i>
-              </Link>
+              </Link> */}
             </div>
           </div>
         </div>
diff --git a/client/src/components/TabRouter.tsx b/client/src/components/TabRouter.tsx
index 3b3915e..7bdd438 100644
--- a/client/src/components/TabRouter.tsx
+++ b/client/src/components/TabRouter.tsx
@@ -7,6 +7,7 @@ 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";
 
 interface IProps {
   tickets: Ticket[];
@@ -26,6 +27,7 @@ export const TabRouter: FC<IProps> = ({
   return (
     <>
       <div className="row">
+        <NewTicketModal handleClose={() => {}} show={true} />
         <TabRouterHeader tabNames={tabNames} />
 
         <Redirect from={url} to={`${url}/tickets`} />
diff --git a/client/src/components/TicketList.tsx b/client/src/components/TicketList.tsx
index d1be3c3..43ac75a 100644
--- a/client/src/components/TicketList.tsx
+++ b/client/src/components/TicketList.tsx
@@ -3,6 +3,9 @@ import { Ticket } from "../types/Ticket";
 import { FloatingButton } from "./FloatingButton";
 import { HorizontalCard } from "./HorizontalCard";
 import { FilterBar } from "./FilterBar";
+import { put } from "../utils/http";
+import { HttpResponse } from "../types/HttpResponse";
+import { Constants } from "../utils/Constants";
 
 type TicketListProps = {
   tickets: Ticket[];
@@ -13,8 +16,8 @@ export const TicketList: FC<TicketListProps> = ({ tickets }) => {
   const clearFilterText: (e: MouseEvent) => void = (e: MouseEvent) => {
     setFilterText("");
   };
-  const archiveTicket = () => {};
-  const validateTicket = () => {};
+  // const archiveTicket = () => {};
+
   const onClick: (e: MouseEvent) => void = (e: MouseEvent) => {
     e.preventDefault();
   };
@@ -42,16 +45,24 @@ export const TicketList: FC<TicketListProps> = ({ tickets }) => {
       <div className="col s12 grey">
         <ul>
           {tickets
-            .filter(t =>
-              t.title.toLowerCase().includes(filterText.toLowerCase())
+            .filter(
+              t =>
+                t.status !== "Done" &&
+                t.title.toLowerCase().includes(filterText.toLowerCase())
             )
             .map((t: Ticket) => (
               <li key={t.id}>
                 <HorizontalCard
                   title={t.title}
                   remainingDays={t.plannedEnding}
-                  validateTicket={validateTicket}
-                  archiveTicket={archiveTicket}
+                  validateTicket={async (e: MouseEvent) => {
+                    e.preventDefault();
+                    await put<HttpResponse<Ticket>>(
+                      `${Constants.ticketsURI}/${t.id}/closed`,
+                      {}
+                    );
+                  }}
+                  // archiveTicket={archiveTicket}
                 />
               </li>
             ))}
diff --git a/client/src/components/UsersModal.tsx b/client/src/components/UsersModal.tsx
index 99e8c53..ee13f25 100644
--- a/client/src/components/UsersModal.tsx
+++ b/client/src/components/UsersModal.tsx
@@ -37,15 +37,14 @@ export const UsersModal: FC<IProps> = ({
     e: FormEvent
   ) => {
     e.preventDefault();
-
-    const response: HttpResponse<User[]> = await patch<User[]>(
+    await patch<User[]>(
       `${Constants.projectsURI}/${id}/members`,
-      members
+      members.map(m => m.id)
     );
-    console.log(response);
+    handleClose();
   };
-  console.log(allUsers);
 
+  useEffect(() => {});
   return (
     <Modal show={show} handleClose={handleClose}>
       <div className="row valign-wrapper blue">
diff --git a/client/src/components/UsersModalEntry.tsx b/client/src/components/UsersModalEntry.tsx
index f571285..301439a 100644
--- a/client/src/components/UsersModalEntry.tsx
+++ b/client/src/components/UsersModalEntry.tsx
@@ -9,7 +9,6 @@ interface IProps {
 }
 
 export const UsersModalEntry: FC<IProps> = ({ user, setMembers, members }) => {
-  console.log(members);
   const match: (id: string) => boolean = (id: string) => {
     return Boolean(members.find(m => m.id === id));
   };

From 5c039ad31d968ebce62fbd222919f0cee139242b Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Thu, 27 Feb 2020 19:22:37 +0100
Subject: [PATCH 2/9] added newUserModal component

---
 client/src/components/NewTicketModal.tsx | 95 ++++++++++++++++++++++++
 client/src/components/TabRouter.tsx      |  2 +-
 client/src/components/TicketList.tsx     | 10 +++
 3 files changed, 106 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/NewTicketModal.tsx

diff --git a/client/src/components/NewTicketModal.tsx b/client/src/components/NewTicketModal.tsx
new file mode 100644
index 0000000..02965fb
--- /dev/null
+++ b/client/src/components/NewTicketModal.tsx
@@ -0,0 +1,95 @@
+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";
+
+interface IProps {
+  show: boolean;
+  handleClose: () => void;
+  // users: User[];
+  // allUsers: User[];
+}
+
+export const NewTicketModal: FC<IProps> = ({
+  show,
+  handleClose
+  // users,
+  // allUsers
+}) => {
+  const [filterText, setFilterText] = useState<string>("");
+  // const [members, setMembers] = useState<User[]>(users);
+  const { id } = useParams();
+
+  const handleChange: (e: ChangeEvent<HTMLInputElement>) => void = (
+    e: ChangeEvent<HTMLInputElement>
+  ) => {
+    setFilterText(e.target.value);
+  };
+
+  const handleSubmit: (event: FormEvent<HTMLFormElement>) => void = async (
+    e: FormEvent
+  ) => {
+    e.preventDefault();
+    await patch<User[]>(
+      `${Constants.projectsURI}/${id}/members`,
+      {}
+      // members.map(m => m.id)
+    );
+    handleClose();
+  };
+
+  useEffect(() => {});
+  return (
+    <Modal show={show} handleClose={handleClose}>
+      <div className="row valign-wrapper blue">
+        <div className="col s10">
+          <h4 className="white-text">New Ticket</h4>
+        </div>
+        <div className="col s2">
+          <i
+            className="right material-icons blue lighten-3 circle"
+            onClick={handleClose}
+          >
+            close
+          </i>
+        </div>
+      </div>
+      <div className="center">
+        {/* <AvatarList users={users} /> */}
+        {/* <FilterBar
+          filterText={filterText}
+          clearFilterText={() => setFilterText("")}
+          handleChange={handleChange}
+        /> */}
+      </div>
+
+      <form onSubmit={handleSubmit}>
+        {/* <ul>
+          {allUsers.map((u: User) => (
+            <li key={u.id}>
+              <UsersModalEntry
+                user={u}
+                members={members}
+                setMembers={setMembers}
+              />
+            </li>
+          ))}
+        </ul> */}
+        <div className="modal-footer">
+          <input
+            type="submit"
+            className="modal-close waves-effect waves-green btn"
+            value="Done"
+          />
+        </div>
+      </form>
+    </Modal>
+  );
+};
diff --git a/client/src/components/TabRouter.tsx b/client/src/components/TabRouter.tsx
index 7bdd438..d235831 100644
--- a/client/src/components/TabRouter.tsx
+++ b/client/src/components/TabRouter.tsx
@@ -24,10 +24,10 @@ export const TabRouter: FC<IProps> = ({
   activities
 }) => {
   const { url } = useRouteMatch();
+
   return (
     <>
       <div className="row">
-        <NewTicketModal handleClose={() => {}} show={true} />
         <TabRouterHeader tabNames={tabNames} />
 
         <Redirect from={url} to={`${url}/tickets`} />
diff --git a/client/src/components/TicketList.tsx b/client/src/components/TicketList.tsx
index 43ac75a..f75392b 100644
--- a/client/src/components/TicketList.tsx
+++ b/client/src/components/TicketList.tsx
@@ -6,6 +6,7 @@ import { FilterBar } from "./FilterBar";
 import { put } from "../utils/http";
 import { HttpResponse } from "../types/HttpResponse";
 import { Constants } from "../utils/Constants";
+import { NewTicketModal } from "./NewTicketModal";
 
 type TicketListProps = {
   tickets: Ticket[];
@@ -20,6 +21,7 @@ export const TicketList: FC<TicketListProps> = ({ tickets }) => {
 
   const onClick: (e: MouseEvent) => void = (e: MouseEvent) => {
     e.preventDefault();
+    setShowNew(true);
   };
   const handleChange: (e: ChangeEvent<HTMLInputElement>) => void = (
     e: ChangeEvent<HTMLInputElement>
@@ -27,9 +29,17 @@ export const TicketList: FC<TicketListProps> = ({ tickets }) => {
     setFilterText(e.target.value);
   };
 
+  const [showNew, setShowNew] = useState(false);
+
   return (
     <>
       <div className="row valign-wrapper">
+        <NewTicketModal
+          handleClose={() => {
+            setShowNew(false);
+          }}
+          show={showNew}
+        />
         <h3>Tickets</h3>
         <FloatingButton
           color=" blue-grey lighten-4"

From 50d2b8b86ad2d9c88945ca026daf7c2192812b74 Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Fri, 28 Feb 2020 12:59:58 +0100
Subject: [PATCH 3/9] -

---
 Startup.cs                               | 1 -
 client/src/components/NewTicketModal.tsx | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/Startup.cs b/Startup.cs
index 699c91a..a836e45 100644
--- a/Startup.cs
+++ b/Startup.cs
@@ -97,7 +97,6 @@ namespace TicketManager
             app.UseDefaultFiles();
 
             app.UseSwagger();
-
             app.UseSwaggerUI(c =>
             {
                 c.SwaggerEndpoint("/swagger/v1/swagger.json", "Ticket Manager API v1");
diff --git a/client/src/components/NewTicketModal.tsx b/client/src/components/NewTicketModal.tsx
index 02965fb..9b706b5 100644
--- a/client/src/components/NewTicketModal.tsx
+++ b/client/src/components/NewTicketModal.tsx
@@ -12,7 +12,7 @@ import _ from "underscore";
 
 interface IProps {
   show: boolean;
-  handleClose: () => void;
+  handleClose(): void;
   // users: User[];
   // allUsers: User[];
 }

From 86fd097481a1877abe36c052bc1a4aa238d094c8 Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Sat, 29 Feb 2020 14:07:26 +0100
Subject: [PATCH 4/9] Default placeholder for empty ticket and file lists. Pick
 a random color Indigo as main

---
 README.md                                    |  2 +-
 client/src/components/ActivityCollection.tsx | 63 +++++++++++++-------
 client/src/components/FileCollection.tsx     | 29 +++++----
 client/src/components/HorizontalCard.tsx     | 54 ++++++++++-------
 client/src/components/InputFile.tsx          |  2 +-
 client/src/components/ProgressBar.tsx        |  3 +-
 client/src/components/TabRouterHeader.tsx    | 10 +++-
 client/src/components/TicketList.tsx         | 49 +++++++--------
 client/src/pages/ProjectPage.tsx             |  2 +-
 client/src/utils/router.tsx                  |  2 +-
 10 files changed, 129 insertions(+), 87 deletions(-)

diff --git a/README.md b/README.md
index 2ac4cd8..74ce83e 100644
--- a/README.md
+++ b/README.md
@@ -46,7 +46,7 @@
 - [ ] logging
 - [ ] check useRef, useReducer, dispatch
 - [ ] error page redirect when offline.
-- [ ] ticket/files/activities list placeholders when empty
+- [x] ticket/files/activities list placeholders when empty
 - [ ] think about public/private DTO's constructor, getters and setters
 - [x] write dtos without circular dependencies
 - [ ] use dtoRequest for PutProjects
diff --git a/client/src/components/ActivityCollection.tsx b/client/src/components/ActivityCollection.tsx
index b37d8ac..f85ad8d 100644
--- a/client/src/components/ActivityCollection.tsx
+++ b/client/src/components/ActivityCollection.tsx
@@ -1,5 +1,6 @@
 import React, { FC } from "react";
 import { Activity } from "../types/Activity";
+import { act } from "react-dom/test-utils";
 
 type IProps = {
   activities: Activity[];
@@ -12,38 +13,58 @@ export const ActivityCollection: FC<IProps> = ({ activities, filterText }) => {
   ) : (
     <>
       <ul className="collection">
-        {activities
-          .filter(
-            a =>
-              a.description.toLowerCase().includes(filterText.toLowerCase()) ||
-              a.user.firstName
-                .toLowerCase()
-                .includes(filterText.toLowerCase()) ||
-              a.ticket.title.toLowerCase().includes(filterText.toLowerCase())
-          )
-          .map((activity: Activity) => (
-            <li key={activity.id} className="collection-item avatar">
-              <ActivityEntry activity={activity} />
-            </li>
-          ))}
+        {activities.length === 0 ? (
+          <ActivityEntry />
+        ) : (
+          activities
+            .filter(
+              a =>
+                a.description
+                  .toLowerCase()
+                  .includes(filterText.toLowerCase()) ||
+                a.user.firstName
+                  .toLowerCase()
+                  .includes(filterText.toLowerCase()) ||
+                a.ticket.title.toLowerCase().includes(filterText.toLowerCase())
+            )
+            .map((activity: Activity) => (
+              <ActivityEntry activity={activity} key={activity.id} />
+            ))
+        )}
       </ul>
     </>
   );
 };
 
 type IFProps = {
-  activity: Activity;
+  activity?: Activity;
 };
 
 export const ActivityEntry: FC<IFProps> = ({ activity }) => {
   return (
     <>
-      <img src={activity.user.picture} alt="" className="circle" />
-      {/* <i className="material-icons circle">folder</i> */}
-      <span className="title">
-        {activity.user.firstName} {activity.description} {activity.ticket.title}
-      </span>
-      <p>{activity.date.toDateString()}</p>
+      <li className="collection-item avatar">
+        {/* <img
+        src={
+          activity
+            ? activity.user.picture
+            : "https://previews.123rf.com/images/vikpit/vikpit1604/vikpit160400034/54976526-welcome-sign-symbol-word-welcome-hand-lettering-calligraphic-font-letters-and-shade-isolated-on-whit.jpg"
+        }
+        alt=""
+        height="32vh"
+        width="32vh"
+        className="circle"
+      /> */}
+        <i className="material-icons circle indigo lighten-1">folder</i>
+        <span className="title">
+          {activity ? activity.user.firstName : "Ruidy"}
+          {activity ? activity.description : " welcomes you "}
+          {activity ? activity.ticket.title : "here"}
+        </span>
+        <p>
+          {activity ? activity.date.toDateString() : new Date().toDateString()}
+        </p>
+      </li>
     </>
   );
 };
diff --git a/client/src/components/FileCollection.tsx b/client/src/components/FileCollection.tsx
index 114ae98..c709da9 100644
--- a/client/src/components/FileCollection.tsx
+++ b/client/src/components/FileCollection.tsx
@@ -7,35 +7,38 @@ type IProps = {
 };
 
 export const FileCollection: FC<IProps> = ({ files, filterText }) => {
+  console.log();
   return (
     <>
       <ul className="collection">
-        {files
-          .filter(
-            f =>
-              f.name.toLowerCase().includes(filterText.toLowerCase()) ||
-              f.format.toLowerCase().includes(filterText.toLowerCase())
-          )
-          .map((file: AppFile) => (
-            <FileEntry file={file} key={file.id} />
-          ))}
+        {files.length === 0 ? (
+          <FileEntry />
+        ) : (
+          files
+            .filter(
+              f =>
+                f.name.toLowerCase().includes(filterText.toLowerCase()) ||
+                f.format.toLowerCase().includes(filterText.toLowerCase())
+            )
+            .map((file: AppFile) => <FileEntry file={file} key={file.id} />)
+        )}
       </ul>
     </>
   );
 };
 
 type IFProps = {
-  file: AppFile;
+  file?: AppFile;
 };
 
 export const FileEntry: FC<IFProps> = ({ file }) => {
   return (
     <li className="collection-item avatar">
       {/* <img src={require("../images/user_1.jpg")} alt="" className="circle" /> */}
-      <i className="material-icons circle">folder</i>
-      <span className="title">{file.name}</span>
+      <i className="material-icons circle indigo lighten-1">folder</i>
+      <span className="title">{file ? file.name : "Add your first file"}</span>
       <p>
-        {file.size}kb {file.format}
+        {file ? file.size : 0}kb {file ? file.format : "pdf"}
       </p>
       <a href="#!" className="secondary-content">
         <i className="material-icons">more_vert</i>
diff --git a/client/src/components/HorizontalCard.tsx b/client/src/components/HorizontalCard.tsx
index aea8283..815804c 100644
--- a/client/src/components/HorizontalCard.tsx
+++ b/client/src/components/HorizontalCard.tsx
@@ -3,9 +3,9 @@ import { Link } from "react-router-dom";
 import { getRemainingdays } from "../utils/methods";
 
 interface IProps {
-  title: string;
-  remainingDays: string;
-  validateTicket: (event: MouseEvent) => void;
+  title?: string;
+  remainingDays?: string;
+  validateTicket?: (event: MouseEvent) => void;
   // archiveTicket: (event: MouseEvent) => void;
 }
 
@@ -16,33 +16,45 @@ export const HorizontalCard: FC<IProps> = ({
   validateTicket
 }) => {
   return (
-    <div className="card horizontal">
-      <div className="card-stacked">
-        <div className="card-content">
-          <div className="row">
-            <div className="card-title">
-              <h6>
+    <li>
+      <div className="card horizontal">
+        <div className="card-stacked">
+          <div className="card-content">
+            <div className="row">
+              <div className="card-title">
+                <h6>
+                  <Link to="#">
+                    <b>{title ?? "Nothing to do"}</b>
+                  </Link>
+                </h6>
+              </div>
+              <span>
+                Due{" "}
+                {remainingDays ? (
+                  getRemainingdays(remainingDays)
+                ) : (
+                  <span>
+                    <del>Too much</del> 0
+                  </span>
+                )}{" "}
+                days
+              </span>
+              <div className="right">
                 <Link to="#">
-                  <b>{title}</b>
+                  <i className="material-icons" onClick={validateTicket}>
+                    check
+                  </i>
                 </Link>
-              </h6>
-            </div>
-            <span>Due {getRemainingdays(remainingDays)} days</span>
-            <div className="right">
-              <Link to="#">
-                <i className="material-icons" onClick={validateTicket}>
-                  check
-                </i>
-              </Link>
-              {/* <Link to="#">
+                {/* <Link to="#">
                 <i className="material-icons" onClick={archiveTicket}>
                   archive
                 </i>
               </Link> */}
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    </li>
   );
 };
diff --git a/client/src/components/InputFile.tsx b/client/src/components/InputFile.tsx
index aa528e9..1f8c63f 100644
--- a/client/src/components/InputFile.tsx
+++ b/client/src/components/InputFile.tsx
@@ -7,7 +7,7 @@ export const InputFile: FC<IProps> = () => {
     <>
       <form action="/upload">
         <div className="file-field input-field">
-          <div className="btn">
+          <div className="btn indigo lighten-1">
             <i className="material-icons ">cloud_upload</i>
             <input
               type="file"
diff --git a/client/src/components/ProgressBar.tsx b/client/src/components/ProgressBar.tsx
index 1095cc9..e6444f5 100644
--- a/client/src/components/ProgressBar.tsx
+++ b/client/src/components/ProgressBar.tsx
@@ -16,11 +16,12 @@ export const ProgressBar: FC<ProgressBarProps> = ({
   remainingDays
 }) => {
   const styleString: CSSProperties = { width: `${value}%` };
+  const barColor: string = value < 75 ? "red" : "";
   return (
     <>
       <div className="row">
         <div className="progress">
-          <div className="determinate" style={styleString}></div>
+          <div className={`determinate ${barColor}`} style={styleString}></div>
         </div>
         <div>
           <i className="left material-icons">playlist_add_check</i>
diff --git a/client/src/components/TabRouterHeader.tsx b/client/src/components/TabRouterHeader.tsx
index 5a95261..9a9f389 100644
--- a/client/src/components/TabRouterHeader.tsx
+++ b/client/src/components/TabRouterHeader.tsx
@@ -14,7 +14,7 @@ export const TabRouterHeader: FC<IProps> = ({
   const nTabs = tabNames.length;
   return (
     <>
-      <ul className="tabs z-depth-1">
+      <ul className="tabs">
         {tabNames.map((name, i) => (
           <TabUnit
             key={i}
@@ -27,7 +27,7 @@ export const TabRouterHeader: FC<IProps> = ({
           />
         ))}
         <li
-          className="indicator"
+          className="indicator indigo lighten-2"
           style={{
             left: `${(isActive / nTabs) * 100}%`,
             right: `${(1 - (isActive + 1) / nTabs) * 100}%`
@@ -68,7 +68,11 @@ const TabUnit: FC<TabUnitProps> = ({
       <Link
         to={`${url}/${text}`}
         id={value}
-        className={isActive === parseInt(value) ? "active pink lighten-5" : ""}
+        className={
+          isActive === parseInt(value)
+            ? "active indigo lighten-5 indigo-text"
+            : "indigo-text"
+        }
         onClick={() => setIsActive(parseInt(value))}
       >
         {text}
diff --git a/client/src/components/TicketList.tsx b/client/src/components/TicketList.tsx
index f75392b..4b551e7 100644
--- a/client/src/components/TicketList.tsx
+++ b/client/src/components/TicketList.tsx
@@ -30,7 +30,11 @@ export const TicketList: FC<TicketListProps> = ({ tickets }) => {
   };
 
   const [showNew, setShowNew] = useState(false);
-
+  let filteredTickets = tickets.filter(
+    t =>
+      t.status !== "Done" &&
+      t.title.toLowerCase().includes(filterText.toLowerCase())
+  );
   return (
     <>
       <div className="row valign-wrapper">
@@ -42,7 +46,7 @@ export const TicketList: FC<TicketListProps> = ({ tickets }) => {
         />
         <h3>Tickets</h3>
         <FloatingButton
-          color=" blue-grey lighten-4"
+          color="indigo lighten-1"
           size="small"
           onClick={onClick}
         />
@@ -54,28 +58,25 @@ export const TicketList: FC<TicketListProps> = ({ tickets }) => {
       </div>
       <div className="col s12 grey">
         <ul>
-          {tickets
-            .filter(
-              t =>
-                t.status !== "Done" &&
-                t.title.toLowerCase().includes(filterText.toLowerCase())
-            )
-            .map((t: Ticket) => (
-              <li key={t.id}>
-                <HorizontalCard
-                  title={t.title}
-                  remainingDays={t.plannedEnding}
-                  validateTicket={async (e: MouseEvent) => {
-                    e.preventDefault();
-                    await put<HttpResponse<Ticket>>(
-                      `${Constants.ticketsURI}/${t.id}/closed`,
-                      {}
-                    );
-                  }}
-                  // archiveTicket={archiveTicket}
-                />
-              </li>
-            ))}
+          {filteredTickets.length === 0 ? (
+            <HorizontalCard />
+          ) : (
+            filteredTickets.map((t: Ticket) => (
+              <HorizontalCard
+                key={t.id}
+                title={t.title}
+                remainingDays={t.plannedEnding}
+                validateTicket={async (e: MouseEvent) => {
+                  e.preventDefault();
+                  await put<HttpResponse<Ticket>>(
+                    `${Constants.ticketsURI}/${t.id}/closed`,
+                    {}
+                  );
+                }}
+                // archiveTicket={archiveTicket}
+              />
+            ))
+          )}
         </ul>
       </div>
     </>
diff --git a/client/src/pages/ProjectPage.tsx b/client/src/pages/ProjectPage.tsx
index f7680d8..c0700c0 100644
--- a/client/src/pages/ProjectPage.tsx
+++ b/client/src/pages/ProjectPage.tsx
@@ -37,7 +37,7 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
           <AvatarList users={users} />
           <FloatingButton
             icon="add"
-            color="grey"
+            color="indigo lighten-1"
             size="small"
             onClick={() => setShowModal(true)}
           />
diff --git a/client/src/utils/router.tsx b/client/src/utils/router.tsx
index 2d37f3e..c99ab2b 100644
--- a/client/src/utils/router.tsx
+++ b/client/src/utils/router.tsx
@@ -20,7 +20,7 @@ export const history = creacteHistory.createBrowserHistory();
 export const AppRouter = () => {
   return (
     <Router history={history}>
-      <div className="grey lighten-4">
+      <div className="grey lighten-3">
         <Switch>
           <Route exact path="/">
             <TestPage />

From 9e89955b1cb1c9a32218303b0fd98de570c8b746 Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Sun, 1 Mar 2020 14:05:16 +0100
Subject: [PATCH 5/9] Added UserTabRouter, UserHeader,ProjectList,Avatar
 components. UserPage Layout done. UserVM updated. Added User/:id route to
 Router

---
 client/src/VM/ProjectVM.ts                   |  4 +-
 client/src/VM/UserVM.ts                      | 20 ++++-
 client/src/components/ActivityCollection.tsx |  1 -
 client/src/components/Avatar.tsx             | 12 +++
 client/src/components/ProjectList.tsx        | 85 ++++++++++++++++++++
 client/src/components/TicketList.tsx         |  2 +-
 client/src/components/UserHeader.tsx         | 21 +++++
 client/src/components/UserTabRouter.tsx      | 38 +++++++++
 client/src/components/UsersModal.tsx         |  4 +-
 client/src/components/UsersModalEntry.tsx    |  1 -
 client/src/controllers/UserController.tsx    | 60 +++++++++++++-
 client/src/pages/UserPage.tsx                | 30 +++++--
 client/src/types/Ticket.ts                   |  2 +-
 client/src/types/User.ts                     |  2 +-
 client/src/utils/router.tsx                  | 12 +--
 15 files changed, 266 insertions(+), 28 deletions(-)
 create mode 100644 client/src/components/Avatar.tsx
 create mode 100644 client/src/components/ProjectList.tsx
 create mode 100644 client/src/components/UserHeader.tsx
 create mode 100644 client/src/components/UserTabRouter.tsx

diff --git a/client/src/VM/ProjectVM.ts b/client/src/VM/ProjectVM.ts
index 2a974ce..87faecc 100644
--- a/client/src/VM/ProjectVM.ts
+++ b/client/src/VM/ProjectVM.ts
@@ -6,7 +6,7 @@ import { User } from "../types/User";
 import { getRemainingdays } from "../utils/methods";
 
 export default class ProjectVM {
-  public id: number;
+  // public id: number;
   public title: string;
   public description: string;
   public creationDate: string;
@@ -24,7 +24,7 @@ export default class ProjectVM {
   public remainingDays: number;
 
   public constructor(project: Project, allUsers: User[]) {
-    this.id = project.id;
+    // this.id = project.id;
     this.title = project.title;
     this.description = project.description;
     this.creationDate = project.creationDate;
diff --git a/client/src/VM/UserVM.ts b/client/src/VM/UserVM.ts
index 821ee4f..175da9a 100644
--- a/client/src/VM/UserVM.ts
+++ b/client/src/VM/UserVM.ts
@@ -1,5 +1,19 @@
-export class UserVM {
-  public Id?: number;
+import { Project } from "../types/Project";
+import { Ticket } from "../types/Ticket";
+import { User } from "../types/User";
 
-  public constructor() {}
+export class UserVM {
+  public fullName: string;
+  public presentation: string;
+  public picture: string;
+  public projects: Project[];
+  public tickets: Ticket[];
+
+  public constructor(user: User) {
+    this.fullName = user.fullName;
+    this.presentation = user.presentation;
+    this.picture = user.picture;
+    this.projects = user.projects;
+    this.tickets = user.tickets;
+  }
 }
diff --git a/client/src/components/ActivityCollection.tsx b/client/src/components/ActivityCollection.tsx
index f85ad8d..c347cc2 100644
--- a/client/src/components/ActivityCollection.tsx
+++ b/client/src/components/ActivityCollection.tsx
@@ -1,6 +1,5 @@
 import React, { FC } from "react";
 import { Activity } from "../types/Activity";
-import { act } from "react-dom/test-utils";
 
 type IProps = {
   activities: Activity[];
diff --git a/client/src/components/Avatar.tsx b/client/src/components/Avatar.tsx
new file mode 100644
index 0000000..37c45c4
--- /dev/null
+++ b/client/src/components/Avatar.tsx
@@ -0,0 +1,12 @@
+import React, { FC } from "react";
+
+interface IProps {
+  picture: string;
+}
+export const Avatar: FC<IProps> = ({ picture }) => {
+  return (
+    <>
+      <img className="circle" src={picture} height="100vh" width="100vh" />
+    </>
+  );
+};
diff --git a/client/src/components/ProjectList.tsx b/client/src/components/ProjectList.tsx
new file mode 100644
index 0000000..03d45eb
--- /dev/null
+++ b/client/src/components/ProjectList.tsx
@@ -0,0 +1,85 @@
+import React, { FC, useState, ChangeEvent, MouseEvent } from "react";
+import { Ticket } from "../types/Ticket";
+import { FloatingButton } from "./FloatingButton";
+import { HorizontalCard } from "./HorizontalCard";
+import { FilterBar } from "./FilterBar";
+import { put } from "../utils/http";
+import { HttpResponse } from "../types/HttpResponse";
+import { Constants } from "../utils/Constants";
+import { NewTicketModal } from "./NewTicketModal";
+import { Project } from "../types/Project";
+
+type IProps = {
+  projects: Project[];
+};
+
+export const ProjectList: FC<IProps> = ({ projects }) => {
+  const [filterText, setFilterText] = useState<string>("");
+  const clearFilterText: (e: MouseEvent) => void = (e: MouseEvent) => {
+    setFilterText("");
+  };
+  // const archiveTicket = () => {};
+
+  const onClick: (e: MouseEvent) => void = (e: MouseEvent) => {
+    e.preventDefault();
+    setShowNew(true);
+  };
+  const handleChange: (e: ChangeEvent<HTMLInputElement>) => void = (
+    e: ChangeEvent<HTMLInputElement>
+  ) => {
+    setFilterText(e.target.value);
+  };
+
+  const [showNew, setShowNew] = useState(false);
+  let filteredTickets = projects.filter(
+    t =>
+      t.status !== "Done" &&
+      t.title.toLowerCase().includes(filterText.toLowerCase())
+  );
+  return (
+    <>
+      <div className="row valign-wrapper">
+        <NewTicketModal
+          handleClose={() => {
+            setShowNew(false);
+          }}
+          show={showNew}
+        />
+        <h3>Projects</h3>
+        <FloatingButton
+          color="indigo lighten-1"
+          size="small"
+          onClick={onClick}
+        />
+        <FilterBar
+          filterText={filterText}
+          handleChange={handleChange}
+          clearFilterText={clearFilterText}
+        />
+      </div>
+      <div className="col s12 grey">
+        <ul>
+          {filteredTickets.length === 0 ? (
+            <HorizontalCard />
+          ) : (
+            filteredTickets.map((t: Ticket) => (
+              <HorizontalCard
+                key={t.id}
+                title={t.title}
+                remainingDays={t.endingDate}
+                validateTicket={async (e: MouseEvent) => {
+                  e.preventDefault();
+                  await put<HttpResponse<Ticket>>(
+                    `${Constants.ticketsURI}/${t.id}/closed`,
+                    {}
+                  );
+                }}
+                // archiveTicket={archiveTicket}
+              />
+            ))
+          )}
+        </ul>
+      </div>
+    </>
+  );
+};
diff --git a/client/src/components/TicketList.tsx b/client/src/components/TicketList.tsx
index 4b551e7..cbedf39 100644
--- a/client/src/components/TicketList.tsx
+++ b/client/src/components/TicketList.tsx
@@ -65,7 +65,7 @@ export const TicketList: FC<TicketListProps> = ({ tickets }) => {
               <HorizontalCard
                 key={t.id}
                 title={t.title}
-                remainingDays={t.plannedEnding}
+                remainingDays={t.endingDate}
                 validateTicket={async (e: MouseEvent) => {
                   e.preventDefault();
                   await put<HttpResponse<Ticket>>(
diff --git a/client/src/components/UserHeader.tsx b/client/src/components/UserHeader.tsx
new file mode 100644
index 0000000..3242e63
--- /dev/null
+++ b/client/src/components/UserHeader.tsx
@@ -0,0 +1,21 @@
+import React, { FC } from "react";
+import { Header } from "../components/Header";
+import { Avatar } from "../components/Avatar";
+
+interface IProps {
+  fullName: string;
+  presentation: string;
+  picture: string;
+}
+export const UserHeader: FC<IProps> = ({ fullName, presentation, picture }) => {
+  return (
+    <div className="row valign-wrapper">
+      <div className="col s2">
+        <Avatar picture={picture} />
+      </div>
+      <div className="col s10">
+        <Header title={fullName} description={presentation} />
+      </div>
+    </div>
+  );
+};
diff --git a/client/src/components/UserTabRouter.tsx b/client/src/components/UserTabRouter.tsx
new file mode 100644
index 0000000..5646630
--- /dev/null
+++ b/client/src/components/UserTabRouter.tsx
@@ -0,0 +1,38 @@
+import React, { FC } from "react";
+import { TabRouterHeader } from "./TabRouterHeader";
+import { TicketList } from "./TicketList";
+
+import { Ticket } from "../types/Ticket";
+
+import { Route, useRouteMatch, Redirect } from "react-router-dom";
+
+import { Project } from "../types/Project";
+import { ProjectList } from "./ProjectList";
+
+interface IProps {
+  tabNames: string[];
+  tickets: Ticket[];
+  projects: Project[];
+}
+
+export const UserTabRouter: FC<IProps> = ({ tickets, tabNames, projects }) => {
+  const { url } = useRouteMatch();
+
+  return (
+    <>
+      <div className="row">
+        <TabRouterHeader tabNames={tabNames} />
+
+        <Redirect from={url} to={`${url}/projects`} />
+
+        <Route path={`${url}/projects`}>
+          <ProjectList projects={projects} />
+        </Route>
+
+        <Route path={`${url}/tickets`}>
+          <TicketList tickets={tickets} />
+        </Route>
+      </div>
+    </>
+  );
+};
diff --git a/client/src/components/UsersModal.tsx b/client/src/components/UsersModal.tsx
index ee13f25..d5d4878 100644
--- a/client/src/components/UsersModal.tsx
+++ b/client/src/components/UsersModal.tsx
@@ -3,12 +3,10 @@ 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 { patch } from "../utils/http";
 import { Constants } from "../utils/Constants";
 import { UsersModalEntry } from "./UsersModalEntry";
 import { useParams } from "react-router-dom";
-import _ from "underscore";
 
 interface IProps {
   show: boolean;
diff --git a/client/src/components/UsersModalEntry.tsx b/client/src/components/UsersModalEntry.tsx
index 301439a..e35501f 100644
--- a/client/src/components/UsersModalEntry.tsx
+++ b/client/src/components/UsersModalEntry.tsx
@@ -1,6 +1,5 @@
 import React, { FC } from "react";
 import { User } from "../types/User";
-import _ from "underscore";
 
 interface IProps {
   setMembers: React.Dispatch<React.SetStateAction<User[]>>;
diff --git a/client/src/controllers/UserController.tsx b/client/src/controllers/UserController.tsx
index a023b5e..c25ed62 100644
--- a/client/src/controllers/UserController.tsx
+++ b/client/src/controllers/UserController.tsx
@@ -1,6 +1,62 @@
-import React, { FC } from "react";
+import React, { FC, useState, useEffect } from "react";
 import { UserPage } from "../pages/UserPage";
+import { UserVM } from "../VM/UserVM";
+import { User } from "../types/User";
+import { AppFile } from "../types/AppFile";
+import { Activity } from "../types/Activity";
+import { Ticket } from "../types/Ticket";
+import { Preloader } from "../components/Preloader";
 
 export const UserController: FC = () => {
-  return <UserPage />;
+  const [isLoading, setIsLoading] = useState(true);
+
+  const user: User = {
+    id: "resldsm,dgd",
+    firstName: "David",
+    lastName: "Whittaker",
+    fullName: "David Whittaker",
+    presentation: "Interface designer and front-end developer",
+    creationDate: new Date().toDateString(),
+    email: "dw@mail.au",
+    phone: "0998765432",
+    picture: require("../images/user_1.jpg"),
+    projects: [
+      {
+        id: 1,
+        title: "Project Title",
+        description: "What is it about",
+        progression: 25,
+        creationDate: new Date().toDateString(),
+        endingDate: "2020-02-17 15:51:02.787373",
+        status: "Todo",
+        manager: {} as User,
+        users: [] as User[],
+        tickets: [] as Ticket[],
+        files: [] as AppFile[],
+        activities: [] as Activity[]
+      }
+    ],
+    tickets: [
+      {
+        id: 1,
+        title: "Client objective meeting",
+        description: "Client objective meeting",
+        endingDate: "2020-02-17 15:51:02.787373",
+        status: "Done"
+      },
+      {
+        id: 2,
+        title: "Assemble Outcomes Report for client",
+        description: "Assemble Outcomes Report for client",
+        endingDate: "2020-02-27 15:51:02.787373",
+        status: "To Do"
+      }
+    ],
+    activities: []
+  };
+  useEffect(() => {
+    setTimeout(() => setIsLoading(false), 1000);
+  });
+  const viewModel = new UserVM(user);
+  return isLoading ? <Preloader /> : <UserPage viewModel={viewModel} />;
 };
diff --git a/client/src/pages/UserPage.tsx b/client/src/pages/UserPage.tsx
index a2a1ad0..6641aad 100644
--- a/client/src/pages/UserPage.tsx
+++ b/client/src/pages/UserPage.tsx
@@ -1,12 +1,32 @@
 import React, { FC } from "react";
-import { Header } from "../components/Header";
+import { UserVM } from "../VM/UserVM";
+import { UserHeader } from "../components/UserHeader";
+import { UserTabRouter } from "../components/UserTabRouter";
 
-export const UserPage: FC = () => {
+interface IProps {
+  viewModel: UserVM;
+}
+export const UserPage: FC<IProps> = ({ viewModel }) => {
+  const { fullName, presentation, picture, projects, tickets } = viewModel;
+  const tabNames: string[] = ["Projects", "Tickets"];
   return (
-    <Header title = "Brand Concept and Design" description = "Research, ideate and present brand concepts for client consideration"/>
-    // <TabView>
+    <div className="section">
+      <div className="container">
+        <UserHeader
+          picture={picture}
+          fullName={fullName}
+          presentation={presentation}
+        />
+        <UserTabRouter
+          tabNames={tabNames}
+          projects={projects}
+          tickets={tickets}
+        />
+      </div>
+      {/* // <TabView>
     //     <CardList>
     //     <CardList>
-    // </TabView>
+    // </TabView> */}
+    </div>
   );
 };
diff --git a/client/src/types/Ticket.ts b/client/src/types/Ticket.ts
index 7d675b1..8ec3a71 100644
--- a/client/src/types/Ticket.ts
+++ b/client/src/types/Ticket.ts
@@ -3,5 +3,5 @@ export interface Ticket {
   title: string;
   description: string;
   status: string;
-  plannedEnding: string;
+  endingDate: string;
 }
diff --git a/client/src/types/User.ts b/client/src/types/User.ts
index 94b6732..7cdfb58 100644
--- a/client/src/types/User.ts
+++ b/client/src/types/User.ts
@@ -10,7 +10,7 @@ export interface User {
   presentation: string;
   email: string;
   phone: string;
-  createdAt: string;
+  creationDate: string;
   picture: string;
   activities: Activity[];
   projects: Project[];
diff --git a/client/src/utils/router.tsx b/client/src/utils/router.tsx
index c99ab2b..6b88795 100644
--- a/client/src/utils/router.tsx
+++ b/client/src/utils/router.tsx
@@ -12,7 +12,7 @@ import * as creacteHistory from "history";
 import { ProjectController } from "../controllers/ProjectController";
 import { NotFoundPage } from "../pages/NotFoundPage";
 import { TestPage } from "../pages/TestPage";
-// import { UserController } from "../controllers/UserController";
+import { UserController } from "../controllers/UserController";
 // import { TicketController } from "../controllers/TicketController";
 
 export const history = creacteHistory.createBrowserHistory();
@@ -28,24 +28,20 @@ export const AppRouter = () => {
 
           {/* <Route path="/">
             <HomeController />
-          </Route>
+          </Route> */}
           <Route path="/users/:id">
             <UserController />
-          </Route> */}
+          </Route>
           <Route path="/projects/:id">
             <ProjectController />
           </Route>
           {/* <Route path="/tickets/:id">
             <TicketController />
-          </Route> */}
+          </Route>  */}
 
           <Route path="/404">
             <NotFoundPage />
           </Route>
-
-          {/* <Route path="*">
-              <Redirect to="/error" />
-            </Route> */}
         </Switch>
       </div>
     </Router>

From d11ed699a0cce54b167c0399be79cf0fad5a9334 Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Sun, 1 Mar 2020 17:59:01 +0100
Subject: [PATCH 6/9] FInished NewTicketForm layout

---
 client/src/components/MemberList.tsx         | 50 ++++++++++++++++++++
 client/src/components/NewTicketForm.tsx      | 43 +++++++++++++++++
 client/src/components/NewTicketModal.tsx     | 29 ++++++------
 client/src/components/NewTicketTabRouter.tsx | 34 +++++++++++++
 client/src/components/ProjectList.tsx        |  8 ++--
 client/src/components/TabRouter.tsx          |  7 ++-
 client/src/components/TabRouterHeader.tsx    |  5 +-
 client/src/components/TicketList.tsx         |  9 ++--
 client/src/components/UserTabRouter.tsx      | 13 ++---
 client/src/components/UsersModal.tsx         |  8 ++--
 client/src/pages/ProjectPage.tsx             |  3 +-
 11 files changed, 170 insertions(+), 39 deletions(-)
 create mode 100644 client/src/components/MemberList.tsx
 create mode 100644 client/src/components/NewTicketForm.tsx
 create mode 100644 client/src/components/NewTicketTabRouter.tsx

diff --git a/client/src/components/MemberList.tsx b/client/src/components/MemberList.tsx
new file mode 100644
index 0000000..3c4c04a
--- /dev/null
+++ b/client/src/components/MemberList.tsx
@@ -0,0 +1,50 @@
+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";
+
+interface IProps {
+  users: User[];
+}
+
+export const MemberList: FC<IProps> = ({ users }) => {
+  const [members, setMembers] = useState<User[]>([]);
+  const [filterText, setFilterText] = useState<string>("");
+  const clearFilterText: (e: MouseEvent) => void = (e: MouseEvent) => {
+    setFilterText("");
+  };
+  const handleChange: (e: ChangeEvent<HTMLInputElement>) => void = (
+    e: ChangeEvent<HTMLInputElement>
+  ) => {
+    setFilterText(e.target.value);
+  };
+  return (
+    <>
+      <FilterBar
+        filterText={filterText}
+        clearFilterText={clearFilterText}
+        handleChange={handleChange}
+      />
+      <ul>
+        {users.map((u: User) => (
+          <li key={u.id}>
+            <UsersModalEntry
+              user={u}
+              members={members}
+              setMembers={setMembers}
+            />
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+};
diff --git a/client/src/components/NewTicketForm.tsx b/client/src/components/NewTicketForm.tsx
new file mode 100644
index 0000000..34e9918
--- /dev/null
+++ b/client/src/components/NewTicketForm.tsx
@@ -0,0 +1,43 @@
+import React, { FC } from "react";
+
+interface IProps {}
+
+export const NewTicketForm: FC<IProps> = () => {
+  return (
+    <>
+      <div className="row">
+        <div className="input-field">
+          <i className="material-icons prefix">note_add</i>
+          <input id="title" type="text" className="validate" />
+          <label htmlFor="title">Title</label>
+        </div>
+
+        <div className="input-field">
+          <i className="material-icons prefix">mode_edit</i>
+          <textarea
+            id="description"
+            className="materialize-textarea validate"
+          ></textarea>
+          <label htmlFor="description">Description</label>
+        </div>
+
+        <div className="input-field">
+          <i className="material-icons prefix">date_range</i>
+          <input id="Due Date" type="text" className="datepicker" />
+          <label htmlFor="Due Date">Due Date</label>
+        </div>
+
+        <div className="input-field">
+          <select id="project" className="browser-default">
+            <option value="" disabled selected>
+              Project
+            </option>
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+            <option value="3">Option 3</option>
+          </select>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/client/src/components/NewTicketModal.tsx b/client/src/components/NewTicketModal.tsx
index 9b706b5..dd876bf 100644
--- a/client/src/components/NewTicketModal.tsx
+++ b/client/src/components/NewTicketModal.tsx
@@ -9,19 +9,20 @@ import { Constants } from "../utils/Constants";
 import { UsersModalEntry } from "./UsersModalEntry";
 import { useParams } from "react-router-dom";
 import _ from "underscore";
+import { NewTicketTabRouter } from "./NewTicketTabRouter";
 
 interface IProps {
   show: boolean;
   handleClose(): void;
   // users: User[];
-  // allUsers: User[];
+  allUsers: User[];
 }
 
 export const NewTicketModal: FC<IProps> = ({
   show,
-  handleClose
+  handleClose,
   // users,
-  // allUsers
+  allUsers
 }) => {
   const [filterText, setFilterText] = useState<string>("");
   // const [members, setMembers] = useState<User[]>(users);
@@ -48,26 +49,24 @@ export const NewTicketModal: FC<IProps> = ({
   useEffect(() => {});
   return (
     <Modal show={show} handleClose={handleClose}>
-      <div className="row valign-wrapper blue">
+      <div className="row valign-wrapper indigo">
         <div className="col s10">
           <h4 className="white-text">New Ticket</h4>
         </div>
         <div className="col s2">
           <i
-            className="right material-icons blue lighten-3 circle"
+            className="right material-icons indigo lighten-3 circle"
             onClick={handleClose}
           >
             close
           </i>
         </div>
       </div>
-      <div className="center">
-        {/* <AvatarList users={users} /> */}
-        {/* <FilterBar
-          filterText={filterText}
-          clearFilterText={() => setFilterText("")}
-          handleChange={handleChange}
-        /> */}
+      <div className="row">
+        <NewTicketTabRouter
+          tabNames={["Details", "Members"]}
+          users={allUsers}
+        />
       </div>
 
       <form onSubmit={handleSubmit}>
@@ -82,11 +81,11 @@ export const NewTicketModal: FC<IProps> = ({
             </li>
           ))}
         </ul> */}
-        <div className="modal-footer">
+        <div className="modal-footer grey lighten-3">
           <input
             type="submit"
-            className="modal-close waves-effect waves-green btn"
-            value="Done"
+            className="modal-close waves-effect waves-green btn indigo"
+            value="Create Task"
           />
         </div>
       </form>
diff --git a/client/src/components/NewTicketTabRouter.tsx b/client/src/components/NewTicketTabRouter.tsx
new file mode 100644
index 0000000..2e8660d
--- /dev/null
+++ b/client/src/components/NewTicketTabRouter.tsx
@@ -0,0 +1,34 @@
+import React, { FC } from "react";
+import { Route, useRouteMatch, Redirect } from "react-router-dom";
+import { TabRouterHeader } from "./TabRouterHeader";
+import { NewTicketForm } from "./NewTicketForm";
+import { MemberList } from "./MemberList";
+import { User } from "../types/User";
+
+interface IProps {
+  tabNames: string[];
+  users: User[];
+}
+
+export const NewTicketTabRouter: FC<IProps> = ({ tabNames, users }) => {
+  const { url } = useRouteMatch();
+  return (
+    <>
+      <div className="row">
+        <TabRouterHeader tabNames={tabNames} />
+
+        <Redirect from={url} to={`${url}/details`} />
+
+        <form onSubmit={() => {}}>
+          <Route path={`${url}/details`}>
+            <NewTicketForm />
+          </Route>
+
+          <Route path={`${url}/members`}>
+            <MemberList users={users} />
+          </Route>
+        </form>
+      </div>
+    </>
+  );
+};
diff --git a/client/src/components/ProjectList.tsx b/client/src/components/ProjectList.tsx
index 03d45eb..da701a4 100644
--- a/client/src/components/ProjectList.tsx
+++ b/client/src/components/ProjectList.tsx
@@ -4,9 +4,8 @@ import { FloatingButton } from "./FloatingButton";
 import { HorizontalCard } from "./HorizontalCard";
 import { FilterBar } from "./FilterBar";
 import { put } from "../utils/http";
-import { HttpResponse } from "../types/HttpResponse";
 import { Constants } from "../utils/Constants";
-import { NewTicketModal } from "./NewTicketModal";
+import { HttpResponse } from "../types/HttpResponse";
 import { Project } from "../types/Project";
 
 type IProps = {
@@ -39,12 +38,13 @@ export const ProjectList: FC<IProps> = ({ projects }) => {
   return (
     <>
       <div className="row valign-wrapper">
-        <NewTicketModal
+        {/* <NewTicketModal
           handleClose={() => {
             setShowNew(false);
           }}
           show={showNew}
-        />
+          allUsers={users}
+        /> */}
         <h3>Projects</h3>
         <FloatingButton
           color="indigo lighten-1"
diff --git a/client/src/components/TabRouter.tsx b/client/src/components/TabRouter.tsx
index d235831..8182f22 100644
--- a/client/src/components/TabRouter.tsx
+++ b/client/src/components/TabRouter.tsx
@@ -8,6 +8,7 @@ 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 {
   tickets: Ticket[];
@@ -15,13 +16,15 @@ interface IProps {
   tabNames: string[];
   files: AppFile[];
   activities: Activity[];
+  allUsers: User[];
 }
 
 export const TabRouter: FC<IProps> = ({
   tickets,
   tabNames,
   files,
-  activities
+  activities,
+  allUsers
 }) => {
   const { url } = useRouteMatch();
 
@@ -33,7 +36,7 @@ export const TabRouter: FC<IProps> = ({
         <Redirect from={url} to={`${url}/tickets`} />
 
         <Route path={`${url}/tickets`}>
-          <TicketList tickets={tickets} />
+          <TicketList tickets={tickets} users={allUsers} />
         </Route>
 
         <Route path={`${url}/files`}>
diff --git a/client/src/components/TabRouterHeader.tsx b/client/src/components/TabRouterHeader.tsx
index 9a9f389..2bd15ef 100644
--- a/client/src/components/TabRouterHeader.tsx
+++ b/client/src/components/TabRouterHeader.tsx
@@ -7,11 +7,12 @@ interface IProps {
 }
 
 export const TabRouterHeader: FC<IProps> = ({
-  tabClass = "tab col s4",
-  tabNames
+  tabNames,
+  tabClass = `tab col s${12 / tabNames.length}`
 }) => {
   const [isActive, setIsActive] = useState(0);
   const nTabs = tabNames.length;
+
   return (
     <>
       <ul className="tabs">
diff --git a/client/src/components/TicketList.tsx b/client/src/components/TicketList.tsx
index cbedf39..e07c674 100644
--- a/client/src/components/TicketList.tsx
+++ b/client/src/components/TicketList.tsx
@@ -3,16 +3,18 @@ import { Ticket } from "../types/Ticket";
 import { FloatingButton } from "./FloatingButton";
 import { HorizontalCard } from "./HorizontalCard";
 import { FilterBar } from "./FilterBar";
-import { put } from "../utils/http";
+import { User } from "../types/User";
 import { HttpResponse } from "../types/HttpResponse";
+import { put } from "../utils/http";
 import { Constants } from "../utils/Constants";
 import { NewTicketModal } from "./NewTicketModal";
 
 type TicketListProps = {
   tickets: Ticket[];
+  users: User[];
 };
 
-export const TicketList: FC<TicketListProps> = ({ tickets }) => {
+export const TicketList: FC<TicketListProps> = ({ tickets, users }) => {
   const [filterText, setFilterText] = useState<string>("");
   const clearFilterText: (e: MouseEvent) => void = (e: MouseEvent) => {
     setFilterText("");
@@ -43,10 +45,11 @@ export const TicketList: FC<TicketListProps> = ({ tickets }) => {
             setShowNew(false);
           }}
           show={showNew}
+          allUsers={users}
         />
         <h3>Tickets</h3>
         <FloatingButton
-          color="indigo lighten-1"
+          color="indigo lighten-3"
           size="small"
           onClick={onClick}
         />
diff --git a/client/src/components/UserTabRouter.tsx b/client/src/components/UserTabRouter.tsx
index 5646630..4ff4131 100644
--- a/client/src/components/UserTabRouter.tsx
+++ b/client/src/components/UserTabRouter.tsx
@@ -1,13 +1,10 @@
 import React, { FC } from "react";
+import { Route, useRouteMatch, Redirect } from "react-router-dom";
 import { TabRouterHeader } from "./TabRouterHeader";
 import { TicketList } from "./TicketList";
-
-import { Ticket } from "../types/Ticket";
-
-import { Route, useRouteMatch, Redirect } from "react-router-dom";
-
-import { Project } from "../types/Project";
 import { ProjectList } from "./ProjectList";
+import { Ticket } from "../types/Ticket";
+import { Project } from "../types/Project";
 
 interface IProps {
   tabNames: string[];
@@ -29,9 +26,9 @@ export const UserTabRouter: FC<IProps> = ({ tickets, tabNames, projects }) => {
           <ProjectList projects={projects} />
         </Route>
 
-        <Route path={`${url}/tickets`}>
+        {/* <Route path={`${url}/tickets`}>
           <TicketList tickets={tickets} />
-        </Route>
+        </Route> */}
       </div>
     </>
   );
diff --git a/client/src/components/UsersModal.tsx b/client/src/components/UsersModal.tsx
index d5d4878..3507907 100644
--- a/client/src/components/UsersModal.tsx
+++ b/client/src/components/UsersModal.tsx
@@ -45,13 +45,13 @@ export const UsersModal: FC<IProps> = ({
   useEffect(() => {});
   return (
     <Modal show={show} handleClose={handleClose}>
-      <div className="row valign-wrapper blue">
+      <div className="row valign-wrapper indigo">
         <div className="col s10">
           <h4 className="white-text">Manage users</h4>
         </div>
         <div className="col s2">
           <i
-            className="right material-icons blue lighten-3 circle"
+            className="right material-icons indigo lighten-3 circle"
             onClick={handleClose}
           >
             close
@@ -79,10 +79,10 @@ export const UsersModal: FC<IProps> = ({
             </li>
           ))}
         </ul>
-        <div className="modal-footer">
+        <div className="modal-footer grey lighten-3">
           <input
             type="submit"
-            className="modal-close waves-effect waves-green btn"
+            className="modal-close waves-effect waves-green btn indigo"
             value="Done"
           />
         </div>
diff --git a/client/src/pages/ProjectPage.tsx b/client/src/pages/ProjectPage.tsx
index c0700c0..16ac841 100644
--- a/client/src/pages/ProjectPage.tsx
+++ b/client/src/pages/ProjectPage.tsx
@@ -37,7 +37,7 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
           <AvatarList users={users} />
           <FloatingButton
             icon="add"
-            color="indigo lighten-1"
+            color="indigo lighten-3"
             size="small"
             onClick={() => setShowModal(true)}
           />
@@ -59,6 +59,7 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
           tickets={tickets}
           files={files}
           activities={activities}
+          allUsers={allUsers}
         />
       </div>
     </div>

From 369de39dc406ab468c79057e53540c98805d779b Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Sun, 1 Mar 2020 18:08:04 +0100
Subject: [PATCH 7/9] Finished NewTicketForm layout

---
 client/src/components/MemberList.tsx         | 11 +----
 client/src/components/NewTicketModal.tsx     | 47 ++++++--------------
 client/src/components/NewTicketTabRouter.tsx | 14 +++---
 client/src/components/ProjectList.tsx        |  7 ---
 client/src/components/TabRouter.tsx          |  5 +--
 client/src/components/UserTabRouter.tsx      |  1 -
 6 files changed, 22 insertions(+), 63 deletions(-)

diff --git a/client/src/components/MemberList.tsx b/client/src/components/MemberList.tsx
index 3c4c04a..4f49466 100644
--- a/client/src/components/MemberList.tsx
+++ b/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[];
diff --git a/client/src/components/NewTicketModal.tsx b/client/src/components/NewTicketModal.tsx
index dd876bf..615385a 100644
--- a/client/src/components/NewTicketModal.tsx
+++ b/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> = ({
-  show,
-  handleClose,
-  // users,
-  allUsers
-}) => {
+export const NewTicketModal: FC<IProps> = ({ show, handleClose, 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>
-          {allUsers.map((u: User) => (
-            <li key={u.id}>
-              <UsersModalEntry
-                user={u}
-                members={members}
-                setMembers={setMembers}
-              />
-            </li>
-          ))}
-        </ul> */}
+        <div className="row">
+          <NewTicketTabRouter
+            tabNames={["Details", "Members"]}
+            users={allUsers}
+          />
+        </div>
+
         <div className="modal-footer grey lighten-3">
           <input
             type="submit"
diff --git a/client/src/components/NewTicketTabRouter.tsx b/client/src/components/NewTicketTabRouter.tsx
index 2e8660d..a6f7eda 100644
--- a/client/src/components/NewTicketTabRouter.tsx
+++ b/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`}>
-            <NewTicketForm />
-          </Route>
+        <Route path={`${url}/details`}>
+          <NewTicketForm />
+        </Route>
 
-          <Route path={`${url}/members`}>
-            <MemberList users={users} />
-          </Route>
-        </form>
+        <Route path={`${url}/members`}>
+          <MemberList users={users} />
+        </Route>
       </div>
     </>
   );
diff --git a/client/src/components/ProjectList.tsx b/client/src/components/ProjectList.tsx
index da701a4..067a52f 100644
--- a/client/src/components/ProjectList.tsx
+++ b/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"
diff --git a/client/src/components/TabRouter.tsx b/client/src/components/TabRouter.tsx
index 8182f22..0938467 100644
--- a/client/src/components/TabRouter.tsx
+++ b/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 {
diff --git a/client/src/components/UserTabRouter.tsx b/client/src/components/UserTabRouter.tsx
index 4ff4131..7ee89ae 100644
--- a/client/src/components/UserTabRouter.tsx
+++ b/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";

From 299aa37bb1d398c19899fe5e6588eb767ec5c7dd Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Mon, 2 Mar 2020 11:01:29 +0100
Subject: [PATCH 8/9] NewTicketSubmit in progress

---
 Controllers/TicketsController.cs             |  2 +-
 README.md                                    |  2 +-
 Startup.cs                                   |  1 +
 client/src/components/NewTicketForm.tsx      | 42 ++++++++++++++++++--
 client/src/components/NewTicketModal.tsx     | 31 ++++++++++++---
 client/src/components/NewTicketTabRouter.tsx | 27 ++++++++++++-
 client/src/components/ProjectList.tsx        |  2 +-
 client/src/controllers/UserController.tsx    | 32 ++++++++++++++-
 client/src/types/Ticket.ts                   |  3 ++
 9 files changed, 126 insertions(+), 16 deletions(-)

diff --git a/Controllers/TicketsController.cs b/Controllers/TicketsController.cs
index e298a37..7ee7035 100644
--- a/Controllers/TicketsController.cs
+++ b/Controllers/TicketsController.cs
@@ -92,7 +92,7 @@ namespace TicketManager.Controllers
         {
             if (!ModelState.IsValid)
             {
-                return BadRequest();
+                return BadRequest(ModelState);
             }
 
             var ticket = new Ticket()
diff --git a/README.md b/README.md
index 74ce83e..0eb16a8 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@
 
 ### v1
 
-- [Internal Link. Don't forget to update](https://localhost:5001/swagger)
+- [Internal Link. Don't forget to update](https://localhost:5001/api/v1/)
 
 ## Features
 
diff --git a/Startup.cs b/Startup.cs
index a836e45..0d096d2 100644
--- a/Startup.cs
+++ b/Startup.cs
@@ -99,6 +99,7 @@ namespace TicketManager
             app.UseSwagger();
             app.UseSwaggerUI(c =>
             {
+                c.RoutePrefix = "api/v1";
                 c.SwaggerEndpoint("/swagger/v1/swagger.json", "Ticket Manager API v1");
                 c.DefaultModelsExpandDepth(-1);
             });
diff --git a/client/src/components/NewTicketForm.tsx b/client/src/components/NewTicketForm.tsx
index 34e9918..c105250 100644
--- a/client/src/components/NewTicketForm.tsx
+++ b/client/src/components/NewTicketForm.tsx
@@ -1,14 +1,36 @@
 import React, { FC } from "react";
 
-interface IProps {}
+interface IProps {
+  title: string;
+  setTitle: React.Dispatch<React.SetStateAction<string>>;
+  description: string;
+  setDescription: React.Dispatch<React.SetStateAction<string>>;
+  endingDate: string;
+  setEndingDate: React.Dispatch<React.SetStateAction<string>>;
+}
 
-export const NewTicketForm: FC<IProps> = () => {
+export const NewTicketForm: FC<IProps> = ({
+  title,
+  setTitle,
+  description,
+  setDescription,
+  endingDate,
+  setEndingDate
+}) => {
   return (
     <>
       <div className="row">
         <div className="input-field">
           <i className="material-icons prefix">note_add</i>
-          <input id="title" type="text" className="validate" />
+          <input
+            id="title"
+            type="text"
+            className="validate"
+            value={title}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setTitle(e.target.value)
+            }
+          />
           <label htmlFor="title">Title</label>
         </div>
 
@@ -17,13 +39,25 @@ export const NewTicketForm: FC<IProps> = () => {
           <textarea
             id="description"
             className="materialize-textarea validate"
+            value={description}
+            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+              setDescription(e.target.value)
+            }
           ></textarea>
           <label htmlFor="description">Description</label>
         </div>
 
         <div className="input-field">
           <i className="material-icons prefix">date_range</i>
-          <input id="Due Date" type="text" className="datepicker" />
+          <input
+            id="Due Date"
+            type="text"
+            className="datepicker"
+            value={endingDate}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setEndingDate(e.target.value)
+            }
+          />
           <label htmlFor="Due Date">Due Date</label>
         </div>
 
diff --git a/client/src/components/NewTicketModal.tsx b/client/src/components/NewTicketModal.tsx
index 615385a..c130c4c 100644
--- a/client/src/components/NewTicketModal.tsx
+++ b/client/src/components/NewTicketModal.tsx
@@ -3,8 +3,11 @@ import { useParams } from "react-router-dom";
 import { Modal } from "./Modal";
 import { NewTicketTabRouter } from "./NewTicketTabRouter";
 import { User } from "../types/User";
-import { patch } from "../utils/http";
+import { Ticket } from "../types/Ticket";
+import { patch, post } from "../utils/http";
 import { Constants } from "../utils/Constants";
+import { Project } from "../types/Project";
+import { HttpResponse } from "../types/HttpResponse";
 
 interface IProps {
   show: boolean;
@@ -15,6 +18,9 @@ interface IProps {
 export const NewTicketModal: FC<IProps> = ({ show, handleClose, allUsers }) => {
   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>
@@ -26,11 +32,20 @@ export const NewTicketModal: FC<IProps> = ({ show, handleClose, allUsers }) => {
     e: FormEvent
   ) => {
     e.preventDefault();
-    await patch<User[]>(
-      `${Constants.projectsURI}/${id}/members`,
-      {}
-      // members.map(m => m.id)
+    let newTicket: Ticket = {
+      title: title,
+      description: description,
+      endingDate: endingDate,
+      id: 0,
+      status: "",
+      project: {} as Project
+    };
+    console.log(newTicket);
+    const response: HttpResponse<Ticket> = await post<Ticket>(
+      `${Constants.ticketsURI}`,
+      newTicket
     );
+    console.log(response.parsedBody);
     handleClose();
   };
 
@@ -57,6 +72,12 @@ export const NewTicketModal: FC<IProps> = ({ show, handleClose, allUsers }) => {
           <NewTicketTabRouter
             tabNames={["Details", "Members"]}
             users={allUsers}
+            title={title}
+            setTitle={setTitle}
+            description={description}
+            setDescription={setDescription}
+            endingDate={endingDate}
+            setEndingDate={setEndingDate}
           />
         </div>
 
diff --git a/client/src/components/NewTicketTabRouter.tsx b/client/src/components/NewTicketTabRouter.tsx
index a6f7eda..2985d7a 100644
--- a/client/src/components/NewTicketTabRouter.tsx
+++ b/client/src/components/NewTicketTabRouter.tsx
@@ -4,13 +4,29 @@ 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;
+  setTitle: React.Dispatch<React.SetStateAction<string>>;
+  endingDate: string;
+  setEndingDate: React.Dispatch<React.SetStateAction<string>>;
 }
 
-export const NewTicketTabRouter: FC<IProps> = ({ tabNames, users }) => {
+export const NewTicketTabRouter: FC<IProps> = ({
+  tabNames,
+  users,
+  description,
+  setDescription,
+  title,
+  setTitle,
+  endingDate,
+  setEndingDate
+}) => {
   const { url } = useRouteMatch();
   return (
     <>
@@ -20,7 +36,14 @@ export const NewTicketTabRouter: FC<IProps> = ({ tabNames, users }) => {
         <Redirect from={url} to={`${url}/details`} />
 
         <Route path={`${url}/details`}>
-          <NewTicketForm />
+          <NewTicketForm
+            title={title}
+            setTitle={setTitle}
+            description={description}
+            setDescription={setDescription}
+            endingDate={endingDate}
+            setEndingDate={setEndingDate}
+          />
         </Route>
 
         <Route path={`${url}/members`}>
diff --git a/client/src/components/ProjectList.tsx b/client/src/components/ProjectList.tsx
index 067a52f..85d1460 100644
--- a/client/src/components/ProjectList.tsx
+++ b/client/src/components/ProjectList.tsx
@@ -55,7 +55,7 @@ export const ProjectList: FC<IProps> = ({ projects }) => {
           {filteredTickets.length === 0 ? (
             <HorizontalCard />
           ) : (
-            filteredTickets.map((t: Ticket) => (
+            filteredTickets.map((t: Project) => (
               <HorizontalCard
                 key={t.id}
                 title={t.title}
diff --git a/client/src/controllers/UserController.tsx b/client/src/controllers/UserController.tsx
index c25ed62..afc337b 100644
--- a/client/src/controllers/UserController.tsx
+++ b/client/src/controllers/UserController.tsx
@@ -42,14 +42,42 @@ export const UserController: FC = () => {
         title: "Client objective meeting",
         description: "Client objective meeting",
         endingDate: "2020-02-17 15:51:02.787373",
-        status: "Done"
+        status: "Done",
+        project: {
+          id: 1,
+          title: "Project Title",
+          description: "What is it about",
+          progression: 25,
+          creationDate: new Date().toDateString(),
+          endingDate: "2020-02-17 15:51:02.787373",
+          status: "Todo",
+          manager: {} as User,
+          users: [] as User[],
+          tickets: [] as Ticket[],
+          files: [] as AppFile[],
+          activities: [] as Activity[]
+        }
       },
       {
         id: 2,
         title: "Assemble Outcomes Report for client",
         description: "Assemble Outcomes Report for client",
         endingDate: "2020-02-27 15:51:02.787373",
-        status: "To Do"
+        status: "To Do",
+        project: {
+          id: 1,
+          title: "Project Title",
+          description: "What is it about",
+          progression: 25,
+          creationDate: new Date().toDateString(),
+          endingDate: "2020-02-17 15:51:02.787373",
+          status: "Todo",
+          manager: {} as User,
+          users: [] as User[],
+          tickets: [] as Ticket[],
+          files: [] as AppFile[],
+          activities: [] as Activity[]
+        }
       }
     ],
     activities: []
diff --git a/client/src/types/Ticket.ts b/client/src/types/Ticket.ts
index 8ec3a71..be6cac3 100644
--- a/client/src/types/Ticket.ts
+++ b/client/src/types/Ticket.ts
@@ -1,7 +1,10 @@
+import { Project } from "./Project";
+
 export interface Ticket {
   id: number;
   title: string;
   description: string;
   status: string;
   endingDate: string;
+  project: Project;
 }

From 633ba473961c9cfd918446bd454048649864cc07 Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Mon, 2 Mar 2020 11:16:21 +0100
Subject: [PATCH 9/9] NewTicketSubmit in progress

---
 client/src/components/NewTicketModal.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/client/src/components/NewTicketModal.tsx b/client/src/components/NewTicketModal.tsx
index c130c4c..b2ecb62 100644
--- a/client/src/components/NewTicketModal.tsx
+++ b/client/src/components/NewTicketModal.tsx
@@ -32,13 +32,12 @@ export const NewTicketModal: FC<IProps> = ({ show, handleClose, allUsers }) => {
     e: FormEvent
   ) => {
     e.preventDefault();
-    let newTicket: Ticket = {
+    let newTicket = {
       title: title,
       description: description,
       endingDate: endingDate,
-      id: 0,
-      status: "",
-      project: {} as Project
+      creatorId: "20bf4b2a-7209-4826-96cd-29c2bc937a94",
+      projectId: 1
     };
     console.log(newTicket);
     const response: HttpResponse<Ticket> = await post<Ticket>(