format live section

frontend-ce · Sep 11, 2024 · 49cb969 · 49cb969
1 parent 8e4a9d5
commit 49cb969
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 88 deletions.
diff --git a/src/api/types.ts b/src/api/types.ts
@@ -1,8 +1,8 @@
 export type TalkCategory = "Convida" | "Frontend" | "Comunidades";
 
-export interface Agenda extends Record<TalkCategory, Palestra[]> {
-  [type: string]: Palestra[];
-}
+export type Room = "fendce" | "w3c" | "firebank" | "convida";
+
+export interface Agenda extends Record<Room, Palestra[]> {}
 
 export interface Palestra {
   speaker: Speaker;

diff --git a/src/components/SpeakerSection/SpeakerSection.tsx b/src/components/SpeakerSection/SpeakerSection.tsx
@@ -1,31 +1,27 @@
 import { SpeakerCard } from "@/components/SpeakerCard";
-import { Button } from "@/components/ui/button";
 import { SpeakerSectionProps } from "./types";
 
 export const SpeakerSection = ({
-  sectionTitle,
   liveTalk,
   savedCardIds,
   handleCardModeChange,
 }: SpeakerSectionProps) => {
   return (
     <section className="w-full">
       {liveTalk && (
-        <div className="flex flex-col items-center w-full">
-          <Button className="max-w-[500px] w-full mt-8 bg-[#261537] justify-start pl-5 text-base font-semibold hover:bg-[#261537] text-[#E6D5F7]">
-            {sectionTitle}
-          </Button>
-          <div className="flex flex-col items-center gap-6 mt-6 w-full">
-            <SpeakerCard
-              isSaved={savedCardIds.includes(liveTalk.id)}
-              onChangeMode={(mode) => handleCardModeChange(liveTalk.id, mode)}
-              key={liveTalk.id}
-              hour={liveTalk.hour}
-              label={liveTalk.title}
-              tags={liveTalk.tags}
-              speaker={liveTalk.speaker}
-            />
-          </div>
+
+        <div className="flex flex-col items-center gap-6 mt-6 w-full">
+          <SpeakerCard
+            isSaved={savedCardIds.includes(liveTalk.id)}
+            onChangeMode={(mode) => handleCardModeChange(liveTalk.id, mode)}
+            key={liveTalk.id}
+            hour={liveTalk.hour}
+            label={liveTalk.title}
+            tags={liveTalk.tags}
+            speaker={liveTalk.speaker}
+            room={liveTalk.room}
+            showRoom
+          />
         </div>
       )}
     </section>

diff --git a/src/components/SpeakerSection/types.ts b/src/components/SpeakerSection/types.ts
@@ -1,8 +1,7 @@
 import { Palestra } from "@/api/types";
 
 export interface SpeakerSectionProps {
-  liveTalk: Palestra | undefined;
+  liveTalk?: Palestra | undefined;
   savedCardIds: number[];
-  sectionTitle: string;
   handleCardModeChange: (cardId: number, newMode: boolean) => void;
 }
diff --git a/src/lib/check-date-time.ts b/src/lib/check-date-time.ts
@@ -1,3 +1,5 @@
+import { addMinutes, isAfter, isSameDay } from "date-fns";
+
 const eventDate = new Date("2024-09-14T10:00:00.000Z");
 
 export const hasTimePassed = (hour: string) => {
@@ -18,4 +20,30 @@ export const hasTimePassed = (hour: string) => {
 
 
   return currentHour > hourNumber || (currentHour === hourNumber && currentMinute > minuteNumber);
-};
+};
+
+const defaultTalkMinutes = 40;
+
+export const isTalkLive = (hour: string): boolean => {
+  const now = new Date();
+
+  if(!isSameDay(eventDate, now)) {
+    return false;
+  }
+
+  // Convert to UTC
+  now.setTime(now.getTime() + (now.getTimezoneOffset() * 60 * 1000));
+
+  // Extract the hour and minute from the string
+  const startHour = parseInt(hour.split(":")[0]) + 3;
+  const startMinute = parseInt(hour.split(":")[1]);
+
+  // Create a Date object for the start time
+  const startTime = eventDate.setHours(startHour, startMinute, 0, 0);
+
+  const endTime = addMinutes(startTime, defaultTalkMinutes);
+
+  // Check if the current time is between startTime and endTime
+  return isAfter(now, startTime) && !isAfter(now, endTime);
+};
+
diff --git a/src/pages/LivePage/LivePage.tsx b/src/pages/LivePage/LivePage.tsx
@@ -12,78 +12,91 @@ export const LivePage = () => {
   const { savedCardIds, toggleSaveCard } = useSavedTalks();
   const now = new Date();
 
-  const liveFrontendTalk = getLiveTalk(data?.Frontend || [], now);
-  const liveConvidadosTalk = getLiveTalk(data?.Convida || [], now);
-  const liveComunidadesTalk = getLiveTalk(data?.Comunidades || [], now);
+  const fendTalks = {
+    live: getLiveTalk(data?.fendce || []),
+    next: getNextTalk(data?.fendce || [], now),
+  };
+
+  const w3cTalks = {
+    live: getLiveTalk(data?.w3c || []),
+    next: getNextTalk(data?.w3c || [], now),
+  };
+
+  const firebankTalks = {
+    live: getLiveTalk(data?.firebank || []),
+    next: getNextTalk(data?.firebank || [], now),
+  };
+
+  const convidaTalks = {
+    live: getLiveTalk(data?.convida || []),
+    next: getNextTalk(data?.convida || [], now),
+  };
 
-  const nextFrontendTalk = getNextTalk(data?.Frontend || [], now);
-  const nextComunidadesTalk = getNextTalk(data?.Comunidades || [], now);
-  const nextConvidadosTalk = getNextTalk(data?.Convida || [], now);
 
   useEffect(() => {
     document.title = "Acontecendo agora";
   }, []);
 
   return (
     <section className="container mt-12 flex flex-col items-center">
-      <ReturnButton/>
+      <ReturnButton />
       <Header label="Agenda do Evento" />
       <h2 className="text-white text-center mt-8 text-xl font-semibold">
         Acontecendo agora:
       </h2>
-      {liveFrontendTalk || liveConvidadosTalk || liveComunidadesTalk ? (
-        <>
-          <SpeakerSection
-            handleCardModeChange={toggleSaveCard}
-            liveTalk={liveFrontendTalk}
-            savedCardIds={savedCardIds}
-            sectionTitle="Front-End CE"
-          />
-          <SpeakerSection
-            handleCardModeChange={toggleSaveCard}
-            liveTalk={liveConvidadosTalk}
-            savedCardIds={savedCardIds}
-            sectionTitle="Convida"
-          />
-          <SpeakerSection
-            handleCardModeChange={toggleSaveCard}
-            liveTalk={liveComunidadesTalk}
-            savedCardIds={savedCardIds}
-            sectionTitle="Comunidades"
-          />
-        </>
-      ) : (
+      <SpeakerSection
+        handleCardModeChange={toggleSaveCard}
+        liveTalk={fendTalks.live}
+        savedCardIds={savedCardIds}
+      />
+      <SpeakerSection
+        handleCardModeChange={toggleSaveCard}
+        liveTalk={w3cTalks.live}
+        savedCardIds={savedCardIds}
+      />
+      <SpeakerSection
+        handleCardModeChange={toggleSaveCard}
+        liveTalk={firebankTalks.live}
+        savedCardIds={savedCardIds}
+      />
+      <SpeakerSection
+        handleCardModeChange={toggleSaveCard}
+        liveTalk={convidaTalks.live}
+        savedCardIds={savedCardIds}
+      />
+      {
+        !fendTalks.live && !w3cTalks.live && !firebankTalks.live && !convidaTalks.live &&
         <p className="text-white text-center mt-4">
-          Se avexe não, já já tem mais! 🙂 🥳
-        </p>
-      )}
+          Se avexe não, já já as talks começam! 🙂 🥳
+        </p>}
       <Separator className="w-20 mt-8 h-1 rounded-2xl self-center bg-[#7c3aed]" />
       <section className="mb-12 mt-8">
         <h3 className="text-xl font-semibold text-center text-white">
           Próximas Talks
         </h3>
-        {nextFrontendTalk || nextConvidadosTalk || nextComunidadesTalk ? (
-          <>
-            <SpeakerSection
-              handleCardModeChange={toggleSaveCard}
-              liveTalk={nextFrontendTalk}
-              savedCardIds={savedCardIds}
-              sectionTitle="Front-End CE"
-            />
-            <SpeakerSection
-              handleCardModeChange={toggleSaveCard}
-              liveTalk={nextConvidadosTalk}
-              savedCardIds={savedCardIds}
-              sectionTitle="Convida"
-            />
-            <SpeakerSection
-              handleCardModeChange={toggleSaveCard}
-              liveTalk={nextComunidadesTalk}
-              savedCardIds={savedCardIds}
-              sectionTitle="Comunidades"
-            />
-          </>
-        ) : (
+
+        <SpeakerSection
+          handleCardModeChange={toggleSaveCard}
+          liveTalk={fendTalks.next}
+          savedCardIds={savedCardIds}
+        />
+        <SpeakerSection
+          handleCardModeChange={toggleSaveCard}
+          liveTalk={w3cTalks.next}
+          savedCardIds={savedCardIds}
+        />
+        <SpeakerSection
+          handleCardModeChange={toggleSaveCard}
+          liveTalk={firebankTalks.next}
+          savedCardIds={savedCardIds}
+        />
+        <SpeakerSection
+          handleCardModeChange={toggleSaveCard}
+          liveTalk={convidaTalks.next}
+          savedCardIds={savedCardIds}
+        />
+
+        {!fendTalks.next && !w3cTalks.next && !firebankTalks.next && !convidaTalks.next && (
           <p className="text-white text-center mt-4">
             Fique ligado, as próximas talks estão chegando!
           </p>

diff --git a/src/pages/LivePage/utils/talks.ts b/src/pages/LivePage/utils/talks.ts
@@ -1,12 +1,9 @@
 import { Palestra } from "@/api/types";
-import { format, isAfter, isBefore } from "date-fns";
+import { hasTimePassed, isTalkLive } from "@/lib/check-date-time";
+import { format } from "date-fns";
 
-export const getLiveTalk = (talks: Palestra[], now: Date) => {
-  return talks.find((talk) => {
-    const startTime = new Date(`${format(now, "yyyy-MM-dd")}T${talk.hour}`);
-    const endTime = new Date(startTime.getTime() + 60 * 20 * 1000);
-    return isAfter(now, startTime) && isBefore(now, endTime);
-  });
+export const getLiveTalk = (talks: Palestra[]) => {
+  return talks.find((talk) =>isTalkLive(talk.hour))
 };
 
 export const getNextTalk = (talks: Palestra[], now: Date) => {
@@ -16,8 +13,5 @@ export const getNextTalk = (talks: Palestra[], now: Date) => {
       new Date(`${format(now, "yyyy-MM-dd")}T${b.hour}`).getTime()
   );
 
-  return sortedTalks.find((talk) => {
-    const startTime = new Date(`${format(now, "yyyy-MM-dd")}T${talk.hour}`);
-    return isAfter(startTime, now);
-  });
+  return sortedTalks.find((talk) => !isTalkLive(talk.hour) && !hasTimePassed(talk.hour));
 };