[Add][Ted] added delete functionality

client/components/Member.tsx

@@ -1,53 +1,79 @@
-import React, { Fragment, useState, useEffect } from 'react'
-import { getErrorMessage } from '@/utils/utilFunctions'
+import React, { Fragment, useState, useEffect } from 'react';
+import { getErrorMessage } from '@/utils/utilFunctions';
 
 type Member = {
-  id: number
+  id: number;
   fname: string;
   lname: string;
   email: string;
-}
+};
 
 export default function Member() {
-  const [members, setMembers] = useState<Member[]>([])
+  const [members, setMembers] = useState<Member[]>([]);
 
   const getAllMembers = async () => {
     try {
-      const response = await fetch('http://localhost:3001/admin/admin-home')
-      const jsonData = await response.json()
+      const response = await fetch('http://localhost:3001/admin/admin-home');
+      const jsonData = await response.json();
+
+      setMembers(jsonData);
+    } catch (err) {
+      console.error(getErrorMessage(err));
+    }
+  };
+
+  const removeMember = async (id: number) => {
+    try {
+      const deleteMember = await fetch(
+        `http://localhost:3001/admin/admin-home/${id}`,
+        {
+          method: 'DELETE',
+        }
+      );
 
-      setMembers(jsonData)
-    } catch(err) {
-      console.error(getErrorMessage(err))
+      setMembers(members.filter((member) => member.id !== id));
+    } catch (err) {
+      console.error(getErrorMessage(err));
     }
-  }
+  };
 
   useEffect(() => {
-    getAllMembers()
-  }, []) 
+    getAllMembers();
+  }, []);
 
-  return(
+  return (
     <Fragment>
       <table className="mx-7 border border-black mt-12 table-auto text-center text-black">
         <thead>
           <tr>
-            <th className="border border-black text-black px-4 py-2">First Name</th>
-            <th className="border border-black text-black px-4 py-2">Last Name</th>
+            <th className="border border-black text-black px-4 py-2">
+              First Name
+            </th>
+            <th className="border border-black text-black px-4 py-2">
+              Last Name
+            </th>
             <th className="border border-black text-black px-4 py-2">Email</th>
             <th className="border border-black text-black px-4 py-2">Edit</th>
           </tr>
         </thead>
         <tbody>
-          {members.map(member => (
+          {members.map((member) => (
             <tr key={member.id}>
               <td className="border border-black px-4 py-2">{member.fname}</td>
               <td className="border border-black px-4 py-2">{member.lname}</td>
               <td className="border border-black px-4 py-2">{member.email}</td>
-              <td className="border border-black px-4 py-2"></td>
+              <td className="border border-black px-4 py-2">
+                <button
+                  className="h-10 w-20 border border-black rounded-md hover:bg-slate-600 hover:text-white"
+                  onClick={() => removeMember(member.id)}
+                >
+                  Remove
+                </button>
+              </td>
             </tr>
           ))}
         </tbody>
       </table>
     </Fragment>
-  )
-}
+  );
+}

server/server.ts

@@ -78,12 +78,21 @@ async function serverStart() {
 
   app.get('/admin/admin-home', async (request, response) => {
     try {
-      const allMerch = await pool.query('SELECT * FROM users');
-      response.json(allMerch.rows);
+      const allMember = await pool.query('SELECT * FROM users');
+      response.json(allMember.rows);
     } catch (err) {
       console.error(getErrorMessage(err));
     }
-  });
+  })
+  .delete('/admin/admin-home/:id', async (request, response) => {
+    try {
+      const { id } = await request.params
+      const deleteMember = await pool.query('DELETE FROM users WHERE id = $1', [id])
+      response.json({ message: 'Member was removed!'})
+    } catch(err) {
+      console.error(getErrorMessage(err))
+    }
+   })
 
   // admin-merch methods