refactor: simplify partner list components by introducing usePartnersList hook

Author: bjohansebas

apps/site/components/Common/Partners/PartnersIconList/index.tsx

@@ -1,14 +1,13 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
 import type { FC } from 'react';
 
+import usePartnersList from '#site/hooks/react-client/usePartnersList';
 import { ICON_PARTNERS } from '#site/next.partners.constants';
-import type { PartnerCategory, Partners } from '#site/types';
+import type { PartnerCategory } from '#site/types';
 
 import PartnerIcon from '../PartnerIcon';
 import style from './index.module.css';
-import { randomPartnerList } from '../utils';
 
 type PartnersIconListProps = {
   maxLength?: number;
@@ -19,39 +18,11 @@ const PartnersIconList: FC<PartnersIconListProps> = ({
   maxLength = 6,
   categories,
 }) => {
-  const initialRenderer = useRef(true);
-
-  const [seedList, setSeedList] = useState<Array<Partners>>(
-    ICON_PARTNERS.slice(0, maxLength)
-  );
-
-  useEffect(() => {
-    // We intentionally render the initial default "mock" list of sponsors
-    // to have the Skeletons loading, and then we render the actual list
-    // after an enough amount of time has passed to give a proper sense of Animation
-    // We do this client-side effect, to ensure that a random-amount of sponsors is renderered
-    // on every page load. Since our page is natively static, we need to ensure that
-    // on the client-side we have a random amount of sponsors rendered.
-    // Although whilst we are deployed on Vercel or other environment that supports ISR
-    // (Incremental Static Generation) whose would invalidate the cache every 5 minutes
-    // We want to ensure that this feature is compatible on a full-static environment
-    const renderSponsorsAnimation = setTimeout(() => {
-      initialRenderer.current = false;
-
-      setSeedList(
-        randomPartnerList(ICON_PARTNERS, {
-          pick: maxLength,
-          dateSeed: 5,
-          category: categories,
-        })
-      );
-    }, 0);
-
-    return () => clearTimeout(renderSponsorsAnimation);
-    // We only want this to run once on initial render
-    // We don't really care if the props change as realistically they shouldn't ever
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const { seedList, initialRenderer } = usePartnersList({
+    logos: ICON_PARTNERS,
+    maxLength,
+    categories,
+  });
 
   return (
     <div className={style.partnersIconList}>

apps/site/components/Common/Partners/PartnersLogoList/index.tsx

@@ -1,14 +1,13 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
 import type { FC } from 'react';
 
+import usePartnersList from '#site/hooks/react-client/usePartnersList';
 import { LOGO_PARTNERS } from '#site/next.partners.constants';
-import type { PartnerCategory, Partners } from '#site/types';
+import type { PartnerCategory } from '#site/types';
 
 import PartnerLogo from '../PartnerLogo';
 import style from './index.module.css';
-import { randomPartnerList } from '../utils';
 
 type PartnersLogoListProps = {
   maxLength?: number;
@@ -21,46 +20,13 @@ const PartnersLogoList: FC<PartnersLogoListProps> = ({
   sort = 'weight',
   categories,
 }) => {
-  const initialRenderer = useRef(true);
-
-  const [seedList, setSeedList] = useState<Array<Partners>>(() => {
-    if (maxLength === null) {
-      return LOGO_PARTNERS.filter(
-        partner => !categories || partner.categories.includes(categories)
-      );
-    }
-    return LOGO_PARTNERS.slice(0, maxLength);
+  const { seedList, initialRenderer } = usePartnersList({
+    logos: LOGO_PARTNERS,
+    maxLength,
+    sort,
+    categories,
   });
 
-  useEffect(() => {
-    // We intentionally render the initial default "mock" list of sponsors
-    // to have the Skeletons loading, and then we render the actual list
-    // after an enough amount of time has passed to give a proper sense of Animation
-    // We do this client-side effect, to ensure that a random-amount of sponsors is renderered
-    // on every page load. Since our page is natively static, we need to ensure that
-    // on the client-side we have a random amount of sponsors rendered.
-    // Although whilst we are deployed on Vercel or other environment that supports ISR
-    // (Incremental Static Generation) whose would invalidate the cache every 5 minutes
-    // We want to ensure that this feature is compatible on a full-static environment
-    const renderSponsorsAnimation = setTimeout(() => {
-      initialRenderer.current = false;
-
-      setSeedList(
-        randomPartnerList(LOGO_PARTNERS, {
-          pick: maxLength,
-          dateSeed: 5,
-          category: categories,
-          sort,
-        })
-      );
-    }, 0);
-
-    return () => clearTimeout(renderSponsorsAnimation);
-    // We only want this to run once on initial render
-    // We don't really care if the props change as realistically they shouldn't ever
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   return (
     <div className={style.partnersLogoList}>
       {seedList.map((partner, index) => (

apps/site/hooks/react-client/usePartnersList.ts

@@ -0,0 +1,62 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+import { randomPartnerList } from '#site/components/Common/Partners/utils';
+import type { PartnerCategory, Partners } from '#site/types/partners';
+
+const usePartnersList = ({
+  logos,
+  maxLength,
+  sort,
+  categories,
+}: {
+  logos: Array<Partners>;
+  maxLength: number;
+  sort?: 'name' | 'weight';
+  categories?: PartnerCategory;
+}) => {
+  const initialRenderer = useRef(true);
+
+  const [seedList, setSeedList] = useState<Array<Partners>>(() => {
+    if (maxLength === null) {
+      return logos.filter(
+        partner => !categories || partner.categories.includes(categories)
+      );
+    }
+    return logos.slice(0, maxLength);
+  });
+
+  useEffect(() => {
+    // We intentionally render the initial default "mock" list of sponsors
+    // to have the Skeletons loading, and then we render the actual list
+    // after an enough amount of time has passed to give a proper sense of Animation
+    // We do this client-side effect, to ensure that a random-amount of sponsors is renderered
+    // on every page load. Since our page is natively static, we need to ensure that
+    // on the client-side we have a random amount of sponsors rendered.
+    // Although whilst we are deployed on Vercel or other environment that supports ISR
+    // (Incremental Static Generation) whose would invalidate the cache every 5 minutes
+    // We want to ensure that this feature is compatible on a full-static environment
+    const renderSponsorsAnimation = setTimeout(() => {
+      initialRenderer.current = false;
+
+      setSeedList(
+        randomPartnerList(logos, {
+          pick: maxLength,
+          dateSeed: 1,
+          category: categories,
+          sort,
+        })
+      );
+    }, 0);
+
+    return () => clearTimeout(renderSponsorsAnimation);
+    // We only want this to run once on initial render
+    // We don't really care if the props change as realistically they shouldn't ever
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return { seedList, initialRenderer };
+};
+
+export default usePartnersList;