fix: hydration issue (#3714)

dailydotdev · Oct 29, 2024 · 95e49ad · 95e49ad
1 parent 02c4273
commit 95e49ad
Show file tree

Hide file tree

Showing 61 changed files with 756 additions and 828 deletions.
diff --git a/packages/shared/src/components/HorizontalScroll/HorizontalScroll.spec.tsx b/packages/shared/src/components/HorizontalScroll/HorizontalScroll.spec.tsx
@@ -15,7 +15,7 @@ describe('HorizontalScroll', () => {
   });
   it('renders correctly with the given title and children', () => {
     render(
-      <HorizontalScroll scrollProps={{ title: 'Scrollable Area' }}>
+      <HorizontalScroll scrollProps={{ title: { copy: 'Scrollable Area' } }}>
         <div>Child Content</div>
       </HorizontalScroll>,
     );
@@ -30,7 +30,7 @@ describe('HorizontalScroll', () => {
   it('applies custom className correctly', () => {
     render(
       <HorizontalScroll
-        scrollProps={{ title: 'Scrollable Area' }}
+        scrollProps={{ title: { copy: 'Scrollable Area' } }}
         className={{ scroll: 'custom-class' }}
       >
         <div>Child Content</div>
@@ -44,7 +44,10 @@ describe('HorizontalScroll', () => {
     const mockOnClickSeeAll = jest.fn();
     render(
       <HorizontalScroll
-        scrollProps={{ onClickSeeAll: mockOnClickSeeAll, title: 'Scrollable ' }}
+        scrollProps={{
+          onClickSeeAll: mockOnClickSeeAll,
+          title: { copy: 'Scrollable ' },
+        }}
       >
         <div>Child Content</div>
       </HorizontalScroll>,

diff --git a/packages/shared/src/components/HorizontalScroll/HorizontalScroll.tsx b/packages/shared/src/components/HorizontalScroll/HorizontalScroll.tsx
@@ -26,17 +26,19 @@ function HorizontalScrollComponent(
   { children, className, scrollProps }: HorizontalScrollProps,
   propRef: MutableRefObject<HTMLDivElement>,
 ): ReactElement {
-  const { ref, Header } = useHorizontalScrollHeader(scrollProps);
-
   const id = useId();
   const titleId = `horizontal-scroll-title-${id}`;
+  const { ref, header } = useHorizontalScrollHeader({
+    ...scrollProps,
+    title: { ...scrollProps?.title, id: titleId },
+  });
 
   return (
     <div
       className={classNames('flex flex-col', className?.container)}
       ref={propRef}
     >
-      <Header titleId={titleId} />
+      {header}
       <div
         ref={ref}
         className={classNames(

diff --git a/packages/shared/src/components/HorizontalScroll/HorizontalScrollHeader.tsx b/packages/shared/src/components/HorizontalScroll/HorizontalScrollHeader.tsx
@@ -6,10 +6,15 @@ import ConditionalWrapper from '../ConditionalWrapper';
 import { ArrowIcon } from '../icons';
 import { Typography, TypographyType } from '../typography/Typography';
 
+export interface HorizontalScrollTitleProps {
+  copy: string;
+  id?: string;
+  icon?: ReactNode;
+  type?: TypographyType;
+}
+
 export interface HorizontalScrollHeaderProps {
-  title: ReactNode;
-  titleId?: string;
-  titleType?: TypographyType;
+  title: HorizontalScrollTitleProps;
   isAtEnd: boolean;
   isAtStart: boolean;
   onClickNext: MouseEventHandler;
@@ -19,10 +24,24 @@ export interface HorizontalScrollHeaderProps {
   canScroll: boolean;
 }
 
+export const HorizontalScrollTitle = ({
+  id,
+  copy,
+  icon,
+  type = TypographyType.Title2,
+}: HorizontalScrollTitleProps): ReactElement => {
+  return (
+    <span className="flex flex-row items-center">
+      {icon}
+      <Typography type={type} id={id} bold>
+        {copy}
+      </Typography>
+    </span>
+  );
+};
+
 export function HorizontalScrollHeader({
   title,
-  titleId,
-  titleType = TypographyType.Title2,
   isAtEnd,
   isAtStart,
   onClickNext,
@@ -33,14 +52,7 @@ export function HorizontalScrollHeader({
 }: HorizontalScrollHeaderProps): ReactElement {
   return (
     <div className="mx-4 mb-4 flex min-h-10 w-auto flex-row items-center justify-between laptop:mx-0 laptop:w-full">
-      <Typography
-        className="flex flex-row items-center"
-        type={titleType}
-        id={titleId}
-        bold
-      >
-        {title}
-      </Typography>
+      <HorizontalScrollTitle {...title} />
       {canScroll && (
         <div className="hidden flex-row items-center gap-3 tablet:flex">
           <Button
@@ -61,7 +73,7 @@ export function HorizontalScrollHeader({
             <ConditionalWrapper
               condition={!!linkToSeeAll}
               wrapper={(component) => (
-                <Link href={linkToSeeAll} passHref>
+                <Link href={linkToSeeAll} passHref legacyBehavior>
                   {component}
                 </Link>
               )}

diff --git a/packages/shared/src/components/HorizontalScroll/useHorizontalScrollHeader.spec.tsx b/packages/shared/src/components/HorizontalScroll/useHorizontalScrollHeader.spec.tsx
@@ -15,16 +15,12 @@ const TestComponent = ({
   onScroll,
   onClickSeeAll,
 }: UseHorizontalScrollHeaderProps) => {
-  const { Header, ref } = useHorizontalScrollHeader({
+  const { header, ref } = useHorizontalScrollHeader({
     title,
     onScroll,
     onClickSeeAll,
   });
-  return (
-    <div ref={ref}>
-      <Header />
-    </div>
-  );
+  return <div ref={ref}>{header}</div>;
 };
 
 describe('useHorizontalScrollHeader', () => {
@@ -46,13 +42,15 @@ describe('useHorizontalScrollHeader', () => {
   });
 
   it('renders the header with provided title', () => {
-    render(<TestComponent title="Test Title" />);
+    render(<TestComponent title={{ copy: 'Test Title' }} />);
     expect(screen.getByText('Test Title')).toBeInTheDocument();
   });
 
   it('calls onScroll when clicking right arrow', () => {
     const mockOnScroll = jest.fn();
-    render(<TestComponent title="Test Title" onScroll={mockOnScroll} />);
+    render(
+      <TestComponent title={{ copy: 'Test Title' }} onScroll={mockOnScroll} />,
+    );
     fireEvent.click(screen.getByLabelText('Scroll right'));
     expect(mockOnScroll).toHaveBeenCalled();
   });
@@ -63,22 +61,27 @@ describe('useHorizontalScrollHeader', () => {
       isAtEnd: true,
     });
     const mockOnScroll = jest.fn();
-    render(<TestComponent title="Test Title" onScroll={mockOnScroll} />);
+    render(
+      <TestComponent title={{ copy: 'Test Title' }} onScroll={mockOnScroll} />,
+    );
     fireEvent.click(screen.getByLabelText('Scroll left'));
     expect(mockOnScroll).toHaveBeenCalled();
   });
 
   it('calls onClickSeeAll when the See All button is clicked', () => {
     const mockOnClickSeeAll = jest.fn();
     render(
-      <TestComponent title="Test Title" onClickSeeAll={mockOnClickSeeAll} />,
+      <TestComponent
+        title={{ copy: 'Test Title' }}
+        onClickSeeAll={mockOnClickSeeAll}
+      />,
     );
     fireEvent.click(screen.getByText('See all'));
     expect(mockOnClickSeeAll).toHaveBeenCalled();
   });
 
   it('disables the left arrow button when at the start', () => {
-    render(<TestComponent title="Test Title" />);
+    render(<TestComponent title={{ copy: 'Test Title' }} />);
     expect(screen.getByLabelText('Scroll left')).toBeDisabled();
   });
 
@@ -87,7 +90,7 @@ describe('useHorizontalScrollHeader', () => {
       isAtStart: false,
       isAtEnd: true,
     });
-    render(<TestComponent title="Test Title" />);
+    render(<TestComponent title={{ copy: 'Test Title' }} />);
     expect(screen.getByLabelText('Scroll right')).toBeDisabled();
   });
 
@@ -97,7 +100,7 @@ describe('useHorizontalScrollHeader', () => {
       isOverflowing: false,
       elementsCount: 5,
     });
-    render(<TestComponent title="Test Title" />);
+    render(<TestComponent title={{ copy: 'Test Title' }} />);
 
     expect(screen.queryByLabelText('Scroll right')).not.toBeInTheDocument();
     expect(screen.queryByLabelText('Scroll left')).not.toBeInTheDocument();

diff --git a/packages/shared/src/components/HorizontalScroll/useHorizontalScrollHeader.tsx b/packages/shared/src/components/HorizontalScroll/useHorizontalScrollHeader.tsx
@@ -1,25 +1,21 @@
 import React, {
-  FunctionComponent,
   MouseEventHandler,
   ReactNode,
   RefObject,
   useCallback,
-  useMemo,
   useRef,
 } from 'react';
 import { useScrollManagement } from './useScrollManagement';
 import { useCalculateVisibleElements } from './useCalculateVisibleElements';
 import {
   HorizontalScrollHeader,
-  HorizontalScrollHeaderProps,
+  HorizontalScrollTitleProps,
 } from './HorizontalScrollHeader';
 
-type HeaderProps = Pick<HorizontalScrollHeaderProps, 'titleId' | 'titleType'>;
-
 interface HorizontalScrollHeaderReturn<
   El extends HTMLElement = HTMLDivElement,
 > {
-  Header: FunctionComponent<HeaderProps>;
+  header: ReactNode;
   isAtEnd: boolean;
   isAtStart: boolean;
   isOverflowing: boolean;
@@ -32,7 +28,7 @@ export interface UseHorizontalScrollHeaderProps {
   onScroll?: (ref: RefObject<HTMLElement>) => void;
   onClickSeeAll?: MouseEventHandler;
   linkToSeeAll?: string;
-  title: ReactNode;
+  title: HorizontalScrollTitleProps;
 }
 
 export const useHorizontalScrollHeader = <
@@ -71,37 +67,21 @@ export const useHorizontalScrollHeader = <
     }
   }, [numCards, scrollableElementWidth, onScroll]);
 
-  const Header = useMemo(
-    () =>
-      // eslint-disable-next-line react/display-name
-      (props: HeaderProps = {}) =>
-        (
-          <HorizontalScrollHeader
-            {...props}
-            title={title}
-            isAtEnd={isAtEnd}
-            isAtStart={isAtStart}
-            canScroll={isOverflowing}
-            onClickNext={onClickNext}
-            onClickPrevious={onClickPrevious}
-            onClickSeeAll={onClickSeeAll}
-            linkToSeeAll={linkToSeeAll}
-          />
-        ),
-    [
-      isAtEnd,
-      isAtStart,
-      linkToSeeAll,
-      onClickNext,
-      onClickPrevious,
-      onClickSeeAll,
-      title,
-      isOverflowing,
-    ],
+  const header = (
+    <HorizontalScrollHeader
+      title={title}
+      isAtEnd={isAtEnd}
+      isAtStart={isAtStart}
+      canScroll={isOverflowing}
+      onClickNext={onClickNext}
+      onClickPrevious={onClickPrevious}
+      onClickSeeAll={onClickSeeAll}
+      linkToSeeAll={linkToSeeAll}
+    />
   );
 
   return {
-    Header,
+    header,
     ref,
     isAtStart,
     isAtEnd,