Merge pull request #66 from agiledev-students-spring2024/item-delete-…

…test

Item delete test

back-end/server.js

@@ -353,29 +353,102 @@ server.post('/register', async (req,res) => {
 })
 
 
-server.get('/shirts', auth, (req,res) =>{
-  return res.json(shirts);
-})
+server.get('/shirts', auth, async (req, res) => {
+  try {
+    const userId = req.user.id.toString();
+    const shirts = await Clothes.find({ 
+      user: userId, 
+      articleType: 'Shirts' 
+    });
 
-server.get('/pants', auth,  (req,res) => {
-  return res.json(pants);
-})
+    // Check if shirts array is not empty
+    if (shirts.length > 0) {
+      res.json(shirts);
+    } else {
+      // If the array is empty, it may mean no shirts were found for the user
+      res.status(404).json({ message: 'No shirts found for this user.' });
+    }
 
-server.get('/skirts', auth, (req,res) => {
-  return res.json(skirts);
-})
+  } catch (error) {
+    console.error('Server error when fetching shirts:', error);
+    res.status(500).json({ message: 'Internal Server Error' });
+  }
+});
 
-server.get('/jackets', auth, (req,res) => {
-  return res.json(jackets);
-})
+server.get('/pants', auth, async (req, res) => {
+  try {
+    const userId = req.user.id.toString();
+    const pants = await Clothes.find({ 
+      user: userId, 
+      articleType: 'Pants' 
+    });
+    res.json(pants);
 
-server.get('/shoes', auth, (req,res) => {
-  return res.json(shoes);
-})
+  } catch (error) {
+    console.error('Server error when fetching pants:', error);
+    res.status(500).json({ message: 'Internal Server Error' });
+  }
+});
 
-server.get('/accessories', auth,  (req,res) => {
-  return res.json(accessories);
-})
+server.get('/skirts', auth, async (req, res) => {
+  try {
+    const userId = req.user.id.toString();
+    const skirts = await Clothes.find({ 
+      user: userId, 
+      articleType: 'Skirts' 
+    });
+    res.json(skirts);
+
+  } catch (error) {
+    console.error('Server error when fetching skirts:', error);
+    res.status(500).json({ message: 'Internal Server Error' });
+  }
+});
+
+server.get('/jackets', auth, async (req, res) => {
+  try {
+    const userId = req.user.id.toString();
+    const jackets = await Clothes.find({ 
+      user: userId, 
+      articleType: 'Jackets' 
+    });
+    res.json(jackets);
+
+  } catch (error) {
+    console.error('Server error when fetching jackets:', error);
+    res.status(500).json({ message: 'Internal Server Error' });
+  }
+});
+
+server.get('/shoes', auth, async (req, res) => {
+  try {
+    const userId = req.user.id.toString();
+    const shoes = await Clothes.find({ 
+      user: userId, 
+      articleType: 'Shoes' 
+    });
+    res.json(shoes);
+
+  } catch (error) {
+    console.error('Server error when fetching shoes:', error);
+    res.status(500).json({ message: 'Internal Server Error' });
+  }
+});
+
+server.get('/accessories', auth, async (req, res) => {
+  try {
+    const userId = req.user.id.toString();
+    const accessories = await Clothes.find({ 
+      user: userId, 
+      articleType: 'Accessories' 
+    });
+    res.json(accessories);
+
+  } catch (error) {
+    console.error('Server error when fetching accessories:', error);
+    res.status(500).json({ message: 'Internal Server Error' });
+  }
+});
 
 server.get('/outfits', auth, (req, res) => {
   return res.json(outfits);
@@ -399,11 +472,34 @@ const findItemByName = (itemName) => {
   return item; // This will be the item if found, or undefined if not found
 };
 
-server.get('/item-detail/:itemName', (req, res) => {
+// server.get('/item-detail/:itemName', (req, res) => {
+//   try {
+//     const { itemName } = req.params;
+//     const decodedName = decodeURIComponent(itemName); // Make sure to decode the URI component
+//     const item = findItemByName(decodedName);
+
+//     if (item) {
+//       res.json(item);
+//     } else {
+//       res.status(404).json({ message: 'Item not found' });
+//     }
+//   } catch (error) {
+//     console.error('Server error when fetching item details:', error);
+//     res.status(500).json({ message: 'Internal Server Error' });
+//   }
+// });
+
+// Update to use the Mongoose model
+server.get('/item-detail/:itemName', auth, async (req, res) => {
   try {
     const { itemName } = req.params;
+    const userId = req.user.id.toString();
     const decodedName = decodeURIComponent(itemName); // Make sure to decode the URI component
-    const item = findItemByName(decodedName);
+
+    const item = await Clothes.findOne({
+      user: userId,
+      nameItem: new RegExp(decodedName, 'i'), // Case-insensitive search
+    });
 
     if (item) {
       res.json(item);
@@ -416,6 +512,26 @@ server.get('/item-detail/:itemName', (req, res) => {
   }
 });
 
+server.delete('/delete-item/:itemName', auth, async (req, res) => {
+  try {
+    const { itemName } = req.params;
+    const userId = req.user.id.toString();
+    const itemToDelete = await Clothes.findOneAndDelete({ 
+      nameItem: itemName, 
+      user: userId 
+    });
+
+    if (!itemToDelete) {
+      return res.status(404).json({ message: 'Item not found' });
+    }
+
+    res.json({ message: 'Item successfully deleted' });
+  } catch (error) {
+    console.error('Server error when deleting item:', error);
+    res.status(500).json({ message: 'Internal Server Error' });
+  }
+});
+
 const findOutfitByName = (outfitName) => {
   // Assuming you have an array of outfits
   const outfit = outfits.find(outfit => outfit.outfitName.toLowerCase() === outfitName.toLowerCase());

front-end/src/screens/Accessories.js

@@ -34,11 +34,11 @@ const Accessories = () => {
             </header>
             <div className="Accessories-list">
                 {accessories.map((Accessory) => (
-                    <Link to={`/item-detail/${Accessory.name}`} key={Accessory.name} className="Accessories-item-link">
-                    <div className="Accessories-item" key={Accessory.name}>
-                        <div className="Accessories-image"><img src = { `http://localhost:3001${Accessory.img}`} width={200} /></div> 
+                    <Link to={`/item-detail/${Accessory.nameItem}`} key={Accessory.nameItem} className="Accessories-item-link">
+                    <div className="Accessories-item" key={Accessory.nameItem}>
+                        <div className="Accessories-image"><img src = { `http://localhost:3001${Accessory.imgLink}`} width={200} /></div> 
                         <div className="Accessories-info">
-                            <h3>{Accessory.name}</h3>
+                            <h3>{Accessory.nameItem}</h3>
                             <p>{Accessory.brand}</p>
                             <p>{Accessory.type}</p>
                         </div>

front-end/src/screens/All_Items.js

@@ -71,11 +71,11 @@ const All_Items = () => {
       {showForm && (
       <div className="All_Items-list">
         {allItems.map((item) => (
-          <Link to={`/item-detail/${encodeURIComponent(item.name)}`} key={item.name} className="All_Items-item-link">
-            <div className="All_Items-item" key={item.name}>
-              <div className="All_Items-image"><img src={`http://localhost:3001${item.img}`} width={200} alt={item.name} /></div>
+          <Link to={`/item-detail/${encodeURIComponent(item.nameItem)}`} key={item.nameItem} className="All_Items-item-link">
+            <div className="All_Items-item" key={item.nameItem}>
+              <div className="All_Items-image"><img src={`http://localhost:3001${item.imgLink}`} width={200} alt={item.nameItem} /></div>
               <div className="All_Items-info">
-                <h3>{item.name}</h3>
+                <h3>{item.nameItem}</h3>
                 <p>{item.brand}</p>
                 <p>{item.type}</p>
               </div>

front-end/src/screens/Coats_Jackets.js

@@ -34,11 +34,11 @@ const CoatsJackets = () => {
             </header>
             <div className="Coats_Jackets-list">
                 {jackets.map((CoatJacket) => (
-                    <Link to={`/item-detail/${CoatJacket.name}`} key={CoatJacket.name} className="Coats_Jackets-item-link">
-                    <div className="Coats_Jackets-item" key={CoatJacket.name}>
-                        <div className="Coats_Jakcets-image"><img src = { `http://localhost:3001${CoatJacket.img}`} width={200} /></div> 
+                    <Link to={`/item-detail/${CoatJacket.nameItem}`} key={CoatJacket.nameItem} className="Coats_Jackets-item-link">
+                    <div className="Coats_Jackets-item" key={CoatJacket.nameItem}>
+                        <div className="Coats_Jakcets-image"><img src = { `http://localhost:3001${CoatJacket.imgLink}`} width={200} /></div> 
                         <div className="Coats_Jackets-info">
-                            <h3>{CoatJacket.name}</h3>
+                            <h3>{CoatJacket.nameItem}</h3>
                             <p>{CoatJacket.brand}</p>
                             <p>{CoatJacket.type}</p>
                         </div>

front-end/src/screens/ItemDetail.js

@@ -16,8 +16,14 @@ const ItemDetail = () => {
 
   useEffect(() => {
     const encodedItemName = encodeURIComponent(itemName);
+    const token = localStorage.getItem('token');
+    const config = {
+      headers: {
+        Authorization: `Bearer ${token}`
+      }
+    };
     // Assuming your backend is running on the same machine and port 3001
-    fetch(`http://localhost:3001/item-detail/${encodedItemName}`)
+    fetch(`http://localhost:3001/item-detail/${encodedItemName}`,config)
       .then(response => {
         if (!response.ok) {
           throw new Error(`HTTP status ${response.status}`);
@@ -47,8 +53,36 @@ const ItemDetail = () => {
     return <div>No item found</div>;
   }
 
+  const handleDelete = () => {
+    if (window.confirm("Are you sure you want to delete this item?")) {
+      const token = localStorage.getItem('token');
+      const encodedItemName = encodeURIComponent(item.nameItem); // Ensure you use the correct item property for the name
+
+      fetch(`http://localhost:3001/delete-item/${encodedItemName}`, {
+        method: 'DELETE',
+        headers: {
+          Authorization: `Bearer ${token}`
+        },
+      })
+      .then(response => {
+        if (!response.ok) {
+          throw new Error(`HTTP status ${response.status}`);
+        }
+        return response.json();
+      })
+      .then(() => {
+        alert('Item successfully deleted');
+        navigate('/'); // Redirect to home or any other page
+      })
+      .catch(error => {
+        console.error('Error deleting item:', error);
+        alert('Failed to delete the item');
+      });
+    }
+  };
+
   // The image path should not include '/public' because that's where your static server serves files from
-  const imagePath = item.img.replace('/public', '');
+  const imagePath = item.imgLink.replace('/public', '');
 
   return (
     <div className="item-detail">
@@ -58,16 +92,17 @@ const ItemDetail = () => {
         <h3>Item Details</h3>
       </header>
       <div className="ItemDetail-container">
-        <div className="ItemDetail-image"><img src = { `http://localhost:3001${item.img}`} width={300} /></div> {/* Placeholder for the image */}
+        <div className="ItemDetail-image"><img src = { `http://localhost:3001${item.imgLink}`} width={300} /></div> {/* Placeholder for the image */}
         <div className="ItemDetail-info">
-          <h3>{item.name}</h3>
+          <h3>{item.nameItem}</h3>
           <p>Brand: {item.brand}</p>
           <p>Type: {item.type}</p>
           <p>Color: {item.color}</p>
           <p>Notes: {item.notes}</p>
         </div>
       </div>
       {/* Back button */}
+      <button onClick={handleDelete} className="ItemDetail-deleteButton">DELETE</button>
       <button onClick={handleBackClick} className="ItemDetail-backButton">BACK</button>
     </div>
   );

front-end/src/screens/Pants.js

@@ -34,11 +34,11 @@ const Pants = () => {
             </header>
             <div className="Pants-list">
                 {pants.map((pant) => (
-                    <Link to={`/item-detail/${pant.name}`} key={pant.name} className="Pants-item-link">
-                    <div className="Pants-item" key={pant.name}>
-                        <div className="Pants-image"><img src = { `http://localhost:3001${pant.img}`} width={200} /></div> 
+                    <Link to={`/item-detail/${pant.nameItem}`} key={pant.nameItem} className="Pants-item-link">
+                    <div className="Pants-item" key={pant.nameItem}>
+                        <div className="Pants-image"><img src = { `http://localhost:3001${pant.imgLink}`} width={200} /></div> 
                         <div className="Pants-info">
-                            <h3>{pant.name}</h3>
+                            <h3>{pant.nameItem}</h3>
                             <p>{pant.brand}</p>
                             <p>{pant.type}</p>
                         </div>

front-end/src/screens/Shirts.js

@@ -33,11 +33,11 @@ const Shirt = () => {
             </header>
             <div className="Shirt-list">
                 {shirts.map((shirt) => (
-                    <Link to={`/item-detail/${shirt.name}`} key={shirt.name} className="Shirt-item-link">
-                    <div className="Shirt-item" key={shirt.name}>
-                        <div className="Shirt-image"><img src = { `http://localhost:3001${shirt.img}`} width={200} /></div> {/* Placeholder for the image */}
+                    <Link to={`/item-detail/${shirt.nameItem}`} key={shirt.nameItem} className="Shirt-item-link">
+                    <div className="Shirt-item" key={shirt.nameItem}>
+                        <div className="Shirt-image"><img src = { `http://localhost:3001${shirt.imgLink}`} width={200} /></div> {/* Placeholder for the image */}
                         <div className="Shirt-info">
-                            <h3>{shirt.name}</h3>
+                            <h3>{shirt.nameItem}</h3>
                             <p>{shirt.brand}</p>
                             <p>{shirt.type}</p>
                         </div>

front-end/src/screens/Shoes.js

@@ -35,11 +35,11 @@ const Shoes = () => {
             </header>
             <div className="Shoes-list">
                 {shoes.map((Shoe) => (
-                    <Link to={`/item-detail/${Shoe.name}`} key={Shoe.name} className="Shoes-item-link">
-                    <div className="Shoes-item" key={Shoe.name}>
-                        <div className="Shoes-image"><img src = { `http://localhost:3001${Shoe.img}`} width={200} /></div> 
+                    <Link to={`/item-detail/${Shoe.nameItem}`} key={Shoe.nameItem} className="Shoes-item-link">
+                    <div className="Shoes-item" key={Shoe.nameItem}>
+                        <div className="Shoes-image"><img src = { `http://localhost:3001${Shoe.imgLink}`} width={200} /></div> 
                         <div className="Shoes-info">
-                            <h3>{Shoe.name}</h3>
+                            <h3>{Shoe.nameItem}</h3>
                             <p>{Shoe.brand}</p>
                             <p>{Shoe.type}</p>
                         </div>

front-end/src/screens/Skirts_Dresses.js

@@ -34,11 +34,11 @@ const SkirtsDresses = () => {
             </header>
             <div className="Skirts_Dresses-list">
                 {skirts.map((SkirtDresses) => (
-                    <Link to={`/item-detail/${SkirtDresses.name}`} key={SkirtDresses.name} className="Skirts_Dresses-item-link">
-                    <div className="Skirts_Dresses-item" key={SkirtDresses.name}>
-                        <div className="Skirts_Dresses-image"><img src = { `http://localhost:3001${SkirtDresses.img}`} width={200} /></div> 
+                    <Link to={`/item-detail/${SkirtDresses.nameItem}`} key={SkirtDresses.nameItem} className="Skirts_Dresses-item-link">
+                    <div className="Skirts_Dresses-item" key={SkirtDresses.nameItem}>
+                        <div className="Skirts_Dresses-image"><img src = { `http://localhost:3001${SkirtDresses.imgLink}`} width={200} /></div> 
                         <div className="Skirts_Dresses-info">
-                            <h3>{SkirtDresses.name}</h3>
+                            <h3>{SkirtDresses.nameItem}</h3>
                             <p>{SkirtDresses.brand}</p>
                             <p>{SkirtDresses.type}</p>
                         </div>

front-end/src/styles/ItemDetail.css

@@ -89,4 +89,23 @@ margin-left: 20px;
   /* Ensure other content doesn't overlap with the button */
   .ItemDetail-container {
     padding-bottom: 70px; /* Bottom padding should be greater than the button's height plus its bottom distance */
-  }
+  }
+
+  .ItemDetail-deleteButton {
+    position: fixed; /* Fixed position */
+    bottom: 25px; /* Distance from the bottom */
+    left: 25px; /* Distance from the right */
+    padding: 10px 20px;
+    font-family: 'Cormorant Infant', serif;
+    font-size: 20px;
+    color: #000; /* Black text */
+    background-color: transparent; /* Transparent background */
+    border: none; /* No border */
+    text-decoration: underline; /* Underline text */
+    cursor: pointer;
+  }
+
+  .ItemDetail-deleteButton:hover {
+    text-decoration: none; /* Remove underline on hover for effect */
+  }
+