From 4b6a41d8eed08be047b09e4da4e31740766ec0ef Mon Sep 17 00:00:00 2001
From: "ALMAZROUEI Shamma (2021) WKIS203"
<shamma.almazrouei.2021@live.rhul.ac.uk>
Date: Wed, 9 Apr 2025 19:38:24 +0530
Subject: [PATCH] fix explore page search & filter
---
uniconnect-app/app/app/explore/page.tsx | 120 +++++++++++++++++++-----
1 file changed, 97 insertions(+), 23 deletions(-)
diff --git a/uniconnect-app/app/app/explore/page.tsx b/uniconnect-app/app/app/explore/page.tsx
index 59eecf4..4df2aed 100644
--- a/uniconnect-app/app/app/explore/page.tsx
+++ b/uniconnect-app/app/app/explore/page.tsx
@@ -1,3 +1,6 @@
+'use client';
+
+import { useState, useMemo } from 'react';
import { Button } from '@/components/ui/button';
import {
Card,
@@ -16,13 +19,79 @@ import {
SelectValue,
} from '@/components/ui/select';
+const listings = [
+ {
+ id: 1,
+ title: 'Data Structures Textbook',
+ description: 'Used textbook for CS course, in good condition.',
+ category: 'textbooks',
+ posted: '2 days ago',
+ },
+ {
+ id: 2,
+ title: 'iPhone 12',
+ description: 'Used iPhone 12, no scratches, fully functional.',
+ category: 'electronics',
+ posted: '1 day ago',
+ },
+ {
+ id: 3,
+ title: 'Winter Jacket',
+ description: 'Warm jacket, perfect for winter.',
+ category: 'clothing',
+ posted: '3 days ago',
+ },
+ {
+ id: 4,
+ title: 'Study Table',
+ description: 'Wooden study table, barely used.',
+ category: 'furniture',
+ posted: '5 days ago',
+ },
+ {
+ id: 5,
+ title: 'Laptop Charger',
+ description: 'Original Dell laptop charger.',
+ category: 'electronics',
+ posted: '4 days ago',
+ },
+ {
+ id: 6,
+ title: 'Operating Systems Textbook',
+ description: 'OS textbook for CS class.',
+ category: 'textbooks',
+ posted: '2 days ago',
+ },
+];
+
export default function ExplorePage() {
+ const [searchTerm, setSearchTerm] = useState('');
+ const [selectedCategory, setSelectedCategory] = useState('');
+
+ const filteredListings = useMemo(() => {
+ return listings.filter((item) => {
+ const matchesSearch = item.title
+ .toLowerCase()
+ .includes(searchTerm.toLowerCase());
+ const matchesCategory = selectedCategory
+ ? item.category === selectedCategory
+ : true;
+ return matchesSearch && matchesCategory;
+ });
+ }, [searchTerm, selectedCategory]);
+
return (
<div className='container mx-auto px-4 py-8'>
<h1 className='text-4xl font-bold mb-8'>Explore Listings</h1>
+
<div className='flex flex-col md:flex-row gap-4 mb-8'>
- <Input className='md:w-1/3' placeholder='Search listings...' />
- <Select>
+ <Input
+ className='md:w-1/3'
+ placeholder='Search listings...'
+ value={searchTerm}
+ onChange={(e) => setSearchTerm(e.target.value)}
+ />
+ <Select onValueChange={(value) => setSelectedCategory(value)}>
<SelectTrigger className='md:w-1/4'>
<SelectValue placeholder='Category' />
</SelectTrigger>
@@ -33,28 +102,33 @@ export default function ExplorePage() {
<SelectItem value='furniture'>Furniture</SelectItem>
</SelectContent>
</Select>
- <Button>Search</Button>
- </div>
- <div className='grid gap-6 md:grid-cols-2 lg:grid-cols-3'>
- {[1, 2, 3, 4, 5, 6].map((item) => (
- <Card key={item}>
- <CardHeader>
- <CardTitle>Item Title {item}</CardTitle>
- <CardDescription>Category • Posted 2 days ago</CardDescription>
- </CardHeader>
- <CardContent>
- <p>
- Brief description of the item. This could be a textbook,
- electronic device, or any other item relevant to university
- students.
- </p>
- </CardContent>
- <CardFooter>
- <Button>View Details</Button>
- </CardFooter>
- </Card>
- ))}
+ <Button onClick={() => {}}>Search</Button>
</div>
+
+ {filteredListings.length > 0 ? (
+ <div className='grid gap-6 md:grid-cols-2 lg:grid-cols-3'>
+ {filteredListings.map((item) => (
+ <Card key={item.id}>
+ <CardHeader>
+ <CardTitle>{item.title}</CardTitle>
+ <CardDescription>
+ {item.category.charAt(0).toUpperCase() +
+ item.category.slice(1)}{' '}
+ • Posted {item.posted}
+ </CardDescription>
+ </CardHeader>
+ <CardContent>
+ <p>{item.description}</p>
+ </CardContent>
+ <CardFooter>
+ <Button>View Details</Button>
+ </CardFooter>
+ </Card>
+ ))}
+ </div>
+ ) : (
+ <p>No listings found.</p>
+ )}
</div>
);
}
--
GitLab