feat/forward-search-params

package.json

@@ -6,7 +6,6 @@
   "dependencies": {
     "@egjs/flicking-plugins": "^4.7.1",
     "@egjs/react-flicking": "^4.12.0",
-    "@faker-js/faker": "9.6.0",
     "@sentry/react": "^9.5.0",
     "@sentry/tracing": "^7.120.3",
     "@types/node": "^22.13.1",
@@ -87,8 +86,11 @@
     ]
   },
   "devDependencies": {
+    "@faker-js/faker": "9.6.0",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
+    "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^14.6.0",
     "@types/google-map-react": "^2.1.10",
     "@types/jest": "^29.5.13",

src/2023/Home/components/ActionButtons/ActionButtons.tsx

@@ -4,6 +4,8 @@ import Button from "../../../../components/UI/Button";
 import styled from "styled-components";
 import { BIG_BREAKPOINT } from "../../../../constants/BreakPoints";
 import { gaEventTracker } from "../../../../components/analytics/Analytics";
+import { useDateInterval } from "../../../../hooks/useDateInterval";
+import { useUrlBuilder } from "../../../../services/urlBuilder";
 
 const StyledActionDiv = styled.div`
   display: flex;
@@ -16,16 +18,8 @@ const StyledActionDiv = styled.div`
 `;
 
 const ActionButtons: FC<React.PropsWithChildren<unknown>> = () => {
-  const ticketStartDay = new Date(data.tickets.startDay);
-  const ticketEndDay = new Date(data.tickets.endDay);
-  const CFPStartDay = new Date(data.cfp.startDay);
-  const CFPEndDay = new Date(data.cfp.endDay);
-  const sponsorshipStartDay = new Date(data.tickets.startDay);
-  const sponsorshipEndDay = new Date(data.tickets.endDay);
-  const today = new Date();
-
-  const isBetween = (startDay: Date, endDay: Date): boolean =>
-    startDay < new Date() && endDay > today;
+  const { isTicketsDisabled, isSponsorDisabled, isCfpDisabled } =
+    useDateInterval(new Date(), data);
 
   const trackSponsorshipInfo = useCallback(() => {
     gaEventTracker("sponsorship", "sponsorship");
@@ -41,27 +35,24 @@ const ActionButtons: FC<React.PropsWithChildren<unknown>> = () => {
 
   return (
     <StyledActionDiv>
-      {isBetween(ticketStartDay, ticketEndDay) && (
-        <Button
-          onClick={trackTickets}
-          text="🎟️ Buy Tickets"
-          link="https://tickets.devbcn.com/event/devbcn-2023"
-        />
-      )}
-      {isBetween(CFPStartDay, CFPEndDay) && (
-        <Button
-          onClick={trackCFP}
-          text="📢 Call For Papers"
-          link={data.cfp.link}
-        />
-      )}
-      {isBetween(sponsorshipStartDay, sponsorshipEndDay) && (
-        <Button
-          onClick={trackSponsorshipInfo}
-          text="🤝 Sponsorship"
-          link="mailto:[email protected]?subject=devBcn sponsorship"
-        />
-      )}
+      <Button
+        onClick={trackTickets}
+        text="🎟️ Buy Tickets"
+        link={useUrlBuilder("https://tickets.devbcn.com/event/devbcn-2023")}
+        disabled={isTicketsDisabled}
+      />
+      <Button
+        onClick={trackCFP}
+        text="📢 Call For Papers"
+        link={data.cfp.link}
+        disabled={isCfpDisabled}
+      />
+      <Button
+        onClick={trackSponsorshipInfo}
+        text="🤝 Sponsorship"
+        link="mailto:[email protected]?subject=devBcn sponsorship"
+        disabled={isSponsorDisabled}
+      />
     </StyledActionDiv>
   );
 };

src/2024/Home/components/ActionButtons.tsx

@@ -1,67 +1,59 @@
-import {FC, useCallback} from "react";
+import { FC, useCallback } from "react";
 import data from "../../../data/2024.json";
 import styled from "styled-components";
-import {BIG_BREAKPOINT} from "../../../constants/BreakPoints";
-import {gaEventTracker} from "../../../components/analytics/Analytics";
+import { BIG_BREAKPOINT } from "../../../constants/BreakPoints";
+import { gaEventTracker } from "../../../components/analytics/Analytics";
 import Button from "../../../components/UI/Button";
+import { useDateInterval } from "../../../hooks/useDateInterval";
+import {useUrlBuilder} from "../../../services/urlBuilder";
 
 const StyledActionDiv = styled.div`
-    display: flex;
-    text-align: center;
+  display: flex;
+  text-align: center;
 
-    @media (max-width: ${BIG_BREAKPOINT}px) {
-        flex-direction: column;
-        width: 75%;
-    }
+  @media (max-width: ${BIG_BREAKPOINT}px) {
+    flex-direction: column;
+    width: 75%;
+  }
 `;
 
 const ActionButtons: FC<React.PropsWithChildren<unknown>> = () => {
-    const ticketStartDay = new Date(data.tickets.startDay);
-    const ticketEndDay = new Date(data.tickets.endDay);
-    const CFPStartDay = new Date(data.cfp.startDay);
-    const CFPEndDay = new Date(data.cfp.endDay);
-    const sponsorshipStartDay = new Date(data.sponsors.startDate);
-    const sponsorshipEndDay = new Date(data.sponsors.endDate);
-    const today = new Date();
-
-    const isBetween = (startDay: Date, endDay: Date): boolean =>
-        startDay < new Date() && endDay > today;
-
-    const trackSponsorshipInfo = useCallback(() => {
-        gaEventTracker("sponsorship", "sponsorship");
-    }, []);
-
-    const trackTickets = useCallback(() => {
-        gaEventTracker("ticket", "tickets");
-    }, []);
-
-    const trackCFP = useCallback(() => {
-        gaEventTracker("CFP", "CFP");
-    }, []);
-
-    return (
-        <StyledActionDiv>
-            <Button
-                onClick={trackTickets}
-                text="🎟️ Buy Tickets"
-                link="https://tickets.devbcn.com/event/devbcn-2024"
-                disabled={!isBetween(ticketStartDay, ticketEndDay)}
-            />
-            {isBetween(CFPStartDay, CFPEndDay) && (
-                <Button
-                    onClick={trackCFP}
-                    text="📢 Call For Papers"
-                    link={data.cfp.link}
-                />
-            )}
-            {isBetween(sponsorshipStartDay, sponsorshipEndDay) && (
-                <Button
-                    onClick={trackSponsorshipInfo}
-                    text="🤝 Sponsorship"
-                    link="https://www.devbcn.com/sponsorship"
-                />
-            )}
-        </StyledActionDiv>
-    );
+  const { isSponsorDisabled, isCfpDisabled, isTicketsDisabled } =
+    useDateInterval(new Date(), data);
+
+  const trackSponsorshipInfo = useCallback(() => {
+    gaEventTracker("sponsorship", "sponsorship");
+  }, []);
+
+  const trackTickets = useCallback(() => {
+    gaEventTracker("ticket", "tickets");
+  }, []);
+
+  const trackCFP = useCallback(() => {
+    gaEventTracker("CFP", "CFP");
+  }, []);
+
+  return (
+    <StyledActionDiv>
+      <Button
+        onClick={trackTickets}
+        text="🎟️ Buy Tickets"
+        link={useUrlBuilder("https://tickets.devbcn.com/event/devbcn-2024")}
+        disabled={isTicketsDisabled}
+      />
+      <Button
+        onClick={trackCFP}
+        text="📢 Call For Papers"
+        link={data.cfp.link}
+        disabled={isCfpDisabled}
+      />
+      <Button
+        onClick={trackSponsorshipInfo}
+        text="🤝 Sponsorship"
+        link="https://www.devbcn.com/sponsorship"
+        disabled={isSponsorDisabled}
+      />
+    </StyledActionDiv>
+  );
 };
 export default ActionButtons;

src/hooks/useDateInterval.test.ts

@@ -0,0 +1,29 @@
+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', () => {
+    const { result } = renderHook(() => useDateInterval(today, edition));
+
+    expect(result.current.isTicketsDisabled).toBe(false);
+    expect(result.current.isCfpDisabled).toBe(true);
+    expect(result.current.isSponsorDisabled).toBe(false);
+  });
+});

src/hooks/useDateInterval.ts

@@ -0,0 +1,40 @@
+import { isWithinInterval } from "date-fns";
+
+type DateInterval = {
+  tickets:{
+    startDay: string,
+    endDay: string,
+  },
+  cfp:{
+    startDay: string,
+    endDay: string,
+  },
+  sponsors:{
+    startDate: string,
+    endDate: string,
+  }
+}
+
+export const useDateInterval = (today: Date, edition: DateInterval) => {
+  const ticketStartDay = new Date(edition.tickets.startDay);
+  const ticketEndDay = new Date(edition.tickets.endDay);
+  const CFPStartDay = new Date(edition.cfp.startDay);
+  const CFPEndDay = new Date(edition.cfp.endDay);
+  const sponsorStartDay = new Date(edition.sponsors.startDate);
+  const sponsorEndDay = new Date(edition.sponsors.endDate);
+
+  return {
+    isTicketsDisabled: !isWithinInterval(today, {
+      start: ticketStartDay,
+      end: ticketEndDay,
+    }),
+    isCfpDisabled: !isWithinInterval(today, {
+      start: CFPStartDay,
+      end: CFPEndDay,
+    }),
+    isSponsorDisabled: !isWithinInterval(today, {
+      start: sponsorStartDay,
+      end: sponsorEndDay,
+    }),
+  };
+};

src/services/urlBuilder.test.ts

@@ -0,0 +1,28 @@
+import { useUrlBuilder } from './urlBuilder';
+
+// Mock window.location for the test
+const originalLocation = window.location;
+delete window.location;
+window.location = {
+  origin: 'http://localhost',
+  search: '?query=123',
+} as any;
+
+describe('useUrlBuilder', () => {
+  afterAll(() => {
+    // Restore original window.location after tests
+    window.location = originalLocation;
+  });
+
+  it('should append the current search params to the URL', () => {
+    const url = 'http://example.com/path';
+    const result = useUrlBuilder(url);
+    expect(result).toBe('http://example.com/path?query=123');
+  });
+
+  it('should handle URLs without a path', () => {
+    const url = 'http://example.com';
+    const result = useUrlBuilder(url);
+    expect(result).toBe('http://example.com/?query=123');
+  });
+});

src/services/urlBuilder.ts

@@ -0,0 +1,5 @@
+export const useUrlBuilder = (url: string) => {
+    const returnUrl = new URL(url, window.location.origin);
+    returnUrl.search = window.location.search;
+    return returnUrl.toString();
+}

src/views/Home/components/ActionButtons/ActionButtons.tsx

@@ -1,10 +1,11 @@
-import {FC, useCallback} from "react";
+import { FC, useCallback } from "react";
 import data from "../../../../data/2025.json";
 import Button from "../../../../components/UI/Button";
 import styled from "styled-components";
-import {isWithinInterval} from "date-fns";
-import {BIG_BREAKPOINT} from "../../../../constants/BreakPoints";
-import {gaEventTracker} from "../../../../components/analytics/Analytics";
+import { BIG_BREAKPOINT } from "../../../../constants/BreakPoints";
+import { gaEventTracker } from "../../../../components/analytics/Analytics";
+import { useDateInterval } from "../../../../hooks/useDateInterval";
+import {useUrlBuilder} from "../../../../services/urlBuilder";
 
 const StyledActionDiv = styled.div`
   display: flex;
@@ -17,17 +18,8 @@ const StyledActionDiv = styled.div`
 `;
 
 const ActionButtons: FC<React.PropsWithChildren<unknown>> = () => {
-  const ticketStartDay = new Date(data.tickets.startDay);
-  const ticketEndDay = new Date(data.tickets.endDay);
-  const CFPStartDay = new Date(data.cfp.startDay);
-  const CFPEndDay = new Date(data.cfp.endDay);
-  const sponsorshipStartDay = new Date(data.sponsors.startDate);
-  const sponsorshipEndDay = new Date(data.sponsors.endDate);
-  const today = new Date();
-
-
-  const isBetween = (startDay: Date, endDay: Date): boolean =>
-      isWithinInterval(today, {start: startDay, end:endDay});
+  const { isTicketsDisabled, isSponsorDisabled, isCfpDisabled } =
+    useDateInterval(new Date(), data);
 
   const trackSponsorshipInfo = useCallback(() => {
     gaEventTracker("sponsorship", "sponsorship");
@@ -41,30 +33,29 @@ const ActionButtons: FC<React.PropsWithChildren<unknown>> = () => {
     gaEventTracker("CFP", "CFP");
   }, []);
 
-
   return (
     <StyledActionDiv>
       <Button
         onClick={trackTickets}
         text="🎟️ Buy Tickets"
         subtext="February 1st, 2025"
-        link="https://tickets.devbcn.com/event/devbcn-2025"
-        disabled={!isBetween(ticketStartDay, ticketEndDay)}
+        link={useUrlBuilder("https://tickets.devbcn.com/event/devbcn-2025")}
+        disabled={isTicketsDisabled}
+      />
+      <Button
+        onClick={trackCFP}
+        text="📢 Call For Papers"
+        subtext="January 1st, 2025"
+        link={data.cfp.link}
+        disabled={isCfpDisabled}
+      />
+      <Button
+        onClick={trackSponsorshipInfo}
+        text="🤝 Sponsorship"
+        target="_self"
+        link="/sponsorship"
+        disabled={isSponsorDisabled}
       />
-        <Button
-          onClick={trackCFP}
-          text="📢 Call For Papers"
-          subtext="January 1st, 2025"
-          link={data.cfp.link}
-          disabled={!isBetween(CFPStartDay, CFPEndDay)}
-        />
-        <Button
-          onClick={trackSponsorshipInfo}
-          text="🤝 Sponsorship"
-          target="_self"
-          link="/sponsorship"
-          disabled={!isBetween(sponsorshipStartDay, sponsorshipEndDay)}
-        />
     </StyledActionDiv>
   );
 };