refactor(hooks): extend useDateInterval with conference dates and simplify LiveView date checks

Author: anyulled

src/hooks/useDateInterval.test.ts

@@ -1,29 +1,111 @@
-import { renderHook } from '@testing-library/react-hooks';
-import { useDateInterval } from './useDateInterval';
-
-const today = new Date('2023-10-10');
-
-const edition = {
-  tickets: {
-    startDay: '2023-10-01',
-    endDay: '2023-10-15',
-  },
-  cfp: {
-    startDay: '2023-09-01',
-    endDay: '2023-09-30',
-  },
-  sponsors: {
-    startDate: '2023-10-05',
-    endDate: '2023-10-20',
-  },
-};
-
-describe('useDateInterval', () => {
-  it('should return correct disabled states for tickets, cfp, and sponsors', () => {
+import { renderHook } from "@testing-library/react-hooks";
+import { useDateInterval } from "./useDateInterval";
+
+describe("useDateInterval", () => {
+  // Complete edition object with all required properties
+  const createEdition = (overrides = {}) => ({
+    tickets: {
+      startDay: "2023-10-01",
+      endDay: "2023-10-15",
+    },
+    cfp: {
+      startDay: "2023-09-01",
+      endDay: "2023-09-30",
+    },
+    sponsors: {
+      startDate: "2023-10-05",
+      endDate: "2023-10-20",
+    },
+    startDay: "2023-10-25",
+    endDay: "2023-10-27",
+    ...overrides,
+  });
+
+  it("should return correct states during the conference", () => {
+    const today = new Date("2023-10-26");
+    const edition = createEdition();
+    const { result } = renderHook(() => useDateInterval(today, edition));
+
+    expect(result.current.isTicketsDisabled).toBe(true);
+    expect(result.current.isCfpDisabled).toBe(true);
+    expect(result.current.isSponsorDisabled).toBe(true);
+    expect(result.current.isConferenceActive).toBe(true);
+  });
+
+  it("should return correct states during ticket sales period", () => {
+    const today = new Date("2023-10-10");
+    const edition = createEdition();
     const { result } = renderHook(() => useDateInterval(today, edition));
 
     expect(result.current.isTicketsDisabled).toBe(false);
     expect(result.current.isCfpDisabled).toBe(true);
     expect(result.current.isSponsorDisabled).toBe(false);
+    expect(result.current.isConferenceActive).toBe(false);
+  });
+
+  it("should return correct states during CFP period", () => {
+    const today = new Date("2023-09-15");
+    const edition = createEdition();
+    const { result } = renderHook(() => useDateInterval(today, edition));
+
+    expect(result.current.isTicketsDisabled).toBe(true);
+    expect(result.current.isCfpDisabled).toBe(false);
+    expect(result.current.isSponsorDisabled).toBe(true);
+    expect(result.current.isConferenceActive).toBe(false);
+  });
+
+  it("should return correct states during sponsor registration period", () => {
+    const today = new Date("2023-10-18");
+    const edition = createEdition();
+    const { result } = renderHook(() => useDateInterval(today, edition));
+
+    expect(result.current.isTicketsDisabled).toBe(true);
+    expect(result.current.isCfpDisabled).toBe(true);
+    expect(result.current.isSponsorDisabled).toBe(false);
+    expect(result.current.isConferenceActive).toBe(false);
+  });
+
+  it("should return all disabled states before any period starts", () => {
+    const today = new Date("2023-08-15");
+    const edition = createEdition();
+    const { result } = renderHook(() => useDateInterval(today, edition));
+
+    expect(result.current.isTicketsDisabled).toBe(true);
+    expect(result.current.isCfpDisabled).toBe(true);
+    expect(result.current.isSponsorDisabled).toBe(true);
+    expect(result.current.isConferenceActive).toBe(false);
+  });
+
+  it("should return all disabled states after all periods end", () => {
+    const today = new Date("2023-11-01");
+    const edition = createEdition();
+    const { result } = renderHook(() => useDateInterval(today, edition));
+
+    expect(result.current.isTicketsDisabled).toBe(true);
+    expect(result.current.isCfpDisabled).toBe(true);
+    expect(result.current.isSponsorDisabled).toBe(true);
+    expect(result.current.isConferenceActive).toBe(false);
+  });
+
+  it("should handle edge case: exactly on start date", () => {
+    const today = new Date("2023-10-01");
+    const edition = createEdition();
+    const { result } = renderHook(() => useDateInterval(today, edition));
+
+    expect(result.current.isTicketsDisabled).toBe(false); // Should be enabled on start date
+    expect(result.current.isCfpDisabled).toBe(true);
+    expect(result.current.isSponsorDisabled).toBe(true);
+    expect(result.current.isConferenceActive).toBe(false);
+  });
+
+  it("should handle edge case: exactly on end date", () => {
+    const today = new Date("2023-10-15");
+    const edition = createEdition();
+    const { result } = renderHook(() => useDateInterval(today, edition));
+
+    expect(result.current.isTicketsDisabled).toBe(false); // Should be enabled on end date
+    expect(result.current.isCfpDisabled).toBe(true);
+    expect(result.current.isSponsorDisabled).toBe(false);
+    expect(result.current.isConferenceActive).toBe(false);
   });
 });

src/hooks/useDateInterval.ts

@@ -1,19 +1,21 @@
 import { isWithinInterval } from "date-fns";
 
 type DateInterval = {
-  tickets:{
-    startDay: string,
-    endDay: string,
-  },
-  cfp:{
-    startDay: string,
-    endDay: string,
-  },
-  sponsors:{
-    startDate: string,
-    endDate: string,
-  }
-}
+  cfp: {
+    startDay: string;
+    endDay: string;
+  };
+  endDay: string;
+  sponsors: {
+    startDate: string;
+    endDate: string;
+  };
+  startDay: string;
+  tickets: {
+    startDay: string;
+    endDay: string;
+  };
+};
 
 export const useDateInterval = (today: Date, edition: DateInterval) => {
   const ticketStartDay = new Date(edition.tickets.startDay);
@@ -22,6 +24,8 @@ export const useDateInterval = (today: Date, edition: DateInterval) => {
   const CFPEndDay = new Date(edition.cfp.endDay);
   const sponsorStartDay = new Date(edition.sponsors.startDate);
   const sponsorEndDay = new Date(edition.sponsors.endDate);
+  const conferenceStartDay = new Date(edition.startDay);
+  const conferenceEndDay = new Date(edition.endDay);
 
   return {
     isTicketsDisabled: !isWithinInterval(today, {
@@ -36,5 +40,9 @@ export const useDateInterval = (today: Date, edition: DateInterval) => {
       start: sponsorStartDay,
       end: sponsorEndDay,
     }),
+    isConferenceActive: isWithinInterval(today, {
+      start: conferenceStartDay,
+      end: conferenceEndDay,
+    }),
   };
 };

src/views/Talks/LiveView.tsx

@@ -7,22 +7,18 @@ import { TalkCard } from "./components/TalkCard";
 import { StyledMain } from "./Talks.style";
 import { talkCardAdapter } from "./TalkCardAdapter";
 import { useSentryErrorReport } from "@hooks/useSentryErrorReport";
+import { useDateInterval } from "@hooks/useDateInterval";
+import { isWithinInterval } from "date-fns";
 
 const LiveView: FC<React.PropsWithChildren<unknown>> = () => {
   const { isLoading, error, data } = useFetchLiveView();
   const today = useMemo(() => new Date(), []);
-
-  const isBetween = useCallback(
-    (today: Date, startDate: string, endDate: string): boolean => {
-      return today >= new Date(startDate) && today <= new Date(endDate);
-    },
-    [],
-  );
+  const { isConferenceActive } = useDateInterval(today, conference);
 
   const getPredicate = useCallback(
     () => (session: UngroupedSession) =>
-      isBetween(today, session.startsAt, session.endsAt),
-    [today, isBetween],
+      isWithinInterval(today, { start: session.startsAt, end: session.endsAt }),
+    [today],
   );
 
   const filteredTalks = useMemo(() => {
@@ -48,9 +44,7 @@ const LiveView: FC<React.PropsWithChildren<unknown>> = () => {
 
       {isLoading && <Loading />}
       <article>Live Schedule</article>
-      {!isBetween(today, conference.startDay, conference.endDay) && (
-        <h4>The live schedule is not ready yet</h4>
-      )}
+      {!isConferenceActive && <h4>The live schedule is not ready yet</h4>}
       {filteredTalks?.map((session) => (
         <TalkCard key={session.id} {...talkCardAdapter(session)} />
       ))}