Swap home and browse (#2682)

* Initial implementation * Save search options expanded in local storage * More nav stuff * Default filters. Exclude duplicate politics topics * Hide create market button if not signed in * browse * Hide graph when < 2 portfolio points * Expand options when typing a query * Fix local state race condition
manifoldmarkets · Jun 25, 2024 · 0f98af5 · 0f98af5
1 parent 89f96fc
commit 0f98af5
Show file tree

Hide file tree

Showing 12 changed files with 349 additions and 315 deletions.
diff --git a/web/components/feed/live-generated-feed.tsx b/web/components/feed/live-generated-feed.tsx
@@ -6,7 +6,7 @@ import { useAPIGetter } from 'web/hooks/use-api-getter'
 import { FeedContractCard } from 'web/components/contract/feed-contract-card'
 import { VisibilityObserver } from 'web/components/widgets/visibility-observer'
 import { usePersistentInMemoryState } from 'web/hooks/use-persistent-in-memory-state'
-import { useEffect, useState } from 'react'
+import { Fragment, useEffect, useState } from 'react'
 import { APIResponse } from 'common/api/schema'
 import { uniqBy } from 'lodash'
 import { ScoredFeedRepost } from 'web/components/feed/scored-feed-repost-item'
@@ -98,10 +98,9 @@ export function LiveGeneratedFeed(props: { userId: string; reload: boolean }) {
         const adIndex = i / AD_PERIOD - 1
         const ad = ads[adIndex]
         return (
-          <>
+          <Fragment key={contract.id + comment?.id}>
             {i % AD_PERIOD === 0 && i !== 0 && ad && (
               <FeedCard
-                key={ad.contract.id + comment?.id}
                 contract={ad.contract}
                 repost={undefined}
                 comment={undefined}
@@ -112,15 +111,14 @@ export function LiveGeneratedFeed(props: { userId: string; reload: boolean }) {
               />
             )}
             <FeedCard
-              key={contract.id + comment?.id}
               contract={contract}
               repost={repost}
               comment={comment}
               bet={bet}
               user={user}
               reason={idsToReason[contract.id]}
             />
-          </>
+          </Fragment>
         )
       })}
       <div className="relative">

diff --git a/web/components/nav/bottom-nav-bar.tsx b/web/components/nav/bottom-nav-bar.tsx
@@ -1,5 +1,6 @@
 import { Dialog, Transition } from '@headlessui/react'
 import {
+  GlobeAltIcon,
   HomeIcon,
   NewspaperIcon,
   QuestionMarkCircleIcon,
@@ -10,7 +11,6 @@ import { MenuAlt3Icon, XIcon } from '@heroicons/react/solid'
 import clsx from 'clsx'
 import Link from 'next/link'
 import { Fragment, useState } from 'react'
-import { BiSearchAlt2 } from 'react-icons/bi'
 import { User } from 'common/user'
 import { usePathname } from 'next/navigation'
 import { GiCapitol } from 'react-icons/gi'
@@ -42,9 +42,9 @@ function getNavigation(user: User) {
       icon: HomeIcon,
     },
     {
-      name: 'Browse',
-      href: '/browse?fy=1&f=open',
-      icon: BiSearchAlt2,
+      name: 'Explore',
+      href: '/explore',
+      icon: GlobeAltIcon,
     },
     // {
     //   name: 'Politics',

diff --git a/web/components/nav/sidebar.tsx b/web/components/nav/sidebar.tsx
@@ -8,10 +8,10 @@ import {
   StarIcon,
   QuestionMarkCircleIcon,
   NewspaperIcon,
-  SearchIcon,
   LightningBoltIcon,
   LoginIcon,
   TemplateIcon,
+  GlobeAltIcon,
 } from '@heroicons/react/outline'
 import TrophyIcon from 'web/lib/icons/trophy-icon.svg'
 import { GiCapitol } from 'react-icons/gi'
@@ -138,9 +138,9 @@ const getDesktopNav = (
     return buildArray(
       { name: 'Home', href: '/home', icon: HomeIcon },
       {
-        name: 'Browse',
-        href: '/browse?fy=1&f=open',
-        icon: SearchIcon,
+        name: 'Explore',
+        href: '/explore',
+        icon: GlobeAltIcon,
       },
       {
         name: 'Notifications',
@@ -178,7 +178,7 @@ const getDesktopNav = (
     )
 
   return buildArray(
-    { name: 'Browse', href: '/browse', icon: SearchIcon },
+    { name: 'Home', href: '/home', icon: HomeIcon },
     {
       name: 'US Politics',
       href: '/politics',

diff --git a/web/components/portfolio/portfolio-value-section.tsx b/web/components/portfolio/portfolio-value-section.tsx
@@ -219,23 +219,27 @@ export const PortfolioValueSection = memo(
         setPortfolioFocus={onSetPortfolioFocus}
         portfolioHoveredGraph={portfolioHoveredGraph}
         setPortfolioHoveredGraph={setPortfolioHoveredGraph}
-        graphElement={(width, height) => (
-          <PortfolioGraph
-            mode={graphMode}
-            duration={currentTimePeriod}
-            portfolioHistory={portfolioHistory}
-            width={width}
-            height={height}
-            zoomParams={zoomParams}
-            hideXAxis={currentTimePeriod !== 'allTime' && isMobile}
-            firstProfit={firstProfit}
-            updateGraphValues={updateGraphValues}
-            portfolioFocus={portfolioFocus}
-            setPortfolioFocus={onSetPortfolioFocus}
-            portfolioHoveredGraph={portfolioHoveredGraph}
-            setPortfolioHoveredGraph={setPortfolioHoveredGraph}
-          />
-        )}
+        graphElement={
+          portfolioHistory.length < 2
+            ? undefined
+            : (width, height) => (
+                <PortfolioGraph
+                  mode={graphMode}
+                  duration={currentTimePeriod}
+                  portfolioHistory={portfolioHistory}
+                  width={width}
+                  height={height}
+                  zoomParams={zoomParams}
+                  hideXAxis={currentTimePeriod !== 'allTime' && isMobile}
+                  firstProfit={firstProfit}
+                  updateGraphValues={updateGraphValues}
+                  portfolioFocus={portfolioFocus}
+                  setPortfolioFocus={onSetPortfolioFocus}
+                  portfolioHoveredGraph={portfolioHoveredGraph}
+                  setPortfolioHoveredGraph={setPortfolioHoveredGraph}
+                />
+              )
+        }
         onlyShowProfit={onlyShowProfit}
         placement={isMobile && !onlyShowProfit ? 'bottom' : undefined}
         className={clsx(graphContainerClassName, !isMobile && 'mb-4')}
@@ -254,7 +258,7 @@ function PortfolioValueSkeleton(props: {
   graphMode: GraphMode
   currentTimePeriod: Period
   setCurrentTimePeriod: (timePeriod: Period) => void
-  graphElement: (width: number, height: number) => ReactNode
+  graphElement: ((width: number, height: number) => ReactNode) | undefined
   hideSwitcher?: boolean
   className?: string
   switcherColor?: ColorType
@@ -472,19 +476,21 @@ function PortfolioValueSkeleton(props: {
             </>
           )}
         </div>
-        <SizedContainer
-          className={clsx(
-            className,
-            'mt-2',
-            size == 'sm' ? 'h-[80px] sm:h-[100px]' : 'h-[125px] sm:h-[200px]'
-          )}
-          style={{
-            paddingRight: Y_AXIS_MARGIN,
-          }}
-        >
-          {graphElement}
-        </SizedContainer>
-        {!hideSwitcher && (
+        {graphElement && (
+          <SizedContainer
+            className={clsx(
+              className,
+              'mt-2',
+              size == 'sm' ? 'h-[80px] sm:h-[100px]' : 'h-[125px] sm:h-[200px]'
+            )}
+            style={{
+              paddingRight: Y_AXIS_MARGIN,
+            }}
+          >
+            {graphElement}
+          </SizedContainer>
+        )}
+        {!hideSwitcher && graphElement && (
           <TimeRangePicker
             currentTimePeriod={currentTimePeriod}
             setCurrentTimePeriod={setCurrentTimePeriod}

diff --git a/web/components/search/user-results.tsx b/web/components/search/user-results.tsx
@@ -6,8 +6,8 @@ import Link from 'next/link'
 import { useState } from 'react'
 import { useIsMobile } from 'web/hooks/use-is-mobile'
 
-export const MAX_SHOWN = 15
-export const MAX_SHOWN_MOBILE = 8
+export const MAX_SHOWN = 18
+export const MAX_SHOWN_MOBILE = 9
 
 export function UserResults(props: { userResults: FullUser[] }) {
   const { userResults } = props