From 49cb9698e6bd125e86926da8f7eef9b9566db9cd Mon Sep 17 00:00:00 2001 From: Jean Livino Date: Wed, 11 Sep 2024 15:45:21 -0300 Subject: [PATCH] format live section --- src/api/types.ts | 6 +- .../SpeakerSection/SpeakerSection.tsx | 30 ++--- src/components/SpeakerSection/types.ts | 3 +- src/lib/check-date-time.ts | 30 ++++- src/pages/LivePage/LivePage.tsx | 121 ++++++++++-------- src/pages/LivePage/utils/talks.ts | 16 +-- 6 files changed, 118 insertions(+), 88 deletions(-) diff --git a/src/api/types.ts b/src/api/types.ts index 06ebdcc..b548d7d 100644 --- 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 { - [type: string]: Palestra[]; -} +export type Room = "fendce" | "w3c" | "firebank" | "convida"; + +export interface Agenda extends Record {} export interface Palestra { speaker: Speaker; diff --git a/src/components/SpeakerSection/SpeakerSection.tsx b/src/components/SpeakerSection/SpeakerSection.tsx index a887774..10f074e 100644 --- a/src/components/SpeakerSection/SpeakerSection.tsx +++ b/src/components/SpeakerSection/SpeakerSection.tsx @@ -1,9 +1,7 @@ import { SpeakerCard } from "@/components/SpeakerCard"; -import { Button } from "@/components/ui/button"; import { SpeakerSectionProps } from "./types"; export const SpeakerSection = ({ - sectionTitle, liveTalk, savedCardIds, handleCardModeChange, @@ -11,21 +9,19 @@ export const SpeakerSection = ({ return (
{liveTalk && ( -
- -
- handleCardModeChange(liveTalk.id, mode)} - key={liveTalk.id} - hour={liveTalk.hour} - label={liveTalk.title} - tags={liveTalk.tags} - speaker={liveTalk.speaker} - /> -
+ +
+ handleCardModeChange(liveTalk.id, mode)} + key={liveTalk.id} + hour={liveTalk.hour} + label={liveTalk.title} + tags={liveTalk.tags} + speaker={liveTalk.speaker} + room={liveTalk.room} + showRoom + />
)}
diff --git a/src/components/SpeakerSection/types.ts b/src/components/SpeakerSection/types.ts index f70baae..2b8ca37 100644 --- 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; } \ No newline at end of file diff --git a/src/lib/check-date-time.ts b/src/lib/check-date-time.ts index 458a043..225af7d 100644 --- 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); -}; \ No newline at end of file +}; + +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 index 861f684..0997fd6 100644 --- a/src/pages/LivePage/LivePage.tsx +++ b/src/pages/LivePage/LivePage.tsx @@ -12,13 +12,26 @@ 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"; @@ -26,64 +39,64 @@ export const LivePage = () => { return (
- +

Acontecendo agora:

- {liveFrontendTalk || liveConvidadosTalk || liveComunidadesTalk ? ( - <> - - - - - ) : ( + + + + + { + !fendTalks.live && !w3cTalks.live && !firebankTalks.live && !convidaTalks.live &&

- Se avexe não, já já tem mais! 🙂 🥳 -

- )} + Se avexe não, já já as talks começam! 🙂 🥳 +

}

Próximas Talks

- {nextFrontendTalk || nextConvidadosTalk || nextComunidadesTalk ? ( - <> - - - - - ) : ( + + + + + + + {!fendTalks.next && !w3cTalks.next && !firebankTalks.next && !convidaTalks.next && (

Fique ligado, as próximas talks estão chegando!

diff --git a/src/pages/LivePage/utils/talks.ts b/src/pages/LivePage/utils/talks.ts index 17e58b2..d04dbb3 100644 --- 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)); };