move tabs so they can modify the activetab state in questions

lexicongovernance · Aug 6, 2024 · c18bab3 · c18bab3
1 parent a526094
commit c18bab3
Showing 1 changed file with 41 additions and 33 deletions.
diff --git a/packages/berlin/src/pages/Event.tsx b/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';
@@ -49,33 +49,6 @@ function Event() {
     [openCycles],
   );
 
-  const tabNames = ['upcoming', 'past'];
-
-  const tabs = {
-    upcoming: (
-      <Cycles
-        cycles={openCycles}
-        eventId={eventId}
-        fallback={{
-          message: 'No upcoming questions available.',
-          buttonMessage: 'Past questions',
-          buttonOnClick: () => setActiveTab('past'),
-        }}
-      />
-    ),
-    past: (
-      <Cycles
-        cycles={closedCycles}
-        eventId={eventId}
-        fallback={{
-          message: 'No past questions available.',
-          buttonMessage: 'Upcoming questions',
-          buttonOnClick: () => setActiveTab('upcoming'),
-        }}
-      />
-    ),
-  };
-
   return (
     <>
       <Onboarding steps={eventSteps} type="event" />
@@ -106,24 +79,59 @@ function Event() {
               />
             </div>
           )}
-          <Questions tabNames={tabNames} tabs={tabs} initialTab={initialTab} key={initialTab} />
+          <Questions
+            initialTab={initialTab}
+            key={initialTab}
+            closedCycles={closedCycles}
+            eventId={eventId}
+            openCycles={openCycles}
+          />
         </section>
       </FlexColumn>
     </>
   );
 }
 
 function Questions({
-  tabNames,
-  tabs,
   initialTab,
+  openCycles,
+  closedCycles,
+  eventId,
 }: {
-  tabNames: string[];
-  tabs: Record<string, JSX.Element>;
   initialTab: string;
+  openCycles: GetCycleResponse[] | undefined;
+  eventId?: string;
+  closedCycles: GetCycleResponse[] | undefined;
 }) {
   const [activeTab, setActiveTab] = useState<string>(initialTab);
 
+  const tabNames = ['upcoming', 'past'];
+
+  const tabs = {
+    upcoming: (
+      <Cycles
+        cycles={openCycles}
+        eventId={eventId}
+        fallback={{
+          message: 'No upcoming questions available.',
+          buttonMessage: 'Past questions',
+          buttonOnClick: () => setActiveTab('past'),
+        }}
+      />
+    ),
+    past: (
+      <Cycles
+        cycles={closedCycles}
+        eventId={eventId}
+        fallback={{
+          message: 'No past questions available.',
+          buttonMessage: 'Upcoming questions',
+          buttonOnClick: () => setActiveTab('upcoming'),
+        }}
+      />
+    ),
+  };
+
   return (
     <FlexColumn>
       <section className="flex w-full flex-col justify-between gap-2 md:flex-row md:items-center">