Make better tabs components, apply to user page

web/components/layout/tabs.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx'
 import Link from 'next/link'
+import { useRouter, NextRouter } from 'next/router'
 import { ReactNode, useState } from 'react'
 import { Row } from './row'
 import { track } from '@amplitude/analytics-browser'
@@ -14,23 +15,23 @@ type Tab = {
   badge?: string
 }
 
-export function Tabs(props: {
+type TabProps = {
   tabs: Tab[]
-  defaultIndex?: number
   labelClassName?: string
   onClick?: (tabTitle: string, index: number) => void
   className?: string
   currentPageForAnalytics?: string
-}) {
+}
+
+export function UncontrolledTabs(props: TabProps & { activeIndex: number }) {
   const {
     tabs,
-    defaultIndex,
+    activeIndex,
     labelClassName,
     onClick,
     className,
     currentPageForAnalytics,
   } = props
-  const [activeIndex, setActiveIndex] = useState(defaultIndex ?? 0)
   const activeTab = tabs[activeIndex] as Tab | undefined // can be undefined in weird case
 
   return (
@@ -51,7 +52,6 @@ export function Tabs(props: {
                   if (!tab.href) {
                     e.preventDefault()
                   }
-                  setActiveIndex(i)
                   onClick?.(tab.title, i)
                 }}
                 className={clsx(
@@ -80,3 +80,54 @@ export function Tabs(props: {
     </>
   )
 }
+
+export function ControlledTabs(props: TabProps & { defaultIndex?: number }) {
+  const { defaultIndex, onClick, ...rest } = props
+  const [activeIndex, setActiveIndex] = useState(defaultIndex ?? 0)
+  return (
+    <UncontrolledTabs
+      {...rest}
+      activeIndex={activeIndex}
+      onClick={(title, i) => {
+        setActiveIndex(i)
+        onClick?.(title, i)
+      }}
+    />
+  )
+}
+
+const isTabSelected = (router: NextRouter, queryParam: string, tab: Tab) => {
+  const selected = router.query[queryParam]
+  if (typeof selected === 'string') {
+    return tab.title.toLowerCase() === selected
+  } else {
+    return false
+  }
+}
+
+export function QueryControlledTabs(
+  props: TabProps & { defaultIndex?: number }
+) {
+  const { tabs, defaultIndex, onClick, ...rest } = props
+  const router = useRouter()
+  const selectedIdx = tabs.findIndex((t) => isTabSelected(router, 'tab', t))
+  const activeIndex = selectedIdx !== -1 ? selectedIdx : defaultIndex ?? 0
+  return (
+    <UncontrolledTabs
+      {...rest}
+      tabs={tabs}
+      activeIndex={activeIndex}
+      onClick={(title, i) => {
+        router.replace(
+          { query: { ...router.query, tab: title.toLowerCase() } },
+          undefined,
+          { shallow: true }
+        )
+        onClick?.(title, i)
+      }}
+    />
+  )
+}
+
+// legacy code that didn't know about any other kind of tabs imports this
+export const Tabs = ControlledTabs

web/components/user-page.tsx

@@ -22,7 +22,7 @@ import { Linkify } from './linkify'
 import { Spacer } from './layout/spacer'
 import { Row } from './layout/row'
 import { genHash } from 'common/util/random'
-import { Tabs } from './layout/tabs'
+import { QueryControlledTabs } from './layout/tabs'
 import { UserCommentsList } from './comments-list'
 import { useWindowSize } from 'web/hooks/use-window-size'
 import { Comment, getUsersComments } from 'web/lib/firebase/comments'
@@ -64,12 +64,8 @@ export function UserLink(props: {
 export const TAB_IDS = ['markets', 'comments', 'bets', 'groups']
 const JUNE_1_2022 = new Date('2022-06-01T00:00:00.000Z').valueOf()
 
-export function UserPage(props: {
-  user: User
-  currentUser?: User
-  defaultTabTitle?: string | undefined
-}) {
-  const { user, currentUser, defaultTabTitle } = props
+export function UserPage(props: { user: User; currentUser?: User }) {
+  const { user, currentUser } = props
   const router = useRouter()
   const isCurrentUser = user.id === currentUser?.id
   const bannerUrl = user.bannerUrl ?? defaultBannerUrl(user.id)
@@ -276,21 +272,9 @@ export function UserPage(props: {
         <Spacer h={10} />
 
         {usersContracts !== 'loading' && contractsById && usersComments ? (
-          <Tabs
+          <QueryControlledTabs
             currentPageForAnalytics={'profile'}
             labelClassName={'pb-2 pt-1 '}
-            defaultIndex={
-              defaultTabTitle ? TAB_IDS.indexOf(defaultTabTitle) : 0
-            }
-            onClick={(tabName) => {
-              const tabId = tabName.toLowerCase()
-              const subpath = tabId === 'markets' ? '' : '?tab=' + tabId
-              // BUG: if you start on `/Bob/bets`, then click on Markets, use-query-and-sort-params
-              // rewrites the url incorrectly to `/Bob/bets` instead of `/Bob`
-              router.push(`/${user.username}${subpath}`, undefined, {
-                shallow: true,
-              })
-            }}
             tabs={[
               {
                 title: 'Markets',

web/pages/[username]/index.tsx

@@ -31,9 +31,8 @@ export default function UserProfile(props: { user: User | null }) {
   const { user } = props
 
   const router = useRouter()
-  const { username, tab } = router.query as {
+  const { username } = router.query as {
     username: string
-    tab?: string | undefined
   }
   const currentUser = useUser()
 
@@ -42,11 +41,7 @@ export default function UserProfile(props: { user: User | null }) {
   if (user === undefined) return <div />
 
   return user ? (
-    <UserPage
-      user={user}
-      currentUser={currentUser || undefined}
-      defaultTabTitle={tab}
-    />
+    <UserPage user={user} currentUser={currentUser || undefined} />
   ) : (
     <Custom404 />
   )