[GAL-5440] add Suggested Profiles in curated Feed web

apps/web/src/components/Badge/Badge.tsx

@@ -4,7 +4,7 @@ import { graphql, useFragment } from 'react-relay';
 import styled from 'styled-components';
 
 import GalleryLink from '~/components/core/GalleryLink/GalleryLink';
-import IconContainer from '~/components/core/IconContainer';
+import IconContainer, { IconSize } from '~/components/core/IconContainer';
 import Tooltip from '~/components/Tooltip/Tooltip';
 import { BadgeFragment$key } from '~/generated/BadgeFragment.graphql';
 import TopActivityBadgeIcon from '~/icons/TopActivityBadgeIcon';
@@ -16,9 +16,10 @@ import { getUrlForCommunityDangerously } from '~/utils/getCommunityUrl';
 type Props = {
   badgeRef: BadgeFragment$key;
   eventContext: GalleryElementTrackingProps['eventContext'];
+  size?: IconSize;
 };
 
-export default function Badge({ badgeRef, eventContext }: Props) {
+export default function Badge({ badgeRef, eventContext, size = 'md' as IconSize }: Props) {
   const [showTooltip, setShowTooltip] = useState(false);
 
   const badge = useFragment(
@@ -88,7 +89,7 @@ export default function Badge({ badgeRef, eventContext }: Props) {
     <>
       <StyledTooltip text={name || ''} showTooltip={showTooltip} />
       <IconContainer
-        size="md"
+        size={size}
         variant="default"
         icon={
           <StyledBadge

apps/web/src/components/Feed/CuratedFeed.tsx

@@ -89,6 +89,7 @@ export default function CuratedFeed({ queryRef }: Props) {
       loadNextPage={loadNextPage}
       hasNext={hasPrevious}
       feedMode={'WORLDWIDE'}
+      showSuggestedProfiles
     />
   );
 }

apps/web/src/components/Feed/FeedList.tsx

@@ -9,10 +9,14 @@ import {
   WindowScroller,
 } from 'react-virtualized';
 import { MeasuredCellParent } from 'react-virtualized/dist/es/CellMeasurer';
+import { FragmentRefs } from 'relay-runtime';
+import { v4 as uuid } from 'uuid';
 
+import FeedSuggestedProfileSection from '~/components/Feed/FeedSuggestedProfileSection';
 import { FeedMode } from '~/components/Feed/types';
 import { FeedListEventDataFragment$key } from '~/generated/FeedListEventDataFragment.graphql';
 import { FeedListFragment$key } from '~/generated/FeedListFragment.graphql';
+import { useIsMobileOrMobileLargeWindowWidth } from '~/hooks/useWindowSize';
 
 import FeedEventItem from './FeedEventItem';
 import { PostItemWithBoundary as PostItem } from './PostItem';
@@ -23,6 +27,7 @@ type Props = {
   queryRef: FeedListFragment$key;
   feedEventRefs: FeedListEventDataFragment$key;
   feedMode?: FeedMode;
+  showSuggestedProfiles?: boolean;
 };
 
 export default function FeedList({
@@ -31,12 +36,21 @@ export default function FeedList({
   hasNext,
   queryRef,
   feedMode,
+  showSuggestedProfiles = false,
 }: Props) {
   const query = useFragment(
     graphql`
       fragment FeedListFragment on Query {
+        viewer {
+          ... on Viewer {
+            user {
+              dbid
+            }
+          }
+        }
         ...PostItemWithErrorBoundaryQueryFragment
         ...FeedEventItemWithErrorBoundaryQueryFragment
+        ...FeedSuggestedProfileSectionWithBoundaryFragment
       }
     `,
     queryRef
@@ -59,11 +73,34 @@ export default function FeedList({
     feedEventRefs
   );
 
+  const isLoggedIn = useMemo(() => Boolean(query.viewer?.user?.dbid), [query.viewer?.user?.dbid]);
+  const isMobileOrMobileLargeWindowWidth = useIsMobileOrMobileLargeWindowWidth();
+  const suggestedProfileSectionHeight = isMobileOrMobileLargeWindowWidth ? 320 : 360;
+
+  // insert suggested profiles in between posts if showSuggestedProfiles is true
+  const finalFeedData = useMemo(() => {
+    const suggestedProfileSectionIdx = 8;
+    if (showSuggestedProfiles && isLoggedIn && feedData?.length >= suggestedProfileSectionIdx) {
+      const suggestedProfileSectionData = {
+        __typename: 'SuggestedProfileSection',
+        dbid: uuid(),
+      };
+
+      const insertAt = feedData.length - suggestedProfileSectionIdx;
+      return [
+        ...feedData.slice(0, insertAt),
+        suggestedProfileSectionData,
+        ...feedData.slice(insertAt),
+      ];
+    }
+    return feedData;
+  }, [feedData, showSuggestedProfiles, isLoggedIn]);
+
   // Keep the current feed data in a ref so we can access it below in the
   // CellMeasurerCache's keyMapper without having to create a new cache
   // every time the feed data changes.
-  const feedDataRef = useRef(feedData);
-  feedDataRef.current = feedData;
+  const feedDataRef = useRef(finalFeedData);
+  feedDataRef.current = finalFeedData;
 
   const measurerCache = useMemo(() => {
     return new CellMeasurerCache({
@@ -83,8 +120,8 @@ export default function FeedList({
 
   // Function responsible for tracking the loaded state of each row.
   const isRowLoaded = useCallback(
-    ({ index }: { index: number }) => !hasNext || Boolean(feedData[index]),
-    [feedData, hasNext]
+    ({ index }: { index: number }) => !hasNext || Boolean(finalFeedData[index]),
+    [finalFeedData, hasNext]
   );
 
   const virtualizedListRef = useRef<List | null>(null);
@@ -114,7 +151,7 @@ export default function FeedList({
         return <div />;
       }
       // graphql returns the oldest event at the top of the list, so display in opposite order
-      const content = feedData[feedData.length - index - 1];
+      const content = finalFeedData[finalFeedData.length - index - 1];
 
       // Better safe than sorry :)
       if (!content) {
@@ -136,7 +173,7 @@ export default function FeedList({
                 <PostItem
                   onPotentialLayoutShift={handlePotentialLayoutShift}
                   index={index}
-                  eventRef={content}
+                  eventRef={content as FeedContentType}
                   key={content.dbid}
                   queryRef={query}
                   measure={measure}
@@ -168,7 +205,7 @@ export default function FeedList({
                   // to re-evaluate the height of the item to keep the virtualization good.
                   onPotentialLayoutShift={handlePotentialLayoutShift}
                   index={index}
-                  eventRef={content}
+                  eventRef={content as FeedContentType}
                   key={content.dbid}
                   queryRef={query}
                   feedMode={feedMode}
@@ -179,9 +216,28 @@ export default function FeedList({
         );
       }
 
+      if (content.__typename === 'SuggestedProfileSection') {
+        return (
+          <CellMeasurer
+            cache={measurerCache}
+            columnIndex={0}
+            rowIndex={index}
+            key={key}
+            parent={parent}
+          >
+            {({ registerChild }) => (
+              // @ts-expect-error: this is the suggested usage of registerChild
+              <div ref={registerChild} style={style} key={key}>
+                <FeedSuggestedProfileSection queryRef={query} />
+              </div>
+            )}
+          </CellMeasurer>
+        );
+      }
+
       return null;
     },
-    [feedData, feedMode, handlePotentialLayoutShift, isRowLoaded, measurerCache, query]
+    [finalFeedData, feedMode, handlePotentialLayoutShift, isRowLoaded, measurerCache, query]
   );
 
   const [, setIsLoading] = useState(false);
@@ -196,10 +252,31 @@ export default function FeedList({
     function recalculateHeightsWhenEventsChange() {
       virtualizedListRef.current?.recomputeRowHeights();
     },
-    [feedData, measurerCache]
+    [finalFeedData, measurerCache]
   );
 
-  const rowCount = hasNext ? feedData.length + 1 : feedData.length;
+  const rowCount = hasNext ? finalFeedData.length + 1 : finalFeedData.length;
+
+  const rowHeight = useCallback(
+    ({ index }: { index: number }) => {
+      if (!finalFeedData) {
+        return DEFAULT_ROW_HEIGHT;
+      }
+
+      // Determine the actual data index based on reverse order logic used in rowRenderer
+      const dataIndex = finalFeedData.length - index - 1;
+      const item = finalFeedData[dataIndex];
+
+      // Return static height for SuggestedProfileSection
+      if (item?.__typename === 'SuggestedProfileSection') {
+        return suggestedProfileSectionHeight;
+      }
+
+      // Return dynamic height for other types of content
+      return measurerCache.rowHeight({ index });
+    },
+    [finalFeedData, suggestedProfileSectionHeight, measurerCache]
+  );
 
   return (
     <WindowScroller>
@@ -224,8 +301,8 @@ export default function FeedList({
                       width={width}
                       height={height}
                       rowRenderer={rowRenderer}
-                      rowCount={feedData.length}
-                      rowHeight={measurerCache.rowHeight}
+                      rowCount={finalFeedData.length}
+                      rowHeight={rowHeight}
                       scrollTop={scrollTop}
                       overscanRowCount={2}
                       onRowsRendered={onRowsRendered}
@@ -247,3 +324,14 @@ export default function FeedList({
     </WindowScroller>
   );
 }
+
+const DEFAULT_ROW_HEIGHT = 100;
+
+type FeedContentType = {
+  readonly __typename: string;
+  readonly dbid?: string | undefined;
+  readonly ' $fragmentSpreads': FragmentRefs<
+    'FeedEventItemWithErrorBoundaryFragment' | 'PostItemWithErrorBoundaryFragment'
+  >;
+  readonly ' $fragmentType': 'FeedListEventDataFragment';
+};