paths and variables

UoaWDCC · Sep 30, 2024 · 416ff05 · 416ff05
1 parent 2146969
commit 416ff05
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 87 deletions.
diff --git a/web/src/components/Dashboard/DashboardDiscover/DashboardDiscover.tsx b/web/src/components/Dashboard/DashboardDiscover/DashboardDiscover.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import EventsScrollContainer from "../dashboardDiscover/EventsScrollContainer";
+import EventsScrollContainer from "../DashboardDiscover/EventsScrollContainer";
 import axios from "axios";
 import EventDetails from "../DashboardDiscover/EventDetails";
 

diff --git a/web/src/components/Dashboard/DashboardDiscover/EventsScrollContainer.tsx b/web/src/components/Dashboard/DashboardDiscover/EventsScrollContainer.tsx
@@ -1,35 +1,35 @@
 import { Dispatch, SetStateAction } from "react";
-import Event from "../dashboardDiscover/Event.tsx"
+import Event from "../DashboardDiscover/Event.tsx";
 
 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 EventsProps {
-    events: Event[];
-    setEventDetails: Dispatch<SetStateAction<null|Event>>;
+  events: Event[];
+  setEventDetails: Dispatch<SetStateAction<null | Event>>;
 }
 
-export default function EventsScrollContainer({events, setEventDetails}: EventsProps) {
-    
-    return (
-        <div className="dashboard bg-white-background h-[43vh] overflow-y-scroll">
-            {events.map((e, index) => (
-                <Event key={index} event={e} setEventDetails={setEventDetails}/>
-            ))
-            }
-
-        </div>
-    )
-}
+export default function EventsScrollContainer({
+  events,
+  setEventDetails,
+}: EventsProps) {
+  return (
+    <div className="dashboard bg-white-background h-[43vh] overflow-y-scroll">
+      {events.map((e, index) => (
+        <Event key={index} event={e} setEventDetails={setEventDetails} />
+      ))}
+    </div>
+  );
+}
diff --git a/web/src/components/Dashboard/DashboardMain/UpcomingEvent.tsx b/web/src/components/Dashboard/DashboardMain/UpcomingEvent.tsx
@@ -1,9 +1,8 @@
-
 const UpcomingEvent = ({ event }: any) => {
-  const startTimestamp = event.start_date_time
-  const startDate = startTimestamp.toDate()
-  const endTimestamp = event.end_date_time
-  const endDate = endTimestamp.toDate()
+  const startTimestamp = event.start_date_time;
+  const startDate = startTimestamp.toDate();
+  //const endTimestamp = event.end_date_time;
+  //const endDate = endTimestamp.toDate();
 
   return (
     <div className="flex flex-col bg-white text-black rounded-xl pl-10 pt-5 border-solid border-2 border-slate-100 mr-[1em]">
@@ -12,7 +11,9 @@ const UpcomingEvent = ({ event }: any) => {
         src={event.image || "./public/assets/dashboard/emptyEventImage.png"}
         alt="event image"
       />
-      <p className="text-sm mt-[1em]">Date: {startDate.toLocaleDateString("en-US")}</p>
+      <p className="text-sm mt-[1em]">
+        Date: {startDate.toLocaleDateString("en-US")}
+      </p>
       <h2 className="text-xl font-semibold">{event.event_title}</h2>
       <p className="text-sm">{event.location}</p>
     </div>

diff --git a/web/src/components/Dashboard/Leaderboard.tsx b/web/src/components/Dashboard/Leaderboard.tsx
@@ -3,13 +3,6 @@ import { useState, useEffect } from "react";
 import { db } from "../../firebase/firebase";
 import { collection, getDocs } from "firebase/firestore";
 
-interface LeaderboardEntryProps {
-  rank: number;
-  img: string;
-  name: string;
-  hours: number;
-}
-
 function Leaderboard() {
   const profileImg = "assets/EventHighlights/Events/BlindLowVision/imgA.png"; // Temporary image for the leaderboard
   const name = "John Doe"; // Temporary name for the leaderboard

diff --git a/web/src/components/Dashboard/LeaderboardEntry.tsx b/web/src/components/Dashboard/LeaderboardEntry.tsx
@@ -1,21 +1,26 @@
-interface LeaderboardEntryProps {
-    rank: number;
-    img: string;
-    name: string;
-    hours: number;
-}
-
-function LeaderboardEntry({rank, img, fname, lname, hours }: any) {
+function LeaderboardEntry({ rank, img, fname, lname, hours }: any) {
   return (
     <div className="w-full mb-5 bg-white flex flex-row items-center">
-      <p className="w-[10%] text-detail text-primary-dark text-center">{rank}</p>
-        <div className="w-[80%] flex flex-row items-center justify-start pl-[12%]">
-            <img src={img} alt="profile" className="object-cover w-[30px] h-[30px] rounded-full mt-[-15px] mr-2" />
-            <p className="text-[9pt] truncate">{fname} {lname}</p>
-        </div>
-        {hours ? <p className="w-[10%] text-[9pt] text-primary text-center">{hours}</p> : <p className="w-[10%] text-[9pt] text-primary text-center">0</p>}
+      <p className="w-[10%] text-detail text-primary-dark text-center">
+        {rank}
+      </p>
+      <div className="w-[80%] flex flex-row items-center justify-start pl-[12%]">
+        <img
+          src={img}
+          alt="profile"
+          className="object-cover w-[30px] h-[30px] rounded-full mt-[-15px] mr-2"
+        />
+        <p className="text-[9pt] truncate">
+          {fname} {lname}
+        </p>
+      </div>
+      {hours ? (
+        <p className="w-[10%] text-[9pt] text-primary text-center">{hours}</p>
+      ) : (
+        <p className="w-[10%] text-[9pt] text-primary text-center">0</p>
+      )}
     </div>
   );
 }
 
-export default LeaderboardEntry;
+export default LeaderboardEntry;
diff --git a/web/src/components/Dashboard/dashboardProfile/ProfileMyProfileOverview.tsx b/web/src/components/Dashboard/dashboardProfile/ProfileMyProfileOverview.tsx
@@ -1,44 +1,63 @@
-import { useState, useContext } from 'react';
+import { useContext } from "react";
 import ProfileEditModal from "../dashboardProfile/ProfileEditModal";
 import ProfileEditModalContext from "../../../context/ProfileEditModalContext";
 
-
 interface ProfileProps {
   firstName: string;
   lastName: string;
   email: string;
   mobile: string;
-  upi: string
-  dob: string
-  gender: string
-  yearLevel: string
+  upi: string;
+  dob: string;
+  gender: string;
+  yearLevel: string;
   dietary: string[];
-  license: string
-  emergencyFirstName: string
-  emergencyLastName: string
-  relationship: string
-  emergencyMobile: string
+  license: string;
+  emergencyFirstName: string;
+  emergencyLastName: string;
+  relationship: string;
+  emergencyMobile: string;
 }
 
-const ProfileMyProfileOverview = ({ firstName, lastName, email, gender, mobile, upi, dob, yearLevel, dietary, license, emergencyFirstName, emergencyLastName, relationship, emergencyMobile }: ProfileProps) => {
-    const { showModal, setShowModal } = useContext(ProfileEditModalContext);
+const ProfileMyProfileOverview = ({
+  firstName,
+  lastName,
+  email,
+  gender,
+  mobile,
+  upi,
+  dob,
+  yearLevel,
+  dietary,
+  license,
+  emergencyFirstName,
+  emergencyLastName,
+  relationship,
+  emergencyMobile,
+}: ProfileProps) => {
+  const { showModal, setShowModal } = useContext(ProfileEditModalContext);
 
   function handleShowModal() {
-      setShowModal(true);
+    setShowModal(true);
   }
 
   return (
     <>
-      {showModal && (<ProfileEditModal/>)}
+      {showModal && <ProfileEditModal />}
       <div
         className="dashboard bg-white rounded-2xl shadow-md w-full flex flex-col"
         style={{
-          padding: '30px',  
+          padding: "30px",
         }}
       >
         <div className="flex justify-between mb-6">
-          <h2 className="dashboard text-heading2 text-primary">Profile Overview</h2>
-          <button className="dashboard text-body-heading text-primary underline bg-transparent" onClick={ handleShowModal }>
+          <h2 className="dashboard text-heading2 text-primary">
+            Profile Overview
+          </h2>
+          <button
+            className="dashboard text-body-heading text-primary underline bg-transparent"
+            onClick={handleShowModal}
+          >
             Edit Profile
           </button>
         </div>
@@ -49,7 +68,9 @@ const ProfileMyProfileOverview = ({ firstName, lastName, email, gender, mobile,
           <div className="grid grid-cols-2 md:grid-cols-4 gap-x-12 gap-6">
             {/* Row 1 */}
             <div>
-              <label className="dashboard text-detail-regular">First Name</label>
+              <label className="dashboard text-detail-regular">
+                First Name
+              </label>
               <p className="text-body">{firstName}</p>
             </div>
             <div>
@@ -66,15 +87,21 @@ const ProfileMyProfileOverview = ({ firstName, lastName, email, gender, mobile,
             </div>
             {/* Row 2 */}
             <div>
-              <label className="dashboard text-detail-regular">Preferred Email</label>
+              <label className="dashboard text-detail-regular">
+                Preferred Email
+              </label>
               <p className="text-body">{email}</p>
             </div>
             <div>
-              <label className="dashboard text-detail-regular">Mobile Number</label>
+              <label className="dashboard text-detail-regular">
+                Mobile Number
+              </label>
               <p className="text-body">{mobile}</p>
             </div>
             <div>
-              <label className="dashboard text-detail-regular">Date of Birth</label>
+              <label className="dashboard text-detail-regular">
+                Date of Birth
+              </label>
               <p className="text-body">{dob}</p>
             </div>
           </div>
@@ -86,39 +113,53 @@ const ProfileMyProfileOverview = ({ firstName, lastName, email, gender, mobile,
           <div className="grid grid-cols-2 md:grid-cols-4 gap-x-12 gap-6">
             {/* Row 1 */}
             <div>
-              <label className="dashboard text-detail-regular">Year Level</label>
+              <label className="dashboard text-detail-regular">
+                Year Level
+              </label>
               <p className="text-body">{yearLevel}</p>
             </div>
             <div>
-              <label className="dashboard text-detail-regular">Dietary Requirements</label>
+              <label className="dashboard text-detail-regular">
+                Dietary Requirements
+              </label>
               <p className="text-body">{dietary}</p>
             </div>
             <div>
-              <label className="dashboard text-detail-regular">Driver's License</label>
+              <label className="dashboard text-detail-regular">
+                Driver's License
+              </label>
               <p className="text-body">{license}</p>
             </div>
           </div>
         </div>
 
         {/* Emergency Contact Details Section */}
         <div className="mb-8">
-          <h3 className="dashboard text-heading3 mb-4">Emergency Contact Details</h3>
+          <h3 className="dashboard text-heading3 mb-4">
+            Emergency Contact Details
+          </h3>
           <div className="grid grid-cols-2 md:grid-cols-4 gap-x-12 gap-6">
             {/* Row 1 */}
             <div>
-              <label className="dashboard text-detail-regular">First Name</label>
+              <label className="dashboard text-detail-regular">
+                First Name
+              </label>
               <p className="text-body">{emergencyFirstName}</p>
             </div>
             <div>
               <label className="dashboard text-detail-regular">Last Name</label>
               <p className="text-body">{emergencyLastName}</p>
             </div>
             <div>
-              <label className="dashboard text-detail-regular">Relationship</label>
+              <label className="dashboard text-detail-regular">
+                Relationship
+              </label>
               <p className="text-body">{relationship}</p>
             </div>
             <div>
-              <label className="dashboard text-detail-regular">Mobile Number</label>
+              <label className="dashboard text-detail-regular">
+                Mobile Number
+              </label>
               <p className="text-body">{emergencyMobile}</p>
             </div>
           </div>

diff --git a/web/src/components/TestComponent.tsx b/web/src/components/TestComponent.tsx
@@ -1,4 +1,4 @@
-import EventsScrollContainer from "../components/Dashboard/dashboardDiscover/EventsScrollContainer"
+import EventsScrollContainer from "../components/Dashboard/DashboardDiscover/EventsScrollContainer";
 export default function TestingComponent() {
   return (
     <div>