modal component added

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>

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>
   );

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>
+  );
+};

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}

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);

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">

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";
 }