Merge branch 'develop' into 733-default-to-past-tab-when-all-question…

…s-are-closed
lexicongovernance · Aug 6, 2024 · a526094 · a526094
2 parents dec4c67 + 1c7376c
commit a526094
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 35 deletions.
diff --git a/packages/api/src/types/Events.ts b/packages/api/src/types/Events.ts
@@ -9,6 +9,7 @@ export type GetEventResponse = {
   description: string | null;
   fields: unknown;
   status: 'OPEN' | 'CLOSED' | 'UPCOMING' | null;
+  eventDisplayRank: number | null;
 };
 
 export type GetEventsResponse = GetEventResponse[];
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/components/events/Events.tsx b/packages/berlin/src/components/events/Events.tsx
@@ -2,14 +2,14 @@
 import { useNavigate } from 'react-router-dom';
 
 // API
-import { GetEventResponse } from 'api';
+import { GetEventsResponse } from 'api';
 
 // Components
 import { Body } from '../typography/Body.styled';
 import { Subtitle } from '../typography/Subtitle.styled';
 
 type EventsProps = {
-  events: GetEventResponse[] | undefined;
+  events: GetEventsResponse | null | undefined;
   errorMessage: string;
 };
 
@@ -20,8 +20,14 @@ export default function Events({ events, errorMessage }: EventsProps) {
     navigate(`/events/${eventId}/cycles`);
   };
 
-  return events?.length ? (
-    events.map((event) => {
+  const sortedEvents = events?.sort((a, b) => {
+    const rankA = a.eventDisplayRank ?? Number.MAX_SAFE_INTEGER;
+    const rankB = b.eventDisplayRank ?? Number.MAX_SAFE_INTEGER;
+    return rankA - rankB;
+  });
+
+  return sortedEvents?.length ? (
+    sortedEvents.map((event) => {
       return (
         <article
           key={event.id}

diff --git a/packages/berlin/src/components/header/Header.tsx b/packages/berlin/src/components/header/Header.tsx
@@ -69,7 +69,9 @@ export default function Header() {
                 </div>
               </>
             ) : (
-              <ZupassLoginButton>Login</ZupassLoginButton>
+              <ZupassLoginButton style={{ fontSize: '14px', lineHeight: '14px' }}>
+                Login
+              </ZupassLoginButton>
             )}
             <NavigationMenuItem>
               <NavigationMenuLink>
@@ -104,7 +106,7 @@ const HeaderLinks = ({ user }: { user: GetUserResponse }) => {
   });
 
   const { data: eventNavLinks } = useQuery({
-    queryKey: ['eventNavLinks'],
+    queryKey: ['event', eventId, 'navLinks'],
     queryFn: () =>
       fetchEventNavLinks({ serverUrl: import.meta.env.VITE_SERVER_URL, eventId: eventId || '' }),
     enabled: !!user && !!eventId,

diff --git a/packages/berlin/src/components/option/Option.tsx b/packages/berlin/src/components/option/Option.tsx
@@ -159,7 +159,7 @@ export default function Option({
             {option.subTitle}
           </Markdown>
         )}
-        <MessageSquareText onClick={handleCommentsClick} />
+        <MessageSquareText className="cursor-pointer" onClick={handleCommentsClick} />
       </section>
     </article>
   );

diff --git a/packages/berlin/src/components/zupass-button/ZupassLoginButton.tsx b/packages/berlin/src/components/zupass-button/ZupassLoginButton.tsx
@@ -16,6 +16,7 @@ import { useNavigate } from 'react-router-dom';
 type ZupassLoginButtonProps = {
   $variant?: 'contained' | 'link';
   children: React.ReactNode;
+  style?: React.CSSProperties;
 };
 
 const POPUP_URL = window.location.origin + '/popup';
@@ -81,12 +82,7 @@ function ZupassLoginButton({ children, $variant, ...props }: ZupassLoginButtonPr
 
   return (
     <>
-      <Button
-        onClick={handleLoginClick}
-        {...props}
-        $variant={$variant}
-        style={{ fontSize: '14px', lineHeight: '14px', borderRadius: 4 }}
-      >
+      <Button onClick={handleLoginClick} {...props} $variant={$variant}>
         {children}
       </Button>
     </>

diff --git a/packages/berlin/src/pages/Event.tsx b/packages/berlin/src/pages/Event.tsx
@@ -52,8 +52,28 @@ function Event() {
   const tabNames = ['upcoming', 'past'];
 
   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 (

diff --git a/packages/berlin/src/pages/Events.tsx b/packages/berlin/src/pages/Events.tsx
@@ -1,5 +1,4 @@
 // React and third-party libraries
-import { useMemo, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 
 // API
@@ -11,38 +10,23 @@ import useUser from '../hooks/useUser';
 // Components
 import { FlexColumn } from '../components/containers/FlexColumn.styled';
 import { Title } from '../components/typography/Title.styled';
-import * as Tabs from '../components/tabs';
 import EventsCards from '../components/events';
 
 function Events() {
-  const [activeTab, setActiveTab] = useState<string>('upcoming');
   const { user } = useUser();
   const { data: events } = useQuery({
     queryKey: ['events'],
     queryFn: () => fetchEvents({ serverUrl: import.meta.env.VITE_SERVER_URL }),
     enabled: !!user?.id,
   });
 
-  const openEvents = useMemo(() => events?.filter((event) => event.status === 'OPEN'), [events]);
-  const closedEvents = useMemo(
-    () => events?.filter((events) => events.status === 'CLOSED'),
-    [events],
-  );
-
-  const tabNames = ['upcoming', 'past'];
-  const tabs = {
-    upcoming: <EventsCards events={openEvents} errorMessage="No upcoming events..." />,
-    past: <EventsCards events={closedEvents} errorMessage="No past events..." />,
-  };
-
   return (
     <FlexColumn $gap="2rem">
       <section className="flex w-full flex-col justify-between gap-2 md:flex-row md:items-center">
         <Title>Events</Title>
-        <Tabs.TabsHeader className="tabs" tabNames={tabNames} onTabChange={setActiveTab} />
       </section>
       <section className="grid w-full gap-4 md:grid-cols-2">
-        <Tabs.TabsManager tabs={tabs} tab={activeTab} fallback={'Tab not found'} />
+        <EventsCards events={events} errorMessage="No events found..." />
       </section>
     </FlexColumn>
   );

diff --git a/packages/berlin/src/pages/Register.tsx b/packages/berlin/src/pages/Register.tsx
@@ -226,6 +226,7 @@ const CarouselWrapper = ({
 
   return (
     <Carousel
+      key={defaultStep}
       initialStep={defaultStep}
       onComplete={async () => {
         // query registration to check if it is approved