);
};
-export default ItemCard;
\ No newline at end of file
+export default ItemCard;
diff --git a/client/src/components/Search/index.css b/client/src/components/Search/index.css
index a59ba6a0..e19257e9 100644
--- a/client/src/components/Search/index.css
+++ b/client/src/components/Search/index.css
@@ -1,15 +1,80 @@
-
.search__container {
width: 100%;
- height: 70vh;
+ padding: 40px 20px;
display: flex;
justify-content: center;
- align-items: center;
+ align-items: flex-start;
+ min-height: 80vh;
+ box-sizing: border-box;
}
-.search__container__header {
- height: 100px;
- display: flex;
- justify-content: center;
- align-items: center;
-}
\ No newline at end of file
+.search__container__content {
+ width: 100%;
+ max-width: 1280px;
+}
+
+.search__loading,
+.search__error,
+.search__no-results,
+.search__empty {
+ text-align: center;
+ padding: 40px 20px;
+}
+
+.search__loading h2,
+.search__error h2,
+.search__no-results h2,
+.search__empty h2 {
+ font-size: 1.8rem;
+ margin-bottom: 10px;
+ color: #333;
+}
+
+.search__error p,
+.search__no-results p,
+.search__empty p {
+ font-size: 1.1rem;
+ color: #666;
+ margin: 0;
+}
+
+.search__results__header {
+ text-align: center;
+ margin-bottom: 30px;
+ padding: 20px 0;
+}
+
+.search__results__header h2 {
+ font-size: 2rem;
+ margin-bottom: 10px;
+ color: #333;
+}
+
+.search__results__header p {
+ font-size: 1.1rem;
+ color: #666;
+}
+
+.search__results__grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+ gap: 32px 20px;
+ width: 100%;
+ align-items: stretch;
+ margin-bottom: 40px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+ .search__results__grid {
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+ gap: 16px;
+ }
+}
+
+@media (max-width: 480px) {
+ .search__results__grid {
+ grid-template-columns: 1fr;
+ gap: 16px;
+ }
+}
diff --git a/client/src/components/Search/index.js b/client/src/components/Search/index.js
index 32963c4a..cde9c87b 100644
--- a/client/src/components/Search/index.js
+++ b/client/src/components/Search/index.js
@@ -1,28 +1,88 @@
-import { useEffect } from 'react';
-import { useContext } from 'react';
+import { useEffect, useState, useContext } from 'react';
import { useSearchParams } from 'react-router-dom';
import { SearchContext } from '../../Context/SearchContext';
-import './index.css'
+import ItemCard from '../Card/ItemCard/ItemCard';
+import './index.css';
const Search = () => {
- const search = useContext(SearchContext)
- const [ searchParam, setSearchParam ] = useSearchParams()
-
- const searchQuery = {
- query: search.searchQuery
- }
+ const search = useContext(SearchContext);
+ const [searchParam, setSearchParam] = useSearchParams();
+ const [results, setResults] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
useEffect(() => {
- setSearchParam(searchQuery, { replace: true })
- }, [searchQuery.query])
+ if (search.searchQuery) {
+ setSearchParam({ q: search.searchQuery }, { replace: true });
+ setLoading(true);
+ setError(null);
+
+ fetch(`/api/items/search?q=${encodeURIComponent(search.searchQuery)}`)
+ .then(res => {
+ if (!res.ok) throw new Error('No items found');
+ return res.json();
+ })
+ .then(data => {
+ setResults(data);
+ setLoading(false);
+ })
+ .catch(err => {
+ setError(err.message);
+ setResults([]);
+ setLoading(false);
+ });
+ } else {
+ setSearchParam({}, { replace: true });
+ setResults([]);
+ }
+ }, [search.searchQuery]);
- return (
+ return (
-
-
No results found for "{search.searchQuery}"
+
+ {loading && (
+
+
Searching for "{search.searchQuery}"...
+
+ )}
+
+ {!loading && error && (
+
+
No results found for "{search.searchQuery}"
+
Try searching for something else
+
+ )}
+
+ {!loading && !error && results.length === 0 && search.searchQuery && (
+
+
No results found for "{search.searchQuery}"
+
Try searching for something else
+
+ )}
+
+ {!loading && !error && results.length > 0 && (
+
+
+
Search Results for "{search.searchQuery}"
+
{results.length} item{results.length !== 1 ? 's' : ''} found
+
+
+ {results.map(item => (
+
+ ))}
+
+
+ )}
+
+ {!loading && !error && !search.searchQuery && (
+
+
Search for products
+
Enter a search term to find products
+
+ )}
- );
-}
-
-export default Search;
\ No newline at end of file
+ );
+};
+
+export default Search;
diff --git a/server/config/db.js b/server/config/db.js
index 45e0f5dd..5e1f6943 100644
--- a/server/config/db.js
+++ b/server/config/db.js
@@ -3,7 +3,7 @@ const mongoose = require("mongoose");
const connectDB = async () => {
try {
mongoose.set('strictQuery', false); // Add this line
- const conn = await mongoose.connect(process.env.MONGO_URI);
+ const conn = await mongoose.connect(process.env.MONGO_URI || "mongodb://localhost:27017/test");
console.log("Mongo DB Connected: ", conn.connection.host);
} catch (err) {
console.log(err);
diff --git a/server/controllers/itemsController.js b/server/controllers/itemsController.js
index eca40bc8..c20a7bbe 100644
--- a/server/controllers/itemsController.js
+++ b/server/controllers/itemsController.js
@@ -71,10 +71,39 @@ const deleteItem = (req, res) => {
res.json({message: "delete Item"})
}
+const searchItems = async (req, res) => {
+ try {
+ const { q } = req.query;
+ if (!q) {
+ return res.status(400).json({ message: 'Missing search query' });
+ }
+ // Enhanced case-insensitive search in multiple fields
+ const items = await Item.find({
+ $or: [
+ { name: { $regex: q, $options: 'i' } },
+ { category: { $regex: q, $options: 'i' } },
+ { type: { $regex: q, $options: 'i' } },
+ { description: { $regex: q, $options: 'i' } },
+ { color: { $regex: q, $options: 'i' } },
+ { highlights: { $regex: q, $options: 'i' } },
+ { detail: { $regex: q, $options: 'i' } }
+ ]
+ });
+ if (items.length > 0) {
+ res.status(200).json(items);
+ } else {
+ res.status(404).json({ message: 'No items found' });
+ }
+ } catch (err) {
+ res.status(500).json({ message: 'Server error' });
+ }
+};
+
module.exports = {
getItem,
addItem,
updateItem,
deleteItem,
- getItemById
+ getItemById,
+ searchItems
}
\ No newline at end of file
diff --git a/server/itemsCollection.js b/server/itemsCollection.js
index bc49989e..5024b2d2 100644
--- a/server/itemsCollection.js
+++ b/server/itemsCollection.js
@@ -52,7 +52,96 @@ const itemsCollection = [
],
"createdAt": "2022-08-28T21:41:09.891Z",
"updatedAt": "2022-08-28T21:41:09.891Z",
- "__v": 0
+ "__v": 0,
+ "detail": "Product details not specified."
+ },
+ {
+ "_id": "630be0f50dd6605053c3f085",
+ "name": "Ermenegildo Zegna",
+ "category": "men",
+ "color": "navy",
+ "type": "blazer",
+ "description": "Classic Navy Blazer",
+ "price": 1200,
+ "size": ["S", " M", " L", " XL"],
+ "highlights": ["100% wool", " Classic fit", " Single breasted", " Two-button closure", " Flap pockets"],
+ "image": [{
+ "fieldname": "images",
+ "originalname": "zegna-blazer-1.jpg",
+ "encoding": "7bit",
+ "mimetype": "image/jpeg",
+ "destination": "./public/men",
+ "filename": "images-1661722869734.jpg",
+ "path": "public/men/images-1661722869734.jpg",
+ "size": 54700
+ },
+ {
+ "fieldname": "images",
+ "originalname": "zegna-blazer-2.jpg",
+ "encoding": "7bit",
+ "mimetype": "image/jpeg",
+ "destination": "./public/men",
+ "filename": "images-1661722869796.jpg",
+ "path": "public/men/images-1661722869796.jpg",
+ "size": 57072
+ }
+ ],
+ "createdAt": "2022-08-28T21:41:09.891Z",
+ "updatedAt": "2022-08-28T21:41:09.891Z",
+ "__v": 0,
+ "detail": "Premium Ermenegildo Zegna navy blazer crafted from the finest Italian wool. Perfect for business and formal occasions."
+ },
+ {
+ "_id": "630be0f50dd6605053c3f086",
+ "name": "Zegna Sport",
+ "category": "men",
+ "color": "grey",
+ "type": "blazer",
+ "description": "Casual Grey Blazer",
+ "price": 850,
+ "size": ["S", " M", " L"],
+ "highlights": ["Lightweight wool", " Unstructured fit", " Patch pockets", " Single button", " Casual style"],
+ "image": [{
+ "fieldname": "images",
+ "originalname": "zegna-sport-1.jpg",
+ "encoding": "7bit",
+ "mimetype": "image/jpeg",
+ "destination": "./public/men",
+ "filename": "images-1661722869735.jpg",
+ "path": "public/men/images-1661722869735.jpg",
+ "size": 54700
+ }
+ ],
+ "createdAt": "2022-08-28T21:41:09.891Z",
+ "updatedAt": "2022-08-28T21:41:09.891Z",
+ "__v": 0,
+ "detail": "Contemporary grey blazer from Zegna Sport collection, perfect for smart casual occasions."
+ },
+ {
+ "_id": "630be0f50dd6605053c3f087",
+ "name": "Balenciaga",
+ "category": "women",
+ "color": "black",
+ "type": "blazer",
+ "description": "Oversized Blazer",
+ "price": 2100,
+ "size": ["S", " M", " L"],
+ "highlights": ["Oversized fit", " Structured shoulders", " Single button", " Flap pockets", " Modern design"],
+ "image": [{
+ "fieldname": "images",
+ "originalname": "balenciaga-blazer-1.jpg",
+ "encoding": "7bit",
+ "mimetype": "image/jpeg",
+ "destination": "./public/women",
+ "filename": "images-1661722869736.jpg",
+ "path": "public/women/images-1661722869736.jpg",
+ "size": 54700
+ }
+ ],
+ "createdAt": "2022-08-28T21:41:09.891Z",
+ "updatedAt": "2022-08-28T21:41:09.891Z",
+ "__v": 0,
+ "detail": "Statement oversized blazer from Balenciaga with bold shoulders and contemporary styling."
},
{
"_id": "630be1b70dd6605053c3f088",
@@ -97,7 +186,8 @@ const itemsCollection = [
],
"createdAt": "2022-08-28T21:44:23.361Z",
"updatedAt": "2022-08-28T21:44:23.361Z",
- "__v": 0
+ "__v": 0,
+ "detail": "Product details not specified."
},
{
"_id": "630be4fb0dd6605053c3f095",
@@ -142,7 +232,8 @@ const itemsCollection = [
],
"createdAt": "2022-08-28T21:58:19.498Z",
"updatedAt": "2022-08-28T21:58:19.498Z",
- "__v": 0
+ "__v": 0,
+ "detail": "Product details not specified."
},
{
"_id": "630c0ba6cacae4f0ab3bd5b0",
@@ -980,4 +1071,6 @@ const itemsCollection = [
"updatedAt": "2022-08-29T14:28:06.542Z",
"__v": 0
}
-]
\ No newline at end of file
+]
+
+module.exports = itemsCollection;
\ No newline at end of file
diff --git a/server/models/Item.js b/server/models/Item.js
index db19d96b..58366bfa 100644
--- a/server/models/Item.js
+++ b/server/models/Item.js
@@ -50,4 +50,4 @@ const itemSchema = mongoose.Schema(
}
)
-module.exports = mongoose.model("Item", itemSchema)
\ No newline at end of file
+module.exports = mongoose.model("Item", itemSchema);
\ No newline at end of file
diff --git a/server/package-lock.json b/server/package-lock.json
index 815912c4..8e72b06d 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -1,11 +1,11 @@
{
- "name": "Trendhora Server",
+ "name": "TrendHora",
"version": "1.0.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
- "name": "Trendhora Server",
+ "name": "TrendHora",
"version": "1.0.0",
"license": "ISC",
"dependencies": {
diff --git a/server/routes/items.js b/server/routes/items.js
index fd327c06..0c6fe04f 100644
--- a/server/routes/items.js
+++ b/server/routes/items.js
@@ -2,7 +2,7 @@ const express = require("express")
const router = express.Router()
const cors = require("cors")
const uploadPhoto = require("../middlewares/upload")
-const { getItem, addItem, updateItem, deleteItem, getItemById } = require("../controllers/itemsController")
+const { getItem, addItem, updateItem, deleteItem, searchItems } = require("../controllers/itemsController")
const Item = require("../models/Item");
router.get('/', cors(), async (req, res) => {
@@ -18,19 +18,13 @@ router.get('/', cors(), async (req, res) => {
res.status(500).json({ message: "Server error" });
}
});
-
-/* The get request to get single item by ID*/
-router.get('/:id',getItemById);
-
-
-
-
/* The post request must have a body elemnt with name images */
-router.post('/', uploadPhoto.array('images'), addItem);
+router.post('/', uploadPhoto.array('images'), addItem)
+router.put('/:id', updateItem)
-router.put('/:id', updateItem);
+router.delete('/:id', deleteItem)
-router.delete('/:id', deleteItem);
+router.get('/search',cors(), searchItems)
-module.exports = router;
\ No newline at end of file
+module.exports = router
\ No newline at end of file
diff --git a/server/seedItem.js b/server/seedItem.js
new file mode 100644
index 00000000..2b857859
--- /dev/null
+++ b/server/seedItem.js
@@ -0,0 +1,18 @@
+const mongoose = require('mongoose');
+const Item = require('./models/Item');
+const itemsCollection = require('./itemsCollection');
+require('dotenv').config();
+
+const MONGO_URI = process.env.MONGO_URI || 'mongodb://127.0.0.1:27017/test';
+
+mongoose.connect(MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })
+ .then(async () => {
+ await Item.deleteMany({});
+ await Item.insertMany(itemsCollection);
+ console.log('Database seeded!');
+ mongoose.disconnect();
+ })
+ .catch(err => {
+ console.error('Error seeding database:', err);
+ mongoose.disconnect();
+ });
\ No newline at end of file
diff --git a/server/server.js b/server/server.js
index d001e63f..0b77512a 100644
--- a/server/server.js
+++ b/server/server.js
@@ -22,7 +22,6 @@ app.use('/api/payment', require("./routes/payment"));
app.use('/api/auth', require('./routes/auth'));
-// Add this line after other routes
// Root route
app.get('/', (req, res) => {
})
:
-// })
-// }
-//