refactor(hooks): update session handling and transform logic in useFetchTalks and useFetchLiveView

Author: anyulled

src/hooks/useFetchTalks.test.tsx

@@ -10,7 +10,6 @@ import { IGroup } from "../types/sessions";
 import {
   createMockAxiosResponse,
   createMockGroup,
-  createMockLiveview,
   createMockSession,
   getQueryClientWrapper,
   SESSION_URLS,
@@ -156,6 +155,60 @@ describe("useFetchTalksById", () => {
     const expectedData = mockData[0].sessions[0];
     expect(result.current.data).toEqual(expectedData);
   });
+
+  it("should use 2024 URL when '2024' is provided", async () => {
+    const mockSession = createMockSession({
+      track: "",
+      description: "",
+      startsAt: "2024-01-01T00:00:00",
+    });
+    const mockData: IGroup[] = [
+      createMockGroup({
+        groupName: "test ",
+        sessions: [mockSession],
+      }),
+    ];
+    const payload = createMockAxiosResponse(mockData);
+
+    mockedAxios.get.mockResolvedValue(payload);
+
+    const { wrapper } = getQueryClientWrapper();
+    const { result } = renderHook(() => useFetchTalksById("123", "2024"), {
+      wrapper,
+    });
+
+    await waitFor(() => result.current.isSuccess);
+    await waitFor(() => !result.current.isLoading);
+
+    expect(mockedAxios.get).toHaveBeenCalledWith(SESSION_URLS["2024"]);
+    const expectedData = mockData[0].sessions[0];
+    expect(result.current.data).toEqual(expectedData);
+  });
+
+  it("should use custom URL when a URL is provided", async () => {
+    const mockSession = createMockSession();
+    const mockData: IGroup[] = [
+      createMockGroup({
+        sessions: [mockSession],
+      }),
+    ];
+    const payload = createMockAxiosResponse(mockData);
+
+    mockedAxios.get.mockResolvedValue(payload);
+
+    const { wrapper } = getQueryClientWrapper();
+    const customUrl = "https://example.com/api/sessions";
+    const { result } = renderHook(() => useFetchTalksById("123", customUrl), {
+      wrapper,
+    });
+
+    await waitFor(() => result.current.isSuccess);
+    await waitFor(() => !result.current.isLoading);
+
+    expect(mockedAxios.get).toHaveBeenCalledWith(customUrl);
+    const expectedData = mockData[0].sessions[0];
+    expect(result.current.data).toEqual(expectedData);
+  });
 });
 
 describe("useFetchLiveView", () => {
@@ -164,8 +217,13 @@ describe("useFetchLiveView", () => {
   });
 
   it("should use default URL when no parameter is provided", async () => {
-    const mockData = createMockLiveview();
-    const payload = createMockAxiosResponse([mockData]);
+    const mockSession = createMockSession();
+    const mockData: IGroup[] = [
+      createMockGroup({
+        sessions: [mockSession],
+      }),
+    ];
+    const payload = createMockAxiosResponse(mockData);
 
     mockedAxios.get.mockResolvedValue(payload);
 
@@ -178,12 +236,50 @@ describe("useFetchLiveView", () => {
     await waitFor(() => !result.current.isLoading);
 
     expect(mockedAxios.get).toHaveBeenCalledWith(SESSION_URLS.DEFAULT);
-    expect(result.current.data).toEqual(payload.data[0]);
+    expect(result.current.data).toEqual([mockSession]);
+  });
+
+  it("should use 2023 URL when '2023' is provided", async () => {
+    const mockSession = createMockSession({
+      track: "",
+      description: "",
+      startsAt: "2023-01-01T00:00:00",
+    });
+    const mockData: IGroup[] = [
+      createMockGroup({
+        groupName: "test ",
+        sessions: [mockSession],
+      }),
+    ];
+    const payload = createMockAxiosResponse(mockData);
+
+    mockedAxios.get.mockResolvedValue(payload);
+
+    const { wrapper } = getQueryClientWrapper();
+    const { result } = renderHook(() => useFetchLiveView("2023"), {
+      wrapper,
+    });
+
+    await waitFor(() => result.current.isSuccess);
+    await waitFor(() => !result.current.isLoading);
+
+    expect(mockedAxios.get).toHaveBeenCalledWith(SESSION_URLS["2023"]);
+    expect(result.current.data).toEqual([mockSession]);
   });
 
   it("should use 2024 URL when '2024' is provided", async () => {
-    const mockData = createMockLiveview();
-    const payload = createMockAxiosResponse([mockData]);
+    const mockSession = createMockSession({
+      track: "",
+      description: "",
+      startsAt: "2024-01-01T00:00:00",
+    });
+    const mockData: IGroup[] = [
+      createMockGroup({
+        groupName: "test ",
+        sessions: [mockSession],
+      }),
+    ];
+    const payload = createMockAxiosResponse(mockData);
 
     mockedAxios.get.mockResolvedValue(payload);
 
@@ -196,6 +292,30 @@ describe("useFetchLiveView", () => {
     await waitFor(() => !result.current.isLoading);
 
     expect(mockedAxios.get).toHaveBeenCalledWith(SESSION_URLS["2024"]);
-    expect(result.current.data).toEqual(payload.data[0]);
+    expect(result.current.data).toEqual([mockSession]);
+  });
+
+  it("should use custom URL when a URL is provided", async () => {
+    const mockSession = createMockSession();
+    const mockData: IGroup[] = [
+      createMockGroup({
+        sessions: [mockSession],
+      }),
+    ];
+    const payload = createMockAxiosResponse(mockData);
+
+    mockedAxios.get.mockResolvedValue(payload);
+
+    const { wrapper } = getQueryClientWrapper();
+    const customUrl = "https://example.com/api/sessions";
+    const { result } = renderHook(() => useFetchLiveView(customUrl), {
+      wrapper,
+    });
+
+    await waitFor(() => result.current.isSuccess);
+    await waitFor(() => !result.current.isLoading);
+
+    expect(mockedAxios.get).toHaveBeenCalledWith(customUrl);
+    expect(result.current.data).toEqual([mockSession]);
   });
 });

src/hooks/useFetchTalks.ts

@@ -1,7 +1,8 @@
 import { useQuery, UseQueryResult } from "react-query";
 import axios from "axios";
-import { Liveview } from "../views/Talks/liveView.types";
-import { IGroup, Session } from "../types/sessions";
+import { UngroupedSession } from "@views/Talks/liveView.types";
+// @ts-expect-error some quirky import
+import { IGroup, Session } from "@types/sessions";
 
 const URLS = {
   default: "https://sessionize.com/api/v2/xhudniix/view/Sessions",
@@ -41,7 +42,8 @@ const getUrl = (urlOrYear?: string): string => {
 const useFetchTalksBase = <T>(
   queryKey: string,
   urlOrYear?: string,
-  dataTransformer: (data: any) => T = (data) => data,
+  dataTransformer: (data: IGroup[]) => T = (data: IGroup[]) =>
+    data as unknown as T,
 ): UseQueryResult<T> => {
   const url = getUrl(urlOrYear);
 
@@ -59,7 +61,7 @@ export const useFetchTalksById = (
   id: string,
   urlOrYear?: string,
 ): UseQueryResult<Session> => {
-  return useFetchTalksBase<Session>("talks", urlOrYear, (data: any[]) => {
+  return useFetchTalksBase<Session>("talks", urlOrYear, (data: IGroup[]) => {
     const sessions = data
       .map((track: IGroup) => track.sessions)
       .flat(1)
@@ -70,8 +72,11 @@ export const useFetchTalksById = (
 
 export const useFetchLiveView = (
   urlOrYear?: string,
-): UseQueryResult<Liveview> => {
-  return useFetchTalksBase<Liveview>("api-talks", urlOrYear, (data) =>
-    data.at(0),
+): UseQueryResult<UngroupedSession[]> => {
+  return useFetchTalksBase<Session[]>(
+    "api-talks",
+    urlOrYear,
+    (data): UngroupedSession[] =>
+      data.map((track: IGroup) => track.sessions).flat(1),
   );
 };

src/utils/testing/testUtils.tsx

@@ -2,11 +2,10 @@ import React, { FC } from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { render, RenderOptions, RenderResult } from "@testing-library/react";
 import { AxiosHeaders, AxiosResponse } from "axios";
+import { MemoryRouter } from "react-router";
 
-// Re-export everything from testing-library
 export * from "@testing-library/react";
 
-// Create a custom render function that includes the QueryClientProvider
 export function renderWithQueryClient(
   ui: React.ReactElement,
   options?: Omit<RenderOptions, "wrapper">,
@@ -26,7 +25,27 @@ export function renderWithQueryClient(
   return render(ui, { wrapper, ...options });
 }
 
-// Create a function to get a QueryClient and wrapper for use with renderHook
+export function renderWithQueryClientAndRouter(
+  ui: React.ReactElement,
+  options?: Omit<RenderOptions, "wrapper">,
+): RenderResult {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  const wrapper: FC<React.PropsWithChildren<object>> = ({ children }) => (
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={["/"]}>{children}</MemoryRouter>
+    </QueryClientProvider>
+  );
+
+  return render(ui, { wrapper, ...options });
+}
+
 export function getQueryClientWrapper() {
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -43,7 +62,6 @@ export function getQueryClientWrapper() {
   return { queryClient, wrapper };
 }
 
-// Create a function to create a mock axios response
 export function createMockAxiosResponse<T>(data: T): AxiosResponse<T> {
   const axiosHeaders = new AxiosHeaders();
   return {
@@ -57,21 +75,18 @@ export function createMockAxiosResponse<T>(data: T): AxiosResponse<T> {
   };
 }
 
-// Session URLs
 export const SESSION_URLS = {
   DEFAULT: "https://sessionize.com/api/v2/xhudniix/view/Sessions",
   "2023": "https://sessionize.com/api/v2/ttsitynd/view/Sessions",
   "2024": "https://sessionize.com/api/v2/teq4asez/view/Sessions",
 };
 
-// Speaker URLs
 export const SPEAKER_URLS = {
   DEFAULT: "https://sessionize.com/api/v2/xhudniix/view/Speakers",
   "2023": "https://sessionize.com/api/v2/ttsitynd/view/Speakers",
   "2024": "https://sessionize.com/api/v2/teq4asez/view/Speakers",
 };
 
-// Mock data factories
 export const createMockSpeaker = (overrides = {}) => ({
   id: "1",
   fullName: "John Smith",
@@ -137,11 +152,3 @@ export const createMockGroup = (overrides = {}) => ({
   sessions: [],
   ...overrides,
 });
-
-export const createMockLiveview = (overrides = {}) => ({
-  groupID: null,
-  groupName: "",
-  isDefault: false,
-  sessions: [],
-  ...overrides,
-});

src/views/Talks/LiveView.test.tsx

@@ -1,10 +1,13 @@
 import LiveView from "./LiveView";
 import React from "react";
-import { renderWithQueryClient, screen } from "../../utils/testing/testUtils";
+import {
+  renderWithQueryClientAndRouter,
+  screen,
+} from "../../utils/testing/testUtils";
 
 describe("Live view component", () => {
   it("renders without crashing", () => {
-    renderWithQueryClient(<LiveView />);
+    renderWithQueryClientAndRouter(<LiveView />);
     const titleElement = screen.getByText(/Live Schedule/);
     expect(titleElement).toBeInTheDocument();
   });

src/views/Talks/LiveView.tsx

@@ -4,11 +4,13 @@ import Loading from "@components/Loading/Loading";
 import { UngroupedSession } from "./liveView.types";
 import conference from "@data/2025.json";
 import { TalkCard } from "./components/TalkCard";
-import { StyledMain } from "./Talks.style";
+import { StyledAgenda, StyledMain } from "./Talks.style";
 import { talkCardAdapter } from "./TalkCardAdapter";
 import { useSentryErrorReport } from "@hooks/useSentryErrorReport";
 import { useDateInterval } from "@hooks/useDateInterval";
 import { isWithinInterval } from "date-fns";
+import { Link } from "react-router";
+import { ROUTE_SCHEDULE } from "@constants/routes";
 
 const LiveView: FC<React.PropsWithChildren<unknown>> = () => {
   const { isLoading, error, data } = useFetchLiveView();
@@ -22,7 +24,7 @@ const LiveView: FC<React.PropsWithChildren<unknown>> = () => {
   );
 
   const filteredTalks = useMemo(() => {
-    return data?.sessions?.filter(getPredicate());
+    return data?.filter(getPredicate());
   }, [data, getPredicate]);
 
   useEffect(() => {
@@ -44,10 +46,23 @@ const LiveView: FC<React.PropsWithChildren<unknown>> = () => {
 
       {isLoading && <Loading />}
       <article>Live Schedule</article>
+
       {!isConferenceActive && <h4>The live schedule is not ready yet</h4>}
-      {filteredTalks?.map((session) => (
-        <TalkCard key={session.id} {...talkCardAdapter(session)} />
-      ))}
+      <StyledAgenda>
+        {filteredTalks?.map((session) => (
+          <TalkCard key={session.id} {...talkCardAdapter(session)} />
+        ))}
+      </StyledAgenda>
+      <Link
+        to={ROUTE_SCHEDULE}
+        style={{
+          textDecoration: "none",
+          fontWeight: "bold",
+          margin: "0.5rem",
+        }}
+      >
+        📅 Back to schedule
+      </Link>
     </StyledMain>
   );
 };