feat: supporters provider created

Author: canerakdas

apps/site/components/Common/Supporters/index.tsx

@@ -2,25 +2,20 @@
 
 import Avatar from '@node-core/ui-components/Common/AvatarGroup/Avatar';
 import type { FC } from 'react';
-import { use } from 'react';
 
 import type { Supporters } from '#site/types';
 
-type SupportersProps = {
-  supporters: Promise<Array<Supporters>>;
+type SupportersListProps = {
+  supporters: Array<Supporters>;
 };
 
 // TODO: Sort supporters by all time contribution amount and link to their Open Collective page
-const SupportersList: FC<SupportersProps> = ({ supporters }) => {
-  const supportersList = use(supporters);
-
-  return (
-    <div className="flex max-w-full flex-wrap items-center justify-center gap-1">
-      {supportersList.map(({ name, image }, i) => (
-        <Avatar nickname={name} image={image} key={`${name}-${i}`} />
-      ))}
-    </div>
-  );
-};
+const SupportersList: FC<SupportersListProps> = ({ supporters }) => (
+  <div className="flex max-w-full flex-wrap items-center justify-center gap-1">
+    {supporters.map(({ name, image }, i) => (
+      <Avatar nickname={name} image={image} key={`${name}-${i}`} />
+    ))}
+  </div>
+);
 
 export default SupportersList;

apps/site/components/withSupporters.tsx

@@ -1,12 +1,12 @@
+'use server';
 import type { FC, PropsWithChildren } from 'react';
 
-import { fetchOpenCollectiveData } from '#site/next-data/generators/supportersData.mjs';
-import type { Supporters } from '#site/types';
-
 import SupportersList from './Common/Supporters';
 
+import provideSupporters from '#site/next-data/providers/supportersData';
+
 const WithSupporters: FC<PropsWithChildren> = () => {
-  const supporters = fetchOpenCollectiveData() as Promise<Array<Supporters>>;
+  const supporters = provideSupporters();
 
   return (
     <div className="flex max-w-full flex-wrap items-center gap-1">

apps/site/next-data/generators/supportersData.mjs

@@ -1,3 +1,9 @@
+/**
+ * Fetches supporters data from Open Collective API, filters active backers,
+ * and maps it to the Supporters type.
+ *
+ * @returns {Promise<Array<import('#site/types/supporters')>>} Array of supporters
+ */
 async function fetchOpenCollectiveData() {
   const endpoint = 'https://opencollective.com/nodejs/members/all.json';
 

apps/site/next-data/providers/supportersData.mjs

@@ -0,0 +1,9 @@
+import { cache } from 'react';
+
+import { fetchOpenCollectiveData } from '#site/next-data/generators/supportersData.mjs';
+
+const openCollectiveSupporters = await fetchOpenCollectiveData();
+
+const provideSupporters = cache(() => openCollectiveSupporters);
+
+export default provideSupporters;