fix: missing date range on extension and mobile (#3611)

dailydotdev · Oct 2, 2024 · 49e3a94 · 49e3a94
1 parent 6b2a95b
commit 49e3a94
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 6 deletions.
diff --git a/packages/shared/src/components/header/FeedExploreHeader.tsx b/packages/shared/src/components/header/FeedExploreHeader.tsx
@@ -56,6 +56,8 @@ interface FeedExploreHeaderProps {
 const withDateRange = [
   OtherFeedPage.ExploreUpvoted,
   OtherFeedPage.ExploreDiscussed,
+  ExploreTabs.MostUpvoted,
+  ExploreTabs.BestDiscussions,
 ];
 
 export function FeedExploreHeader({
@@ -73,6 +75,9 @@ export function FeedExploreHeader({
     defaultValue: 0,
   });
   const { isListMode } = useFeedLayout();
+  const shouldShowDropdown =
+    withDateRange.includes(path as OtherFeedPage) ||
+    withDateRange.includes(tab);
 
   return (
     <div className={classNames('flex w-full flex-col', className.container)}>
@@ -117,7 +122,7 @@ export function FeedExploreHeader({
         )}
         {showDropdown && (
           <span className="ml-auto">
-            {withDateRange.includes(path as OtherFeedPage) && (
+            {shouldShowDropdown && (
               <Dropdown
                 iconOnly
                 dynamicMenuWidth

diff --git a/packages/shared/src/components/header/MobileExploreHeader.tsx b/packages/shared/src/components/header/MobileExploreHeader.tsx
@@ -0,0 +1,44 @@
+import React, { ReactElement } from 'react';
+import { OtherFeedPage } from '../../lib/query';
+import { QueryStateKeys, useQueryState } from '../../hooks/utils/useQueryState';
+import { Dropdown } from '../fields/Dropdown';
+import { CalendarIcon } from '../icons';
+import { IconSize } from '../Icon';
+import { ButtonSize } from '../buttons/common';
+import { periodTexts } from '../layout/common';
+
+const withDateRange = [
+  OtherFeedPage.ExploreUpvoted,
+  OtherFeedPage.ExploreDiscussed,
+];
+
+interface ExploreHeaderProps {
+  path: string;
+}
+
+export function MobileExploreHeader({
+  path,
+}: ExploreHeaderProps): ReactElement {
+  const [period, setPeriod] = useQueryState({
+    key: [QueryStateKeys.FeedPeriod],
+    defaultValue: 0,
+  });
+
+  return (
+    <h3 className="mx-4 flex h-12 items-center justify-between font-bold typo-body">
+      Explore
+      {withDateRange.includes(path as OtherFeedPage) && (
+        <Dropdown
+          iconOnly
+          dynamicMenuWidth
+          shouldIndicateSelected
+          icon={<CalendarIcon size={IconSize.Medium} />}
+          selectedIndex={period}
+          options={periodTexts}
+          buttonSize={ButtonSize.Medium}
+          onChange={(_, index) => setPeriod(index)}
+        />
+      )}
+    </h3>
+  );
+}
diff --git a/packages/shared/src/components/layout/MainLayoutHeader.tsx b/packages/shared/src/components/layout/MainLayoutHeader.tsx
@@ -16,6 +16,7 @@ import { useSettingsContext } from '../../contexts/SettingsContext';
 import { useActiveFeedNameContext } from '../../contexts';
 import { useFeedName } from '../../hooks/feed/useFeedName';
 import FeedNav from '../feeds/FeedNav';
+import { MobileExploreHeader } from '../header/MobileExploreHeader';
 
 export interface MainLayoutHeaderProps {
   hasBanner?: boolean;
@@ -100,11 +101,7 @@ function MainLayoutHeader({
       return (
         <div className="sticky top-0 z-header w-full bg-background-default tablet:pl-16">
           <RenderSearchPanel />
-          {!isSearch && (
-            <h3 className="mx-4 flex h-12 items-center font-bold typo-body">
-              Explore
-            </h3>
-          )}
+          {!isSearch && <MobileExploreHeader path={feedName as string} />}
         </div>
       );
     }