From 6cf52b256bb94e6682db944445c85b8e428ff3fd Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Sun, 23 Feb 2020 00:56:02 +0100
Subject: [PATCH] modal component added

---
 client/src/components/Button.tsx             |  6 ++--
 client/src/components/FloatingButton.tsx     |  8 ++++--
 client/src/components/Modal.tsx              | 17 +++++++++++
 client/src/components/TicketList.tsx         | 30 ++++++--------------
 client/src/controllers/ProjectController.tsx |  2 +-
 client/src/pages/ProjectPage.tsx             |  2 ++
 client/src/utils/Constants.ts                |  4 ++-
 7 files changed, 40 insertions(+), 29 deletions(-)
 create mode 100644 client/src/components/Modal.tsx

diff --git a/client/src/components/Button.tsx b/client/src/components/Button.tsx
index 8fc9f86..bb3c49b 100644
--- a/client/src/components/Button.tsx
+++ b/client/src/components/Button.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import React, { FC, MouseEvent } from "react";
 
 interface IProps {
   icon?: string;
@@ -6,18 +6,20 @@ interface IProps {
   shape?: string;
   color?: string;
   text?: string;
+  onClick?: (e: MouseEvent) => void;
 }
 
 export const Button: FC<IProps> = ({
   size = "small",
   shape = "",
   color,
-  text,
+  onClick,
   children
 }) => {
   return (
     <button
       className={`waves-effect waves-light btn-${size} ${shape} ${color}`}
+      onClick={onClick}
     >
       {children}
     </button>
diff --git a/client/src/components/FloatingButton.tsx b/client/src/components/FloatingButton.tsx
index eb9dfd1..0031443 100644
--- a/client/src/components/FloatingButton.tsx
+++ b/client/src/components/FloatingButton.tsx
@@ -1,20 +1,22 @@
-import React, { FC } from "react";
+import React, { FC, MouseEvent } from "react";
 import { Button } from "./Button";
 
 interface IProps {
   icon?: string;
   size?: string;
   color?: string;
+  onClick?: (e: MouseEvent) => void;
 }
 
 export const FloatingButton: FC<IProps> = ({
   icon = "add",
   size = "small",
-  color = "red"
+  color = "red",
+  onClick
 }) => {
   const iconComponent = <i className="material-icons left">{icon}</i>;
   return (
-    <Button color={color} size={size} shape="btn-floating">
+    <Button color={color} size={size} shape="btn-floating" onClick={onClick}>
       {iconComponent}
     </Button>
   );
diff --git a/client/src/components/Modal.tsx b/client/src/components/Modal.tsx
new file mode 100644
index 0000000..714f860
--- /dev/null
+++ b/client/src/components/Modal.tsx
@@ -0,0 +1,17 @@
+import React, { FC } from "react";
+
+export const Modal: FC = () => {
+  return (
+    <div id="modal1" className="modal">
+      <div className="modal-content">
+        <h4>Modal Header</h4>
+        <p>A bunch of text</p>
+      </div>
+      <div className="modal-footer">
+        <a href="#!" className="modal-close waves-effect waves-green btn-flat">
+          Agree
+        </a>
+      </div>
+    </div>
+  );
+};
diff --git a/client/src/components/TicketList.tsx b/client/src/components/TicketList.tsx
index 5864041..d1be3c3 100644
--- a/client/src/components/TicketList.tsx
+++ b/client/src/components/TicketList.tsx
@@ -15,38 +15,24 @@ export const TicketList: FC<TicketListProps> = ({ tickets }) => {
   };
   const archiveTicket = () => {};
   const validateTicket = () => {};
-
+  const onClick: (e: MouseEvent) => void = (e: MouseEvent) => {
+    e.preventDefault();
+  };
   const handleChange: (e: ChangeEvent<HTMLInputElement>) => void = (
     e: ChangeEvent<HTMLInputElement>
   ) => {
     setFilterText(e.target.value);
   };
 
-  // const useFilter = (init: string) => {
-  //   const [filterText, setFilterText] = useState<string>(init);
-  //   // const handleChange: (e: ChangeEvent<HTMLInputElement>) => void = (
-  //   //   e: ChangeEvent<HTMLInputElement>
-  //   // ) => {
-  //   //   setFilterText(e.target.value);
-  //   // };
-  //   return {
-  //     filterText,
-  //     setFilterText,
-  //     bind: {
-  //       filterText,
-  //       handleChange: (e: ChangeEvent<HTMLInputElement>) => {
-  //         setFilterText(e.target.value);
-  //       }
-  //     }
-  //   };
-  // };
-  // const [filterText, handleChange] = useFilter("");
-  // const [filterText, handleChange] = useFilter("");
   return (
     <>
       <div className="row valign-wrapper">
         <h3>Tickets</h3>
-        <FloatingButton color=" blue-grey lighten-4" size="small" />
+        <FloatingButton
+          color=" blue-grey lighten-4"
+          size="small"
+          onClick={onClick}
+        />
         <FilterBar
           filterText={filterText}
           handleChange={handleChange}
diff --git a/client/src/controllers/ProjectController.tsx b/client/src/controllers/ProjectController.tsx
index d9c368e..c43e9e6 100644
--- a/client/src/controllers/ProjectController.tsx
+++ b/client/src/controllers/ProjectController.tsx
@@ -19,7 +19,7 @@ export const ProjectController: FC = () => {
   async function httpGet(id: string): Promise<void> {
     try {
       const response: HttpResponse<Project> = await get<Project>(
-        `${Constants.getProjectURI}/${id}`
+        `${Constants.projectsURI}/${id}`
       );
       if (response.parsedBody !== undefined) {
         setProject(response.parsedBody);
diff --git a/client/src/pages/ProjectPage.tsx b/client/src/pages/ProjectPage.tsx
index 7e79034..f0f03fd 100644
--- a/client/src/pages/ProjectPage.tsx
+++ b/client/src/pages/ProjectPage.tsx
@@ -5,6 +5,7 @@ import { ProgressBar } from "../components/ProgressBar";
 import ProjectVM from "../VM/ProjectVM";
 import { TabRouter } from "../components/TabRouter";
 import { FloatingButton } from "../components/FloatingButton";
+import { Modal } from "../components/Modal";
 
 interface IProps {
   viewModel: ProjectVM;
@@ -23,6 +24,7 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
     activities
   } = viewModel;
   const tabNames: string[] = ["Tickets", "Files", "Activity"];
+
   return (
     <div className="section">
       <div className="container">
diff --git a/client/src/utils/Constants.ts b/client/src/utils/Constants.ts
index e714aa1..cdfb2b9 100644
--- a/client/src/utils/Constants.ts
+++ b/client/src/utils/Constants.ts
@@ -1,3 +1,5 @@
 export class Constants {
-  static getProjectURI: string = "/api/v1/projects";
+  static projectsURI: string = "/api/v1/projects";
+  static ticketsURI: string = "/api/v1/tickets";
+  static usersURI: string = "/api/v1/users";
 }