Skip to content

Commit

Permalink
Merge pull request #72 from agiledev-students-spring2024/outfit-archi…
Browse files Browse the repository at this point in the history 
…eve-test

Outfit archieve test
  • Loading branch information
@Ella-zizzzy
Ella-zizzzy authored Apr 19, 2024
2 parents 4e59d8f + e808cb3 commit 97c6c8c
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 44 deletions.
48 changes: 17 additions & 31 deletions back-end/server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,25 +181,21 @@ server.get('/outfits', auth, async (req, res) => {
return res.status(404).json({ message: 'No outfits found for this user.' });
}

// Initialize a promise array to handle multiple asynchronous operations
const outfitsWithImageLinks = await Promise.all(outfits.map(async (outfit) => {
// Map over items in each outfit to fetch corresponding clothes
const imageLinks = await Promise.all(outfit.items.map(async (item) => {
const clothingItem = await Clothes.findOne({
user: userId,
nameItem: item.itemName,
articleType: item.itemType
}).select('imgLink'); // Assuming 'imgLink' is the field name in Clothes schema

return clothingItem ? clothingItem.imgLink : null;
const imageLinks = await Promise.all(outfit.Clothes.map(async (item) => {
try {
const itemID = item._id.toString(); // Convert ObjectId to string
const clothingItem = await Clothes.findById(itemID).select('imgLink');
return clothingItem ? clothingItem.imgLink : null;
} catch (error) {
console.error('Error fetching clothing item for outfit:', error);
return null; // Return null in case of error
}
}));

// Filter out any null values if an item wasn't found
const filteredImageLinks = imageLinks.filter(link => link !== null);

return {
outfitName: outfit.outfitName,
//outfitNotes: outfit.outfitNotes,
imageLinks: filteredImageLinks
};
}));
Expand All @@ -211,6 +207,7 @@ server.get('/outfits', auth, async (req, res) => {
}
});


server.get('/verify_login', auth, (req,res) => {
return res.json({'loggedIn': true})
})
Expand Down Expand Up @@ -325,22 +322,7 @@ server.get('/outfit-detail/:outfitName', auth, async (req, res) => {
}).exec();

if (outfit) {
// Now find all the items that are listed in the outfit's items
const itemsPromises = outfit.items.map(item =>
Clothes.findOne({
nameItem: item.itemName,
articleType: item.itemType,
user: userId
}).exec()
);

// Execute all the promises to get the items' details
const itemsDetails = await Promise.all(itemsPromises);

// Filter out any null results in case some items weren't found
const items = itemsDetails.filter(item => item !== null);

res.json({ outfit, items }); // Send both outfit details and items
res.json({ outfit, items: outfit.Clothes });
} else {
res.status(404).json({ message: 'Outfit not found' });
}
Expand All @@ -354,11 +336,15 @@ server.delete('/outfit-detail/:outfitName', auth, async (req, res) => {
try {
const decodedName = decodeURIComponent(req.params.outfitName);
const userId = req.user.id.toString()
await Outfit.findOneAndDelete({
const result = await Outfit.findOneAndDelete({
outfitName: decodedName,
user: userId
});
res.json({ message: 'Outfit deleted successfully' });
if (result) {
res.json({ message: 'Outfit deleted successfully' });
} else {
res.status(404).json({ message: 'Outfit not found or already deleted' });
}
} catch (error) {
console.error('Server error when deleting outfit:', error);
res.status(500).json({ message: 'Internal Server Error' });
Expand Down
11 changes: 6 additions & 5 deletions front-end/src/screens/OutfitDetail.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,20 +61,21 @@ const OutfitDetail = () => {
</header>
<div className="OutfitDetail-container">
{outfitDetails.items.map((item) => (
<Link to={`/item-detail/${encodeURIComponent(item.itemName)}`} key={item.itemName} className="OutfitDetail-item-link">
<Link to={`/item-detail/${encodeURIComponent(item.nameItem)}`} key={item.nameItem} className="OutfitDetail-item-link">
<div className="OutfitDetail-item">
<img src={`http://localhost:3001${item.imgLink}`} alt={item.itemName} className="OutfitDetail-image" />
<img src={`http://localhost:3001${item.imgLink}`} alt={item.nameItem} className="OutfitDetail-image" />
<div className="OutfitDetail-info">
<h3>{item.itemName}</h3>
<h3>{item.nameItem}</h3>
<p>Brand: {item.brand}</p>
<p>Type: {item.type}</p>
</div>
</div>
</Link>
))}
<h2 className="OutfitDetail-name">{outfitDetails.outfit.outfitName}</h2>
<p className="OutfitDetail-notes">{outfitDetails.outfit.outfitNotes}</p>

</div>
<h2 className="OutfitDetail-name">{outfitDetails.outfit.outfitName}</h2>
<p className="OutfitDetail-notes">{outfitDetails.outfit.outfitNotes}</p>
<button onClick={handleBackClick} className="OutfitDetail-backButton">BACK</button>
<button onClick={handleDeleteOutfit} className="OutfitDetail-deleteButton">DELETE</button>
</div>
Expand Down
47 changes: 39 additions & 8 deletions front-end/src/styles/OutfitDetail.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,42 @@
text-align: center;
}

.OutfitDetail-banner h1, .OutfitDetail-banner h3 {
font-family: 'Cormorant Infant', serif;
.OutfitDetail-banner h1 {
font-family: "IM Fell French Canon SC", serif;
font-weight: 400;
margin: 0;
margin-left: 2em;
text-align: left;
font-size: 27px;

}

.OutfitDetail-banner h3 {
font-family: 'Cormorant Infant', serif;
font-weight: 300;

}
/* Grid layout for outfit details */
.OutfitDetail-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
display: flex; /* Switch to flexbox layout */
flex-wrap: wrap; /* Allow items to wrap as needed */
gap: 1rem;
padding: 1rem;
justify-items: center; /* Center items horizontally */
justify-content: center; /* Center items horizontally */
align-items: center; /* Align items vertically */
height: 450px; /* Set a fixed height */
overflow: auto; /* Add scrolling if content overflows */
}

.OutfitDetail-item {
flex: 1 1 200px; /* Allow item to grow and shrink but start at 200px width */
text-align: center;
}

.OutfitDetail-image {
max-width: 70%;
height: auto;
width: auto; /* Adjust width to be auto to maintain aspect ratio */
max-width: 100%; /* Ensure it doesn't exceed its container */
max-height: 150px; /* Set a max height to maintain the container size */
margin-bottom: 1rem;
}

Expand All @@ -40,6 +56,7 @@
padding: 1rem;
}


.OutfitDetail-backButton {
position: fixed; /* Fixed position */
bottom: 25px; /* Distance from the bottom */
Expand Down Expand Up @@ -79,4 +96,18 @@
.OutfitDetail-deleteButton:hover {
text-decoration: none; /* Remove underline on hover for effect */
}


.OutfitDetail-name {
text-align: left;
margin-left: 40px;
margin-bottom: 0.5rem; /* Reduced bottom margin to bring the next element closer */
padding: 0; /* Removed padding, adjust if needed */
}

.OutfitDetail-notes {
text-align: left;
margin-left: 40px;
margin-top: 0.5rem; /* Reduced top margin to be closer to the element above */
padding: 0; /* Removed padding, adjust if needed */
}

0 comments on commit 97c6c8c

Please sign in to comment.