Reorder home page section

Fix live page; Adjust to new sessionize data format

Author: andreas-taranetz

src/components/pages/home/schedule/schedule.jsx

@@ -6,11 +6,17 @@ const Schedule = () => (
   <section className="safe-paddings container-md text-center">
     <h2 id="schedule">Schedule</h2>
     <p className="text-balance">
-      See the full schedule and mark talks you're interested in so you won't miss a session.
+      Check out what is happening right now, or see the full schedule and mark talks you're
+      interested in so you won't miss a session.
     </p>
-    <Button to={scheduleUrl} className="my-6">
-      Full schedule
-    </Button>
+    <div className="flex flex-row justify-center gap-4 flex-wrap">
+      <Button to="/live" className="my-6">
+        Live now
+      </Button>
+      <Button to={scheduleUrl} className="my-6">
+        Full schedule
+      </Button>
+    </div>
     {/* <div className="flex flex-row flex-wrap justify-around md:flex-col mt-4 gap-y-2">
       <div className="w-[32%] md:w-full bg-gray-12 rounded-md p-4 flex-col inline-block justify-center content-start">
         <strong className="text-sm bg-orange py-1 px-2 rounded-full">Tuesday, October 8</strong>

src/components/pages/live/current-sessions/current-sessions.jsx

@@ -1,8 +1,7 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React from 'react';
 
 import { getSessionUrl } from '../../../../constants/sessionize-app';
-import { loadAllSessions } from '../../../shared/data/loadAllSessions';
-import { set } from 'lodash';
+import { useLoadAllSessions } from '../../../shared/data/loadAllSessions';
 
 const getSessionTime = (session) => {
   const start = new Date(session.startsAt);
@@ -28,13 +27,14 @@ const Session = ({ session }) => {
 
 const SessionsForRoom = ({ roomName, allSessions }) => {
   const currentTime = new Date();
-  const sessionsOfRoom = allSessions.find(s => s.groupName == roomName)?.sessions
+  const sessionsOfRoom = allSessions
+    .filter(s => s.room == roomName)
     .filter(s => new Date(s.startsAt).getDate() == currentTime.getDate())?? [];
   const currentSession = sessionsOfRoom.filter(s => new Date(s.startsAt) <= currentTime)
     .filter(s => new Date(s.endsAt) > currentTime)[0];
   const nextSession = sessionsOfRoom.find(s => new Date(s.startsAt) > currentTime);
 
-  if(sessionsOfRoom.length == 0) return;
+  if(sessionsOfRoom.length === 0) return <div className="col-span-1"/>;
 
   return (
     <div className="col-span-1">
@@ -47,14 +47,12 @@ const SessionsForRoom = ({ roomName, allSessions }) => {
 };
 
 const CurrentSessions = () => {
-  const allSessions = loadAllSessions(30000);
-
+  const allSessions = useLoadAllSessions(30000);
   if (!allSessions) {
     return <p>Loading...</p>
   }
   const currentDate = new Date().getDate();
-  const isAnythingScheduledToday = allSessions.flatMap(group => group.sessions)
-    .some(session =>  new Date(session.startsAt).getDate() === currentDate);
+  const isAnythingScheduledToday = allSessions.some(session =>  new Date(session.startsAt).getDate() === currentDate);
 
   if(!isAnythingScheduledToday) return <p>Nothing scheduled today</p>
 

src/components/pages/speakers/speakers.jsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 
+import Button from 'components/shared/button/button';
+import links from '../../../constants/links';
 import { loadAllSpeakers, loadKeynoteSpeakers } from '../../shared/data/loadAllSpeakers';
 import Person from '../../shared/person';
 import SpeakerModal from '../../shared/speaker/speakerModal';
-import Button from 'components/shared/button/button';
-import links from '../../../constants/links';
 
 const Speakers = ({ keynote }) => {
   const [selectedSpeaker, setSelectedSpeaker] = useState(null);

src/components/shared/data/loadAllSessions.jsx

@@ -1,14 +1,14 @@
 import { useState, useEffect } from 'react';
 
-export const loadAllSessions = (refreshInterval) => {
+export const useLoadAllSessions = (refreshInterval) => {
   const [sessions, setSessions] = useState([]);
 
   useEffect(() => {
     const fetchSpeakers = async () => {
       try {
         const response = await fetch('https://sessionize.com/api/v2/fetamiym/view/Sessions');
         const data = await response.json();
-        setSessions(data);
+        setSessions(data.at(0).sessions ?? []);
       } catch (error) {
         console.error('Error fetching sessions:', error);
       }
@@ -24,7 +24,7 @@ export const loadAllSessions = (refreshInterval) => {
     return () => {
       if (interval) clearInterval(interval);
     };
-  }, []);
+  }, [refreshInterval]);
 
   return sessions;
 };

src/pages/index.jsx

@@ -17,11 +17,11 @@ import Speakers from '../components/pages/speakers/speakers';
 const HomePage = () => (
   <Layout homepage>
     <Hero />
-    <Tickets />
+    <Schedule />
     {/* <Cfp /> */}
     {/* <Info /> */}
     <Speakers keynote />
-    <Schedule />
+    <Tickets />
     <Venue />
     <WrapUp />
     {/* <Sponsors /> */}