735 better tab error message (#738)

* Add better error message * Pass props to handle error message * Add falback props instead of error, implement requested changes * Update props
lexicongovernance · Aug 6, 2024 · 7645f7b · 7645f7b
1 parent 6fc2030
commit 7645f7b
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 5 deletions.
diff --git a/packages/berlin/src/components/cycles/Cycles.tsx b/packages/berlin/src/components/cycles/Cycles.tsx
@@ -1,14 +1,20 @@
 import { GetCycleResponse } from 'api';
 import { Body } from '../typography/Body.styled';
 import { useNavigate } from 'react-router-dom';
+import { CalendarX2 } from 'lucide-react';
+import Button from '../button';
 
 type CyclesProps = {
   cycles: GetCycleResponse[] | undefined;
-  errorMessage: string;
   eventId: string | undefined;
+  fallback: {
+    message: string;
+    buttonMessage: string;
+    buttonOnClick: () => void;
+  };
 };
 
-function Cycles({ cycles, errorMessage, eventId }: CyclesProps) {
+function Cycles({ cycles, eventId, fallback }: CyclesProps) {
   const navigate = useNavigate();
 
   const formatDate = (date: string) => {
@@ -34,7 +40,11 @@ function Cycles({ cycles, errorMessage, eventId }: CyclesProps) {
           </article>
         ))
       ) : (
-        <Body>{errorMessage}</Body>
+        <section className="flex w-full flex-col items-center gap-4 pt-12">
+          <CalendarX2 width={64} height={64} />
+          <Body>{fallback.message}</Body>
+          <Button onClick={fallback.buttonOnClick}>{fallback.buttonMessage}</Button>
+        </section>
       )}
     </>
   );

diff --git a/packages/berlin/src/pages/Event.tsx b/packages/berlin/src/pages/Event.tsx
@@ -48,8 +48,28 @@ function Event() {
   const [activeTab, setActiveTab] = useState<string>('upcoming');
 
   const tabs = {
-    upcoming: <Cycles cycles={openCycles} eventId={eventId} errorMessage="No upcoming events..." />,
-    past: <Cycles cycles={closedCycles} eventId={eventId} errorMessage="No past events..." />,
+    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 (