733 default to past tab when all questions are closed

packages/berlin/src/components/tabs/TabsHeader.tsx

@@ -1,20 +1,17 @@
-import { Fragment, useState } from 'react';
+import { Fragment } from 'react';
 import { Body } from '../typography/Body.styled';
 import { Tab } from './TabsHeader.styled';
 
 type TabsHeaderProps = {
   tabNames: string[];
-  initialTab?: string;
+  initialTab: string | null;
   className?: string;
   onTabChange?: (tab: string) => void;
 };
 
 export function TabsHeader({ tabNames, initialTab, className, onTabChange }: TabsHeaderProps) {
-  const [activeTab, setActiveTab] = useState<string>(initialTab || tabNames[0]);
-
   const handleTabClick = (tab: string) => {
-    setActiveTab(tab);
-    if (onTabChange) {
+    if (onTabChange && initialTab !== tab) {
       onTabChange(tab);
     }
   };
@@ -24,7 +21,7 @@ export function TabsHeader({ tabNames, initialTab, className, onTabChange }: Tab
       {tabNames.map((tabName, index) => (
         <Fragment key={tabName}>
           <Tab
-            className={activeTab === tabName ? 'active' : ''}
+            className={initialTab === tabName ? 'active' : ''}
             onClick={() => handleTabClick(tabName)}
           >
             {tabName}

packages/berlin/src/pages/Event.tsx

@@ -4,7 +4,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useParams } from 'react-router-dom';
 
 // API
-import { fetchEvent, fetchEventCycles } from 'api';
+import { fetchEvent, fetchEventCycles, GetCycleResponse } from 'api';
 
 // Components
 import { Body } from '../components/typography/Body.styled';
@@ -18,6 +18,10 @@ import Link from '../components/link';
 import Markdown from 'react-markdown';
 import Onboarding from '@/components/onboarding';
 
+function getInitialTab(openCycles: GetCycleResponse[] | undefined) {
+  return openCycles && openCycles.length > 0 ? 'upcoming' : 'past';
+}
+
 function Event() {
   const { eventId } = useParams();
   const { data: event } = useQuery({
@@ -45,7 +49,12 @@ function Event() {
   );
 
   const tabNames = ['upcoming', 'past'];
-  const [activeTab, setActiveTab] = useState<string>('upcoming');
+  const [activeTab, setActiveTab] = useState<string | null>(null);
+
+  if (openCycles && activeTab === null) {
+    const initialTab = getInitialTab(openCycles);
+    setActiveTab(initialTab);
+  }
 
   const tabs = {
     upcoming: <Cycles cycles={openCycles} eventId={eventId} errorMessage="No upcoming events..." />,
@@ -85,10 +94,16 @@ function Event() {
         </section>
         <section className="flex w-full flex-col justify-between gap-2 md:flex-row md:items-center">
           <Subtitle>Questions</Subtitle>
-          <Tabs.TabsHeader className="tabs" tabNames={tabNames} onTabChange={setActiveTab} />
+          <Tabs.TabsHeader
+            key={activeTab} // Ensure TabsHeader re-renders when activeTab changes
+            className="tabs"
+            tabNames={tabNames}
+            initialTab={activeTab}
+            onTabChange={setActiveTab}
+          />
         </section>
         <FlexColumn className="cycles">
-          <Tabs.TabsManager tabs={tabs} tab={activeTab} fallback={'Tab not found'} />
+          <Tabs.TabsManager tabs={tabs} tab={activeTab || ''} fallback={'Tab not found'} />
         </FlexColumn>
       </FlexColumn>
     </>