Merge pull request #596 from us3r-network/F-reconstructProfile-bufan

F-reconstructProfile-bufan
degencast · Mar 7, 2024 · 2bc451e · 2bc451e
2 parents 3fdbc16 + 4ac88a6
commit 2bc451e
Show file tree

Hide file tree

Showing 19 changed files with 407 additions and 191 deletions.
diff --git a/apps/u3/src/components/message/NoConversations.tsx b/apps/u3/src/components/message/NoConversations.tsx
@@ -2,7 +2,6 @@ import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 import { useNav } from '../../contexts/NavCtx';
 import { SocialButtonPrimary } from '../social/button/SocialButton';
-import { FollowType } from '@/container/profile/Contacts';
 
 export default function NoConversations() {
   const navigate = useNavigate();
@@ -15,7 +14,7 @@ export default function NoConversations() {
       <SocialButtonPrimary
         onClick={() => {
           setOpenMessageModal(false);
-          navigate(`/u/contacts?type=${FollowType.FOLLOWERS}`);
+          navigate(`/u/contacts`);
         }}
       >
         Find from my following/follower list

diff --git a/apps/u3/src/components/profile/ProfileSocial.tsx b/apps/u3/src/components/profile/ProfileSocial.tsx
@@ -8,6 +8,7 @@ import LensPostCard from '../social/lens/LensPostCard';
 import FCast from '../social/farcaster/FCast';
 import { useFarcasterCtx } from '../../contexts/social/FarcasterCtx';
 import { ProfileFeedsGroups } from '../../services/social/api/feeds';
+import { EndMsgContainer } from '../social/CommonStyles';
 
 export function ProfileSocialPosts({
   lensProfileId,
@@ -52,7 +53,7 @@ export function ProfileSocialPosts({
   }, [activeLensProfileLoading, loadFirstSocialFeeds]);
 
   return (
-    <MainCenter>
+    <MainCenter id="posts-warper" className="h-full overflow-auto">
       {(() => {
         if (firstLoading) {
           return (
@@ -77,7 +78,9 @@ export function ProfileSocialPosts({
                 </LoadingMoreWrapper>
               ) : null
             }
-            scrollableTarget="layout-main-wrapper"
+            endMessage={<EndMsgContainer>No more data</EndMsgContainer>}
+            scrollThreshold="5000px"
+            scrollableTarget="posts-warper"
           >
             <PostList>
               {feeds.map(({ platform, data }) => {

diff --git a/apps/u3/src/components/profile/contacts/FarcasterFollowers.tsx b/apps/u3/src/components/profile/contacts/FarcasterFollowers.tsx
@@ -1,22 +1,38 @@
 import useFarcasterFollowData from 'src/hooks/social/farcaster/useFarcasterFollowData';
 import Loading from 'src/components/common/loading/Loading';
-
+import InfiniteScroll from 'react-infinite-scroll-component';
 import {
   FollowList,
   FollowListWrapper,
+  LoadingMoreWrapper,
   LoadingWrapper,
 } from './FollowListWidgets';
-
 import FarcasterFollowProfileCard from './FarcasterFollowProfileCard';
+import useFarcasterLinks from '@/hooks/social/farcaster/useFarcasterLinks';
+import { FollowType } from '@/container/profile/Contacts';
+import { EndMsgContainer } from '@/components/social/CommonStyles';
 
 export default function FarcasterFollowers({ fid }: { fid: string | number }) {
-  const { farcasterFollowData, loading } = useFarcasterFollowData({
+  const { farcasterFollowData, loading: followingLoading } =
+    useFarcasterFollowData({
+      fid,
+    });
+  const following = farcasterFollowData.followingData;
+
+  const {
+    links,
+    firstLoading,
+    moreLoading,
+    hasMore,
+    farcasterUserData,
+    loadMore,
+  } = useFarcasterLinks({
     fid,
+    pageSize: 20,
+    type: FollowType.FOLLOWER,
   });
-  const followers = farcasterFollowData.followerData;
-  const following = farcasterFollowData.followingData;
 
-  if (loading) {
+  if (firstLoading || followingLoading) {
     return (
       <FollowListWrapper>
         <LoadingWrapper>
@@ -26,17 +42,37 @@ export default function FarcasterFollowers({ fid }: { fid: string | number }) {
     );
   }
   return (
-    <FollowListWrapper>
-      <FollowList>
-        {(followers || []).map((item) => (
-          <FarcasterFollowProfileCard
-            key={item}
-            fid={item}
-            following={following || []}
-            farcasterUserData={farcasterFollowData.farcasterUserData}
-          />
-        ))}
-      </FollowList>
+    <FollowListWrapper id="follow-warper" className="h-full overflow-auto">
+      <InfiniteScroll
+        style={{ overflow: 'hidden' }}
+        dataLength={links?.length || 0}
+        next={() => {
+          if (moreLoading) return;
+          loadMore();
+        }}
+        hasMore={!firstLoading && !moreLoading && hasMore}
+        loader={
+          moreLoading ? (
+            <LoadingMoreWrapper>
+              <Loading />
+            </LoadingMoreWrapper>
+          ) : null
+        }
+        endMessage={<EndMsgContainer>No more data</EndMsgContainer>}
+        scrollThreshold="2000px"
+        scrollableTarget="follow-warper"
+      >
+        <FollowList>
+          {(links || []).map((item) => (
+            <FarcasterFollowProfileCard
+              key={item.fid}
+              fid={String(item.fid)}
+              following={following || []}
+              farcasterUserData={farcasterUserData}
+            />
+          ))}
+        </FollowList>
+      </InfiniteScroll>
     </FollowListWrapper>
   );
 }
diff --git a/apps/u3/src/components/profile/contacts/FarcasterFollowing.tsx b/apps/u3/src/components/profile/contacts/FarcasterFollowing.tsx
@@ -1,20 +1,38 @@
 import useFarcasterFollowData from 'src/hooks/social/farcaster/useFarcasterFollowData';
 import Loading from 'src/components/common/loading/Loading';
-
+import InfiniteScroll from 'react-infinite-scroll-component';
 import {
   FollowList,
   FollowListWrapper,
+  LoadingMoreWrapper,
   LoadingWrapper,
 } from './FollowListWidgets';
 import FarcasterFollowProfileCard from './FarcasterFollowProfileCard';
+import useFarcasterLinks from '@/hooks/social/farcaster/useFarcasterLinks';
+import { FollowType } from '@/container/profile/Contacts';
+import { EndMsgContainer } from '@/components/social/CommonStyles';
 
 export default function FarcasterFollowing({ fid }: { fid: string | number }) {
-  const { farcasterFollowData, loading } = useFarcasterFollowData({
+  const { farcasterFollowData, loading: followingLoading } =
+    useFarcasterFollowData({
+      fid,
+    });
+  const following = farcasterFollowData.followingData;
+
+  const {
+    links,
+    firstLoading,
+    moreLoading,
+    hasMore,
+    farcasterUserData,
+    loadMore,
+  } = useFarcasterLinks({
     fid,
+    pageSize: 20,
+    type: FollowType.FOLLOWING,
   });
-  const following = farcasterFollowData.followingData;
 
-  if (loading) {
+  if (firstLoading || followingLoading) {
     return (
       <FollowListWrapper>
         <LoadingWrapper>
@@ -24,17 +42,37 @@ export default function FarcasterFollowing({ fid }: { fid: string | number }) {
     );
   }
   return (
-    <FollowListWrapper>
-      <FollowList>
-        {(following || []).map((item) => (
-          <FarcasterFollowProfileCard
-            key={item}
-            fid={item}
-            following={following || []}
-            farcasterUserData={farcasterFollowData.farcasterUserData}
-          />
-        ))}
-      </FollowList>
+    <FollowListWrapper id="follow-warper" className="h-full overflow-auto">
+      <InfiniteScroll
+        style={{ overflow: 'hidden' }}
+        dataLength={links?.length || 0}
+        next={() => {
+          if (moreLoading) return;
+          loadMore();
+        }}
+        hasMore={!firstLoading && !moreLoading && hasMore}
+        loader={
+          moreLoading ? (
+            <LoadingMoreWrapper>
+              <Loading />
+            </LoadingMoreWrapper>
+          ) : null
+        }
+        endMessage={<EndMsgContainer>No more data</EndMsgContainer>}
+        scrollThreshold="2000px"
+        scrollableTarget="follow-warper"
+      >
+        <FollowList>
+          {(links || []).map((item) => (
+            <FarcasterFollowProfileCard
+              key={item.targetFid}
+              fid={String(item.targetFid)}
+              following={following || []}
+              farcasterUserData={farcasterUserData}
+            />
+          ))}
+        </FollowList>
+      </InfiniteScroll>
     </FollowListWrapper>
   );
 }
diff --git a/apps/u3/src/components/profile/contacts/LensProfileFollowers.tsx b/apps/u3/src/components/profile/contacts/LensProfileFollowers.tsx
@@ -13,6 +13,7 @@ import {
   LoadingMoreWrapper,
   LoadingWrapper,
 } from './FollowListWidgets';
+import { EndMsgContainer } from '@/components/social/CommonStyles';
 
 export default function LensProfileFollowers({
   lensProfile,
@@ -49,7 +50,7 @@ export default function LensProfileFollowers({
     }
   }, [hasMore, next, moreLoading]);
   return (
-    <FollowListWrapper>
+    <FollowListWrapper id="follow-warper" className="h-full overflow-auto">
       {(() => {
         if (firstLoading) {
           return (
@@ -73,7 +74,9 @@ export default function LensProfileFollowers({
                 </LoadingMoreWrapper>
               ) : null
             }
-            scrollableTarget="profile-wrapper"
+            endMessage={<EndMsgContainer>No more data</EndMsgContainer>}
+            scrollThreshold="2000px"
+            scrollableTarget="follow-warper"
           >
             <FollowList>
               {(followersData || []).map((item) => (

diff --git a/apps/u3/src/components/profile/contacts/LensProfileFollowing.tsx b/apps/u3/src/components/profile/contacts/LensProfileFollowing.tsx
@@ -13,6 +13,7 @@ import {
   LoadingMoreWrapper,
   LoadingWrapper,
 } from './FollowListWidgets';
+import { EndMsgContainer } from '@/components/social/CommonStyles';
 
 export default function LensProfileFollowing({
   lensProfile,
@@ -49,7 +50,7 @@ export default function LensProfileFollowing({
     }
   }, [hasMore, next, moreLoading]);
   return (
-    <FollowListWrapper>
+    <FollowListWrapper id="follow-warper" className="h-full overflow-auto">
       {(() => {
         if (firstLoading) {
           return (
@@ -73,7 +74,9 @@ export default function LensProfileFollowing({
                 </LoadingMoreWrapper>
               ) : null
             }
-            scrollableTarget="profile-wrapper"
+            endMessage={<EndMsgContainer>No more data</EndMsgContainer>}
+            scrollThreshold="2000px"
+            scrollableTarget="follow-warper"
           >
             <FollowList>
               {(followingData || []).map((item) => (

diff --git a/apps/u3/src/components/profile/info/PlatformFollowCounts.tsx b/apps/u3/src/components/profile/info/PlatformFollowCounts.tsx
@@ -4,14 +4,14 @@ import { cn } from '@/lib/utils';
 
 interface PlatformFollowCountsProps {
   identity?: string;
-  postsCount: number;
-  followersCount: number;
+  postCount: number;
+  followerCount: number;
   followingCount: number;
 }
 export default function PlatformFollowCounts({
   identity,
-  postsCount,
-  followersCount,
+  postCount,
+  followerCount,
   followingCount,
 }: PlatformFollowCountsProps) {
   const navigate = useNavigate();
@@ -20,12 +20,12 @@ export default function PlatformFollowCounts({
     <div className="flex items-center justify-between">
       <CountItem
         label="Posts"
-        count={postsCount}
+        count={postCount}
         onClick={() => navigate(`/u${pathSuffix}?type=following`)}
       />
       <CountItem
         label="Followers"
-        count={followersCount}
+        count={followerCount}
         onClick={() => navigate(`/u/contacts${pathSuffix}?type=follower`)}
       />
       <CountItem

diff --git a/apps/u3/src/components/profile/info/ProfileInfoCard.tsx b/apps/u3/src/components/profile/info/ProfileInfoCard.tsx
@@ -104,8 +104,8 @@ function PlatformProfileInfoCardContainer({
     lensProfiles,
     recommendAddress,
     platformAccounts,
-    postsCount,
-    followersCount,
+    postCount,
+    followerCount,
     followingCount,
     bioLinkLoading,
   } = usePlatformProfileInfoData({ identity });
@@ -119,8 +119,8 @@ function PlatformProfileInfoCardContainer({
         loading={bioLinkLoading}
         address={recommendAddress}
         platformAccounts={platformAccounts}
-        postsCount={postsCount}
-        followersCount={followersCount}
+        postCount={postCount}
+        followerCount={followerCount}
         followingCount={followingCount}
         lensProfiles={lensProfiles}
         fid={Number(fid)}
@@ -170,8 +170,8 @@ function U3ProfileInfoCardContainer({
     address,
     lensProfiles,
     platformAccounts,
-    postsCount,
-    followersCount,
+    postCount,
+    followerCount,
     followingCount,
     bioLinkLoading,
   } = useU3ProfileInfoData({ did, isSelf: !!isSelf });
@@ -186,8 +186,8 @@ function U3ProfileInfoCardContainer({
         u3Profile={u3Profile}
         address={address}
         platformAccounts={platformAccounts}
-        postsCount={postsCount}
-        followersCount={followersCount}
+        postCount={postCount}
+        followerCount={followerCount}
         followingCount={followingCount}
         lensProfiles={lensProfiles}
         fid={Number(fid)}

diff --git a/apps/u3/src/components/profile/info/ProfileInfoCardLayout.tsx b/apps/u3/src/components/profile/info/ProfileInfoCardLayout.tsx
@@ -27,8 +27,8 @@ interface ProfileInfoCardLayoutProps extends ComponentPropsWithRef<'div'> {
   address: string;
   identity?: string;
   platformAccounts: PlatformAccountData[];
-  postsCount: number;
-  followersCount: number;
+  postCount: number;
+  followerCount: number;
   followingCount: number;
   lensProfiles: LensProfile[];
   fid?: number;
@@ -42,8 +42,8 @@ export default function ProfileInfoCardLayout({
   identity,
   address,
   platformAccounts,
-  postsCount,
-  followersCount,
+  postCount,
+  followerCount,
   followingCount,
   lensProfiles,
   fid,
@@ -108,8 +108,8 @@ export default function ProfileInfoCardLayout({
       )}
       <PlatformFollowCounts
         identity={identity}
-        postsCount={postsCount}
-        followersCount={followersCount}
+        postCount={postCount}
+        followerCount={followerCount}
         followingCount={followingCount}
       />
       {address && (