Added Deletion functionality

IGuy37 · Jun 27, 2024 · 4d6ee93 · 4d6ee93
1 parent 3f10a1b
commit 4d6ee93
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git 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
@@ -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>
     );