From 7b03f5baada6b50def914c009f5c55cda74466f7 Mon Sep 17 00:00:00 2001 From: Kieran McKenna Date: Sun, 19 Oct 2025 18:53:13 +1300 Subject: [PATCH 1/5] Updated the item card to display all the information a lot more clearly --- frontend/src/components/ItemCard.js | 131 ++++++++++++---------------- 1 file changed, 58 insertions(+), 73 deletions(-) diff --git a/frontend/src/components/ItemCard.js b/frontend/src/components/ItemCard.js index 2bb0d1d..afc9057 100644 --- a/frontend/src/components/ItemCard.js +++ b/frontend/src/components/ItemCard.js @@ -67,80 +67,65 @@ const ItemCard = ({ item }) => { const statusText = item.kind ? item.kind.charAt(0).toUpperCase() + item.kind.slice(1) : 'Unknown'; return ( - -
-
-
- {/* Item Image */} -
-
- {imageLoading && ( -
-
-
- )} - {imageAlt} -
- {item.reporter?.trust && ( -
- - - Trusted - -
- )} -
- - {/* Item Details */} -
- {/* Status and Category Badges */} -
- - {statusText} - - {item.claimed && ( - Claimed - )} - - {item.category || 'Uncategorized'} - -
- {/* Title */} -

- {item.title || 'Untitled Item'} -

- {/* Description */} -

- {item.description || 'No description provided'} -

- {/* Location and Date */} -
- - - {item.location || 'Unknown location'} - - • - - 🕒 {formatDate(item.date)} - -
-
+ + {/* Image Section */} +
+ {imageLoading && ( +
+
+ )} + {imageAlt} +
+ + {/* Location and Date - Full width under image */} +
+ + + {item.location || 'Unknown location'} + + + 🕒 + {formatDate(item.date)} + +
+ + {/* Content Section */} +
+ {/* Title */} +

+ {item.title} +

+ + {/* Description */} +

+ {item.description || 'No description available'} +

+ + {/* Status and Category Tags - Stick to bottom */} +
+ + {statusText} + + {item.category && ( + + {item.category} + + )} + {item.reporter?.trust && ( + + ✓ Verified + + )}
From e65b9d39b45b7678be9589a31f40ce3b23e36c82 Mon Sep 17 00:00:00 2001 From: Kieran McKenna Date: Sun, 19 Oct 2025 19:01:40 +1300 Subject: [PATCH 2/5] Removed unused imports for Github tests --- frontend/src/components/ItemCard.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/ItemCard.js b/frontend/src/components/ItemCard.js index afc9057..cf1b76c 100644 --- a/frontend/src/components/ItemCard.js +++ b/frontend/src/components/ItemCard.js @@ -1,9 +1,7 @@ import React, { useState, useCallback } from 'react'; -import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; -import Badge from './ui/Badge'; -import { ShieldCheck, MapPin } from './ui/icons'; -import { cardStyles } from '../lib/utils'; +import { MapPin } from 'lucide-react'; +import PropTypes from 'prop-types'; // Constants for better maintainability const PLACEHOLDER_IMAGE = '/placeholder.svg'; From e3a0cb528f0df3f463d6fe0656352ed368642815 Mon Sep 17 00:00:00 2001 From: Kieran McKenna Date: Sun, 19 Oct 2025 20:45:03 +1300 Subject: [PATCH 3/5] Added the 'Claimed' tag into the cards and changed colour scheme of detail page tags --- frontend/src/components/ItemCard.js | 8 ++++++- frontend/src/pages/ItemDetail.js | 34 +++++++++++++++++++---------- 2 files changed, 29 insertions(+), 13 deletions(-) diff --git a/frontend/src/components/ItemCard.js b/frontend/src/components/ItemCard.js index cf1b76c..7195e07 100644 --- a/frontend/src/components/ItemCard.js +++ b/frontend/src/components/ItemCard.js @@ -119,6 +119,11 @@ const ItemCard = ({ item }) => { {item.category} )} + {item.claimed && ( + + Claimed + + )} {item.reporter?.trust && ( ✓ Verified @@ -140,10 +145,11 @@ ItemCard.propTypes = { imageUrl: PropTypes.string, kind: PropTypes.string, category: PropTypes.string, + claimed: PropTypes.bool, reporter: PropTypes.shape({ trust: PropTypes.bool }) }).isRequired }; -export default ItemCard; +export default ItemCard; \ No newline at end of file diff --git a/frontend/src/pages/ItemDetail.js b/frontend/src/pages/ItemDetail.js index 3ca67a7..d72011d 100644 --- a/frontend/src/pages/ItemDetail.js +++ b/frontend/src/pages/ItemDetail.js @@ -259,21 +259,31 @@ const ItemDetailPage = () => { className="rounded-lg border aspect-video object-cover" />
-
- - {item.kind || item.status} - + {/* Status and Category Tags */} +
+ + {item.kind?.charAt(0).toUpperCase() + item.kind?.slice(1) || 'Unknown'} + + {item.category && ( + + {item.category} + + )} {item.claimed && ( - Claimed + + Claimed + )} - - {item.category || item.type} - {userInfo?.trust && ( - - - Trusted - + + ✓ Verified + )}

{item.title}

From 2d0c660e7cfcc8694df5c7e949b658eb0f4c54f9 Mon Sep 17 00:00:00 2001 From: Kieran McKenna Date: Sun, 19 Oct 2025 20:49:58 +1300 Subject: [PATCH 4/5] Updated test suite for changes --- frontend/src/pages/__tests__/ItemDetail.test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/pages/__tests__/ItemDetail.test.js b/frontend/src/pages/__tests__/ItemDetail.test.js index 9802746..ab10027 100644 --- a/frontend/src/pages/__tests__/ItemDetail.test.js +++ b/frontend/src/pages/__tests__/ItemDetail.test.js @@ -153,7 +153,7 @@ describe('ItemDetailPage', () => { }); }; - const assertItemStatusBadge = async (status = 'lost') => { + const assertItemStatusBadge = async (status = 'Lost') => { await waitFor(() => { expect(screen.getByText(status)).toBeInTheDocument(); }); @@ -262,14 +262,14 @@ describe('ItemDetailPage', () => { test('displays item status badge correctly', async () => { setupOnSnapshotMock(); renderItemDetailPage(); - await assertItemStatusBadge('lost'); + await assertItemStatusBadge('Lost'); }); test('displays found item status badge correctly', async () => { const foundItem = { ...mockItem, kind: 'found' }; setupOnSnapshotMock(foundItem); renderItemDetailPage(); - await assertItemStatusBadge('found'); + await assertItemStatusBadge('Found'); }); test('displays claimed badge when item is claimed', async () => { From a3a56eeeb356325cc143c85addddb729214d8c8f Mon Sep 17 00:00:00 2001 From: Kieran McKenna Date: Sun, 19 Oct 2025 20:57:06 +1300 Subject: [PATCH 5/5] Removed unused imports for GitHub checks --- frontend/src/pages/ItemDetail.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/src/pages/ItemDetail.js b/frontend/src/pages/ItemDetail.js index d72011d..72b3a0e 100644 --- a/frontend/src/pages/ItemDetail.js +++ b/frontend/src/pages/ItemDetail.js @@ -1,8 +1,7 @@ import React, { useEffect, useState, useCallback } from 'react'; import PropTypes from 'prop-types'; import { useParams, useNavigate, Link } from 'react-router-dom'; -import Badge from '../components/ui/Badge'; -import { ArrowLeft, ShieldCheck, MapPin } from '../components/ui/icons'; +import { ArrowLeft, MapPin } from '../components/ui/icons'; import { db } from '../firebase/config'; import { getAuth, onAuthStateChanged } from 'firebase/auth'; import {