Merge branch 'staging' of https://github.com/PotLock/potlock-nextjs-app…

… into 39-pot-details-page-settings-form-page
PotLock · Sep 9, 2024 · 44fe468 · 44fe468
2 parents ad1d264 + c1a6439
commit 44fe468
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 70 deletions.
diff --git a/src/modules/profile/components/FeedCard.tsx b/src/modules/profile/components/FeedCard.tsx
@@ -5,7 +5,6 @@ import { useCallback, useEffect, useState } from "react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
 
 import { fetchTimeByBlockHeight } from "@/common/api/near-social";
 import truncate from "@/common/lib/truncate";
@@ -53,7 +52,7 @@ export const FeedCard = ({ post }: PostType) => {
   return (
     <div
       onClick={handleCardClick}
-      className="w-100 md:w-full mb-4 cursor-pointer rounded-lg bg-white p-4 shadow-md transition duration-200 hover:bg-gray-100 hover:shadow-lg"
+      className="md:w-100 md:w-full mb-4 cursor-pointer rounded-lg bg-white p-4 shadow-md transition duration-200 hover:bg-gray-100 hover:shadow-lg"
     >
       <div className="mb-4 flex items-center justify-between">
         <div className="flex">
@@ -91,7 +90,6 @@ export const FeedCard = ({ post }: PostType) => {
 
       <div className="mt-2 text-black">
         <ReactMarkdown
-          remarkPlugins={[remarkGfm]}
           components={{
             a: ({ node, ...props }) => (
               <a

diff --git a/src/modules/profile/components/ProfileFeeds.tsx b/src/modules/profile/components/ProfileFeeds.tsx
@@ -2,6 +2,8 @@
 
 import React, { useEffect, useRef, useState } from "react";
 
+import InfiniteScrollWrapper from "react-infinite-scroll-component";
+
 import { fetchAccountFeedPosts } from "@/common/api/near-social";
 import {
   IndexPostResultItem,
@@ -25,45 +27,20 @@ export const ProfileFeeds: React.FC<ProfileFeedsProps> = ({ accountId }) => {
   }, [accountId]);
 
   const loadMorePosts = async () => {
-    if (isLoading) return; // Prevent multiple calls while loading
     setIsLoading(true);
 
     const fetchedPosts = await fetchAccountFeedPosts({
       accountId,
       offset,
     });
 
-    // Create a Set of existing post block heights to filter out duplicates
-    const existingPostIds = new Set(posts.map((post) => post.blockHeight));
-
-    // Filter out previously fetched posts
-    const newPosts = fetchedPosts.filter(
-      (post) => !existingPostIds.has(post.blockHeight),
-    );
+    const newPosts = fetchedPosts.slice(offset - 20);
 
     setPosts((prevPosts) => [...prevPosts, ...newPosts]);
     setOffset((prevOffset) => prevOffset + 20);
     setIsLoading(false);
   };
 
-  useEffect(() => {
-    const observer = new IntersectionObserver((entries) => {
-      if (entries[0].isIntersecting) {
-        loadMorePosts();
-      }
-    });
-
-    if (loadingRef.current) {
-      observer.observe(loadingRef.current);
-    }
-
-    return () => {
-      if (loadingRef.current) {
-        observer.unobserve(loadingRef.current);
-      }
-    };
-  }, [loadingRef.current]);
-
   const NoResults = () => (
     <div className="md:flex-col md:px-[105px] md:py-[68px] flex flex-col-reverse items-center justify-between rounded-[12px] bg-[#f6f5f3] px-[24px] py-[16px]">
       <p className="font-italic font-500 md:text-[22px] mb-4 max-w-[290px] text-center font-lora text-[16px] text-[#292929]">
@@ -80,14 +57,22 @@ export const ProfileFeeds: React.FC<ProfileFeedsProps> = ({ accountId }) => {
 
   return (
     <div className="my-8 h-full max-h-80 w-full">
-      {posts.map((post) => (
-        <FeedCard key={post.blockHeight} post={post} />
-      ))}
-      {posts.length > 1 && (
-        <div ref={loadingRef} className="mt-4 min-h-12 text-center">
-          {isLoading ? "Loading more posts..." : ""}
-        </div>
-      )}
+      <InfiniteScrollWrapper
+        className="space-y-4"
+        dataLength={40}
+        scrollThreshold={1}
+        hasMore={true}
+        next={loadMorePosts}
+        loader={
+          <div ref={loadingRef} className="mt-4 min-h-12 text-center">
+            <div className="">Loading...</div>
+          </div>
+        }
+      >
+        {posts.map((post) => (
+          <FeedCard key={post.blockHeight} post={post} />
+        ))}
+      </InfiniteScrollWrapper>
       {posts.length === 0 && <NoResults />}
     </div>
   );

diff --git a/src/pages/feed/index.tsx b/src/pages/feed/index.tsx
@@ -2,10 +2,11 @@
 
 import React, { useCallback, useEffect, useRef, useState } from "react";
 
+import InfiniteScrollWrapper from "react-infinite-scroll-component";
+
 import { fetchGlobalFeeds } from "@/common/api/near-social";
 import { ListRegistration, potlock } from "@/common/api/potlock";
 import { POTLOCK_REGISTRY_LIST_ID } from "@/common/constants";
-import { getRegistrations } from "@/common/contracts/potlock/lists";
 import { FeedCard } from "@/modules/profile/components/FeedCard";
 
 const GlobalFeedsPage = () => {
@@ -46,46 +47,25 @@ const GlobalFeedsPage = () => {
   }, []);
 
   const loadMorePosts = useCallback(async () => {
+    console.log(loadingMore);
     if (loadingMore) return; // Prevent multiple calls while loading
     setLoadingMore(true);
 
     const fetchedPosts = await fetchGlobalFeeds({
       accountId: registration,
       offset,
     });
-
-    // Create a Set of existing post block heights to filter out duplicates
-    const existingPostIds = new Set(feedPosts.map((post) => post.blockHeight));
+    setLoadingMore(false);
 
     // Filter out previously fetched posts
-    const newPosts = fetchedPosts.filter(
-      (post) => !existingPostIds.has(post.blockHeight),
-    );
+    const newPosts = fetchedPosts.slice(offset - 20);
 
     // Update state with new posts and increment offset
     setFeedPosts((prevPosts) => [...prevPosts, ...newPosts]);
     setOffset((prevOffset) => prevOffset + 20);
     setLoadingMore(false);
   }, []);
 
-  useEffect(() => {
-    const observer = new IntersectionObserver((entries) => {
-      if (entries[0].isIntersecting) {
-        loadMorePosts();
-      }
-    });
-
-    if (loadingRef.current) {
-      observer.observe(loadingRef.current);
-    }
-
-    return () => {
-      if (loadingRef.current) {
-        observer.unobserve(loadingRef.current);
-      }
-    };
-  }, [loadingRef]);
-
   const NoResults = () => (
     <div className="md:flex-col md:px-[105px] md:py-[68px] flex flex-col-reverse items-center justify-between rounded-[12px] bg-[#f6f5f3] px-[24px] py-[16px]">
       <p className="font-italic font-500 md:text-[22px] mb-4 max-w-[290px] text-center font-lora text-[16px] text-[#292929]">
@@ -102,17 +82,23 @@ const GlobalFeedsPage = () => {
 
   return (
     <div className="h-full max-h-full w-full max-w-[1300px] overflow-auto p-8">
-      <div className="space-y-4">
+      <InfiniteScrollWrapper
+        className="space-y-4"
+        dataLength={1000}
+        scrollThreshold={1}
+        hasMore={true}
+        next={loadMorePosts}
+        loader={
+          <div ref={loadingRef} className="mt-4 min-h-12 text-center">
+            <div className="">Loading...</div>
+          </div>
+        }
+      >
         {feedPosts.map((post) => (
           <FeedCard key={post.blockHeight} post={post} />
         ))}
-      </div>
-      {feedPosts.length > 1 && (
-        <div ref={loadingRef} className="mt-4 min-h-12 text-center">
-          <div className="">Loading...</div>
-        </div>
-      )}
-      {feedPosts.length === 0 && <NoResults />}
+      </InfiniteScrollWrapper>
+      {feedPosts.length === 0 && loading && <NoResults />}
     </div>
   );
 };