Feed cleanup and small fixes (#49)

* More explicity feed buildup; Cleaned up unsued function; * Potential fix for growing too far on expand of a body; * Moved chat and feed into main mobile nav items;
homebase-id · Jan 5, 2024 · f677e3e · f677e3e
1 parent 9507e2e
commit f677e3e
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 48 deletions.
diff --git a/packages/common-app/src/hooks/posts/useBlogPostsInfinite.ts b/packages/common-app/src/hooks/posts/useBlogPostsInfinite.ts
@@ -64,7 +64,8 @@ export const useBlogPostsInfinite = ({
             false,
             typeof pageParam === 'object' ? pageParam : undefined,
             pageSize,
-            channels
+            channels,
+            false
           ));
 
     return {

diff --git a/packages/common-app/src/socialFeed/Blocks/Body/Body.tsx b/packages/common-app/src/socialFeed/Blocks/Body/Body.tsx
@@ -32,7 +32,7 @@ export const PostBody = ({
 
     return (
       <>
-        <h1 className={`text-foreground ${isExpanded ? 'text-2xl' : ''}`}>{post.caption}</h1>
+        <h1 className={`text-foreground`}>{post.caption}</h1>
         <div className="text-foreground leading-relaxed text-opacity-70">
           <Expander
             abstract={ellipsisAtMaxChar(articlePost.abstract, MAX_CHAR_FOR_SUMMARY)}
@@ -146,6 +146,4 @@ const Expander = ({
       )}
     </>
   );
-
-  return <></>;
 };
diff --git a/packages/common-app/src/ui/Sidenav/Sidenav.tsx b/packages/common-app/src/ui/Sidenav/Sidenav.tsx
@@ -452,17 +452,12 @@ const ChatNavItem = () => {
 };
 
 const MobileDrawer = ({ setIsOpen }: { setIsOpen: (isOpen: boolean) => void }) => {
-  const { data: profiles } = useProfiles().fetchProfiles;
-  const standardProfile = profiles?.find(
-    (profile) => profile.profileId === BuiltInProfiles.StandardProfileId
-  );
-
   return (
     <div className={`fixed left-0 right-0 bottom-0 md:hidden z-20 px-4 py-1  ${sidebarBg}`}>
       <div className="flex flex-row justify-between">
         <NavItem icon={House} to={'/owner'} end={true} />
-        <NavItem icon={Person} to={`/owner/profile/${standardProfile?.slug || 'standard-info'}`} />
-        <NavItem icon={Cloud} to={'/owner/profile/homepage'} />
+        <NavItem icon={Feed} to={'/owner/feed'} end={true} />
+        <NavItem icon={ChatBubble} to="/apps/chat" />
 
         <button className={navItemClassName} onClick={() => setIsOpen(true)}>
           <Bars className={iconClassName} />

diff --git a/packages/feed-app/src/components/SocialFeed/MainContent/SocialFeedMainContent.tsx b/packages/feed-app/src/components/SocialFeed/MainContent/SocialFeedMainContent.tsx
@@ -1,5 +1,5 @@
 import { PostContent } from '@youfoundation/js-lib/public';
-import { useMemo, useEffect, useRef, useLayoutEffect, FC } from 'react';
+import { useMemo, useEffect, useRef, useLayoutEffect } from 'react';
 import { useWindowVirtualizer } from '@tanstack/react-virtual';
 
 import { flattenInfinteData } from '@youfoundation/common-app';
@@ -52,14 +52,10 @@ const SocialFeedMainContent = () => {
 
   useEffect(() => {
     const [lastItem] = [...virtualizer.getVirtualItems()].reverse();
+    if (!lastItem) return;
 
-    if (!lastItem) {
-      return;
-    }
-
-    if (lastItem.index >= flattenedPosts?.length - 1 && hasMorePosts && !isFetchingNextPage) {
+    if (lastItem.index >= flattenedPosts?.length - 1 && hasMorePosts && !isFetchingNextPage)
       fetchNextPage();
-    }
   }, [
     hasMorePosts,
     fetchNextPage,

diff --git a/packages/public-app/src/templates/Home/Common/Posts/VerticalPosts.tsx b/packages/public-app/src/templates/Home/Common/Posts/VerticalPosts.tsx
@@ -1,4 +1,4 @@
-import { useWindowVirtualizer } from '@tanstack/react-virtual';
+import { Virtualizer, useWindowVirtualizer } from '@tanstack/react-virtual';
 import { PostContent } from '@youfoundation/js-lib/public';
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { Label, SubtleMessage, useBlogPostsInfinite } from '@youfoundation/common-app';
@@ -108,6 +108,20 @@ const MainVerticalPosts = ({ className, channelId }: { className: string; channe
     scrollMargin: parentOffsetRef.current,
     overscan: 5, // Amount of items to load before and after (improved performance especially with images)
     initialOffset: window.scrollY, // Take scroll position from window so we can restore tab positioning
+    scrollToFn: (
+      offset: number,
+      { adjustments = 0, behavior }: { adjustments?: number; behavior?: ScrollBehavior },
+      instance: Virtualizer<Window, any>
+    ) => {
+      // We block big adjustments to prevent the user from loosing their scroll position when expanding a post
+      if (Math.abs(adjustments) >= window.screenY) return;
+      const toOffset = offset + adjustments;
+
+      instance.scrollElement?.scrollTo?.({
+        [instance.options.horizontal ? 'left' : 'top']: toOffset,
+        behavior,
+      });
+    },
   });
 
   useEffect(() => {
@@ -130,7 +144,7 @@ const MainVerticalPosts = ({ className, channelId }: { className: string; channe
   return (
     <>
       <div className={className}>
-        {!isPostsLoaded && !combinePosts ? (
+        {!isPostsLoaded ? (
           <div className="-mx-4">
             <LoadingBlock className="m-4 h-10" />
             <LoadingBlock className="m-4 h-10" />
@@ -209,32 +223,4 @@ const MainVerticalPosts = ({ className, channelId }: { className: string; channe
   );
 };
 
-const combinePosts = (
-  staticPosts?: DriveSearchResult<PostContent>[],
-  flattenedPosts?: DriveSearchResult<PostContent>[]
-) => {
-  const combinedPosts = [
-    ...(staticPosts ? staticPosts : []),
-    ...(flattenedPosts ? flattenedPosts : []),
-  ].reduce((uniquePosts, post) => {
-    if (
-      uniquePosts.some(
-        (unique) => unique.fileMetadata.appData.content.id === post.fileMetadata.appData.content.id
-      )
-    ) {
-      return uniquePosts;
-    } else {
-      return [...uniquePosts, post];
-    }
-  }, [] as DriveSearchResult<PostContent>[]);
-
-  combinedPosts.sort(
-    (a, b) =>
-      (b.fileMetadata.appData.userDate || b.fileMetadata.created) -
-      (a.fileMetadata.appData.userDate || a.fileMetadata.created)
-  );
-
-  return combinedPosts;
-};
-
 export default VerticalPosts;