refactor: replace infinite scroll intersection observers with manual load more buttons in post and community feeds

.gitignore

@@ -40,6 +40,9 @@ next-env.d.ts
 .firebase/logs/vsce-debug.log
 AGENTS.md
 
-# github
+# ai
 .github/agents/**
-.github/copilot-instructions.md
+.github/copilot-instructions.md
+graphify-out
+GEMINI.md
+AGENTS.md

app/communities/page.tsx

@@ -7,9 +7,8 @@ import CommunityLoader from "@/components/loaders/CommunityLoader";
 import useCommunitiesFeed from "@/hooks/community/useCommunitiesFeed";
 import useCommunityState from "@/hooks/community/useCommunityState";
 import useCommunityMembershipActions from "@/hooks/community/useCommunityMembershipActions";
-import { useIntersectionObserver } from "@/hooks/useIntersectionObserver";
-import { Box, Heading, Spinner, Stack, Text } from "@chakra-ui/react";
-import React, { useEffect, useMemo } from "react";
+import { Box, Button, Heading, Stack, Text } from "@chakra-ui/react";
+import React, { useMemo } from "react";
 import { Community } from "@/types/community";
 
 /**
@@ -23,14 +22,6 @@ const Communities: React.FC = () => {
   const { onJoinOrLeaveCommunity } = useCommunityMembershipActions();
   const { communities, loading, fetchCommunities, noMoreCommunities } =
     useCommunitiesFeed({ limitValue: 10, isPagination: true });
-  const observerOptions = useMemo(() => ({ threshold: 0.5 }), []);
-  const { ref, isIntersecting } = useIntersectionObserver(observerOptions);
-
-  useEffect(() => {
-    if (isIntersecting && !loading && !noMoreCommunities) {
-      fetchCommunities(false);
-    }
-  }, [isIntersecting, loading, noMoreCommunities, fetchCommunities]);
 
   const [adminCommunities, subscribedCommunities, notSubscribedCommunities] =
     useMemo(() => {
@@ -127,16 +118,15 @@ const Communities: React.FC = () => {
               </Stack>
             )}
             {!noMoreCommunities ? (
-              <Box
-                ref={ref}
-                height="20px"
-                display="flex"
-                justifyContent="center"
-                alignItems="center"
-                p={2}
+              <Button
+                onClick={() => fetchCommunities(false)}
+                loading={loading}
+                variant="outline"
+                width="100%"
+                my={4}
               >
-                {loading && <Spinner size="sm" />}
-              </Box>
+                Load More
+              </Button>
             ) : (
               <Text textAlign="center" p={2} fontSize="sm" color="gray.500">
                 No more communities

app/page.tsx

@@ -15,7 +15,7 @@
 import usePostVoteSync from "@/hooks/posts/usePostVoteSync";
 import usePostsFeed from "@/hooks/posts/usePostsFeed";
 import useCustomToast from "@/hooks/useCustomToast";
-import { Box, Spinner, Stack, Text } from "@chakra-ui/react";
+import { Button, Stack, Text } from "@chakra-ui/react";
 import { useEffect, useMemo } from "react";
 import { useAuthState } from "react-firebase-hooks/auth";
 
@@ -43,7 +43,7 @@
     [communityStateValue.mySnippets]
   );
 
-  const { loading, fetchPosts, ref, noMorePosts } = usePostsFeed({
+  const { loading, fetchPosts, noMorePosts } = usePostsFeed({
     communityIds: user && communityIds.length > 0 ? communityIds : undefined,
     isGenericHome: !user || communityIds.length === 0,
   });
@@ -56,7 +56,7 @@
     if (communityStateValue.snippetFetched) {
       fetchPosts(true);
     }
   }, [communityStateValue.snippetFetched, user, communityIds.length]);
 
   /**
    * Loads the home feed for unauthenticated users.
@@ -67,7 +67,7 @@
     if (!user && !loadingUser) {
       fetchPosts(true);
     }
   }, [user, loadingUser]);
 
   /**
    * Posts need to exist before trying to fetch votes for posts
@@ -84,7 +84,7 @@
         }));
       };
     }
   }, [user, postStateValue.posts]);
 
   return (
     <PageContent>
@@ -116,15 +116,15 @@
               />
             ))}
             {!noMorePosts ? (
-              <Box
-                ref={ref}
-                height="20px"
-                display="flex"
-                justifyContent="center"
-                alignItems="center"
+              <Button
+                onClick={() => fetchPosts(false)}
+                loading={loading}
+                variant="outline"
+                width="100%"
+                my={4}
               >
-                {loading && <Spinner size="sm" />}
-              </Box>
+                Load More
+              </Button>
             ) : (
               <Text textAlign="center" p={2} fontSize="sm" color="gray.500">
                 No more posts

components/navbar/directory/MenuListItem.tsx

@@ -39,6 +39,7 @@ const MenuListItem: React.FC<MenuListItemProps> = ({
 
   return (
     <MenuItem
+      value={displayText}
       mt={1}
       mb={1}
       fontSize="10pt"

components/posts/Posts.tsx

@@ -8,7 +8,7 @@ import usePostVote from "@/hooks/posts/usePostVote";
 import usePostDeletion from "@/hooks/posts/usePostDeletion";
 import usePostVoteSync from "@/hooks/posts/usePostVoteSync";
 import usePostsFeed from "@/hooks/posts/usePostsFeed";
-import { Box, Spinner, Stack, Text } from "@chakra-ui/react";
+import { Button, Stack, Text } from "@chakra-ui/react";
 import React, { useEffect } from "react";
 import { useAuthState } from "react-firebase-hooks/auth";
 import PostLoader from "../loaders/post-loader/PostLoader";
@@ -33,7 +33,7 @@ const Posts: React.FC<PostsProps> = ({ communityData }) => {
   usePostVoteSync(setPostStateValue);
   const { isAdmin, canPost } = useCommunityPermissions(communityData);
 
-  const { loading, fetchPosts, ref, noMorePosts } = usePostsFeed({
+  const { loading, fetchPosts, noMorePosts } = usePostsFeed({
     communityId: communityData.id,
   });
 
@@ -67,15 +67,15 @@ const Posts: React.FC<PostsProps> = ({ communityData }) => {
             />
           ))}
           {!noMorePosts ? (
-            <Box
-              ref={ref}
-              height="20px"
-              display="flex"
-              justifyContent="center"
-              alignItems="center"
+            <Button
+              onClick={() => fetchPosts(false)}
+              loading={loading}
+              variant="outline"
+              width="100%"
+              my={4}
             >
-              {loading && <Spinner size="sm" />}
-            </Box>
+              Load More
+            </Button>
           ) : (
             <Text textAlign="center" p={2} fontSize="sm" color="gray.500">
               No more posts

components/ui/CustomMenuButton.tsx

@@ -21,6 +21,7 @@ const CustomMenuButton: React.FC<CustomMenuButtonProps> = ({
 }) => {
   return (
     <MenuItem
+      value={text}
       fontSize="10pt"
       fontWeight={700}
       onClick={onClick}

docker/next/Dockerfile

@@ -1,16 +1,16 @@
 # ---- Build Stage ----
 FROM node:20-alpine AS builder
 WORKDIR /app
-COPY package*.json ./
+COPY package*.json yarn.lock ./
 RUN yarn install
 COPY . .
 RUN yarn build
 
 # ---- Release Stage ----
 FROM node:20-alpine AS release
 WORKDIR /app
-COPY --from=builder /app/package*.json ./
-RUN yarn install
+COPY --from=builder /app/package*.json /app/yarn.lock ./
+RUN yarn install --production
 COPY --from=builder /app/.next ./.next
 COPY --from=builder /app/public ./public
 EXPOSE 3000

hooks/posts/usePostsFeed.ts

@@ -1,9 +1,8 @@
 import { postStateAtom } from "@/atoms/postsAtom";
 import { DocumentData, QueryDocumentSnapshot } from "firebase/firestore";
 import { useSetAtom } from "jotai";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import useCustomToast from "../useCustomToast";
-import { useIntersectionObserver } from "../useIntersectionObserver";
 import { Post } from "@/types/post";
 import { getPosts as getPostsLib } from "@/lib/posts/getPosts";
 
@@ -15,11 +14,11 @@ type UsePostsFeedProps = {
 
 /**
  * A custom hook that manages the post feed for communities and the home page.
- * It handles paginated fetching of posts and integrates with an intersection observer for infinite scrolling.
+ * It handles paginated fetching of posts.
  * @param communityId - Optional identifier to fetch posts for a specific community.
  * @param communityIds - Optional array of identifiers to fetch posts for a personalized home feed.
  * @param isGenericHome - Optional flag to fetch posts for the generic home feed.
- * @returns An object containing the loading state, a ref for the intersection observer, and a flag for no more posts.
+ * @returns An object containing the loading state, fetchPosts function, and a flag for no more posts.
  */
 const usePostsFeed = ({
   communityId,
@@ -33,9 +32,6 @@ const usePostsFeed = ({
   const [noMorePosts, setNoMorePosts] = useState(false);
   const showToast = useCustomToast();
 
-  const observerOptions = useMemo(() => ({ threshold: 0.5 }), []);
-  const { ref, isIntersecting } = useIntersectionObserver(observerOptions);
-
   const fetchPosts = async (initial = false) => {
     if (loading) return;
     if (!initial && noMorePosts) return;
@@ -74,13 +70,6 @@ const usePostsFeed = ({
     }
   };
 
-  useEffect(() => {
-    if (isIntersecting && !loading && !noMorePosts && lastVisible) {
-      fetchPosts(false);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isIntersecting, loading, noMorePosts, lastVisible]);
-
   useEffect(() => {
     setNoMorePosts(false);
     setLastVisible(null);
@@ -100,7 +89,6 @@ const usePostsFeed = ({
   return {
     loading,
     fetchPosts,
-    ref,
     noMorePosts,
   };
 };