feat: add dropdown selector for history feeds

- update layout margins to take into account the new sidebar for bookmarks and history
dailydotdev · Mar 27, 2024 · b09cef1 · b09cef1
1 parent 21fa28b
commit b09cef1
Show file tree

Hide file tree

Showing 6 changed files with 114 additions and 21 deletions.
diff --git a/packages/shared/src/components/BookmarkEmptyScreen.tsx b/packages/shared/src/components/BookmarkEmptyScreen.tsx
@@ -1,12 +1,21 @@
 import React, { ReactElement } from 'react';
 import Link from 'next/link';
+import classNames from 'classnames';
 import { BookmarkIcon } from './icons';
 import { Button, ButtonSize, ButtonVariant } from './buttons/Button';
 import { EmptyScreenIcon } from './EmptyScreen';
+import { useMobileUxExperiment } from '../hooks/useMobileUxExperiment';
 
 export default function BookmarkEmptyScreen(): ReactElement {
+  const { isNewMobileLayout } = useMobileUxExperiment();
+
   return (
-    <main className="withNavBar inset-0 mx-auto mt-12 flex max-w-full flex-col items-center justify-center px-6 text-theme-label-secondary">
+    <main
+      className={classNames(
+        'withNavBar inset-0 mx-auto mt-12 flex max-w-full flex-col items-center justify-center px-6 text-theme-label-secondary',
+        isNewMobileLayout && 'tablet:pl-22',
+      )}
+    >
       <BookmarkIcon
         className="icon m-0 text-theme-label-tertiary"
         style={EmptyScreenIcon.style}

diff --git a/packages/shared/src/components/BookmarkFeedLayout.tsx b/packages/shared/src/components/BookmarkFeedLayout.tsx
@@ -6,6 +6,7 @@ import React, {
   useState,
 } from 'react';
 import dynamic from 'next/dynamic';
+import classNames from 'classnames';
 import {
   BOOKMARKS_FEED_QUERY,
   SEARCH_BOOKMARKS_QUERY,
@@ -19,6 +20,7 @@ import BookmarkEmptyScreen from './BookmarkEmptyScreen';
 import { Button, ButtonVariant } from './buttons/Button';
 import { ShareIcon } from './icons';
 import { generateQueryKey, OtherFeedPage, RequestKey } from '../lib/query';
+import { useMobileUxExperiment } from '../hooks/useMobileUxExperiment';
 
 export type BookmarkFeedLayoutProps = {
   searchQuery?: string;
@@ -43,6 +45,7 @@ export default function BookmarkFeedLayout({
   const [showEmptyScreen, setShowEmptyScreen] = useState(false);
   const [showSharedBookmarks, setShowSharedBookmarks] = useState(false);
   const defaultKey = generateQueryKey(RequestKey.Bookmarks, user);
+  const { isNewMobileLayout } = useMobileUxExperiment();
   const feedProps = useMemo<FeedProps<unknown>>(() => {
     if (searchQuery) {
       return {
@@ -86,7 +89,7 @@ export default function BookmarkFeedLayout({
   );
 
   return (
-    <FeedPage>
+    <FeedPage className={classNames(isNewMobileLayout && 'tablet:pl-22')}>
       {children}
       <FeedPageHeader className="mb-5">
         <h3 className="font-bold typo-callout">Bookmarks</h3>

diff --git a/packages/shared/src/components/FeedSelector.tsx b/packages/shared/src/components/FeedSelector.tsx
@@ -58,7 +58,12 @@ export default function FeedSelector({
       dynamicMenuWidth
       shouldIndicateSelected
       buttonSize={ButtonSize.Medium}
-      className={{ button: 'px-1', label: 'mr-5', container: className }}
+      className={{
+        button: 'px-1',
+        label: 'mr-5',
+        container: className,
+        indicator: '!ml-2',
+      }}
       iconOnly={false}
       key="feed"
       icon={feedOptions[selectedFeedIdx].icon(true)}

diff --git a/packages/shared/src/components/history/ReadingHistoryEmptyScreen.tsx b/packages/shared/src/components/history/ReadingHistoryEmptyScreen.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import React, { ReactElement } from 'react';
+import classNames from 'classnames';
 import {
   EmptyScreenButton,
   EmptyScreenDescription,
@@ -8,10 +9,18 @@ import {
 } from '../EmptyScreen';
 import { EyeIcon } from '../icons';
 import { ButtonSize } from '../buttons/common';
+import { useMobileUxExperiment } from '../../hooks/useMobileUxExperiment';
 
 function ReadingHistoryEmptyScreen(): ReactElement {
+  const { isNewMobileLayout } = useMobileUxExperiment();
+
   return (
-    <div className="mt-20 flex flex-1 flex-col items-center justify-center px-6">
+    <div
+      className={classNames(
+        'mt-20 flex flex-1 flex-col items-center justify-center px-6',
+        isNewMobileLayout && 'tablet:pl-22',
+      )}
+    >
       <EyeIcon
         className={EmptyScreenIcon.className}
         style={EmptyScreenIcon.style}

diff --git a/packages/webapp/components/history/reading.tsx b/packages/webapp/components/history/reading.tsx
@@ -16,6 +16,8 @@ import {
   RequestKey,
 } from '@dailydotdev/shared/src/lib/query';
 import ReadingHistoryEmptyScreen from '@dailydotdev/shared/src/components/history/ReadingHistoryEmptyScreen';
+import { useMobileUxExperiment } from '@dailydotdev/shared/src/hooks/useMobileUxExperiment';
+import classNames from 'classnames';
 
 const PostsSearch = dynamic(
   () =>

diff --git a/packages/webapp/pages/history.tsx b/packages/webapp/pages/history.tsx
@@ -6,7 +6,10 @@ import React, {
   useState,
 } from 'react';
 import { NextSeo } from 'next-seo';
-import { ResponsivePageContainer } from '@dailydotdev/shared/src/components/utilities';
+import {
+  ResponsivePageContainer,
+  SharedFeedPage,
+} from '@dailydotdev/shared/src/components/utilities';
 import { useRouter } from 'next/router';
 import {
   Tab,
@@ -16,9 +19,28 @@ import { SearchHistory } from '@dailydotdev/shared/src/components';
 import { useViewSize, ViewSize } from '@dailydotdev/shared/src/hooks';
 import { AnalyticsEvent, Origin } from '@dailydotdev/shared/src/lib/analytics';
 import AnalyticsContext from '@dailydotdev/shared/src/contexts/AnalyticsContext';
-import { getLayout } from '../components/layouts/MainLayout';
-import ProtectedPage from '../components/ProtectedPage';
+import classNames from 'classnames';
+import { useMobileUxExperiment } from '@dailydotdev/shared/src/hooks/useMobileUxExperiment';
+import { ButtonSize } from '@dailydotdev/shared/src/components/buttons/common';
+import { Dropdown } from '@dailydotdev/shared/src/components/fields/Dropdown';
+import {
+  DiscussIcon,
+  HotIcon,
+  UpvoteIcon,
+} from '@dailydotdev/shared/src/components/icons';
+import { IconSize } from '@dailydotdev/shared/src/components/Icon';
 import { HistoryType, ReadingHistory } from '../components/history';
+import ProtectedPage from '../components/ProtectedPage';
+import { getLayout } from '../components/layouts/MainLayout';
+
+const feedOptions = [
+  {
+    value: HistoryType.Reading,
+  },
+  {
+    value: HistoryType.Search,
+  },
+];
 
 const History = (): ReactElement => {
   const { trackEvent } = useContext(AnalyticsContext);
@@ -27,6 +49,8 @@ const History = (): ReactElement => {
   const router = useRouter();
   const tabQuery = router.query?.t?.toString() as HistoryType;
   const [page, setPage] = useState(HistoryType.Reading);
+  const { isNewMobileLayout } = useMobileUxExperiment();
+  const selectedFeedIdx = feedOptions.findIndex((f) => f.value === page);
 
   const handleSetPage = useCallback(
     (active: HistoryType) => {
@@ -54,20 +78,61 @@ const History = (): ReactElement => {
 
   return (
     <ProtectedPage seo={seo}>
-      <div className="absolute left-0 top-[6.75rem] flex h-px w-full bg-theme-divider-tertiary laptop:hidden" />
-      <ResponsivePageContainer className="relative !p-0" role="main">
-        <TabContainer<HistoryType>
-          controlledActive={page}
-          onActiveChange={handleSetPage}
-          showBorder={isLaptop}
-        >
-          <Tab label={HistoryType.Reading}>
-            <ReadingHistory />
-          </Tab>
-          <Tab label={HistoryType.Search}>
-            <SearchHistory origin={Origin.HistoryPage} />
-          </Tab>
-        </TabContainer>
+      {!isNewMobileLayout && (
+        <div className="absolute left-0 top-[6.75rem] flex h-px w-full bg-theme-divider-tertiary laptop:hidden" />
+      )}
+
+      <ResponsivePageContainer
+        className={classNames(
+          isNewMobileLayout && 'tablet:!pl-22',
+          'relative !p-0',
+        )}
+        role="main"
+      >
+        {isNewMobileLayout && (
+          <>
+            <Dropdown
+              dynamicMenuWidth
+              shouldIndicateSelected
+              buttonSize={ButtonSize.Medium}
+              className={{
+                button: 'px-1',
+                label: 'mr-5',
+                container: 'self-start px-4 pt-4',
+                indicator: '!ml-2',
+              }}
+              iconOnly={false}
+              key="feed"
+              selectedIndex={selectedFeedIdx}
+              renderItem={(_, index) => (
+                <span className="typo-callout">{feedOptions[index].value}</span>
+              )}
+              options={feedOptions.map((f) => f.value)}
+              onChange={(feed: HistoryType) => handleSetPage(feed)}
+            />
+
+            {page === HistoryType.Reading && <ReadingHistory />}
+
+            {page === HistoryType.Search && (
+              <SearchHistory origin={Origin.HistoryPage} />
+            )}
+          </>
+        )}
+
+        {!isNewMobileLayout && (
+          <TabContainer<HistoryType>
+            controlledActive={page}
+            onActiveChange={handleSetPage}
+            showBorder={isLaptop}
+          >
+            <Tab label={HistoryType.Reading}>
+              <ReadingHistory />
+            </Tab>
+            <Tab label={HistoryType.Search}>
+              <SearchHistory origin={Origin.HistoryPage} />
+            </Tab>
+          </TabContainer>
+        )}
       </ResponsivePageContainer>
     </ProtectedPage>
   );