-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
17 changed files
with
670 additions
and
255 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import { Meta } from '@storybook/react'; | ||
import { reactRouterParameters, withRouter } from 'storybook-addon-remix-react-router'; | ||
import { ReturnButton } from './ReturnButton'; | ||
|
||
export default { | ||
title: 'Components/ReturnButton', | ||
component: ReturnButton, | ||
decorators: [withRouter] | ||
} as Meta; | ||
|
||
export const Default = { | ||
parameters: { | ||
reactRouter: reactRouterParameters({ | ||
routing: { | ||
path: '/', | ||
handle: 'Home Page', | ||
} | ||
}) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { render } from '@testing-library/react'; | ||
import { BrowserRouter } from 'react-router-dom'; | ||
import ReturnButton from './ReturnButton'; | ||
|
||
test('renders ReturnButton', () => { | ||
const { getByRole } = render( | ||
<BrowserRouter> | ||
<ReturnButton /> | ||
</BrowserRouter> | ||
); | ||
const linkElement = getByRole('link'); | ||
expect(linkElement).toBeInTheDocument(); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
// src/components/ReturnButton/ReturnButton.tsx | ||
import { Link } from 'react-router-dom'; | ||
import { ChevronLeft } from 'lucide-react'; | ||
|
||
export const ReturnButton = () => { | ||
return ( | ||
<> | ||
<Link to="/" className="self-start"> | ||
<ChevronLeft size={28} className="text-[#A855F7] self-start absolute" /> | ||
</Link> | ||
</> | ||
); | ||
} | ||
|
||
export default ReturnButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import { ReturnButton } from "./ReturnButton" | ||
|
||
export { ReturnButton } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import { renderHook, act } from "@testing-library/react"; | ||
import { useSavedTalks } from "./useSavedTalks"; | ||
|
||
describe("useSavedTalks", () => { | ||
beforeEach(() => { | ||
localStorage.clear(); | ||
}); | ||
|
||
it("should retrieve saved talks from local storage", () => { | ||
localStorage.setItem("savedTalks", JSON.stringify([1, 2, 3])); | ||
const { result } = renderHook(() => useSavedTalks()); | ||
expect(result.current.savedCardIds).toEqual([1, 2, 3]); | ||
}); | ||
|
||
it("should save a new talk when toggleSaveCard is called", () => { | ||
const { result } = renderHook(() => useSavedTalks()); | ||
act(() => { result.current.toggleSaveCard(1) }); | ||
expect(result.current.savedCardIds).toEqual([1]); | ||
expect(JSON.parse(localStorage.getItem("savedTalks")!)).toEqual([1]); | ||
}); | ||
|
||
it("should remove a saved talk when toggleSaveCard is called", () => { | ||
localStorage.setItem("savedTalks", JSON.stringify([1])); | ||
const { result } = renderHook(() => useSavedTalks()); | ||
act(() => { result.current.toggleSaveCard(1) }); | ||
expect(result.current.savedCardIds).toEqual([]); | ||
expect(JSON.parse(localStorage.getItem("savedTalks")!)).toEqual([]); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import { useState, useEffect, useCallback } from 'react'; | ||
|
||
const LOCAL_STORAGE_KEY = 'savedTalks'; | ||
|
||
export const useSavedTalks = () => { | ||
const [savedCardIds, setSavedCardIds] = useState<number[]>([]); | ||
|
||
useEffect(() => { | ||
const storedIds = localStorage.getItem(LOCAL_STORAGE_KEY); | ||
if (storedIds) { | ||
setSavedCardIds(JSON.parse(storedIds)); | ||
} | ||
}, []); | ||
|
||
const toggleSaveCard = useCallback((cardId: number) => { | ||
setSavedCardIds((prevIds) => { | ||
const isSaved = prevIds.includes(cardId); | ||
const newIds = isSaved ? prevIds.filter((id) => id !== cardId) : [...prevIds, cardId]; | ||
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(newIds)); | ||
return newIds; | ||
}); | ||
}, []); | ||
|
||
return { savedCardIds, toggleSaveCard }; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -69,3 +69,9 @@ | |
} | ||
} | ||
|
||
|
||
|
||
.self-start { | ||
align-self: self-start; | ||
} | ||
main |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
import type { Meta, StoryObj } from "@storybook/react"; | ||
import { LivePage } from "."; | ||
import { QueryClient, QueryClientProvider } from "react-query"; | ||
import { BrowserRouter } from "react-router-dom"; | ||
import { Story } from "@storybook/blocks"; | ||
|
||
export type Story = StoryObj<typeof LivePage>; | ||
|
||
const queryClient = new QueryClient(); | ||
|
||
const meta: Meta<typeof LivePage> = { | ||
title: "Pages/Live Page", | ||
tags: ["autodocs"], | ||
component: LivePage, | ||
decorators: [ | ||
(Story) => ( | ||
<QueryClientProvider client={queryClient}> | ||
<BrowserRouter> | ||
<Story /> | ||
</BrowserRouter> | ||
</QueryClientProvider> | ||
), | ||
], | ||
}; | ||
|
||
export default meta; | ||
|
||
export const Default: Story = {}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { render } from '@testing-library/react'; | ||
import { QueryClient, QueryClientProvider } from 'react-query'; | ||
import { BrowserRouter } from 'react-router-dom'; | ||
import { LivePage } from './LivePage'; | ||
|
||
test('renders LivePage', () => { | ||
const queryClient = new QueryClient(); | ||
const { getByText } = render( | ||
<QueryClientProvider client={queryClient}> | ||
<BrowserRouter> | ||
<LivePage /> | ||
</BrowserRouter> | ||
</QueryClientProvider> | ||
); | ||
const element = getByText(/Acontecendo agora:/i); | ||
expect(element).toBeInTheDocument(); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,89 @@ | ||
import { Header } from "@/components/Header"; | ||
import { ReturnButton } from "@/components/ReturnButton"; | ||
import { SpeakerSection } from "@/components/SpeakerSection"; | ||
import { Separator } from "@/components/ui/separator"; | ||
import { useAgenda } from "@/hooks/useAgenda"; | ||
import { useSavedTalks } from "@/hooks/useSavedTalks"; | ||
import { getLiveTalk, getNextTalk } from "./utils/talks"; | ||
|
||
export const LivePage = () => { | ||
const { data } = useAgenda(); | ||
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 nextFrontendTalk = getNextTalk(data?.Frontend || [], now); | ||
const nextComunidadesTalk = getNextTalk(data?.Comunidades || [], now); | ||
const nextConvidadosTalk = getNextTalk(data?.Convida || [], now); | ||
|
||
return ( | ||
<section className="container mt-12 flex flex-col items-center"> | ||
<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" | ||
/> | ||
</> | ||
) : ( | ||
<p className="text-white text-center mt-4"> | ||
Se avexe não, já já tem mais! 🙂 🥳 | ||
</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" | ||
/> | ||
</> | ||
) : ( | ||
<p className="text-white text-center mt-4"> | ||
Fique ligado, as próximas talks estão chegando! | ||
</p> | ||
)} | ||
</section> | ||
</section> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import { LivePage } from "./LivePage"; | ||
|
||
export { LivePage }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import { Palestra } from "@/api/types"; | ||
import { format, isAfter, isBefore } 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 getNextTalk = (talks: Palestra[], now: Date) => { | ||
const sortedTalks = [...talks].sort( | ||
(a, b) => | ||
new Date(`${format(now, "yyyy-MM-dd")}T${a.hour}`).getTime() - | ||
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); | ||
}); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters