-
- );
-}
-
-export default CommunityGallery;
\ No newline at end of file
+ return (
+ People you may know from {event} at {location}
-
- {/* hardcoded 4 people, this shoulded be mapped with however many people in the event?? */}
-
-
-
-
-
-
+
+ );
+};
+
+export default CommunityGallery;
diff --git a/web/src/components/Dashboard/DashboardCommunity/CommunityGalleryCard.tsx b/web/src/components/Dashboard/DashboardCommunity/CommunityGalleryCard.tsx
index 947be2a..eb10f55 100644
--- a/web/src/components/Dashboard/DashboardCommunity/CommunityGalleryCard.tsx
+++ b/web/src/components/Dashboard/DashboardCommunity/CommunityGalleryCard.tsx
@@ -6,43 +6,59 @@ interface CommunityGalleryCardProps {
profileImgLink: string;
}
-const CommunityGalleryCard = ({name, hours, profileImgLink}: CommunityGalleryCardProps) => {
-
- const handleAddFriend = () => {
- console.log('add friend');
- };
-
- return (
- + People you may know from {event} at {location} +
+
+ {/* hardcoded 4 people, this shoulded be mapped with however many people in the event?? */}
+
+
- ([
+ // TEMPORARY DATA passing down events into community gallery vvvvvvvvvvvvvvvvvvvvvvvvvvvvv
+ const [data, setData] = useState([
{
- title: "Quiz Night",
- location: "Uni"
+ title: "Quiz Night",
+ location: "Uni",
},
{
- title:"Launch Night",
- location: "Somewhere"
+ title: "Launch Night",
+ location: "Somewhere",
},
{
- title:"C",
- location: "Somewhere"
+ title: "C",
+ location: "Somewhere",
},
{
title: "Beach Cleanup",
- location: "Beach"
- }
- ]);
+ location: "Beach",
+ },
+ ]);
+ // TODO: replace this axios call with a utility function within utils/---.ts
useEffect(() => {
// Fetch gallery data
- axios.get('http://localhost:3000/api/homepage/highlights')
+ axios
+ .get("http://localhost:3000/api/homepage/highlights")
.then((res) => {
setData(res.data);
})
.catch((err) => {
console.log(err);
});
- }
- , []);
-// TEMPORARY ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ }, []);
+ // TEMPORARY ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
- return (
-
-
-
-
- 
-
-
-
-
+const CommunityGalleryCard = ({
+ name,
+ hours,
+ profileImgLink,
+}: CommunityGalleryCardProps) => {
+ const handleAddFriend = () => {
+ console.log("add friend");
+ };
+
+ return (
+ {name}
-{hours}
-hours
- -
-
-
-
-
-
-
- {/* 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
-
+
+
+
+ );
+};
+
+export default CommunityGalleryCard;
diff --git a/web/src/components/Dashboard/DashboardCommunity/CommunityGalleryWhole.tsx b/web/src/components/Dashboard/DashboardCommunity/CommunityGalleryWhole.tsx
index d88ffd4..fe91864 100644
--- a/web/src/components/Dashboard/DashboardCommunity/CommunityGalleryWhole.tsx
+++ b/web/src/components/Dashboard/DashboardCommunity/CommunityGalleryWhole.tsx
@@ -1,6 +1,6 @@
/*
* 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";
@@ -12,49 +12,50 @@ interface EventData {
}
const CommunityGalleryWhole = () => {
- // TEMPORARY DATA passing down events into community gallery vvvvvvvvvvvvvvvvvvvvvvvvvvvvv
- const [data, setData] = useState
+
+
+
+
+
+ + {name} +
+{hours}
+hours
+ +
+
- );
-}
-
-export default CommunityGalleryCard;
\ No newline at end of file
+
+
+
+
+
+ {/* 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 +
- {/* passing event data into community gallery*/}
- {data.map(( event ) => (
- = ({ placeholder = "Search by name" }) => {
- const [searchTerm, setSearchTerm] = useState('');
+const SearchBar: React.FC = ({
+ placeholder = "Search by name",
+}) => {
+ const [searchTerm, setSearchTerm] = useState("");
const handleInputChange = (event: React.ChangeEvent) => {
const value = event.target.value;
@@ -16,7 +18,8 @@ const SearchBar: React.FC = ({ placeholder = "Search by name" })
return (
-
-
- ))}
+ return (
+
+ {/* passing event data into community gallery*/}
+ {data.map((event) => (
+
+ );
+};
+
+export default CommunityGalleryWhole;
diff --git a/web/src/components/Dashboard/DashboardCommunity/SearchBar.tsx b/web/src/components/Dashboard/DashboardCommunity/SearchBar.tsx
index d8ded1f..85fcdf3 100644
--- a/web/src/components/Dashboard/DashboardCommunity/SearchBar.tsx
+++ b/web/src/components/Dashboard/DashboardCommunity/SearchBar.tsx
@@ -1,12 +1,14 @@
-import React, { useState } from 'react';
-import { FiSearch } from 'react-icons/fi'; // magnifying glass icon
+import React, { useState } from "react";
+import { FiSearch } from "react-icons/fi"; // magnifying glass icon
interface SearchBarProps {
placeholder?: string; // Optional placeholder for the search input
}
-const SearchBar: React.FC
+
- );
-}
-
-export default CommunityGalleryWhole;
\ No newline at end of file
+ ))}
+
- (null);
const [events, setEvents] = useState([]);
const [flagshipEvent, setFlagshipEvent] = useState({
event_title: "",
@@ -33,50 +33,65 @@ function DashboardDiscover() {
location: "",
image: "",
host: "",
- coordinates: {longitude: "", latitude: ""}
+ coordinates: { longitude: "", latitude: "" },
});
- const days = ["SUN","MON","TUES","WED","THURS","FRI","SAT"];
- const months = ["JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"];
+ const days = ["SUN", "MON", "TUES", "WED", "THURS", "FRI", "SAT"];
+ const months = [
+ "JANUARY",
+ "FEBRUARY",
+ "MARCH",
+ "APRIL",
+ "MAY",
+ "JUNE",
+ "JULY",
+ "AUGUST",
+ "SEPTEMBER",
+ "OCTOBER",
+ "NOVEMBER",
+ "DECEMBER",
+ ];
let startDate = new Date();
// Get events from backend
+ // TODO: replace this axios call with a utility function within utils/---.ts
useEffect(() => {
- axios.get("http://localhost:3000/api/events")
- .then((response) => {
- setEvents(response.data);
-
- // Have default flagship event be next upcoming event by sorting events by date and taking the first one
- events.sort((a, b) => {
- return new Date(a.start_date_time).getTime() - new Date(b.start_date_time).getTime();
- });
-
- setFlagshipEvent(response.data[0]);
-
- // Now check if there is a flagship event (tagged as such) and set it as the flagship event
- response.data.forEach((event:Event) => {
- if (event.tag.includes("Flagship Event")) {
- setFlagshipEvent(event);
- }
- },
-
- // Need to do this for some reason to get calling methods on Date object to work
- startDate = new Date(flagshipEvent.start_date_time),
-
- );
- })
- .catch((error) => {
- console.log(error);
- });
- }
- , []);
-
- console.log(flagshipEvent);
-
+ axios
+ .get("http://localhost:3000/api/events")
+ .then((response) => {
+ setEvents(response.data);
+
+ // Have default flagship event be next upcoming event by sorting events by date and taking the first one
+ events.sort((a, b) => {
+ return (
+ new Date(a.start_date_time).getTime() -
+ new Date(b.start_date_time).getTime()
+ );
+ });
+
+ setFlagshipEvent(response.data[0]);
+
+ // Now check if there is a flagship event (tagged as such) and set it as the flagship event
+ response.data.forEach(
+ (event: Event) => {
+ if (event.tag.includes("Flagship Event")) {
+ setFlagshipEvent(event);
+ }
+ },
+
+ // Need to do this for some reason to get calling methods on Date object to work
+ (startDate = new Date(flagshipEvent.start_date_time))
+ );
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ }, []);
+
+ console.log(flagshipEvent);
return (
>;
+ event: Event;
+ setEventDetails: Dispatch>;
}
-export default function EventDetails({event, setEventDetails}: EventProps) {
- // Need to do this for some reason to get calling methods on Date object to work
- const startDate = new Date(event.start_date_time);
- const endDate = new Date(event.end_date_time);
-
- const mapEmbed = "https://maps.google.com/maps?q="+event.coordinates.longitude+","+event.coordinates.latitude+"&hl=en&z=18&&output=embed"
-
- const options: Intl.DateTimeFormatOptions = { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric'};
- return (
-
-
@@ -104,10 +119,22 @@ function DashboardDiscover() {
{eventDetails && (
);
}
-export default DashboardDiscover;
\ No newline at end of file
+export default DashboardDiscover;
diff --git a/web/src/components/Dashboard/DashboardDiscover/EventDetails.tsx b/web/src/components/Dashboard/DashboardDiscover/EventDetails.tsx
index 3921c81..f574f4c 100644
--- a/web/src/components/Dashboard/DashboardDiscover/EventDetails.tsx
+++ b/web/src/components/Dashboard/DashboardDiscover/EventDetails.tsx
@@ -2,100 +2,138 @@ import { Dispatch, SetStateAction } from "react";
import { IoArrowBackCircle } from "react-icons/io5";
type Event = {
- event_title: string;
- description: string;
- tasks: string;
- notes: string;
- contact: string;
- tag: string[];
- start_date_time: Date;
- end_date_time: Date;
- location: string;
- image: string;
- host: string;
- coordinates: {longitude: string, latitude: string};
-}
+ event_title: string;
+ description: string;
+ tasks: string;
+ notes: string;
+ contact: string;
+ tag: string[];
+ start_date_time: Date;
+ end_date_time: Date;
+ location: string;
+ image: string;
+ host: string;
+ coordinates: { longitude: string; latitude: string };
+};
interface EventProps {
- event: Event;
- setEventDetails: Dispatch
+ {/* adjust sizes and stuff as needed */}
+
+
+ {eventDetails && (
+ {/* event-container */}
- 
+ const mapEmbed =
+ "https://maps.google.com/maps?q=" +
+ event.coordinates.longitude +
+ "," +
+ event.coordinates.latitude +
+ "&hl=en&z=18&&output=embed";
-
-
- )
-}
-export default AdminHeader;
\ No newline at end of file
diff --git a/web/src/components/legacy/Discover.tsx b/web/src/components/legacy/Discover.tsx
deleted file mode 100644
index d183ba3..0000000
--- a/web/src/components/legacy/Discover.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-
-import DiscoverCard from "./DiscoverCard";
-function Discover() {
- return (
- ('');
- const [lastName, setLastName] = useState('');
- const [email, setEmail] = useState('');
- const [mobile, setMobile] = useState('');
- const [birthdate, setBirthdate] = useState('');
- const [gender, setGender] = useState('');
- const [dietaryRequirements, setDietaryRequirements] = useState('');
- const [accessibilityRequirements, setAccessibilityRequirements] = useState('');
- const [fullLicense, setFullLicense] = useState('');
-
- //temporary style for readability
- const formStyle: React.CSSProperties = {
- display: 'flex',
- flexDirection: 'column',
- justifyContent: 'space-between',
- margin: '20px',
- padding: '20px',
- border: '1px solid #ccc',
- borderRadius: '8px',
- gap: '5px'
- };
-
- const inputBoxes: React.CSSProperties = {
- border: '1px solid #ccc',
- borderRadius: '8px'
- };
-
- const inputLabel: React.CSSProperties = {
- fontWeight: 'bold',
- };
-
- const registerButton: React.CSSProperties = {
- color:'black',
- border: '2px solid #ccc',
- width: '100px'
- };
-
-
- const handleSubmit = async (event: FormEvent) => {
- event.preventDefault();
- if (auth.currentUser) {
- const uid = auth.currentUser.uid; // Get the UID from the current logged-in user
- const userDoc = doc(db, "users", uid); // Specify the path with UID as the document ID
-
- try {
- await setDoc(userDoc, {
- firstName,
- lastName,
- email,
- mobile,
- birthdate,
- gender,
- dietaryRequirements,
- accessibilityRequirements,
- fullLicense
- }, { merge: true }); // Using merge option to avoid overwriting if the doc exists
- console.log("Document successfully written!");
- } catch (error) {
- console.error("Error writing document: ", error);
- }
- } else {
- console.log("No user logged in");
- }
- };
-
- return (
-
- );
-};
-
-export default RegisterForm;
diff --git a/web/src/components/legacy/ShowCaseUserAnnouncements.tsx b/web/src/components/legacy/ShowCaseUserAnnouncements.tsx
deleted file mode 100644
index 9ef958f..0000000
--- a/web/src/components/legacy/ShowCaseUserAnnouncements.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { getUserById, getAnnouncementByUser } from '@utils/UserService';
-
-
-interface User {
- id: string;
- name: string;
- // Add more properties as needed
-}
-
-interface Announcement {
- id: string;
- Title: string;
- Link: string;
- StartDate: {
- seconds: number;
- nanoseconds: number;
- };
- EndDate: {
- seconds: number;
- nanoseconds: number;
- };
- Paragraph: string;
- Filters: string[];
- // Add more properties as needed
-}
-
-
-// FirstYear
-// SecondYear
-// PostGrad
-// Other
-const testId = 'ok9qSuYuwabLYc5UZurs';
-
-const AnnouncementList: React.FC<{ announcements: Announcement[] }> = ({ announcements }) => (
- (null);
- const [announcements, setAnnouncements] = useState(null);
-
- useEffect(() => {
- const fetchUserAndAnnouncements = async () => {
- try {
- const userData = await getUserById(testId);
- setUser(userData);
- console.log(user);
-
- const announcementData = await getAnnouncementByUser(userData);
- setAnnouncements(announcementData);
- } catch (error) {
- console.error('Error fetching user or announcements:', error);
- }
- };
-
- fetchUserAndAnnouncements();
- }, []);
-
- return (
- ({ ...user });
- const [eventData, setEventData] = useState([])
-
- const [isEditMode, setIsEditMode] = useState(false);
- const [showDetails, setShowDetails] = useState(false);
-
- // dispatch function to update global state
- const { dispatch } = useUsersContext();
-
- useEffect(() => {
- const fetchEventData = async (eventId: string) => {
- try {
- const response = await fetch(`http://localhost:3000/api/events/${eventId}`)
- const data = await response.json();
- return data;
- } catch (err) {
- console.error("Failed", err)
- return null;
- }
- };
-
- const fetchAllEvents = async () => {
- const eventsDataPromises = user.events.map(eventId => fetchEventData(eventId));
- const eventsData = await Promise.all(eventsDataPromises);
- setEventData(eventsData.filter(event => event !== null));
- };
-
- fetchAllEvents();
- }, [])
-
- const handleClickDelete = async () => {
- const confirmDelete = window.confirm('Are you sure want to remove ' + user.firstName + '?')
-
- if (confirmDelete) {
- const response = await fetch(`http://localhost:3000/api/users/${user.id}`, {
- method: 'DELETE',
- })
- const json = await response.json()
-
- if (response.ok) {
- dispatch({ type: 'DELETE_USER', payload: json })
- }
- }
- }
-
- const enableEditMode = () => {
- setIsEditMode(true);
- setShowDetails(true);
- }
-
- const disableEditMode = () => {
- setIsEditMode(false);
- }
-
- const toggleShowDetails = () => {
- setShowDetails(!showDetails)
- }
-
- const handleSave = async () => {
- const response = await fetch(`http://localhost:3000/api/users/${user.id}`, {
- method: 'PATCH',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify({...details})
- })
-
- if (response.ok) {
- setDetails({...details})
- dispatch({type: 'UPDATE_USER', payload: {...details}})
- }
-
- disableEditMode();
- }
-
- // Uses original state to revert back to old values
- const handleCancel = () => {
- setDetails({ ...user })
-
- disableEditMode();
- }
-
- //User Details component
- return (
- ([
{
title: "Relay For Life",
- image: "/assets/EventHighlights/Events/RelayForLife/imgB.png"
+ image: "/assets/EventHighlights/Events/RelayForLife/imgB.png",
},
{
title: "Volunteers Day",
- image: "/assets/EventHighlights/Events/VolunteersDay/imgB.png"
+ image: "/assets/EventHighlights/Events/VolunteersDay/imgB.png",
},
{
title: "Blind Low Vision",
- image: "/assets/EventHighlights/Events/BlindLowVision/imgB.png"
+ image: "/assets/EventHighlights/Events/BlindLowVision/imgB.png",
},
{
title: "Pub Quiz",
- image: "/assets/EventHighlights/Events/PubQuiz/imgB.png"
- }
+ image: "/assets/EventHighlights/Events/PubQuiz/imgB.png",
+ },
]);
+ // TODO: replace this axios call with a utility function within utils/---.ts
useEffect(() => {
// Fetch gallery data
- axios.get('http://localhost:3000/api/homepage/gallery')
+ axios
+ .get("http://localhost:3000/api/homepage/gallery")
.then((res) => {
setData(res.data);
})
.catch((err) => {
console.log(err);
});
- }
- , []);
+ }, []);
// =============== NOT YET IMPLEMENTED ===============
// function to handle the "See other upcoming events" button when clicked
const handleSeeMore = () => {
- console.log('See more');
+ console.log("See more");
};
// ===================================================
// handle the back and forward buttons to change the image
const handleBack = () => {
- setImgIndex((prevIndex) => (prevIndex === 0 ? data.length - 1 : prevIndex - 1));
+ setImgIndex((prevIndex) =>
+ prevIndex === 0 ? data.length - 1 : prevIndex - 1
+ );
};
const handleForward = () => {
- setImgIndex((prevIndex) => (prevIndex === data.length - 1 ? 0 : prevIndex + 1));
+ setImgIndex((prevIndex) =>
+ prevIndex === data.length - 1 ? 0 : prevIndex + 1
+ );
};
// function to autoscroll the images
useEffect(() => {
const interval = setInterval(() => {
- setImgIndex((prevIndex) => (prevIndex === data.length - 1 ? 0 : prevIndex + 1));
+ setImgIndex((prevIndex) =>
+ prevIndex === data.length - 1 ? 0 : prevIndex + 1
+ );
}, 7000);
// return a cleanup function to clear the interval when the component unmounts
@@ -71,30 +77,55 @@ const MainGallery = () => {
return (
setEventDetails(null)}>
+export default function EventDetails({ event, setEventDetails }: EventProps) {
+ // Need to do this for some reason to get calling methods on Date object to work
+ const startDate = new Date(event.start_date_time);
+ const endDate = new Date(event.end_date_time);
-
-
+ );
+}
diff --git a/web/src/components/legacy/AdminAddEvent.tsx b/web/src/components/legacy/AdminAddEvent.tsx
deleted file mode 100644
index de02ef6..0000000
--- a/web/src/components/legacy/AdminAddEvent.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { useState } from "react";
-import { useEventContext } from "../../context/EventContext";
-
-const AdminAddEvent = ({ setIsAdding }: any) => {
- /**
- * Context
- * - `events`: An array of event objects retrieved from the event context.
- * - `setEvents`: A function to update the list of events with a new event.
- * - `addEvent`: A function to add a new event to the backend or database.
- */
- const { events, setEvents, addEvent } = useEventContext();
-
- /**
- * State to manage the input fields in the form
- * - `title`: State for the event title input field.
- * - `date`: State for the event date input field.
- * - `time`: State for the event time input field.
- * - `tag`: State for the event tag input field.
- */
- const [title, setTitle] = useState('');
- const [date, setDate] = useState('');
- const [time, setTime] = useState('');
- const [tag, setTag] = useState('');
-
- /**
- * Handle form submission for adding a new event
- * - Prevents default form behavior.
- * - Confirms with the user if they want to add the event.
- * - Creates a new event object and adds it to the backend.
- * - Updates the `events` state with the new event.
- * - Closes the add event form.
- */
- const handleAdd = async (e: any) => {
- e.preventDefault();
- const confirmAdd = window.confirm("Are you sure want to add this event?");
-
- if (confirmAdd) {
- const newEvent = {
- title,
- date,
- time,
- tag,
- };
-
- try {
- await addEvent(newEvent);
- setEvents([...events, newEvent]);
- } catch (error) {
- console.log(error);
- }
-
- setIsAdding(false);
- }
- };
-
- return (
-
-
+ const options: Intl.DateTimeFormatOptions = {
+ weekday: "long",
+ month: "long",
+ day: "numeric",
+ year: "numeric",
+ };
+ return (
+ {event.event_title}
- -
+ {" "}
+ {/* event-container */}
+
+
+ setEventDetails(null)}
+ >
+
+
+
+
+
- {event.event_title}
+ +
- {event.tag.map((tag, index) => (
-
+ {tag}
- ))}
-
+ {event.tag.map((tag, index) => (
+
- )
-}
\ No newline at end of file
+
+ {tag}
-
-
-
+
-
+
-
+ ))}
+ Description
-{event.description}
-
+
-
+
+
+
- Description
+{event.description}
+
-
+ Key Tasks and Responsibilities
-{event.tasks}
-
+
- + Key Tasks and Responsibilities +
+{event.tasks}
+
-
+ Important Notes
-{event.notes}
-
+
- Important Notes
+{event.notes}
+
-
- Contact Details
-{"Hosted By: " + event.host}
-{event.contact}
-
+
+ Contact Details
++ {"Hosted By: " + event.host} +
+{event.contact}
+
-
-
-
-
-
+
+
-
+
+
-
-
+ Address
-{event.location}
-
+
- Address
+{event.location}
+
-
+ Date
-{startDate.toLocaleString("en-NZ", options)}
-
+
- Date
++ {startDate.toLocaleString("en-NZ", options)} +
+
-
- Time
-{startDate.toLocaleString("en-NZ", {hour:'numeric', minute:'numeric'}) + " - " + endDate.toLocaleString("en-NZ", {hour:'numeric', minute:'numeric'})}
-
+
+ Time
++ {startDate.toLocaleString("en-NZ", { + hour: "numeric", + minute: "numeric", + }) + + " - " + + endDate.toLocaleString("en-NZ", { + hour: "numeric", + minute: "numeric", + })} +
+
-
-
- );
-};
-
-export default AdminAddEvent;
\ No newline at end of file
diff --git a/web/src/components/legacy/AdminEditEvent.tsx b/web/src/components/legacy/AdminEditEvent.tsx
deleted file mode 100644
index d42d64e..0000000
--- a/web/src/components/legacy/AdminEditEvent.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import { useState } from "react";
-import { useEventContext } from "../../context/EventContext";
-
-const AdminEditEvent = ({
- setIsEditing,
-}: any) => {
- /**
- * Context
- * - `selectedEvent`: The event object currently selected for editing.
- * - `editEvent`: A function from the event context to handle updating an event in the backend or database.
- */
- const { selectedEvent, editEvent } = useEventContext();
- const id = selectedEvent.id;
-
- /**
- * State to manage the input fields with the current event details
- * - `title`: State for the event title input field, initialized with the current title.
- * - `date`: State for the event date input field, initialized with the current date.
- * - `time`: State for the event time input field, initialized with the current time.
- * - `tag`: State for the event tag input field, initialized with the current tag.
- */
- const [title, setTitle] = useState(selectedEvent.title);
- const [date, setDate] = useState(selectedEvent.date);
- const [time, setTime] = useState(selectedEvent.time);
- const [tag, setTag] = useState(selectedEvent.tag);
-
- /**
- * Handle form submission for updating an event
- * - Prevents default form behavior.
- * - Creates an updated event object with the current state values.
- * - Calls the `editEvent` function to update the event in the backend.
- * - Closes the edit event form.
- */
- const handleUpdate = async (e: any) => {
- e.preventDefault();
-
- const updatedEvent = {
- id,
- title,
- date,
- time,
- tag,
- };
-
- await editEvent(id, updatedEvent);
-
- setIsEditing(false);
- };
-
- return (
-
-
-
- );
-};
-
-export default AdminEditEvent;
\ No newline at end of file
diff --git a/web/src/components/legacy/AdminEventsTable.tsx b/web/src/components/legacy/AdminEventsTable.tsx
deleted file mode 100644
index 7b6c76f..0000000
--- a/web/src/components/legacy/AdminEventsTable.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import { useState, useEffect } from "react";
-import AdminHeader from "./AdminHeader";
-import { useEventContext } from "../../context/EventContext"; // Import the context
-
-const AdminEventsTable = ({ setIsAdding, handleEdit }: any) => {
- /**
- * Context
- * - `events`: An array of event objects retrieved from the event context.
- * - `setEvents`: A function to update the list of events.
- * - `fetchEvents`: A function to fetch events from the backend or database.
- * - `deleteEvent`: A function to delete an event from the backend or database.
- */
- const { events, setEvents, fetchEvents, deleteEvent } = useEventContext();
-
- /**
- * State to manage the selected sort option
- * - `sortOption`: The selected sort option (e.g., 'date-ascending', 'title-descending').
- */
- const [sortOption, setSortOption] = useState('none');
-
- /**
- * Handle change in sort option
- * - Updates the `sortOption` state when the user selects a different sort option.
- */
- const handleSortChange = (event: any) => {
- setSortOption(event.target.value);
- };
-
- /**
- * useEffect to handle sorting the events whenever the `sortOption` changes
- * - Sorts the events based on the selected option (e.g., by date, title, or tag).
- * - If 'none' is selected, it fetches and sets the original events from the backend.
- */
- useEffect(() => {
- const sortEvents = () => {
- let sortedEvents = [...events]; // Create a copy of the array
-
- if (sortOption === 'date-ascending') {
- sortedEvents.sort((a, b) => a.date.localeCompare(b.date));
- } else if (sortOption === 'date-descending') {
- sortedEvents.sort((a, b) => b.date.localeCompare(a.date));
- } else if (sortOption === 'title-ascending') {
- sortedEvents.sort((a, b) => a.title.localeCompare(b.title));
- } else if (sortOption === 'title-descending') {
- sortedEvents.sort((a, b) => b.title.localeCompare(a.title));
- } else if (sortOption === 'tag') {
- sortedEvents.sort((a, b) => a.tag.localeCompare(b.tag));
- } else if (sortOption === 'none') {
- fetchEvents(); // Fetch and set the original events
- return;
- }
-
- setEvents(sortedEvents); // Update the state with sorted events
- };
-
- sortEvents();
- }, [sortOption, events, setEvents, fetchEvents]);
-
- return (
-
-
-
-
-
- );
-};
-
-export default AdminEventsTable;
\ No newline at end of file
diff --git a/web/src/components/legacy/AdminHeader.tsx b/web/src/components/legacy/AdminHeader.tsx
deleted file mode 100644
index 314b1e8..0000000
--- a/web/src/components/legacy/AdminHeader.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-const AdminHeader = ({ setIsAdding }: any) => {
- return (
-
-
-
- {/* Events Table */}
- Sort By:
-
-
-
- | Event Name | -Date | -Time | -Tag | -- Actions - | -|
|---|---|---|---|---|---|
| {event.title} | -{event.date} | -{event.time} | -{event.tag} | -- - | -- - | -
| Events Loading . . . | -
Admin Events Viewer
-
-
-
-
-
- );
-}
-
-export default Discover;
diff --git a/web/src/components/legacy/DiscoverCard.tsx b/web/src/components/legacy/DiscoverCard.tsx
deleted file mode 100644
index 90ddab2..0000000
--- a/web/src/components/legacy/DiscoverCard.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-
-const DiscoverCard = () => {
- return (
-
-
-
-
- Discover
-
-
-
-
-
-
-
- );
-}
-
-export default DiscoverCard;
\ No newline at end of file
diff --git a/web/src/components/legacy/RegisterForm.tsx b/web/src/components/legacy/RegisterForm.tsx
deleted file mode 100644
index 79dc694..0000000
--- a/web/src/components/legacy/RegisterForm.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import React, { useState, FormEvent } from 'react';
-import { getFirestore, doc, setDoc } from 'firebase/firestore';
-import { getAuth } from 'firebase/auth';
-
-// Initialize Firestore and Firebase Auth
-const db = getFirestore();
-const auth = getAuth();
-
-const RegisterForm: React.FC = () => {
- const [firstName, setFirstName] = useState
-
-
- Produce Packer
-Company
-Day
-Time
-Hours
-
-
-);
-
-const ShowCaseUserAnnouncements: React.FC = () => {
- const [user, setUser] = useStateAnnouncements
--
- {announcements.map((announcement) => (
-
-
-
{announcement.Title}
-{announcement.Paragraph}
-Start Date: {new Date(announcement.StartDate.seconds * 1000).toLocaleDateString()}
-End Date: {new Date(announcement.EndDate.seconds * 1000).toLocaleDateString()}
-Filters: {announcement.Filters.join(', ')}
- Link -
- ))}
-
- { announcements ? (
-
- );
-};
-
-export default ShowCaseUserAnnouncements;
\ No newline at end of file
diff --git a/web/src/components/legacy/UserDetails.tsx b/web/src/components/legacy/UserDetails.tsx
deleted file mode 100644
index 86f3379..0000000
--- a/web/src/components/legacy/UserDetails.tsx
+++ /dev/null
@@ -1,311 +0,0 @@
-import { useUsersContext } from "../../Hooks/UseUsersContext";
-import { useEffect, useState } from "react";
-
-// Not sure if this should be in the file?
-export interface User {
- id: string;
- firstName: string;
- lastName: string;
- email: string;
- mobile: string;
- dOB: string;
- gender: string;
- year: string;
- dietary: string;
- license: string;
- accessibility: string;
- emFirstName: string;
- emLastName: string;
- emMobile: string;
- emRelationship: string;
- events: string[];
-}
-
-const UserDetails = ({ user }: { user: User }) => {
- // Local state
- const [details, setDetails] = useState
-
- ) : (
- Loading user data and announcements...
- )} -
- {isEditMode ? (
-
- )
-}
-
-export default UserDetails
\ No newline at end of file
diff --git a/web/src/components/main/MainGallery.tsx b/web/src/components/main/MainGallery.tsx
index 5bb15f4..46e385c 100644
--- a/web/src/components/main/MainGallery.tsx
+++ b/web/src/components/main/MainGallery.tsx
@@ -1,8 +1,7 @@
-import axios from 'axios';
-import { useEffect, useState } from 'react';
-// import '../styles/componentStyles/MainGallery.css'
-import { FaArrowRight, FaArrowLeft } from 'react-icons/fa';
-import { Link } from 'react-router-dom';
+import axios from "axios";
+import { useEffect, useState } from "react";
+import { FaArrowRight, FaArrowLeft } from "react-icons/fa";
+import { Link } from "react-router-dom";
interface GalleryData {
title: string;
@@ -15,54 +14,61 @@ const MainGallery = () => {
const [data, setData] = useState
- {/* Main info edit mode */}
-
-
- ) : (
-
-
-
- {/* Details Panel Edit Mode */}
- {showDetails ? (
-
-
-
-
- setDetails((oldDetails) => ({ ...oldDetails, firstName: e.target.value }))}
- />
-
-
- setDetails((oldDetails) => ({ ...oldDetails, lastName: e.target.value }))}
- />
-
-
- setDetails((oldDetails) => ({ ...oldDetails, email: e.target.value }))}
- />
-
-
- setDetails((oldDetails) => ({ ...oldDetails, mobile: e.target.value }))}
- />
-
-
- setDetails((oldDetails) => ({ ...oldDetails, dOB: e.target.value }))}
- />
-
-
-
-
-
- Cancel
- Save
-
-
-
- ) : (
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
- Year Level:
-
-
-
-
- License:
-
-
-
-
-
-
- Dietary Requirements
- setDetails((oldDetails) => ({ ...oldDetails, dietary: e.target.value }))}
- />
-
-
- Accessibility Requirements
- setDetails((oldDetails) => ({ ...oldDetails, accessibility: e.target.value }))}
- />
-
-
- Emergency Contact
-
-
-
-
-
- First Name:
- setDetails((oldDetails) => ({ ...oldDetails, emFirstName: e.target.value }))}
- />
-
-
- Last Name:
- setDetails((oldDetails) => ({ ...oldDetails, emLastName: e.target.value }))}
- />
-
-
- Mobile:
- setDetails((oldDetails) => ({ ...oldDetails, emMobile: e.target.value }))}
- />
-
-
- Relationship:
- setDetails((oldDetails) => ({ ...oldDetails, emRelationship: e.target.value }))}
- />
-
- {/* Main info display mode */}
-
- )}
-
-
-
- {/* Details panel display mode */}
- {showDetails ? (
-
-
-
- {details.firstName}
- {details.lastName}
- {details.email}
- {details.mobile}
- {details.dOB}
- {details.gender}
-
- {showDetails ? "Hide Details" : "Show Details"}
- Edit
- Delete
-
-
-
- ) : (
-
- )}
-
-
-
-
-
- Year Level: {details.year}
- Driver's License: {details.license}
-
-
-
-
- Dietary Requirements
- {details.dietary}
-
-
- Accessibility Requirements
- {details.accessibility}
-
-
-
- Emergency Contact
-
-
-
-
- Name: {details.emFirstName} {details.emLastName}
- Mobile: {details.emMobile}
- Relationship: {details.emRelationship}
-
-
- Events Attending
- {eventData.map((event, index) => (
-
-
- ))}
- {event.title}
-
-
-
+ ({
- leftImage: "/assets/gallery/events/sample1.png",
+ leftImage: "/assets/gallery/events/sample1.png",
leftText: {
- topText: "Relay for life:\nSilver Award",
- middleText: "$8,043",
- bottomText: "raised"
- },
- middleImage: "/assets/gallery/events/sample3.png",
+ topText: "Relay for life:\nSilver Award",
+ middleText: "$8,043",
+ bottomText: "raised",
+ },
+ middleImage: "/assets/gallery/events/sample3.png",
rightText: {
- topText: "UoA Clubs Awards:\nRunner Up",
- middleText: "2023",
- bottomText: "Cause of the Year"
- },
- rightImage: "/assets/gallery/events/sample4.png"
+ topText: "UoA Clubs Awards:\nRunner Up",
+ middleText: "2023",
+ bottomText: "Cause of the Year",
+ },
+ rightImage: "/assets/gallery/events/sample4.png",
});
+ // TODO: replace this axios call with a utility function within utils/---.ts
useEffect(() => {
// Fetch achievements data
- axios.get('http://localhost:3000/api/homepage/achievements')
+ axios
+ .get("http://localhost:3000/api/homepage/achievements")
.then((res) => {
setData(res.data);
})
.catch((err) => {
console.log(err);
});
- }
- , []);
+ }, []);
return (
![]()
{
- const {setShowModal} = useContext(LoginModalContext);
+ const { setShowModal } = useContext(LoginModalContext);
+
+ const [data, setData] = useState({
+ topLeftImage: "/assets/gallery/events/sample1.png",
+ bottomLeftImage: "/assets/gallery/events/sample3.png",
+ topRightImage: "/assets/gallery/events/sample3.png",
+ bottomRightImage: "/assets/gallery/events/sample4.png",
+ volunteerStatistic: "1,200",
+ });
- const [data, setData] = useState({
- topLeftImage: "/assets/gallery/events/sample1.png",
- bottomLeftImage: "/assets/gallery/events/sample3.png",
- topRightImage: "/assets/gallery/events/sample3.png",
- bottomRightImage: "/assets/gallery/events/sample4.png",
- volunteerStatistic: "1,200"
+ // TODO: replace this axios call with a utility function within utils/---.ts
+ useEffect(() => {
+ // Fetch gallery data
+ axios
+ .get("http://localhost:3000/api/homepage/community")
+ .then((res) => {
+ setData(res.data);
+ console.log(res.data);
+ })
+ .catch((err) => {
+ console.log(err);
});
-
- useEffect(() => {
- // Fetch gallery data
- axios.get('http://localhost:3000/api/homepage/community')
- .then((res) => {
- setData(res.data);
- console.log(res.data);
- })
- .catch((err) => {
- console.log(err);
- });
- }
- , []);
+ }, []);
+
+ return (
+ ('');
- const [lastName, setLastName] = useState('');
- const [email, setEmail] = useState('');
- const [mobile, setMobile] = useState('');
- const [birthdate, setBirthdate] = useState('');
- const [upi, setUpi] = useState('');
- const [gender, setGender] = useState('');
+ const [firstName, setFirstName] = useState("");
+ const [lastName, setLastName] = useState("");
+ const [email, setEmail] = useState("");
+ const [mobile, setMobile] = useState("");
+ const [birthdate, setBirthdate] = useState("");
+ const [upi, setUpi] = useState("");
+ const [gender, setGender] = useState("");
// second page
- const [yearLevel, setYearLevel] = useState('');
+ const [yearLevel, setYearLevel] = useState("");
const [dietaryRequirements, setDietaryRequirements] = useState([]);
- const [driversLicense, setDriversLicense] = useState('');
- const [otherRequirements, setOtherRequirements] = useState('');
+ const [driversLicense, setDriversLicense] = useState("");
+ const [otherRequirements, setOtherRequirements] = useState("");
// third page
- const [emergencyContactFirstName, setEmergencyContactFirstName] = useState('');
- const [emergencyContactLastName, setEmergencyContactLastName] = useState('');
- const [emergencyContactMobile, setEmergencyContactMobile] = useState('');
- const [emergencyContactRelationship, setEmergencyContactRelationship] = useState('');
+ const [emergencyContactFirstName, setEmergencyContactFirstName] =
+ useState("");
+ const [emergencyContactLastName, setEmergencyContactLastName] =
+ useState("");
+ const [emergencyContactMobile, setEmergencyContactMobile] =
+ useState("");
+ const [emergencyContactRelationship, setEmergencyContactRelationship] =
+ useState("");
const handleGenderChange = (event: React.ChangeEvent) => {
const { id } = event.target;
- setGender(id);
+ setGender(id);
};
- const handleYearLevelChange = (event: React.ChangeEvent) => {
+ const handleYearLevelChange = (
+ event: React.ChangeEvent
+ ) => {
const { id } = event.target;
setYearLevel(id); // Set the year level to the selected radio button ID
};
@@ -58,7 +70,9 @@ function Signup() {
}
};
- const handleDriversLicenseChange = (event: React.ChangeEvent) => {
+ const handleDriversLicenseChange = (
+ event: React.ChangeEvent
+ ) => {
const { id } = event.target;
setDriversLicense(id);
};
@@ -66,7 +80,7 @@ function Signup() {
//initialise pages on startup
useEffect(() => {
goToRegisterPage();
- console.log('initialised signup currentUser from Auth', currentUser);
+ console.log("initialised signup currentUser from Auth", currentUser);
}, []);
const goToRegisterPage = () => {
@@ -87,74 +101,90 @@ function Signup() {
};
const goToHomePage = () => {
- navigate('/');
+ navigate("/");
};
// write to collection not document
const handleSubmit = async (event: FormEvent) => {
event.preventDefault();
setShowModal(true);
- console.log('Validating info');
- if(!firstName || !lastName || !email || !mobile || !upi || !gender || !yearLevel || !emergencyContactFirstName || !emergencyContactLastName || !emergencyContactMobile || !emergencyContactRelationship) {
- setError('Missing Fields.');
+ console.log("Validating info");
+ if (
+ !firstName ||
+ !lastName ||
+ !email ||
+ !mobile ||
+ !upi ||
+ !gender ||
+ !yearLevel ||
+ !emergencyContactFirstName ||
+ !emergencyContactLastName ||
+ !emergencyContactMobile ||
+ !emergencyContactRelationship
+ ) {
+ setError("Missing Fields.");
const missingFieldsList = [];
if (!firstName) {
- missingFieldsList.push('First Name');
+ missingFieldsList.push("First Name");
}
if (!lastName) {
- missingFieldsList.push('Last Name');
+ missingFieldsList.push("Last Name");
}
if (!email) {
- missingFieldsList.push('Email');
+ missingFieldsList.push("Email");
}
if (!mobile) {
- missingFieldsList.push('Mobile Number');
+ missingFieldsList.push("Mobile Number");
}
if (!upi) {
- missingFieldsList.push('UPI');
+ missingFieldsList.push("UPI");
}
if (!gender) {
- missingFieldsList.push('Gender');
+ missingFieldsList.push("Gender");
}
if (!yearLevel) {
- missingFieldsList.push('Year Level');
+ missingFieldsList.push("Year Level");
}
if (!emergencyContactFirstName) {
- missingFieldsList.push('Emergency Contact First Name');
+ missingFieldsList.push("Emergency Contact First Name");
}
if (!emergencyContactLastName) {
- missingFieldsList.push('Emergency Contact Last Name');
+ missingFieldsList.push("Emergency Contact Last Name");
}
if (!emergencyContactMobile) {
- missingFieldsList.push('Emergency Contact Mobile Number');
+ missingFieldsList.push("Emergency Contact Mobile Number");
}
if (!emergencyContactRelationship) {
- missingFieldsList.push('Emergency Contact Relationship');
+ missingFieldsList.push("Emergency Contact Relationship");
}
setMissingFields(missingFieldsList);
- setMessage(`Please enter values for: ${missingFieldsList.join(', ')}.`);
+ setMessage(`Please enter values for: ${missingFieldsList.join(", ")}.`);
setShowModal(true);
return;
}
if (!validatePhoneNumber(mobile)) {
- setError('Invalid Mobile Number.');
- setMessage('Please enter a valid mobile number or enter in the correct format.');
+ setError("Invalid Mobile Number.");
+ setMessage(
+ "Please enter a valid mobile number or enter in the correct format."
+ );
setShowModal(true);
return;
}
if (!validatePhoneNumber(emergencyContactMobile)) {
- setError('Invalid Emergency Contact Mobile Number.');
- setMessage('Please enter a valid emergency contact mobile number or enter in the correct format.');
+ setError("Invalid Emergency Contact Mobile Number.");
+ setMessage(
+ "Please enter a valid emergency contact mobile number or enter in the correct format."
+ );
setShowModal(true);
return;
}
- if(!validatEmail(email)) {
- console.log('Invalid Email');
- setError('Invalid Email.');
- setMessage('Please enter a valid email address.');
+ if (!validatEmail(email)) {
+ console.log("Invalid Email");
+ setError("Invalid Email.");
+ setMessage("Please enter a valid email address.");
setShowModal(true);
return;
}
@@ -162,12 +192,11 @@ function Signup() {
if (currentUser) {
try {
// Reference to the 'users' collection
- const colRef = collection(db, 'users');
- const q = query(colRef, where('uid', '==', uid));
+ const colRef = collection(db, "users");
+ const q = query(colRef, where("uid", "==", uid));
const querySnapshot = await getDocs(q);
if (querySnapshot.empty) {
-
// If the user does not exist, add a new document to the collection
await addDoc(colRef, {
uid,
@@ -187,27 +216,31 @@ function Signup() {
emergencyContactMobile,
emergencyContactRelationship,
});
- console.log('Document successfully written!');
+ console.log("Document successfully written!");
}
// Navigate to another page after successful submission
goToHomePage();
} catch (error) {
- console.error('Error writing document: ', error);
+ console.error("Error writing document: ", error);
}
} else {
- console.log('No user logged in', currentUser);
+ console.log("No user logged in", currentUser);
}
};
function validatePhoneNumber(phoneNumber: string) {
- phoneNumber = phoneNumber.replace(/\s/g, '');
- const phonePattern9 = /^\d{3}\d{3}\d{3}$/;
- const phonePattern10 = /^\d{3}\d{3}\d{4}$/;
- const phonePattern11 = /^\d{4}\d{3}\d{4}$/;
-
- return phonePattern10.test(phoneNumber) || phonePattern11.test(phoneNumber) || phonePattern9.test(phoneNumber);
- }
+ phoneNumber = phoneNumber.replace(/\s/g, "");
+ const phonePattern9 = /^\d{3}\d{3}\d{3}$/;
+ const phonePattern10 = /^\d{3}\d{3}\d{4}$/;
+ const phonePattern11 = /^\d{4}\d{3}\d{4}$/;
+
+ return (
+ phonePattern10.test(phoneNumber) ||
+ phonePattern11.test(phoneNumber) ||
+ phonePattern9.test(phoneNumber)
+ );
+ }
function validatEmail(email: string) {
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
@@ -216,124 +249,260 @@ function Signup() {
return (
+ 
+
-
diff --git a/web/src/components/main/OurAchievements.tsx b/web/src/components/main/OurAchievements.tsx
index 8da765f..1ac0ac2 100644
--- a/web/src/components/main/OurAchievements.tsx
+++ b/web/src/components/main/OurAchievements.tsx
@@ -4,60 +4,69 @@ import axios from "axios";
// define the props for the OurAchievements component to accept
interface OurAchievementsData {
- leftImage: string,
+ leftImage: string;
leftText: {
- topText: string,
- middleText: string,
- bottomText: string
- },
- middleImage: string,
+ topText: string;
+ middleText: string;
+ bottomText: string;
+ };
+ middleImage: string;
rightText: {
- topText: string,
- middleText: string,
- bottomText: string
- }
- rightImage: string
+ topText: string;
+ middleText: string;
+ bottomText: string;
+ };
+ rightImage: string;
}
const OurAchievements = () => {
const [data, setData] = useState
{data.map((event, index) => (
-
+
))}
-
+
-
-
- 
- 
+
+
@@ -66,11 +75,15 @@ const OurAchievements = () => {
![]()
{
-
+
+
{data.leftText.topText.split("\n")[0]}
-{data.leftText.topText.split("\n")[1]}
++ {data.leftText.topText.split("\n")[1]} +
{data.leftText.middleText}
-{data.leftText.bottomText}
++ {data.leftText.bottomText} +
{data.rightText.topText.split("\n")[0]}
-{data.rightText.topText.split("\n")[1]}
++ {data.rightText.topText.split("\n")[1]} +
{data.rightText.middleText}
-{data.rightText.bottomText}
++ {data.rightText.bottomText} +
+ 
- return (
- ([
+ { logo: "", name: "", discount: "", website: "" },
+ ]);
- const [data, setData] = useState([{logo: "", name: "", discount: "", website: ""}]);
-
+ // TODO: replace this axios call with a utility function within utils/---.ts
useEffect(() => {
// Fetch sponsor data
- axios.get('http://localhost:3000/api/homepage/sponsors')
+ axios
+ .get("http://localhost:3000/api/homepage/sponsors")
.then((res) => {
setData(res.data);
})
.catch((err) => {
console.log(err);
});
- }
- , []);
+ }, []);
return (
-
);
-}
+};
export default Sponsors;
diff --git a/web/src/components/register/Signup.tsx b/web/src/components/register/Signup.tsx
index f2c0b22..65ddf8a 100644
--- a/web/src/components/register/Signup.tsx
+++ b/web/src/components/register/Signup.tsx
@@ -1,16 +1,22 @@
-import { useNavigate } from 'react-router-dom';
-import AuthenticationContext from '../../context/AuthenticationContext.tsx';
-import RegisterModalErrorContext from '../../context/RegisterModalErrorContext.tsx';
-import { FormEvent, useContext, useEffect, useState } from 'react';
-import { collection, query, where, getDocs, addDoc } from 'firebase/firestore';
-import { db } from '../../firebase/firebase.tsx';
-import RegisterErrorModal from './RegisterErrorModal.tsx';
+import { useNavigate } from "react-router-dom";
+import AuthenticationContext from "../../context/AuthenticationContext.tsx";
+import RegisterModalErrorContext from "../../context/RegisterModalErrorContext.tsx";
+import { FormEvent, useContext, useEffect, useState } from "react";
+import { collection, query, where, getDocs, addDoc } from "firebase/firestore";
+import { db } from "../../firebase/firebase.tsx";
+import RegisterErrorModal from "./RegisterErrorModal.tsx";
function Signup() {
const navigate = useNavigate();
- const { showModal, setShowModal, setMessage, setError, setMissingFields } = useContext(RegisterModalErrorContext);
+ const { showModal, setShowModal, setMessage, setError, setMissingFields } =
+ useContext(RegisterModalErrorContext);
const authContext = useContext(AuthenticationContext);
- const { currentUser, uid } = authContext as unknown as { currentUser: any; uid: string; signOut: () => void; isUserLoggedIn: boolean };
+ const { currentUser, uid } = authContext as unknown as {
+ currentUser: any;
+ uid: string;
+ signOut: () => void;
+ isUserLoggedIn: boolean;
+ };
if (!authContext) {
return null;
@@ -21,30 +27,36 @@ function Signup() {
const [page3, setPage3] = useState(false);
//first page
- const [firstName, setFirstName] = useState
- return (
-
-
-
-
+ );
+};
+
+export default OurCommunity;
diff --git a/web/src/components/main/SponsorsList.tsx b/web/src/components/main/SponsorsList.tsx
index b8e76fc..7f0642b 100644
--- a/web/src/components/main/SponsorsList.tsx
+++ b/web/src/components/main/SponsorsList.tsx
@@ -1,46 +1,55 @@
-import { useEffect, useState } from 'react';
-import MainPageButtonHeadings from './MainPageButtonHeadings';
-import Sponsor from './Sponsor';
-import axios from 'axios';
-
+import { useEffect, useState } from "react";
+import MainPageButtonHeadings from "./MainPageButtonHeadings";
+import Sponsor from "./Sponsor";
+import axios from "axios";
+
interface SponsorData {
- logo: string,
- name: string,
- discount: string,
- website: string
+ logo: string;
+ name: string;
+ discount: string;
+ website: string;
}
const Sponsors = () => {
+ const [data, setData] = useState
-
-
-
+
-
-
-
+
- Join our community to start tracking your efforts!
-
- Create an account to log your hours, connect with others, and stay updated on our events. - With over: -
- - Create an account to log your hours, connect with others, and stay updated on our events. - With over: -
{data.volunteerStatistic}
- volunteers in our club
-
-
+
+
+
+
+
-
+ Join our community to start tracking your efforts!
+
+ Create an account to log your hours, connect with others, and stay + updated on our events. With over: +
+ + Create an account to log your hours, connect with others, and stay + updated on our events. With over: +
+ {data.volunteerStatistic}
+
+
+ volunteers in our club
+
+
+
-
-
- 
- 
-
-
- 
- 
-
-
+
- );
- };
-
- export default OurCommunity;
-
\ No newline at end of file
+
+
+
+
+
+
+
+
-
- Make sure to show the UoA Volunteers Club sticker on your student ID card!
+ Make sure to show the UoA Volunteers Club sticker on your student ID
+ card!
{data.map((sponsor, index) => (
-
- {showModal && (