Replace /Austin?tab=Bets with /Austin/bets

web/components/nav/nav-bar.tsx

@@ -47,7 +47,7 @@ export function BottomNavBar() {
       )}
 
       {user !== null && (
-        <Link href={`${user}?tab=Bets`}>
+        <Link href={`${user}/bets`}>
           <a className="block w-full py-1 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700">
             <PresentationChartLineIcon
               className="my-1 mx-auto h-6 w-6"

web/components/nav/sidebar.tsx

@@ -34,7 +34,7 @@ function getNavigation(userName: string) {
     { name: 'Activity', href: '/activity', icon: ChatAltIcon },
     {
       name: 'Portfolio',
-      href: `${userName}?tab=Bets`,
+      href: `${userName}/bets`,
       icon: PresentationChartLineIcon,
     },
     { name: 'Charity', href: '/charity', icon: HeartIcon },

web/components/user-page.tsx

@@ -41,12 +41,13 @@ export function UserLink(props: {
   )
 }
 
+export const TAB_IDS = ['markets', 'comments', 'bets']
+
 export function UserPage(props: {
   user: User
   currentUser?: User
-  defaultTabTitle?: string
+  defaultTabTitle?: 'markets' | 'comments' | 'bets'
 }) {
-  const router = useRouter()
   const { user, currentUser, defaultTabTitle } = props
   const isCurrentUser = user.id === currentUser?.id
   const bannerUrl = user.bannerUrl ?? defaultBannerUrl(user.id)
@@ -192,19 +193,12 @@ export function UserPage(props: {
         {usersContracts !== 'loading' && commentsByContract != 'loading' ? (
           <Tabs
             className={'pb-2 pt-1 '}
-            defaultIndex={['Markets', 'Comments', 'Bets'].indexOf(
-              defaultTabTitle
-            )}
-            onClick={(tabName) =>
-              router.push(
-                {
-                  pathname: `/${user.username}`,
-                  query: { tab: tabName },
-                },
-                undefined,
-                { shallow: true }
-              )
-            }
+            defaultIndex={TAB_IDS.indexOf(defaultTabTitle || 'markets')}
+            onClick={(tabName) => {
+              const tabId = tabName.toLowerCase()
+              const subpath = tabId === 'markets' ? '' : '/' + tabId
+              window.history.pushState('', '', `/${user.username}${subpath}`)
+            }}
             tabs={[
               {
                 title: 'Markets',

web/pages/[username]/bets.tsx

@@ -0,0 +1,5 @@
+import UserProfile from '.'
+
+export default function UserBets() {
+  return <UserProfile tab="bets" />
+}

web/pages/[username]/comments.tsx

@@ -0,0 +1,5 @@
+import UserProfile from '.'
+
+export default function UserBets() {
+  return <UserProfile tab="comments" />
+}

web/pages/[username]/index.tsx

@@ -6,10 +6,12 @@ import { UserPage } from 'web/components/user-page'
 import { useUser } from 'web/hooks/use-user'
 import Custom404 from '../404'
 
-export default function UserProfile() {
+export default function UserProfile(props: {
+  tab?: 'markets' | 'comments' | 'bets'
+}) {
   const router = useRouter()
   const [user, setUser] = useState<User | null | 'loading'>('loading')
-  const { username, tab } = router.query as { username: string; tab: string }
+  const { username } = router.query as { username: string }
   useEffect(() => {
     if (username) {
       getUserByUsername(username).then(setUser)
@@ -24,7 +26,7 @@ export default function UserProfile() {
     <UserPage
       user={user}
       currentUser={currentUser || undefined}
-      defaultTabTitle={tab}
+      defaultTabTitle={props.tab}
     />
   ) : (
     <Custom404 />