Fix tabs index caching

web/components/layout/tabs.tsx

@@ -32,6 +32,7 @@ type TabProps = {
   trackingName?: string
   // Default is to lazy render tabs as they are selected. If true, it will render all tabs at once.
   renderAllTabs?: boolean
+  name?: string // a unique identifier for the tabs, used for caching
 }
 
 export function MinimalistTabs(props: TabProps & { activeIndex: number }) {
@@ -203,7 +204,7 @@ export function UncontrolledTabs(props: TabProps & { defaultIndex?: number }) {
   const { defaultIndex, onClick, ...rest } = props
   const [activeIndex, setActiveIndex] = usePersistentInMemoryState(
     defaultIndex ?? 0,
-    `tab-${props.trackingName}-${props.tabs[0]?.title}`
+    `tab-${props.trackingName}-${props.name ?? props.tabs[0]?.title}`
   )
   if ((defaultIndex ?? 0) > props.tabs.length - 1) {
     console.error('default index greater than tabs length')

web/pages/compatibility.tsx

@@ -22,10 +22,8 @@ export default function CompatibilityPage() {
   const user = useUser()
   const isMobile = useIsMobile()
   const sep = isMobile ? '\n' : ''
-  const {compatibilityAnswers, refreshCompatibilityAnswers} =
-    useUserCompatibilityAnswers(user?.id)
-  const {compatibilityQuestions, refreshCompatibilityQuestions} =
-    useCompatibilityQuestionsWithAnswerCount()
+  const {compatibilityAnswers, refreshCompatibilityAnswers} = useUserCompatibilityAnswers(user?.id)
+  const {compatibilityQuestions, refreshCompatibilityQuestions} = useCompatibilityQuestionsWithAnswerCount()
   const [isLoading, setIsLoading] = useState(true)
 
   const questionsWithAnswers = useMemo(() => {
@@ -77,62 +75,59 @@ export default function CompatibilityPage() {
     refreshCompatibilityQuestions()
   }
 
-  if (!user) {
-    return (
-      <PageBase trackPageView={'compatibility'}>
+  return (
+    <PageBase trackPageView={'compatibility'}>
+      {user ?
+        <Col className="w-full p-4">
+          <Title className="mb-4">Your Compatibility Questions</Title>
+          <UncontrolledTabs
+            trackingName={'compatibility page'}
+            name={'compatibility-page'}
+            tabs={[
+              {
+                title: `Answered ${sep}(${answered.length})`,
+                content: (
+                  <QuestionList
+                    questions={answered}
+                    status="answered"
+                    isLoading={isLoading}
+                    user={user}
+                    refreshCompatibilityAll={refreshCompatibilityAll}
+                  />
+                ),
+              },
+              {
+                title: `To Answer ${sep}(${notAnswered.length})`,
+                content: (
+                  <QuestionList
+                    questions={notAnswered}
+                    status="not-answered"
+                    isLoading={isLoading}
+                    user={user}
+                    refreshCompatibilityAll={refreshCompatibilityAll}
+                  />
+                ),
+              },
+              {
+                title: `Skipped ${sep}(${skipped.length})`,
+                content: (
+                  <QuestionList
+                    questions={skipped}
+                    status="skipped"
+                    isLoading={isLoading}
+                    user={user}
+                    refreshCompatibilityAll={refreshCompatibilityAll}
+                  />
+                ),
+              },
+            ]}
+          />
+        </Col>
+        :
         <div className="flex h-full flex-col items-center justify-center">
           <div className="text-xl">Please sign in to view your compatibility questions</div>
         </div>
-      </PageBase>
-    )
-  }
-
-  return (
-    <PageBase trackPageView={'compatibility'}>
-      <Col className="w-full p-4">
-        <Title className="mb-4">Your Compatibility Questions</Title>
-        <UncontrolledTabs
-          trackingName={'compatibility page'}
-          tabs={[
-            {
-              title: `Answered ${sep}(${answered.length})`,
-              content: (
-                <QuestionList
-                  questions={answered}
-                  status="answered"
-                  isLoading={isLoading}
-                  user={user}
-                  refreshCompatibilityAll={refreshCompatibilityAll}
-                />
-              ),
-            },
-            {
-              title: `To Answer ${sep}(${notAnswered.length})`,
-              content: (
-                <QuestionList
-                  questions={notAnswered}
-                  status="not-answered"
-                  isLoading={isLoading}
-                  user={user}
-                  refreshCompatibilityAll={refreshCompatibilityAll}
-                />
-              ),
-            },
-            {
-              title: `Skipped ${sep}(${skipped.length})`,
-              content: (
-                <QuestionList
-                  questions={skipped}
-                  status="skipped"
-                  isLoading={isLoading}
-                  user={user}
-                  refreshCompatibilityAll={refreshCompatibilityAll}
-                />
-              ),
-            },
-          ]}
-        />
-      </Col>
+      }
     </PageBase>
   )
 }

web/pages/notifications.tsx

@@ -22,6 +22,7 @@ export default function NotificationsPage() {
       <NoSEO/>
       <Title>Updates</Title>
       <UncontrolledTabs
+        name={'notifications-page'}
         tabs={[
           {title: 'Notifications', content: <NotificationsContent/>},
           {title: 'Settings', content: <NotificationSettings/>},

web/pages/settings.tsx

@@ -26,6 +26,7 @@ export default function NotificationsPage() {
       <NoSEO/>
       <Title>Settings</Title>
       <UncontrolledTabs
+        name={'settings-page'}
         tabs={[
           {title: 'General', content: <GeneralSettings/>},
           {title: 'Notifications', content: <NotificationSettings/>},