feat: community members tab (#55)

packages/@justweb3/widget/src/lib/components/JustEnsCard/index.tsx

@@ -57,7 +57,7 @@ export const JustEnsCard: FC<JustEnsCardProps> = ({
 
   if (expanded) {
     return (
-      <div className={styles.expandableCard} onClick={() => handleEnsClick()}
+      <div style={style} className={styles.expandableCard} onClick={() => handleEnsClick()}
       >
         <Flex>
           <img

packages/@justweb3/widget/src/lib/components/Profile/ContentSection/index.tsx

@@ -28,6 +28,7 @@ import { JustaPlugin } from '../../../plugins';
 import { PluginContext } from '../../../providers/PluginProvider';
 import { ProfileSection } from '../ProfileSection';
 import MetadataCard from '../../MetadataCard';
+import MembersSection from '../MembersSection';
 
 export interface ContentProps {
   fullSubname?: string;
@@ -72,6 +73,11 @@ const ContentSection: React.FC<ContentProps> = ({
     connectedWalletChainId,
     chainId,
   ]);
+
+  const isProfileCommunity = useMemo(() => {
+    return fullSubname.split('.').length == 2
+  }, [fullSubname])
+
   const { createPluginApi } = useContext(PluginContext);
 
   const { sanitizeEnsImage } = useEnsAvatar();
@@ -81,8 +87,8 @@ const ContentSection: React.FC<ContentProps> = ({
   }, [fullSubname, chainId]);
 
   const hasTabs = useMemo(() => {
-    return plugins.some((plugin) => plugin.components?.ProfileTab);
-  }, [plugins]);
+    return plugins.some((plugin) => plugin.components?.ProfileTab) || isProfileCommunity;
+  }, [plugins, isProfileCommunity]);
 
   const MainTab = (
     <div
@@ -376,6 +382,9 @@ const ContentSection: React.FC<ContentProps> = ({
           >
             <TabsList>
               <TabsTrigger value={'Main'}>Main</TabsTrigger>
+              {isProfileCommunity && (
+                <TabsTrigger value={'Members'}>Members</TabsTrigger>
+              )}
               {plugins.map((plugin) => {
                 const component = plugin.components?.ProfileTab;
                 if (!component) {
@@ -401,6 +410,11 @@ const ContentSection: React.FC<ContentProps> = ({
             <TabsContent value={'Main'}>
               {React.cloneElement(MainTab)}
             </TabsContent>
+            {isProfileCommunity && (
+              <TabsContent value={'Members'}>
+                <MembersSection fullSubname={fullSubname} chainId={chainId} />
+              </TabsContent>
+            )}
             {plugins.map((plugin) => {
               const component = plugin.components?.ProfileTab;
               if (!component) {

packages/@justweb3/widget/src/lib/components/Profile/MembersSection/MembersSection.module.css

@@ -0,0 +1,40 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-height: 100%;
+  padding-top: 5px;
+  padding-bottom: 24px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  gap: 10px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+@media (min-width: 640px) {
+  .grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 768px) {
+  .grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.loadingContainer {
+  position: relative;
+  display: flex;
+  height: 100px;
+}

packages/@justweb3/widget/src/lib/components/Profile/MembersSection/index.tsx

@@ -0,0 +1,77 @@
+import { useEnsSubnames } from '@justaname.id/react';
+import { ChainId } from '@justaname.id/sdk';
+import { LoadingSpinner } from '@justweb3/ui';
+import React, { useEffect, useRef } from 'react';
+import JustEnsCard from '../../JustEnsCard';
+import styles from './MembersSection.module.css';
+;
+
+export interface MembersSectionProps {
+  fullSubname: string;
+  chainId: 1 | 11155111 | undefined;
+}
+
+const MembersSection: React.FC<MembersSectionProps> = ({
+  fullSubname,
+  chainId = 1,
+}) => {
+
+  const scrollContainerRef = useRef<HTMLDivElement>(null); // Add a ref for the scrollable container
+
+  const {
+    data,
+    hasNextPage,
+    fetchNextPage,
+    isLoading
+  } = useEnsSubnames({
+    ensDomain: decodeURIComponent(fullSubname),
+    chainId: chainId as ChainId,
+    isClaimed: true,
+    limit: 15,
+  });
+
+
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    console.log("container", container.scrollTop, container.scrollHeight, container.clientHeight)
+
+    const handleScroll = () => {
+      if (
+        container.scrollTop + container.clientHeight >=
+        container.scrollHeight - 200
+      ) {
+        if (!isLoading && hasNextPage) {
+          fetchNextPage();
+        }
+      }
+    };
+
+    container.addEventListener('scroll', handleScroll);
+    return () => container.removeEventListener('scroll', handleScroll);
+  }, [isLoading, hasNextPage]);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.grid} ref={scrollContainerRef}>
+        {data?.pages
+          .flatMap((subnameData) => subnameData.data).flatMap((sub) => sub.ens)
+          .map((subname) => (
+            <div key={`display-record-members-${subname}`}>
+              <JustEnsCard
+                addressOrEns={subname}
+                expanded
+                style={{ width: '100%', height: '100%' }}
+              />
+            </div>
+          ))}
+      </div>
+      {isLoading && <div className={styles.loadingContainer}>
+        <LoadingSpinner color={'var(--justweb3-primary-color)'} />
+      </div>
+      }
+    </div>
+  );
+};
+
+export default MembersSection;