diff --git a/web/public/assets/profile_placeholder.png b/web/public/assets/profile_placeholder.png new file mode 100644 index 0000000..da6f9a5 Binary files /dev/null and b/web/public/assets/profile_placeholder.png differ diff --git a/web/src/components/Dashboard/DashboardCommunity/CommunityGallery.tsx b/web/src/components/Dashboard/DashboardCommunity/CommunityGallery.tsx index 043d328..88c13cf 100644 --- a/web/src/components/Dashboard/DashboardCommunity/CommunityGallery.tsx +++ b/web/src/components/Dashboard/DashboardCommunity/CommunityGallery.tsx @@ -1,47 +1,50 @@ -import axios from "axios"; -import { useState, useEffect } from "react"; -import CommunityGalleryCard from "../DashboardCommunity/CommunityGalleryCard"; -interface GalleryData { - title: string; - image: string; +import axios from 'axios'; +import { useState, useEffect, useContext } from 'react'; +import CommunityGalleryCard from '../DashboardCommunity/CommunityGalleryCard'; +import CommunitySearchContext from '../../../context/CommunitySearchContext'; + + +type userData = { + profile_picture: string; + firstName: string; + lastName: string; + email: string; + mobile: string; + upi: string; + birthdate: string; + gender: string; + yearLevel: string; + dietaryRequirements: string; + driversLicense: string; + hours: number; + otherRequirements: string; + emergencyContactFirstName: string; + emergencyContactLastName: string; + emergencyContactMobile: string; + emergencyContactRelationship: string; } -const CommunityGallery = ({ - event, - location, -}: { - event: string; - location: string; -}) => { - // TEMPORARY DATA, we should be getting the profile data from somewhere - const name = "John Doe"; - const hours = "14"; - const [data, setData] = useState([ - { - title: "Relay For Life", - image: "/assets/EventHighlights/Events/RelayForLife/imgB.png", - }, - { - title: "Volunteers Day", - image: "/assets/EventHighlights/Events/VolunteersDay/imgB.png", - }, - { - title: "Blind Low Vision", - image: "/assets/EventHighlights/Events/BlindLowVision/imgB.png", - }, - { - title: "Pub Quiz", - image: "/assets/EventHighlights/Events/PubQuiz/imgB.png", - }, - ]); +const CommunityGallery = () => { + + const [data, setData] = useState([]); + const [filteredData, setFilteredData] = useState([]); + + const context = useContext(CommunitySearchContext); + + const filterUsers = (users: userData[]) => { + return users.filter((user) => { + const fullName = user.firstName + ' ' + user.lastName; + return fullName.toLowerCase().includes(context.searchTerm.toLowerCase()); + }); + }; useEffect(() => { // Fetch gallery data const appUrl = import.meta.env.VITE_APP_URL; const port = import.meta.env.VITE_APP_PORT; axios - .get(`${appUrl}:${port}/api/homepage/gallery`) + .get(`${appUrl}:${port}/api/users`) .then((res) => { setData(res.data); }) @@ -50,36 +53,21 @@ const CommunityGallery = ({ }); }, []); - return ( -
-

- People you may know from {event} at {location} -

-
- {/* hardcoded 4 people, this shoulded be mapped with however many people in the event?? */} - - - - + useEffect(() => { + setFilteredData(filterUsers(data)); + }, [context.searchTerm, data]); + + + return ( +
+

People you may know:

+
+ {filteredData.map((user: userData, index: number) => ( + + ))} +
-
); -}; - +} + export default CommunityGallery; diff --git a/web/src/components/Dashboard/DashboardCommunity/CommunityGalleryCard.tsx b/web/src/components/Dashboard/DashboardCommunity/CommunityGalleryCard.tsx index b5c0e9f..e9545eb 100644 --- a/web/src/components/Dashboard/DashboardCommunity/CommunityGalleryCard.tsx +++ b/web/src/components/Dashboard/DashboardCommunity/CommunityGalleryCard.tsx @@ -1,42 +1,66 @@ import { BsFillPersonPlusFill } from "react-icons/bs"; +type userData = { + profile_picture: string; + firstName: string; + lastName: string; + email: string; + mobile: string; + upi: string; + birthdate: string; + gender: string; + yearLevel: string; + dietaryRequirements: string; + driversLicense: string; + hours: number; + otherRequirements: string; + emergencyContactFirstName: string; + emergencyContactLastName: string; + emergencyContactMobile: string; + emergencyContactRelationship: string; + } + interface CommunityGalleryCardProps { - name: string; - hours: string; - profileImgLink: string; + user: userData; } -const CommunityGalleryCard = ({name, hours, profileImgLink}: CommunityGalleryCardProps) => { +const CommunityGalleryCard = ({user}: CommunityGalleryCardProps) => { const handleAddFriend = () => { console.log('add friend'); }; + if (user.profile_picture === "" || user.profile_picture === null || user.profile_picture === undefined) { + console.log(user.profile_picture); + user.profile_picture = "assets/profile_placeholder.png"; + } + return ( -
-
+
+
+
-
- +
+ profile
-

{name}

-

{hours}

-

hours

+

{user.firstName + " " + user.lastName}

+

{user.hours}

+

hours

- + {/* this should be the profile picture of the mutual, but for now just uses the user's img */}
{/* THIS DOES NOT HANDLE MUTUALS, IDK HOW WE ARE GONNA DO THAT SO I HAVENT MADE PROPS FOR THE BELOW STUFF */} -

jaquallelina and 12 other mutual friends

+

jaquallelina and 12 other mutual friends

-
diff --git a/web/src/components/Dashboard/DashboardCommunity/CommunityGalleryWhole.tsx b/web/src/components/Dashboard/DashboardCommunity/CommunityGalleryWhole.tsx index 9d6af93..93176ad 100644 --- a/web/src/components/Dashboard/DashboardCommunity/CommunityGalleryWhole.tsx +++ b/web/src/components/Dashboard/DashboardCommunity/CommunityGalleryWhole.tsx @@ -1,9 +1,7 @@ -/* - * So like the purpose of this file is to have a container for every event, then for every event it will have x amount of profile cards shown - */ import axios from "axios"; import { useState, useEffect } from "react"; + import CommunityGallery from "./CommunityGallery"; interface EventData { @@ -13,48 +11,44 @@ interface EventData { const CommunityGalleryWhole = () => { // TEMPORARY DATA passing down events into community gallery vvvvvvvvvvvvvvvvvvvvvvvvvvvvv - const [data, setData] = useState([ - { - title: "Quiz Night", - location: "Uni", - }, - { - title: "Launch Night", - location: "Somewhere", - }, - { - title: "C", - location: "Somewhere", - }, - { - title: "Beach Cleanup", - location: "Beach", - }, - ]); + // const [data, setData] = useState([ + // { + // title: "Quiz Night", + // location: "Uni", + // }, + // { + // title: "Launch Night", + // location: "Somewhere", + // }, + // { + // title: "C", + // location: "Somewhere", + // }, + // { + // title: "Beach Cleanup", + // location: "Beach", + // }, + // ]); - useEffect(() => { - // Fetch gallery data - const appUrl = import.meta.env.VITE_APP_URL; - const port = import.meta.env.VITE_APP_PORT; - axios - .get(`${appUrl}:${port}/api/homepage/highlights`) - .then((res) => { - setData(res.data); - }) - .catch((err) => { - console.log(err); - }); - }, []); + // useEffect(() => { + // // Fetch gallery data + // const appUrl = import.meta.env.VITE_APP_URL; + // const port = import.meta.env.VITE_APP_PORT; + // axios + // .get(`${appUrl}:${port}/api/homepage/highlights`) + // .then((res) => { + // setData(res.data); + // }) + // .catch((err) => { + // console.log(err); + // }); + // }, []); // TEMPORARY ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ return (
{/* passing event data into community gallery*/} - {data.map((event) => ( -
- -
- ))} +
); }; diff --git a/web/src/components/Dashboard/DashboardCommunity/SearchBar.tsx b/web/src/components/Dashboard/DashboardCommunity/SearchBar.tsx index d8ded1f..22f191b 100644 --- a/web/src/components/Dashboard/DashboardCommunity/SearchBar.tsx +++ b/web/src/components/Dashboard/DashboardCommunity/SearchBar.tsx @@ -1,16 +1,17 @@ -import React, { useState } from 'react'; +import React, { useContext, useState } from 'react'; import { FiSearch } from 'react-icons/fi'; // magnifying glass icon +import CommunitySearchContext from '../../../context/CommunitySearchContext'; interface SearchBarProps { placeholder?: string; // Optional placeholder for the search input } const SearchBar: React.FC = ({ placeholder = "Search by name" }) => { - const [searchTerm, setSearchTerm] = useState(''); + const context = useContext(CommunitySearchContext); const handleInputChange = (event: React.ChangeEvent) => { const value = event.target.value; - setSearchTerm(value); + context.setSearchTerm(value); }; return ( @@ -20,7 +21,7 @@ const SearchBar: React.FC = ({ placeholder = "Search by name" }) diff --git a/web/src/context/CommunitySearchContext.tsx b/web/src/context/CommunitySearchContext.tsx new file mode 100644 index 0000000..cf7c6e9 --- /dev/null +++ b/web/src/context/CommunitySearchContext.tsx @@ -0,0 +1,5 @@ +import { createContext } from "react"; + +const CommunitySearchContext = createContext(null); + +export default CommunitySearchContext; \ No newline at end of file diff --git a/web/src/context/CommunitySearchContextProvider.tsx b/web/src/context/CommunitySearchContextProvider.tsx new file mode 100644 index 0000000..3ab1d2c --- /dev/null +++ b/web/src/context/CommunitySearchContextProvider.tsx @@ -0,0 +1,18 @@ +import { useState } from "react"; +import CommunitySearchContext from "./CommunitySearchContext"; + + +export function CommunitySearchContextProvider({ children }: { children: React.ReactNode }) { + const [searchTerm, setSearchTerm] = useState(''); + + const contextValue = { + searchTerm, + setSearchTerm, + }; + + return ( + + {children} + + ); +} \ No newline at end of file diff --git a/web/src/pages/Dashboard.tsx b/web/src/pages/Dashboard.tsx index 8eee293..fe0889b 100644 --- a/web/src/pages/Dashboard.tsx +++ b/web/src/pages/Dashboard.tsx @@ -6,10 +6,12 @@ import DashboardCalendar from "@components/Dashboard/dashboardCalendar/Dashboard import ProfileEditModalContextProvider from "../context/ProfileEditModalContextProvider"; import DashboardHeader from "@components/Dashboard/DashboardHeader"; import SideBar from "@components/Dashboard/SideBar"; +import { CommunitySearchContextProvider } from "../context/CommunitySearchContextProvider"; import DashboardDiscover from "@components/Dashboard/DashboardDiscover/DashboardDiscover"; import SearchBar from "@components/Dashboard/DashboardCommunity/SearchBar"; import AuthenticationContext from "../context/AuthenticationContext"; + function Dashboard() { const [tab, setTab] = useState(1); @@ -42,6 +44,7 @@ function Dashboard() { } return ( +
{/* width of the left nav bar */} {/* place thing component here and remove bg-primary */} @@ -85,6 +88,7 @@ function Dashboard() {
+ ); }