From 3deaba75ea25662007f18d3e39676a38d07b813e Mon Sep 17 00:00:00 2001 From: Win Cheng Date: Thu, 25 Apr 2024 18:35:24 -0700 Subject: [PATCH 1/5] WhatIsHackDavis text removed based on link --- app/(pages)/(event-page)/event/page.tsx | 11 ++++++++++ .../event/schedule/_components/Schedule.tsx | 2 +- .../(event-page)/event/schedule/page.tsx | 2 +- .../_components/Landing/Landing.module.scss | 1 + .../_components/Landing/Landing.tsx | 2 +- .../WhatIsHackdavis/WhatIsHackdavis.tsx | 20 ++++++++++++------- 6 files changed, 28 insertions(+), 10 deletions(-) diff --git a/app/(pages)/(event-page)/event/page.tsx b/app/(pages)/(event-page)/event/page.tsx index 34f59ca6..15772c07 100644 --- a/app/(pages)/(event-page)/event/page.tsx +++ b/app/(pages)/(event-page)/event/page.tsx @@ -8,7 +8,9 @@ import RiverCow from '../../(index-page)/_components/RiverCow/RiverCow'; import BottomSection from '../../(index-page)/_components/BottomSection/BottomSection'; import Sponsors from '../../(index-page)/_components/Sponsors/Sponsors'; import Resources from '../../(index-page)/_components/Resources/Resources'; +import Schedule from '../event/schedule/_components/Schedule'; import { resourcePackDOE } from '../../_data/resourceData'; +import Link from 'next/link'; export default function Home() { return ( @@ -21,6 +23,15 @@ export default function Home() {
+
+ + + +
diff --git a/app/(pages)/(event-page)/event/schedule/_components/Schedule.tsx b/app/(pages)/(event-page)/event/schedule/_components/Schedule.tsx index d0cbf416..d0cfd584 100644 --- a/app/(pages)/(event-page)/event/schedule/_components/Schedule.tsx +++ b/app/(pages)/(event-page)/event/schedule/_components/Schedule.tsx @@ -83,7 +83,7 @@ export default function Schedule() { }, [currentDay, allEvents, selectedFilters]); return ( -
+

Schedule diff --git a/app/(pages)/(event-page)/event/schedule/page.tsx b/app/(pages)/(event-page)/event/schedule/page.tsx index 4d126c6e..ebe91bc2 100644 --- a/app/(pages)/(event-page)/event/schedule/page.tsx +++ b/app/(pages)/(event-page)/event/schedule/page.tsx @@ -2,7 +2,7 @@ import Schedule from './_components/Schedule'; export default function SchedulePage() { return ( -
+
); diff --git a/app/(pages)/(index-page)/_components/Landing/Landing.module.scss b/app/(pages)/(index-page)/_components/Landing/Landing.module.scss index bc6de3d9..99331625 100644 --- a/app/(pages)/(index-page)/_components/Landing/Landing.module.scss +++ b/app/(pages)/(index-page)/_components/Landing/Landing.module.scss @@ -41,6 +41,7 @@ $tablet-breakpoint: 1007px; .landing_container{ width: 100%; + // height: 80%; position: relative; overflow: hidden; diff --git a/app/(pages)/(index-page)/_components/Landing/Landing.tsx b/app/(pages)/(index-page)/_components/Landing/Landing.tsx index 8b278c0e..19bca92f 100644 --- a/app/(pages)/(index-page)/_components/Landing/Landing.tsx +++ b/app/(pages)/(index-page)/_components/Landing/Landing.tsx @@ -5,7 +5,7 @@ import styles from './Landing.module.scss'; export default function Landing() { return ( -
+
diff --git a/app/(pages)/(index-page)/_components/WhatIsHackdavis/WhatIsHackdavis.tsx b/app/(pages)/(index-page)/_components/WhatIsHackdavis/WhatIsHackdavis.tsx index 99c3a39d..92b2a050 100644 --- a/app/(pages)/(index-page)/_components/WhatIsHackdavis/WhatIsHackdavis.tsx +++ b/app/(pages)/(index-page)/_components/WhatIsHackdavis/WhatIsHackdavis.tsx @@ -2,6 +2,7 @@ import { useEffect, useState, useRef } from 'react'; import styles from './WhatIsHackdavis.module.scss'; import Image from 'next/image'; +import { usePathname } from 'next/navigation'; // Import useRouter // statically import images import logLeftRock from 'public/index/whatIsHackdavis/log_left-rock.png'; @@ -39,15 +40,20 @@ export default function WhatIsHackdavis() { }; }, []); + const pathname = usePathname(); + const isDOE = pathname.includes('event'); + return (
-
-

What is HackDavis?

-

- HackDavis is one of the top 50 hackathons in the world, where over 750 - creators, and leaders come together to create for social good. -

-
+ {!isDOE && ( +
+

What is HackDavis?

+

+ HackDavis is one of the top 50 hackathons in the world, where over + 750 creators, and leaders come together to create for social good. +

+
+ )}
Date: Thu, 25 Apr 2024 19:08:34 -0700 Subject: [PATCH 2/5] Top part of Schedule sticky --- .../event/schedule/_components/Schedule.tsx | 60 ++++++++++--------- .../(event-page)/event/schedule/page.tsx | 2 +- app/(pages)/_data/resourceData.tsx | 6 +- 3 files changed, 37 insertions(+), 31 deletions(-) diff --git a/app/(pages)/(event-page)/event/schedule/_components/Schedule.tsx b/app/(pages)/(event-page)/event/schedule/_components/Schedule.tsx index d0cfd584..54cd5f9e 100644 --- a/app/(pages)/(event-page)/event/schedule/_components/Schedule.tsx +++ b/app/(pages)/(event-page)/event/schedule/_components/Schedule.tsx @@ -83,38 +83,40 @@ export default function Schedule() { }, [currentDay, allEvents, selectedFilters]); return ( -
-
-

- Schedule -

-
- {currentDay.dayString} -
- setCurrentDay(eventDays[0])} - style={{ - color: currentDay === eventDays[0] ? 'gray' : 'black', - }} - /> - setCurrentDay(eventDays[1])} - style={{ - color: currentDay === eventDays[1] ? 'gray' : 'black', - }} - /> +
+
+
+

+ Schedule +

+
+ {currentDay.dayString} +
+ setCurrentDay(eventDays[0])} + style={{ + color: currentDay === eventDays[0] ? 'gray' : 'black', + }} + /> + setCurrentDay(eventDays[1])} + style={{ + color: currentDay === eventDays[1] ? 'gray' : 'black', + }} + /> +
+
+ +
-
- -
-
+
diff --git a/app/(pages)/(event-page)/event/schedule/page.tsx b/app/(pages)/(event-page)/event/schedule/page.tsx index ebe91bc2..86439da9 100644 --- a/app/(pages)/(event-page)/event/schedule/page.tsx +++ b/app/(pages)/(event-page)/event/schedule/page.tsx @@ -2,7 +2,7 @@ import Schedule from './_components/Schedule'; export default function SchedulePage() { return ( -
+
); diff --git a/app/(pages)/_data/resourceData.tsx b/app/(pages)/_data/resourceData.tsx index 63de6ac1..b7bf61a6 100644 --- a/app/(pages)/_data/resourceData.tsx +++ b/app/(pages)/_data/resourceData.tsx @@ -28,7 +28,11 @@ export const resourcePackDOE: ResourceType[] = [ title: 'STARTER PACK', url: 'https://hackdavis.notion.site/HackDavis-2024-Starter-Pack-bea21741698046e99e46f13c9b311039?pvs=4', }, - { icon: , title: 'CREATOR JAMS', url: 'temp' }, + { + icon: , + title: 'CREATOR JAMS', + url: 'https://open.spotify.com/playlist/5Izx2G67iaShHyLeShoOaK?si=LonAnRy-TXySP51NDfbZvw&pi=u-hA1Wp2ebTNWb', + }, { icon: event map logo., From 9d03eeb7e93a6abefb4dc0b3a7670a44b7862447 Mon Sep 17 00:00:00 2001 From: Win Cheng Date: Thu, 25 Apr 2024 21:10:06 -0700 Subject: [PATCH 3/5] Scrolling to desired time works, but moves the entire page in landing --- app/(pages)/(event-page)/event/page.tsx | 6 ++-- .../schedule/_components/Calculations.ts | 2 +- .../event/schedule/_components/Schedule.tsx | 10 ++++-- .../event/schedule/_components/TimeTable.tsx | 34 +++++++++++++++++++ 4 files changed, 46 insertions(+), 6 deletions(-) diff --git a/app/(pages)/(event-page)/event/page.tsx b/app/(pages)/(event-page)/event/page.tsx index 15772c07..045cc773 100644 --- a/app/(pages)/(event-page)/event/page.tsx +++ b/app/(pages)/(event-page)/event/page.tsx @@ -11,8 +11,10 @@ import Resources from '../../(index-page)/_components/Resources/Resources'; import Schedule from '../event/schedule/_components/Schedule'; import { resourcePackDOE } from '../../_data/resourceData'; import Link from 'next/link'; +import { useRef } from 'react'; export default function Home() { + const scheduleRef = useRef(null); return ( @@ -26,10 +28,10 @@ export default function Home() {
- +
diff --git a/app/(pages)/(event-page)/event/schedule/_components/Calculations.ts b/app/(pages)/(event-page)/event/schedule/_components/Calculations.ts index 194606ba..aeb1ac0c 100644 --- a/app/(pages)/(event-page)/event/schedule/_components/Calculations.ts +++ b/app/(pages)/(event-page)/event/schedule/_components/Calculations.ts @@ -32,7 +32,7 @@ export function generate24HRClock(startTime: Date): Date[] { export function createTimeChunks(events: Event[]): TimeChunk[] { const timeChunks: TimeChunk[] = []; - console.log(events); + // console.log(events); const sortedEvents = events.sort( (a, b) => a.startTime.getTime() - b.startTime.getTime() diff --git a/app/(pages)/(event-page)/event/schedule/_components/Schedule.tsx b/app/(pages)/(event-page)/event/schedule/_components/Schedule.tsx index 54cd5f9e..26f083d6 100644 --- a/app/(pages)/(event-page)/event/schedule/_components/Schedule.tsx +++ b/app/(pages)/(event-page)/event/schedule/_components/Schedule.tsx @@ -2,12 +2,16 @@ import TimeTable from './TimeTable'; import { ChevronLeft, ChevronRight } from 'lucide-react'; -import { useEffect, useState } from 'react'; +import { MutableRefObject, useEffect, useState } from 'react'; import type { TimeChunk, Event } from '@/public/types/Schedule.types'; import { createTimeChunks } from './Calculations'; import Filters from './Filters'; import { getAllEvents } from '@/app/(api)/_actions/events/getEvents'; +interface ScheduleProps { + ref?: MutableRefObject; +} + type ScheduleDay = { dayString: string; day: Date; @@ -57,7 +61,7 @@ function filterEventByType(events: Event[], types: string[]): Event[] { return events.filter((event) => types.includes(event.type)); } -export default function Schedule() { +export default function Schedule({ ref }: ScheduleProps) { const [currentDay, setCurrentDay] = useState(eventDays[0]); const [timeChunks, setTimeChunks] = useState([]); const [allEvents, setAllEvents] = useState([]); @@ -116,7 +120,7 @@ export default function Schedule() { />
-
+
diff --git a/app/(pages)/(event-page)/event/schedule/_components/TimeTable.tsx b/app/(pages)/(event-page)/event/schedule/_components/TimeTable.tsx index 3b4f7047..e1d6d270 100644 --- a/app/(pages)/(event-page)/event/schedule/_components/TimeTable.tsx +++ b/app/(pages)/(event-page)/event/schedule/_components/TimeTable.tsx @@ -1,6 +1,7 @@ import { calcEventRows, generate24HRClock } from './Calculations'; import EventContent from './_components/EventContent'; import type { TimeChunk } from '../../../../../../public/types/Schedule.types'; +import { useRef, useEffect, forwardRef } from 'react'; interface TimeTableProps { timeChunks: TimeChunk[]; @@ -27,6 +28,38 @@ const rowSize = '50px'; export default function TimeTable({ timeChunks, startTime }: TimeTableProps) { const clockTimes = generate24HRClock(startTime); + // Create a ref to store the timetable divs + const timeRefs = useRef<(HTMLDivElement | null)[]>([]); + timeRefs.current = []; + + // Function to add a div to the refs array + const addToRefs = (el: HTMLDivElement) => { + if (el && !timeRefs.current.includes(el)) { + timeRefs.current.push(el); + } + }; + + useEffect(() => { + // const now = new Date(); + const offset = 1; + const now = new Date(2022, 3, 27, 20 + offset, 0); // April 27, 2022 21:00 + + const currentTimeIndex = clockTimes.findIndex( + (time) => + time.getHours() === now.getHours() && + time.getMinutes() === now.getMinutes() + ); + + if (currentTimeIndex !== -1 && timeRefs.current[currentTimeIndex]) { + const currentElement = timeRefs.current[currentTimeIndex]; + if (currentElement !== null) { + currentElement.scrollIntoView({ + behavior: 'smooth', + block: 'nearest', + }); + } + } + }, []); return (
@@ -43,6 +76,7 @@ export default function TimeTable({ timeChunks, startTime }: TimeTableProps) { return (
Date: Thu, 25 Apr 2024 22:41:31 -0700 Subject: [PATCH 4/5] Schedule is put in Resources for now --- app/(pages)/(event-page)/event/page.tsx | 21 ++++++----- .../event/schedule/_components/Schedule.tsx | 18 +++++----- .../event/schedule/_components/TimeTable.tsx | 36 ++++++++----------- app/(pages)/_data/resourceData.tsx | 8 +++++ 4 files changed, 45 insertions(+), 38 deletions(-) diff --git a/app/(pages)/(event-page)/event/page.tsx b/app/(pages)/(event-page)/event/page.tsx index 045cc773..7cd01eb6 100644 --- a/app/(pages)/(event-page)/event/page.tsx +++ b/app/(pages)/(event-page)/event/page.tsx @@ -8,32 +8,35 @@ import RiverCow from '../../(index-page)/_components/RiverCow/RiverCow'; import BottomSection from '../../(index-page)/_components/BottomSection/BottomSection'; import Sponsors from '../../(index-page)/_components/Sponsors/Sponsors'; import Resources from '../../(index-page)/_components/Resources/Resources'; -import Schedule from '../event/schedule/_components/Schedule'; +// import Schedule from '../event/schedule/_components/Schedule'; import { resourcePackDOE } from '../../_data/resourceData'; -import Link from 'next/link'; -import { useRef } from 'react'; +// import Link from 'next/link'; export default function Home() { - const scheduleRef = useRef(null); return ( -
+
-
- + -
+
*/}
diff --git a/app/(pages)/(event-page)/event/schedule/_components/Schedule.tsx b/app/(pages)/(event-page)/event/schedule/_components/Schedule.tsx index 26f083d6..850a22f0 100644 --- a/app/(pages)/(event-page)/event/schedule/_components/Schedule.tsx +++ b/app/(pages)/(event-page)/event/schedule/_components/Schedule.tsx @@ -2,15 +2,12 @@ import TimeTable from './TimeTable'; import { ChevronLeft, ChevronRight } from 'lucide-react'; -import { MutableRefObject, useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import type { TimeChunk, Event } from '@/public/types/Schedule.types'; import { createTimeChunks } from './Calculations'; import Filters from './Filters'; import { getAllEvents } from '@/app/(api)/_actions/events/getEvents'; - -interface ScheduleProps { - ref?: MutableRefObject; -} +import { useRef } from 'react'; type ScheduleDay = { dayString: string; @@ -61,12 +58,13 @@ function filterEventByType(events: Event[], types: string[]): Event[] { return events.filter((event) => types.includes(event.type)); } -export default function Schedule({ ref }: ScheduleProps) { +export default function Schedule() { const [currentDay, setCurrentDay] = useState(eventDays[0]); const [timeChunks, setTimeChunks] = useState([]); const [allEvents, setAllEvents] = useState([]); const [startTime, setStartTime] = useState(eventDays[0].startDay); const [selectedFilters, setSelectedFilters] = useState(FilterItems); + const timetableRef = useRef(null); //fetching events from DB and creating time chunks useEffect(() => { @@ -120,8 +118,12 @@ export default function Schedule({ ref }: ScheduleProps) { />
-
- +
+
); diff --git a/app/(pages)/(event-page)/event/schedule/_components/TimeTable.tsx b/app/(pages)/(event-page)/event/schedule/_components/TimeTable.tsx index e1d6d270..4a1cb120 100644 --- a/app/(pages)/(event-page)/event/schedule/_components/TimeTable.tsx +++ b/app/(pages)/(event-page)/event/schedule/_components/TimeTable.tsx @@ -1,11 +1,12 @@ import { calcEventRows, generate24HRClock } from './Calculations'; import EventContent from './_components/EventContent'; import type { TimeChunk } from '../../../../../../public/types/Schedule.types'; -import { useRef, useEffect, forwardRef } from 'react'; +import { useEffect } from 'react'; interface TimeTableProps { timeChunks: TimeChunk[]; startTime: Date; + timetableRef: React.RefObject; } const colorActivities: Record = { @@ -26,23 +27,14 @@ const highlightColor: Record = { const rowSize = '50px'; -export default function TimeTable({ timeChunks, startTime }: TimeTableProps) { +export default function TimeTable({ + timeChunks, + startTime, + timetableRef, +}: TimeTableProps) { const clockTimes = generate24HRClock(startTime); - // Create a ref to store the timetable divs - const timeRefs = useRef<(HTMLDivElement | null)[]>([]); - timeRefs.current = []; - - // Function to add a div to the refs array - const addToRefs = (el: HTMLDivElement) => { - if (el && !timeRefs.current.includes(el)) { - timeRefs.current.push(el); - } - }; - useEffect(() => { - // const now = new Date(); - const offset = 1; - const now = new Date(2022, 3, 27, 20 + offset, 0); // April 27, 2022 21:00 + const now = new Date(); const currentTimeIndex = clockTimes.findIndex( (time) => @@ -50,16 +42,18 @@ export default function TimeTable({ timeChunks, startTime }: TimeTableProps) { time.getMinutes() === now.getMinutes() ); - if (currentTimeIndex !== -1 && timeRefs.current[currentTimeIndex]) { - const currentElement = timeRefs.current[currentTimeIndex]; - if (currentElement !== null) { + if (currentTimeIndex !== -1 && timetableRef.current) { + const currentElement = timetableRef.current.children[ + currentTimeIndex + ] as HTMLDivElement; + if (currentElement) { currentElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', }); } } - }, []); + }, [timetableRef, clockTimes]); // Include timetableRef in the dependency array return (
@@ -70,13 +64,13 @@ export default function TimeTable({ timeChunks, startTime }: TimeTableProps) { gridTemplateColumns: '1fr 15fr', gridAutoRows: rowSize, }} + ref={timetableRef} > {clockTimes.map((time, index) => { const isHour = time.getMinutes() === 0; return (
, + title: 'SCHEDULE', + url: '/event/schedule', + }, ]; From 9dcf3ce946205d76e8a6132a411b4fa59b68bbaf Mon Sep 17 00:00:00 2001 From: Win Cheng Date: Thu, 25 Apr 2024 22:42:12 -0700 Subject: [PATCH 5/5] Removed Icon --- app/(pages)/_data/resourceData.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/(pages)/_data/resourceData.tsx b/app/(pages)/_data/resourceData.tsx index 281bf337..3119df50 100644 --- a/app/(pages)/_data/resourceData.tsx +++ b/app/(pages)/_data/resourceData.tsx @@ -1,5 +1,4 @@ import { SiNotion, SiProtoncalendar, SiSpotify } from 'react-icons/si'; -import { LuCalendarClock } from 'react-icons/lu'; import { FaCalendarDay } from 'react-icons/fa6'; import Image from 'next/image'; import safetyIcon from 'public/event/safetyIcon.svg';