Merge pull request #96 from HackDavis/feat/ScheduleUI

Feat/schedule UI
HackDavis · Apr 26, 2024 · 18b5bf9 · 18b5bf9
2 parents 8f81c1f + 9dcf3ce
commit 18b5bf9
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 41 deletions.
diff --git a/app/(pages)/(event-page)/event/page.tsx b/app/(pages)/(event-page)/event/page.tsx
@@ -8,19 +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 { resourcePackDOE } from '../../_data/resourceData';
+// import Link from 'next/link';
 
 export default function Home() {
   return (
     <LoadingProvider>
       <Loader />
-      <main style={{ backgroundColor: 'white', scrollBehavior: 'smooth' }}>
+      <main
+        style={{
+          backgroundColor: 'white',
+          scrollBehavior: 'smooth',
+        }}
+      >
         <div id="landing">
           <LandingEvent />
         </div>
         <div id="resources">
           <Resources resourcePack={resourcePackDOE} />
         </div>
+        {/* <div
+          id="schedule"
+          className="tw-w-full tw-overflow-clip tw-border tw-border-red-300"
+          style={{ height: '900px' }}
+        >
+          <Link target="_blank" href="/event/schedule">
+            <Schedule />
+          </Link>
+        </div> */}
         <div id="whatishackdavis">
           <WhatIsHackdavis />
         </div>

diff --git 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
@@ -7,6 +7,7 @@ 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';
+import { useRef } from 'react';
 
 type ScheduleDay = {
   dayString: string;
@@ -63,6 +64,7 @@ export default function Schedule() {
   const [allEvents, setAllEvents] = useState<Event[]>([]);
   const [startTime, setStartTime] = useState(eventDays[0].startDay);
   const [selectedFilters, setSelectedFilters] = useState<string[]>(FilterItems);
+  const timetableRef = useRef<HTMLDivElement>(null);
 
   //fetching events from DB and creating time chunks
   useEffect(() => {
@@ -84,39 +86,45 @@ export default function Schedule() {
 
   return (
     <main className="tw-flex tw-flex-col">
-      <div className="tw-flex tw-flex-wrap tw-items-center tw-justify-between tw-py-4">
-        <h1 className="tw-pr-8 tw-text-4xl tw-font-semibold md:tw-text-6xl">
-          Schedule
-        </h1>
-        <div className="tw-flex tw-gap-2">
-          <span>{currentDay.dayString}</span>
-          <div className="tw-flex">
-            <ChevronLeft
-              className="hover:tw-cursor-pointer"
-              onClick={() => setCurrentDay(eventDays[0])}
-              style={{
-                color: currentDay === eventDays[0] ? 'gray' : 'black',
-              }}
-            />
-            <ChevronRight
-              className="hover:tw-cursor-pointer"
-              onClick={() => setCurrentDay(eventDays[1])}
-              style={{
-                color: currentDay === eventDays[1] ? 'gray' : 'black',
-              }}
-            />
+      <div className="tw-sticky tw-top-0 tw-z-40 tw-bg-white tw-px-1/10 tw-pt-24">
+        <div className=" tw-flex tw-flex-wrap tw-items-center tw-justify-between tw-py-4">
+          <h1 className="tw-pr-8 tw-text-4xl tw-font-semibold md:tw-text-6xl">
+            Schedule
+          </h1>
+          <div className="tw-flex tw-gap-2">
+            <span>{currentDay.dayString}</span>
+            <div className="tw-flex">
+              <ChevronLeft
+                className="hover:tw-cursor-pointer"
+                onClick={() => setCurrentDay(eventDays[0])}
+                style={{
+                  color: currentDay === eventDays[0] ? 'gray' : 'black',
+                }}
+              />
+              <ChevronRight
+                className="hover:tw-cursor-pointer"
+                onClick={() => setCurrentDay(eventDays[1])}
+                style={{
+                  color: currentDay === eventDays[1] ? 'gray' : 'black',
+                }}
+              />
+            </div>
           </div>
         </div>
+        <div className="tw-flex tw-flex-wrap">
+          <Filters
+            onFilterChange={setSelectedFilters}
+            FilterItems={FilterItems}
+          />
+        </div>
       </div>
-      <div className="tw-flex tw-flex-wrap">
-        <Filters
-          onFilterChange={setSelectedFilters}
-          FilterItems={FilterItems}
+      <div className="tw-px-1/10 tw-py-8">
+        <TimeTable
+          timeChunks={timeChunks}
+          startTime={startTime}
+          timetableRef={timetableRef}
         />
       </div>
-      <div className="tw-py-8">
-        <TimeTable timeChunks={timeChunks} startTime={startTime} />
-      </div>
     </main>
   );
 }
diff --git a/app/(pages)/(event-page)/event/schedule/_components/TimeTable.tsx b/app/(pages)/(event-page)/event/schedule/_components/TimeTable.tsx
@@ -1,10 +1,12 @@
 import { calcEventRows, generate24HRClock } from './Calculations';
 import EventContent from './_components/EventContent';
 import type { TimeChunk } from '../../../../../../public/types/Schedule.types';
+import { useEffect } from 'react';
 
 interface TimeTableProps {
   timeChunks: TimeChunk[];
   startTime: Date;
+  timetableRef: React.RefObject<HTMLDivElement>;
 }
 
 const colorActivities: Record<string, string> = {
@@ -25,8 +27,33 @@ const highlightColor: Record<string, string> = {
 
 const rowSize = '50px';
 
-export default function TimeTable({ timeChunks, startTime }: TimeTableProps) {
+export default function TimeTable({
+  timeChunks,
+  startTime,
+  timetableRef,
+}: TimeTableProps) {
   const clockTimes = generate24HRClock(startTime);
+  useEffect(() => {
+    const now = new Date();
+
+    const currentTimeIndex = clockTimes.findIndex(
+      (time) =>
+        time.getHours() === now.getHours() &&
+        time.getMinutes() === now.getMinutes()
+    );
+
+    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 (
     <main className="tw-w-full">
@@ -37,6 +64,7 @@ export default function TimeTable({ timeChunks, startTime }: TimeTableProps) {
           gridTemplateColumns: '1fr 15fr',
           gridAutoRows: rowSize,
         }}
+        ref={timetableRef}
       >
         {clockTimes.map((time, index) => {
           const isHour = time.getMinutes() === 0;

diff --git 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 (
-    <div className="tw-w-full tw-overflow-clip tw-bg-white tw-p-1/10 tw-py-36 sm:tw-py-1/10">
+    <div className="tw-w-full tw-overflow-clip tw-bg-white">
       <Schedule />
     </div>
   );

diff --git 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
@@ -5,7 +5,7 @@ import styles from './Landing.module.scss';
 
 export default function Landing() {
   return (
-    <main className={styles.landing}>
+    <main className="">
       <div className={styles.landing_container}>
         <div className={styles.form}>
           <Form />

diff --git 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 (
     <div ref={containerRef} className={styles.container}>
-      <div className={styles.text}>
-        <h1 className={styles.heading}>What is HackDavis?</h1>
-        <p className={styles.paragraph}>
-          HackDavis is one of the top 50 hackathons in the world, where over 750
-          creators, and leaders come together to create for social good.
-        </p>
-      </div>
+      {!isDOE && (
+        <div className={styles.text}>
+          <h1 className={styles.heading}>What is HackDavis?</h1>
+          <p className={styles.paragraph}>
+            HackDavis is one of the top 50 hackathons in the world, where over
+            750 creators, and leaders come together to create for social good.
+          </p>
+        </div>
+      )}
       <div className={styles.logStuff}>
         <div className={styles.logLeftSection}>
           <Image

diff --git a/app/(pages)/_data/resourceData.tsx b/app/(pages)/_data/resourceData.tsx
@@ -1,7 +1,9 @@
 import { SiNotion, SiProtoncalendar, SiSpotify } from 'react-icons/si';
+import { FaCalendarDay } from 'react-icons/fa6';
 import Image from 'next/image';
 import safetyIcon from 'public/event/safetyIcon.svg';
 import mapIcon from 'public/event/mapIcon.svg';
+// import { CalendarClock } from 'lucide-react';
 
 export type ResourceType = {
   icon: JSX.Element;
@@ -28,7 +30,11 @@ export const resourcePackDOE: ResourceType[] = [
     title: 'STARTER PACK',
     url: 'https://hackdavis.notion.site/HackDavis-2024-Starter-Pack-bea21741698046e99e46f13c9b311039?pvs=4',
   },
-  { icon: <SiSpotify />, title: 'CREATOR JAMS', url: 'temp' },
+  {
+    icon: <SiSpotify />,
+    title: 'CREATOR JAMS',
+    url: 'https://open.spotify.com/playlist/5Izx2G67iaShHyLeShoOaK?si=LonAnRy-TXySP51NDfbZvw&pi=u-hA1Wp2ebTNWb',
+  },
 
   {
     icon: <Image src={mapIcon} alt="event map logo." />,
@@ -40,4 +46,9 @@ export const resourcePackDOE: ResourceType[] = [
     title: 'SAFETY INFO',
     url: 'https://www.notion.so/hackdavis/HackDavis-Safety-42561065cd254194bc26bcf48432f36a',
   },
+  {
+    icon: <FaCalendarDay />,
+    title: 'SCHEDULE',
+    url: '/event/schedule',
+  },
 ];