Function FeedContainer

packages/shared/src/components/feeds/FeedContainer.tsx:122–391

({
  children,
  topContent,
  header,
  footer,
  className,
  inlineHeader = false,
  showSearch,
  shortcuts,
  actionButtons,
  isHorizontal,
  feedContainerRef,
  showBriefCard,
  disableListFrame = false,
}: FeedContainerProps)

};

export const FeedContainer = ({
  children,
  topContent,
  header,
  footer,
  className,
  inlineHeader = false,
  showSearch,
  shortcuts,
  actionButtons,
  isHorizontal,
  feedContainerRef,
  showBriefCard,
  disableListFrame = false,
}: FeedContainerProps): ReactElement => {
  const currentSettings = useContext(FeedContext);
  const { subject } = useToastNotification();
  const { loadedSettings } = useContext(SettingsContext);
  const { shouldUseListFeedLayout, isListMode } = useFeedLayout();
  const isLaptop = useViewSize(ViewSize.Laptop);
  const { isV2 } = useLayoutVariant();
  const isV2Laptop = isV2;
  const { feedName } = useActiveFeedNameContext();
  const activeFeedName = feedName ?? SharedFeedPage.MyFeed;
  const { isAnyExplore, isExplorePopular, isExploreLatest } = useFeedName({
    feedName: activeFeedName,
  });
  const router = useRouter();
  const numCards = currentSettings.numCards.eco;
  const isList =
    (isHorizontal || isListMode) && !shouldUseListFeedLayout
      ? false
      : (isListMode && numCards > 1) || shouldUseListFeedLayout;
  const feedGapClass = gapClass({
    isList,
    isFeedLayoutList: shouldUseListFeedLayout,
  }) as FeedGapClass;
  const gapSizePx = feedGapPx[feedGapClass];
  const style = {
    '--num-cards': isHorizontal && isListMode && numCards >= 2 ? 2 : numCards,
    '--feed-gap': `${gapSizePx / 16}rem`,
  } as CSSProperties;
  const isFinder = router.pathname === '/search/posts';
  const isSearch = showSearch && !isFinder;

  const { feeds } = useFeeds();

  const feedHeading = useMemo(() => {
    if (activeFeedName === SharedFeedPage.Custom) {
      const customFeed = feeds?.edges.find(
        ({ node: feed }) =>
          feed.id === router.query.slugOrId ||
          feed.slug === router.query.slugOrId,
      )?.node;

      if (customFeed?.flags?.name) {
        return customFeed.flags.name;
      }