From b7ed9da37d4a5225670cec4d21ca04a1d85f677d Mon Sep 17 00:00:00 2001 From: MartinBraquet Date: Thu, 31 Jul 2025 01:52:48 +0200 Subject: [PATCH] Move filter to the left --- app/page.tsx | 2 +- app/profiles/ProfileFilters.tsx | 37 +++--- app/profiles/page.tsx | 229 ++++++++++++++++++-------------- 3 files changed, 148 insertions(+), 120 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index 5276b79c..696c4d48 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -43,7 +43,7 @@ export default function HomePage() {
Learn More diff --git a/app/profiles/ProfileFilters.tsx b/app/profiles/ProfileFilters.tsx index aaf748dd..9c8432f2 100644 --- a/app/profiles/ProfileFilters.tsx +++ b/app/profiles/ProfileFilters.tsx @@ -229,24 +229,25 @@ export function ProfileFilters({filters, onFilterChange, onToggleFilter, onReset
-
- -
- {allCauseAreas.map((cause) => ( - - ))} -
-
+ {/*
*/} + {/* */} + {/*
*/} + {/* {allCauseAreas.map((cause) => (*/} + {/* onToggleFilter('causeAreas', cause.name)}*/} + {/* className={`px-3 py-1 text-sm rounded-full ${*/} + {/* filters.causeAreas.includes(cause.name)*/} + {/* ? 'bg-green-100 dark:text-white dark:bg-green-900 text-green-800 border border-green-200'*/} + {/* : 'bg-gray-100 dark:text-white dark:bg-gray-700 text-gray-800 border border-gray-200 hover:bg-gray-200'*/} + {/* }`}*/} + {/* >*/} + {/* {cause.name}*/} + {/* */} + {/* ))}*/} + {/*
*/} + {/*
*/} +
diff --git a/app/profiles/page.tsx b/app/profiles/page.tsx index e191091d..19d56145 100644 --- a/app/profiles/page.tsx +++ b/app/profiles/page.tsx @@ -13,6 +13,7 @@ export default function ProfilePage() { const [profiles, setProfiles] = useState([]); const [loading, setLoading] = useState(true); const [totalUsers, setTotalUsers] = useState(0); + const [images, setImages] = useState([]) const [filters, setFilters] = useState({ gender: '', interests: [] as string[], @@ -21,37 +22,59 @@ export default function ProfilePage() { }); const fetchProfiles = useCallback(async () => { - try { - setLoading(true); - const params = new URLSearchParams(); + try { + setLoading(true); + const params = new URLSearchParams(); - if (filters.gender) params.append('gender', filters.gender); - if (filters.interests.length > 0) params.append('interests', filters.interests.join(',')); - if (filters.causeAreas.length > 0) params.append('causeAreas', filters.causeAreas.join(',')); - if (filters.searchQuery) params.append('search', filters.searchQuery); - - // Fetch total users count (unfiltered) - const countResponse = await fetch('/api/profiles/count'); - if (countResponse.ok) { - const { count } = await countResponse.json(); - setTotalUsers(count); + if (filters.gender) params.append('gender', filters.gender); + if (filters.interests.length > 0) params.append('interests', filters.interests.join(',')); + if (filters.causeAreas.length > 0) params.append('causeAreas', filters.causeAreas.join(',')); + if (filters.searchQuery) params.append('search', filters.searchQuery); + + // Fetch total users count (unfiltered) + const countResponse = await fetch('/api/profiles/count'); + if (countResponse.ok) { + const {count} = await countResponse.json(); + setTotalUsers(count); + } + + const response = await fetch(`/api/profiles?${params.toString()}`); + const data = await response.json(); + + if (!response.ok) { + console.error(data.error || 'Failed to fetch profiles'); + return; + } + + setProfiles(data.profiles || []); + console.log(data.profiles); + + for (const u of data.profiles) { + console.log(u); + const img = u.image; + let url = img; + if (img && !img.startsWith('http')) { + const imageResponse = await fetch(`/api/download?key=${img}`); + console.log(`imageResponse: ${imageResponse}`) + if (imageResponse.ok) { + const imageBlob = await imageResponse.json(); + url = imageBlob['url']; + } + } + setImages(prev => [...prev, url]); + } + console.log(images); + } catch + (error) { + console.error('Error fetching profiles:', error); + } finally { + setLoading(false); + } } - - const response = await fetch(`/api/profiles?${params.toString()}`); - const data = await response.json(); - - if (!response.ok) { - console.error(data.error || 'Failed to fetch profiles'); - return; - } - - setProfiles(data.profiles || []); - } catch (error) { - console.error('Error fetching profiles:', error); - } finally { - setLoading(false); - } - }, [filters]); + , + [filters] + ) + ; useEffect(() => { fetchProfiles(); @@ -83,8 +106,8 @@ export default function ProfilePage() { }; return ( -
-
+
+

People

@@ -92,89 +115,93 @@ export default function ProfilePage() {
- - - {loading ? ( -
- +
+ {/* Filters Sidebar */} +
+
+ +
- ) : ( -
- {profiles.length > 0 ? ( - profiles.map((user) => ( - -
-
-
-

- {user.name} -

- {user?.profile?.description && ( -

- {user.profile.description} -

- )} -
- {user.profile?.intellectualInterests && user.profile.intellectualInterests.length > 0 && ( -
- {user.profile.intellectualInterests.slice(0, 3).map(({interest}) => ( - + {/* Profiles Grid */} +
+ {loading ? ( +
+ +
+ ) : profiles.length > 0 ? ( +
+ {profiles.map((user, idx) => ( + +
+
+ {/*
*/} + {/* */} + {/*
*/} +
+

+ {user.name} +

+

+ {user.profile?.description || ''} +

+
+
+
+ {user.profile?.intellectualInterests && user.profile.intellectualInterests.length > 0 && ( +
+ {user.profile.intellectualInterests.slice(0, 3).map(({interest}) => ( + {interest?.name} - ))} -
- )} - {user.profile?.causeAreas && user.profile.causeAreas.length > 0 && ( -
- {user.profile.causeAreas.slice(0, 3).map(({causeArea}) => ( - - {causeArea?.name} - - ))} -
- )} -
- + ))} +
+ )} + {/*{user.profile?.causeAreas && user.profile.causeAreas.length > 0 && (*/} + {/*
*/} + {/* {user.profile.causeAreas.slice(0, 3).map(({causeArea}) => (*/} + {/* */} + {/* {causeArea?.name}*/} + {/* */} + {/* ))}*/} + {/*
*/} + {/*)}*/}
-
- - )) + + ))} +
) : ( -
-
+

No profiles found matching your criteria.

+ +

No profiles found

-

+

Try adjusting your search or filter to find what you're looking for.

)}
- )} +
- ); -} + )