refactor: remove code duplication

src/2023/Cfp/CfpSection2023.test.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import CfpSection2023 from "./CfpSection2023";
+import { useWindowSize } from "react-use";
+import conferenceData from "../../data/2023.json";
+import { data } from "./CfpData";
+
+// Mock useWindowSize to control the window size in tests
+jest.mock("react-use", () => ({
+  ...jest.requireActual("react-use"),
+  useWindowSize: jest.fn(),
+}));
+
+describe("CfpSection2023", () => {
+  beforeEach(() => {
+    // Reset the mock before each test
+    (useWindowSize as jest.Mock).mockReset();
+    (useWindowSize as jest.Mock).mockReturnValue({ width: 1024 }); // Default width
+  });
+
+  it("should render without crashing", () => {
+    render(<CfpSection2023 />);
+  });
+
+  it("should render the title and subtitle", () => {
+    render(<CfpSection2023 />);
+    expect(
+      screen.getByText("CFP Committee", { exact: false }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        "We're excited to announce the members of the Call for Papers committee for the next DevBcn conference! These experienced professionals will be reviewing and selecting the best talks and workshops for the upcoming event.",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("should render the tracks and members", () => {
+    render(<CfpSection2023 />);
+    data.forEach((track) => {
+      expect(screen.getAllByText(track.name, { exact: false })).not.toBeNull();
+      track.members
+        .filter((member) => member.photo !== "")
+        .forEach((member) => {
+          expect(
+            screen.getAllByText(member.name, { exact: false }),
+          ).not.toBeNull();
+        });
+    });
+  });
+
+  it("should render member photos", () => {
+    render(<CfpSection2023 />);
+    data.forEach((track) => {
+      track.members
+        .filter((member) => member.photo !== "")
+        .forEach((member) => {
+          const image = screen.getAllByAltText(member.name);
+          expect(image).not.toBeNull();
+          expect(image.at(0)).toHaveAttribute("src", member.photo);
+        });
+    });
+  });
+
+  it("should render twitter links", () => {
+    render(<CfpSection2023 />);
+    data.forEach((track) => {
+      track.members
+        .filter((member) => member.twitter !== "")
+        .forEach((member) => {
+          const twitterLinks = screen.getAllByRole("link");
+          const twitterLink = twitterLinks.find(
+            (link) => link.getAttribute("href") === member.twitter,
+          );
+          expect(twitterLink).toBeInTheDocument();
+          expect(twitterLink).toHaveAttribute("href", member.twitter);
+        });
+    });
+  });
+
+  it("should render linkedIn links", () => {
+    render(<CfpSection2023 />);
+    data.forEach((track) => {
+      track.members
+        .filter((member) => member.linkedIn !== "")
+        .forEach((member) => {
+          const linkedInLinks = screen.getAllByRole("link");
+          const linkedInLink = linkedInLinks.find(
+            (link) => link.getAttribute("href") === member.linkedIn,
+          );
+          expect(linkedInLink).toBeInTheDocument();
+          expect(linkedInLink).toHaveAttribute("href", member.linkedIn);
+        });
+    });
+  });
+
+  it("should update the document title", async () => {
+    render(<CfpSection2023 />);
+    await waitFor(() => {
+      expect(document.title).toBe(
+        `CFP Committee - DevBcn - ${conferenceData.edition}`,
+      );
+    });
+  });
+
+  it("should not render the icons when the width is smaller than the breakpoint", () => {
+    (useWindowSize as jest.Mock).mockReturnValue({ width: 767 });
+    render(<CfpSection2023 />);
+    const lessIcon = screen.queryByAltText("more than - icon");
+    const moreIcon = screen.queryByAltText("Less than - icon");
+    expect(lessIcon).not.toBeInTheDocument();
+    expect(moreIcon).not.toBeInTheDocument();
+  });
+});

src/2023/Cfp/CfpSection2023.tsx

@@ -35,7 +35,9 @@ const MemberName = styled.h5`
   text-align: left;
 `;
 
-const CfpTrackComponent: FC<React.PropsWithChildren<CfpTrackProps>> = ({ track }) => (
+const CfpTrackComponent: FC<React.PropsWithChildren<CfpTrackProps>> = ({
+  track,
+}) => (
   <>
     <section>
       <TrackName>{track.name}</TrackName>
@@ -90,8 +92,14 @@ const CfpSection2023: FC<React.PropsWithChildren<unknown>> = () => {
           />
           {width > MOBILE_BREAKPOINT && (
             <>
-              <StyledLessIcon src={MoreThanBlueWhiteIcon} />
-              <StyledMoreIcon src={LessThanBlueWhiteIcon} />
+              <StyledLessIcon
+                title="Less than - icon"
+                src={MoreThanBlueWhiteIcon}
+              />
+              <StyledMoreIcon
+                title="more than - icon"
+                src={LessThanBlueWhiteIcon}
+              />
             </>
           )}
         </StyledSpeakersSection>

src/services/buildSlashes.ts

@@ -0,0 +1,10 @@
+export const buildSlashes = (module: number) => {
+  const slashesElement = document.getElementById("Slashes");
+
+  const slashesWidth = slashesElement?.offsetWidth ?? 0;
+  let slashes = "";
+  for (let index = 0; index < slashesWidth; index++) {
+    if (index % module === 0) slashes += "/ ";
+  }
+  return slashes;
+};

src/views/Home/components/Sponsors/BasicSponsor.tsx

@@ -11,39 +11,31 @@ import {
   StyledSponsorTitleSlashesContainer,
 } from "./Sponsors.style";
 import SponsorBadge from "./SponsorBadge";
-import {Color} from "../../../../styles/colors";
-import {BIG_BREAKPOINT} from "../../../../constants/BreakPoints";
-import {buildSlashes} from "./Sponsors";
-import {useWindowSize} from "react-use";
-import React, {FC, useCallback, useEffect, useState} from "react";
-import {Sponsor} from "./SponsorsData";
+import { Color } from "../../../../styles/colors";
+import { BIG_BREAKPOINT } from "../../../../constants/BreakPoints";
+import React, { FC } from "react";
+import { Sponsor } from "./SponsorsData";
+import { useSponsorsHook } from "./useSponsorsHook";
 
 interface Props {
   sponsors: Array<Sponsor> | null;
 }
 
-export const BasicSponsor: FC<React.PropsWithChildren<Props>> = ({sponsors}) => {
-  const { width } = useWindowSize();
-  const [slashes, setSlashes] = useState("");
-  const [isHovered, setIsHovered] = useState<boolean>(false);
-
-  useEffect(() => {
-    const newSlashes = buildSlashes(2);
-
-    setSlashes(newSlashes);
-  }, [width]);
-
-  const handleHoverSponsorBasic = useCallback(() => setIsHovered(true), []);
-  const handleUnHoverSponsorBasic = useCallback(() => setIsHovered(false), []);
-
+export const BasicSponsor: FC<React.PropsWithChildren<Props>> = ({
+  sponsors,
+}) => {
+  const { width, slashes, isHovered, handleHover, handleUnHover } =
+    useSponsorsHook({
+      numberOfSlashGroups: 2,
+    });
   return (
     <>
       {sponsors !== null && sponsors.length > 0 && (
         <StyledSponsorItemContainer
           id="basic-sponsors"
           className="SponsorItem basic"
-          onMouseEnter={handleHoverSponsorBasic}
-          onMouseLeave={handleUnHoverSponsorBasic}
+          onMouseEnter={handleHover}
+          onMouseLeave={handleUnHover}
         >
           <SponsorBadge
             color={Color.DARK_BLUE}

src/views/Home/components/Sponsors/Communities.tsx

@@ -11,29 +11,23 @@ import {
   StyledSponsorTitleSlashesContainer,
 } from "./Sponsors.style";
 import SponsorBadge from "./SponsorBadge";
-import {Color} from "../../../../styles/colors";
-import {BIG_BREAKPOINT} from "../../../../constants/BreakPoints";
-import {buildSlashes} from "./Sponsors";
-import {useWindowSize} from "react-use";
-import React, {FC, useCallback, useEffect, useState} from "react";
-import {Sponsor} from "./SponsorsData";
+import { Color } from "../../../../styles/colors";
+import { BIG_BREAKPOINT } from "../../../../constants/BreakPoints";
+import React, { FC } from "react";
+import { Sponsor } from "./SponsorsData";
+import { useSponsorsHook } from "./useSponsorsHook";
 
 interface Props {
   sponsors: Array<Sponsor> | null;
 }
 
-export const Communities: FC<React.PropsWithChildren<Props>> = ({sponsors}) => {
-  const { width } = useWindowSize();
-  const [slashes, setSlashes] = useState("");
-  const [isHovered, setIsHovered] = useState<boolean>(false);
-  useEffect(() => {
-    const newSlashes = buildSlashes(2);
-
-    setSlashes(newSlashes);
-  }, [width]);
-
-  const handleHover = useCallback(() => setIsHovered(true), []);
-  const handleUnHover = useCallback(() => setIsHovered(false), []);
+export const Communities: FC<React.PropsWithChildren<Props>> = ({
+  sponsors,
+}) => {
+  const { width, slashes, isHovered, handleHover, handleUnHover } =
+    useSponsorsHook({
+      numberOfSlashGroups: 2,
+    });
   return (
     <>
       {sponsors !== null && sponsors.length > 0 && (

src/views/Home/components/Sponsors/MediaPartners.tsx

@@ -13,10 +13,9 @@ import {
 import SponsorBadge from "./SponsorBadge";
 import { Color } from "../../../../styles/colors";
 import { BIG_BREAKPOINT } from "../../../../constants/BreakPoints";
-import { buildSlashes } from "./Sponsors";
-import { useWindowSize } from "react-use";
-import React, { FC, useCallback, useEffect, useState } from "react";
+import React, { FC } from "react";
 import { Sponsor } from "./SponsorsData";
+import { useSponsorsHook } from "./useSponsorsHook";
 
 interface Props {
   sponsors: Array<Sponsor> | null;
@@ -25,25 +24,19 @@ interface Props {
 export const MediaPartners: FC<React.PropsWithChildren<Props>> = ({
   sponsors,
 }) => {
-  const { width } = useWindowSize();
-  const [slashes, setSlashes] = useState("");
-  const [isHovered, setIsHovered] = useState<boolean>(false);
-  useEffect(() => {
-    const newSlashes = buildSlashes(2);
+  const { width, slashes, isHovered, handleHover, handleUnHover } =
+    useSponsorsHook({
+      numberOfSlashGroups: 2,
+    });
 
-    setSlashes(newSlashes);
-  }, [width]);
-
-  const handleHoverMediaPartner = useCallback(() => setIsHovered(true), []);
-  const handleUnHoverMediaPartner = useCallback(() => setIsHovered(false), []);
   return (
     <>
       {sponsors !== null && sponsors.length > 0 && (
         <StyledSponsorItemContainer
           className="SponsorItem virtual"
           id="media-partners"
-          onMouseEnter={handleHoverMediaPartner}
-          onMouseLeave={handleUnHoverMediaPartner}
+          onMouseEnter={handleHover}
+          onMouseLeave={handleUnHover}
         >
           <SponsorBadge
             color={Color.DARK_BLUE}

src/views/Home/components/Sponsors/PremiumSponsors.tsx

@@ -11,40 +11,32 @@ import {
   StyledSponsorTitleSlashesContainer,
 } from "./Sponsors.style";
 import SponsorBadge from "./SponsorBadge";
-import {Color} from "../../../../styles/colors";
-import {BIG_BREAKPOINT} from "../../../../constants/BreakPoints";
-import {useWindowSize} from "react-use";
-import React, {FC, useCallback, useEffect, useState} from "react";
-import {buildSlashes} from "./Sponsors";
-import {Sponsor} from "./SponsorsData";
+import { Color } from "../../../../styles/colors";
+import { BIG_BREAKPOINT } from "../../../../constants/BreakPoints";
+import React, { FC } from "react";
+import { Sponsor } from "./SponsorsData";
+import { useSponsorsHook } from "./useSponsorsHook";
 
 interface Props {
   sponsors: Array<Sponsor> | null;
 }
 
-export const PremiumSponsors: FC<React.PropsWithChildren<Props>> = ({sponsors}) => {
-  const { width } = useWindowSize();
-  const [slashes, setSlashes] = useState("");
-  const [isHovered, setIsHovered] = useState<boolean>(false);
-  useEffect(() => {
-    const newSlashes = buildSlashes(2);
+export const PremiumSponsors: FC<React.PropsWithChildren<Props>> = ({
+  sponsors,
+}) => {
+  const { width, slashes, isHovered, handleHover, handleUnHover } =
+    useSponsorsHook({
+      numberOfSlashGroups: 2,
+    });
 
-    setSlashes(newSlashes);
-  }, [width]);
-
-  const handleHoverSponsorPremium = useCallback(() => setIsHovered(true), []);
-  const handleUnHoverSponsorPremium = useCallback(
-    () => setIsHovered(false),
-    []
-  );
   return (
     <>
       {sponsors !== null && sponsors.length > 0 && (
         <StyledSponsorItemContainer
           id="premium-sponsors"
           className="SponsorItem premium"
-          onMouseEnter={handleHoverSponsorPremium}
-          onMouseLeave={handleUnHoverSponsorPremium}
+          onMouseEnter={handleHover}
+          onMouseLeave={handleUnHover}
         >
           <SponsorBadge
             color={Color.DARK_BLUE}