From 4d6ee93a4b8097eca356c3ed21cba73910e0f569 Mon Sep 17 00:00:00 2001
From: Ian Grzembski <iangrz2003@gmail.com>
Date: Thu, 27 Jun 2024 09:03:54 -0400
Subject: [PATCH] Added Deletion functionality

---
 react-client/src/App.jsx             | 21 +++++++++++++++++++--
 react-client/src/components/Sock.jsx |  7 ++++---
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/react-client/src/App.jsx b/react-client/src/App.jsx
index 27c50ef..5abdc96 100644
--- a/react-client/src/App.jsx
+++ b/react-client/src/App.jsx
@@ -11,9 +11,26 @@ import Search from "./components/Search";
 
 
 
+
+
 export default function App() {
   const [data, setData] = useState([]);
-  
+  const handleDelete = async (sockId) => {
+    try {
+        // Make an API request to delete the sock with the given sockId
+        const response = await fetch(`${import.meta.env.VITE_SOCKS_API_URL}/${sockId}`, {
+        method: 'DELETE',
+        });
+        if (!response.ok) {
+            throw new Error('Sock could not be deleted!');
+        }
+        // Update the state or fetch the updated data from the server
+        const updatedData = data.filter(sock => sock._id !== sockId); // Remove the deleted sock from the data array
+        setData(updatedData); // Update the state with the updated data
+      } catch (error) {
+          console.error('Error deleting sock:', error);
+      }
+  };
 
   useEffect(() => {
     const fetchData = async () => {
@@ -84,7 +101,7 @@ export default function App() {
             <div className="card-container" style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
               {
                 data.map((sock) => (
-                  <Sock key={sock._id} data={sock} />
+                  <Sock key={sock._id} data={sock} handleDelete={handleDelete}/>
                 ))
               }
             </div>
diff --git a/react-client/src/components/Sock.jsx b/react-client/src/components/Sock.jsx
index 49cdffc..26652a4 100644
--- a/react-client/src/components/Sock.jsx
+++ b/react-client/src/components/Sock.jsx
@@ -26,9 +26,10 @@ export default function Sock(props){
                 <div className="card-text">Water Resistant: {toYesOrNo(features.waterResistant)}</div>
                 <div className="card-text">Padded: {toYesOrNo(features.padded)}</div>
                 <div className="card-text">Anti Bacterial: {toYesOrNo(features.antiBacterial)}</div>
-            </div>
-            <div className="card-footer" >
-                <small className="text-muted">Added: </small>
+            </div>         
+            <div className="card-footer" style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <small className="text-muted">Added: {props.data.addedTimestamp}</small>
+                <button className="btn btn-sm btn-danger" onClick={() => props.handleDelete(props.data._id)}>Delete</button>
             </div>
         </div>
     );