Function FeedNav

packages/shared/src/components/feeds/FeedNav.tsx:66–274

()

);

function FeedNav(): ReactElement | null {
  const router = useRouter();
  const { feedName: rawFeedName } = useActiveFeedNameContext();
  const feedName = rawFeedName as AllFeedPages;
  const { sortingEnabled } = useSettingsContext();
  const { isSortableFeed } = useFeedName({ feedName });
  const { home, bookmarks } = useActiveNav(feedName);
  const isMobile = useViewSize(ViewSize.MobileL);
  const isBelowLaptop = !useViewSize(ViewSize.Laptop);
  // The notifications bell only belongs to the tablet feed header: phones get it
  // from the footer nav and laptop+ from the app header. JS-gated (not CSS) so
  // it never mounts alongside those placements.
  const isTablet = isBelowLaptop && !isMobile;
  const { value: feedChipsVariant } = useConditionalFeature({
    feature: featureFeedChips,
    shouldEvaluate: isBelowLaptop,
  });
  const isFeedChipsEnabled = feedChipsVariant !== FeedChipsVariant.None;
  const [selectedAlgo, setSelectedAlgo] = usePersistentContext(
    DEFAULT_ALGORITHM_KEY,
    DEFAULT_ALGORITHM_INDEX,
    [0, 1],
    DEFAULT_ALGORITHM_INDEX,
  );
  const featureTheme = useFeatureTheme();
  const scrollClassName = useScrollTopClassName({ enabled: !!featureTheme });
  const { feeds } = useFeeds();
  const { isCustomDefaultFeed, defaultFeedId } = useCustomDefaultFeed();
  const sortedFeeds = useSortedFeeds({ edges: feeds?.edges });
  const isForYouTab =
    router.pathname === webappUrl || router.pathname === `${webappUrl}my-feed`;
  const { plusEntryForYou } = usePlusEntry();
  const showFeedActions =
    isMobile &&
    ((sortingEnabled && isSortableFeed) || feedName === SharedFeedPage.Custom);
  const shouldRenderFeedChips = isBelowLaptop && isFeedChipsEnabled;

  const renderFeedActions = (iconOnly?: boolean) => (
    <>
      {sortingEnabled && isSortableFeed && (
        <Dropdown
          className={{
            label: 'hidden',
            chevron: 'hidden',
            button: '!px-1',
          }}
          shouldIndicateSelected
          buttonSize={ButtonSize.Small}
          buttonVariant={ButtonVariant.Tertiary}
          icon={<SortIcon />}
          iconOnly
          selectedIndex={selectedAlgo}
          options={algorithmsList}
          onChange={(_, index) => setSelectedAlgo(index)}
          drawerProps={{ displayCloseButton: true }}
        />
      )}