add setMembers in projectService; add close in ticketService; updates components to use services

client/src/components/Lists/TicketList.tsx

@@ -10,11 +10,10 @@ import FloatingButton from "../Buttons/FloatingButton";
 import FilterBar from "../FilterBar";
 import TicketCard from "../Cards/TicketCard";
 import NewTicketModal from "../Modals/NewTicketModal";
-import HttpResponse from "../../types/HttpResponse";
 import Ticket from "../../types/Ticket";
 import Project from "../../types/Project";
-import { put } from "../../utils/http";
-import Constants from "../../utils/Constants";
+import { useAuth0 } from "../../authentication/auth0";
+import { TicketService } from "../../services";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -59,6 +58,14 @@ const TicketList: FC<TicketListProps> = ({
       t.title.toLowerCase().includes(filterText.toLowerCase())
   );
 
+  const { getTokenSilently } = useAuth0();
+
+  const handleValidate = async (id: number) => {
+    const token = await getTokenSilently();
+    const Tickets = new TicketService(token);
+    await Tickets.close(id.toString());
+  };
+
   const classes = useStyles();
 
   return (
@@ -99,26 +106,20 @@ const TicketList: FC<TicketListProps> = ({
           />
         </Grid>
         <Grid item xs={12}>
-          <div className="col s12 grey lighten-1">
-            {filteredTickets.length === 0 ? (
-              <TicketCard />
-            ) : (
-              filteredTickets.map((t: Ticket) => (
-                <TicketCard
-                  key={t.id}
-                  ticket={t}
-                  link={`/tickets/${t.id}`}
-                  validateTicket={async (e: MouseEvent) => {
-                    e.preventDefault();
-                    await put<HttpResponse<Ticket>>(
-                      `${Constants.ticketsURI}/${t.id}/closed`,
-                      {}
-                    );
-                  }}
-                />
-              ))
-            )}
-          </div>
+          {filteredTickets.length === 0 ? (
+            <TicketCard />
+          ) : (
+            filteredTickets.map((t: Ticket) => (
+              <TicketCard
+                key={t.id}
+                ticket={t}
+                link={`/tickets/${t.id}`}
+                validateTicket={() => {
+                  handleValidate(t.id);
+                }}
+              />
+            ))
+          )}
         </Grid>
       </Grid>
     </>

client/src/components/Modals/UsersModal.tsx

@@ -15,8 +15,8 @@ import AvatarList from "../Avatars/AvatarList";
 import FilterBar from "../FilterBar";
 import Modal from "./Modal";
 import User from "../../types/User";
-import { patch } from "../../utils/http";
-import Constants from "../../utils/Constants";
+import { ProjectService } from "../../services";
+import { useAuth0 } from "../../authentication/auth0";
 
 interface IProps {
   show: boolean;
@@ -59,12 +59,14 @@ const UsersModal: FC<IProps> = ({ show, handleClose, users, allUsers }) => {
     setMembers(newChecked);
   };
 
+  const { getTokenSilently } = useAuth0();
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
-    await patch<User[]>(
-      `${Constants.projectsURI}/${id}/members`,
-      members //.map((m) => m.id)
-    );
+    if (id !== undefined) {
+      const token = await getTokenSilently();
+      const Projects = new ProjectService(token);
+      await Projects.setMembers(id, members);
+    }
     handleClose();
   };
 

client/src/components/Preloader.tsx

@@ -1,5 +1,5 @@
-import React, { FC, useState } from "react";
-import { Backdrop, CircularProgress, Button } from "@material-ui/core";
+import React, { FC } from "react";
+import { Backdrop, CircularProgress } from "@material-ui/core";
 import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
 
 const useStyles = makeStyles((theme: Theme) =>

client/src/services/project.ts

@@ -1,6 +1,7 @@
 import IService from ".";
 import Project from "../types/Project";
 import HttpHandler from "./http";
+import User from "../types/User";
 
 interface NewProject {
   title: string;
@@ -35,4 +36,8 @@ export default class ProjectService implements IService<Project> {
   delete(id: string): Promise<void> {
     throw new Error("Method not implemented.");
   }
+
+  setMembers = async (id: string, members: string[]): Promise<void> => {
+    await this.http.patch(`${this.path}/${id}/members`, members, this.key);
+  };
 }

client/src/services/ticket.ts

@@ -12,6 +12,7 @@ interface NewTicket {
   difficulty: number;
   category: number;
 }
+
 export default class TicketService implements IService<Ticket> {
   constructor(private key: string) {}
 
@@ -36,7 +37,12 @@ export default class TicketService implements IService<Ticket> {
   update(id: string, item: Ticket): Promise<void> {
     throw new Error("Method not implemented.");
   }
+
   delete(id: string): Promise<void> {
     throw new Error("Method not implemented.");
   }
+
+  close = async (id: string): Promise<void> => {
+    await this.http.put(`${this.path}/${id}/closed`, {}, this.key);
+  };
 }