Merge pull request #15 from neynarxyz/kevin/neyn-1941-explorer-overal…

…l-metrics-on-homepage-v2 add total messages
neynarxyz · Jun 27, 2024 · 85644e9 · 85644e9
2 parents caa0e08 + 4cdadf1
commit 85644e9
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 62 deletions.
diff --git a/src/components/home.tsx b/src/components/home.tsx
@@ -1,5 +1,4 @@
 'use client';
-
 import { CastComponent } from '@/components/cast-component';
 import { ProfileComponent } from '@/components/profile-component';
 import {
@@ -10,41 +9,47 @@ import {
   warpcastURLPFP,
   warpcastURLProfile,
 } from '@/constants';
+import HubsDataComponent from './hubs-data';
 
 export default function Home() {
   return (
-    <div className="max-w-3xl mx-auto grid grid-cols-1 sm:grid-cols-2 gap-4">
-      <div className="space-y-4">
-        <div className="space-y-2">
-          <p className="text-center">Example hash</p>
-          <div>
-            <CastComponent cast={exampleCast} />
+    <div className="w-full space-y-16">
+      <div className="max-w-3xl mx-auto grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-x-5">
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <p className="text-center">Example hash</p>
+            <div>
+              <CastComponent cast={exampleCast} />
+            </div>
           </div>
-        </div>
-        <div className="space-y-2">
-          <p className="text-center">Example FID</p>
-          <div>
-            <ProfileComponent pfp={FIDPFP} url={'3'} />
+          <div className="space-y-2">
+            <p className="text-center">Example FID</p>
+            <div>
+              <ProfileComponent pfp={FIDPFP} url={'3'} />
+            </div>
           </div>
         </div>
-      </div>
-      <div className="space-y-4">
-        <div className="space-y-2">
-          <p className="text-center">Example Warpcast cast url</p>
-          <div>
-            <CastComponent
-              cast={warpcastURLCast}
-              warpcastUrl={warpcastURLCastURL}
-            />
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <p className="text-center">Example Warpcast cast url</p>
+            <div>
+              <CastComponent
+                cast={warpcastURLCast}
+                warpcastUrl={warpcastURLCastURL}
+              />
+            </div>
           </div>
-        </div>
-        <div className="space-y-2">
-          <p className="text-center">Example Warpcast profile url</p>
-          <div>
-            <ProfileComponent pfp={warpcastURLPFP} url={warpcastURLProfile} />
+          <div className="space-y-2">
+            <p className="text-center">Example Warpcast profile url</p>
+            <div>
+              <ProfileComponent pfp={warpcastURLPFP} url={warpcastURLProfile} />
+            </div>
           </div>
         </div>
       </div>
+      <div className="flex justify-center">
+        <HubsDataComponent />
+      </div>
     </div>
   );
 }
diff --git a/src/components/hubs-data.tsx b/src/components/hubs-data.tsx
@@ -0,0 +1,45 @@
+'use client';
+import { useState, useEffect } from 'react';
+import { capitalizeNickname } from '@/lib/helpers';
+import { getHubsInfo } from '@/lib/utils';
+
+const HubsDataComponent = () => {
+  const [hubsData, setHubsData] = useState<any>([]);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const data = await getHubsInfo();
+        setHubsData(data as any);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    }
+    fetchData();
+  }, []);
+
+  return (
+    <div className="flex flex-row md:w-1/2">
+      <div className="flex md:flex-row flex-col md:items-start items-center justify-around w-full md:space-x-16">
+        {hubsData.map((hub: any, index: number) => (
+          <div className="space-y-2" key={index}>
+            <p className="text-center">
+              Number of Messages on {capitalizeNickname(hub?.nickname)}
+            </p>
+            <div>
+              {hub.dbStats.numMessages !== null ? (
+                <p className="text-center font-bold">
+                  {hub?.dbStats?.numMessages}
+                </p>
+              ) : (
+                <p className="text-center">Loading...</p>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default HubsDataComponent;
diff --git a/src/lib/helpers.ts b/src/lib/helpers.ts
@@ -0,0 +1,4 @@
+export function capitalizeNickname(nickname: string) {
+  if (!nickname) return '';
+  return nickname.charAt(0).toUpperCase() + nickname.slice(1);
+}