feat: enhance PartnersLogoList to filter partners by category and allow unlimited items

Author: bjohansebas

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

@@ -20,9 +20,14 @@ const PartnersLogoList: FC<PartnersLogoListProps> = ({
 }) => {
   const initialRenderer = useRef(true);
 
-  const [seedList, setSeedList] = useState<Array<Partners>>(
-    LOGO_PARTNERS.slice(0, maxLength)
-  );
+  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);
+  });
 
   useEffect(() => {
     // We intentionally render the initial default "mock" list of sponsors

apps/site/components/Common/Partners/utils.ts

@@ -1,7 +1,7 @@
 import type { PartnerCategory, Partners } from '#site/types/partners.js';
 
 // TODO: Implement no random list
-// TODO: Implement no limit items
+// TODO: Implement no importance of partner
 function randomPartnerList(
   partners: Array<Partners>,
   pick = 4,
@@ -28,12 +28,15 @@ function randomPartnerList(
   const rng = mulberry32(seed);
 
   // Create a copy of the array to avoid modifying the original
-  const shuffled = partners
+  let shuffled = [...partners]
     .filter(partner => !category || partner.categories.includes(category))
-    .slice()
     .sort(() => rng() - 0.5);
 
-  return shuffled.slice(0, pick);
+  if (pick !== null) {
+    shuffled = shuffled.slice(0, pick);
+  }
+
+  return shuffled;
 }
 
 // This function returns a random list of partners based on a fixed time seed

apps/site/pages/en/about/partners.mdx

@@ -11,19 +11,19 @@ Importance of partners and their role and explains our partner categories (Ecosy
 
 Projects with their logo, name, tier, the description and a CTA button
 
-<PartnersLogoList categories="infrastructure" />
+<PartnersLogoList categories="infrastructure" maxLength={null} />
 
 ## Security
 
 Projects with their logo, name, tier, the description and a CTA button
 
-<PartnersLogoList categories="security" />
+<PartnersLogoList categories="security" maxLength={null} />
 
 ## Ecosystem Sustainability Program (ESP)
 
 Projects with their logo, name, tier, the description and a CTA button
 
-<PartnersLogoList categories="esp" />
+<PartnersLogoList categories="esp" maxLength={null} />
 
 ## Backers (Open Collective and GitHub Sponsors)