[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={true}
     />
   );
 }

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

@@ -10,9 +10,11 @@ import {
 } from 'react-virtualized';
 import { MeasuredCellParent } from 'react-virtualized/dist/es/CellMeasurer';
 
+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 +25,7 @@ type Props = {
   queryRef: FeedListFragment$key;
   feedEventRefs: FeedListEventDataFragment$key;
   feedMode?: FeedMode;
+  showSuggestedProfiles?: boolean;
 };
 
 export default function FeedList({
@@ -31,12 +34,14 @@ export default function FeedList({
   hasNext,
   queryRef,
   feedMode,
+  showSuggestedProfiles = false,
 }: Props) {
   const query = useFragment(
     graphql`
       fragment FeedListFragment on Query {
         ...PostItemWithErrorBoundaryQueryFragment
         ...FeedEventItemWithErrorBoundaryQueryFragment
+        ...FeedSuggestedProfileSectionWithBoundaryFragment
       }
     `,
     queryRef
@@ -59,11 +64,36 @@ export default function FeedList({
     feedEventRefs
   );
 
+  const isMobileOrMobileLargeWindowWidth = useIsMobileOrMobileLargeWindowWidth();
+  const suggestedProfileSectionHeight = useMemo(
+    () => (isMobileOrMobileLargeWindowWidth ? 320 : 360),
+    [isMobileOrMobileLargeWindowWidth]
+  );
+
+  // insert suggested profiles in between posts if showSuggestedProfiles is true
+  const finalFeedData = useMemo(() => {
+    const suggestedProfileSectionIdx = 8;
+    if (showSuggestedProfiles && feedData?.length >= suggestedProfileSectionIdx) {
+      const suggestedProfileSectionData = {
+        __typename: 'SuggestedProfileSection',
+        dbid: '12345',
+      };
+
+      const insertAt = feedData.length - suggestedProfileSectionIdx;
+      return [
+        ...feedData.slice(0, insertAt),
+        suggestedProfileSectionData,
+        ...feedData.slice(insertAt),
+      ];
+    }
+    return feedData;
+  }, [feedData, showSuggestedProfiles]);
+
   // 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 +113,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 +144,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) {
@@ -179,9 +209,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 +245,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 }) => {
+      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 +294,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 +317,5 @@ export default function FeedList({
     </WindowScroller>
   );
 }
+
+const DEFAULT_ROW_HEIGHT = 100;