From 48d71ce25045afa327383997ece344525956f866 Mon Sep 17 00:00:00 2001
From: Diego Alzate <diego35.da@gmail.com>
Date: Fri, 2 Aug 2024 12:27:59 +0100
Subject: [PATCH 1/6] update groups reg to be under event url (#716)

---
 packages/berlin/src/App.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/berlin/src/App.tsx b/packages/berlin/src/App.tsx
index 29a6e2da..c38cf607 100644
--- a/packages/berlin/src/App.tsx
+++ b/packages/berlin/src/App.tsx
@@ -231,14 +231,6 @@ const router = (queryClient: QueryClient) =>
               path: '/account',
               Component: Account,
             },
-            {
-              path: '/secret-groups',
-              Component: SecretGroupRegistration,
-            },
-            {
-              path: '/public-groups',
-              Component: PublicGroupRegistration,
-            },
             {
               path: '/events',
               children: [
@@ -255,6 +247,14 @@ const router = (queryClient: QueryClient) =>
                   path: ':eventId/holding',
                   Component: Holding,
                 },
+                {
+                  path: ':eventId/secret-groups',
+                  Component: SecretGroupRegistration,
+                },
+                {
+                  path: ':eventId/public-groups',
+                  Component: PublicGroupRegistration,
+                },
                 {
                   loader: ({ params }) =>
                     redirectToEventHoldingOrRegister(queryClient, params.eventId),

From 6fc20300ff1b983cad55b8389388e3d7d8f11721 Mon Sep 17 00:00:00 2001
From: Camilo Vega <59750365+camilovegag@users.noreply.github.com>
Date: Tue, 6 Aug 2024 05:34:28 -0500
Subject: [PATCH 2/6] 731 update event page (#732)

* Add eventDisplayRank to events type

* Sort events by eventDisplayRank

* Remove tabs from events page
---
 packages/api/src/types/Events.ts               |  1 +
 .../berlin/src/components/events/Events.tsx    | 14 ++++++++++----
 packages/berlin/src/pages/Events.tsx           | 18 +-----------------
 3 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/packages/api/src/types/Events.ts b/packages/api/src/types/Events.ts
index 2ea07899..69fe8a37 100644
--- 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/events/Events.tsx b/packages/berlin/src/components/events/Events.tsx
index 1e11699b..e2a24d36 100644
--- 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/pages/Events.tsx b/packages/berlin/src/pages/Events.tsx
index 01923e4f..73986f1c 100644
--- 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,11 +10,9 @@ 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'],
@@ -23,26 +20,13 @@ function Events() {
     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>
   );

From 7645f7b4a6b571ddecd84e78a5e1d65044878eb0 Mon Sep 17 00:00:00 2001
From: Camilo Vega <59750365+camilovegag@users.noreply.github.com>
Date: Tue, 6 Aug 2024 05:34:47 -0500
Subject: [PATCH 3/6] 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
---
 .../berlin/src/components/cycles/Cycles.tsx   | 16 ++++++++++---
 packages/berlin/src/pages/Event.tsx           | 24 +++++++++++++++++--
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/packages/berlin/src/components/cycles/Cycles.tsx b/packages/berlin/src/components/cycles/Cycles.tsx
index 926b5f9f..2da49123 100644
--- 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
index 7f9fb6b5..7846f9af 100644
--- 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 (

From e680dabce1a4569babfabd8b9df41e6dcef405ce Mon Sep 17 00:00:00 2001
From: Martin Benedikt Busch
 <43137759+MartinBenediktBusch@users.noreply.github.com>
Date: Tue, 6 Aug 2024 12:35:27 +0200
Subject: [PATCH 4/6] add formating changes (#741)

---
 packages/berlin/src/components/header/Header.tsx          | 4 +++-
 .../src/components/zupass-button/ZupassLoginButton.tsx    | 8 ++------
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/berlin/src/components/header/Header.tsx b/packages/berlin/src/components/header/Header.tsx
index b959c5ad..5374b5d2 100644
--- 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>
diff --git a/packages/berlin/src/components/zupass-button/ZupassLoginButton.tsx b/packages/berlin/src/components/zupass-button/ZupassLoginButton.tsx
index e7b6f735..50b6d519 100644
--- 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>
     </>

From 1c7376c2b7ef114f7bc205fc70a79de7ce636486 Mon Sep 17 00:00:00 2001
From: Camilo Vega <59750365+camilovegag@users.noreply.github.com>
Date: Tue, 6 Aug 2024 05:35:48 -0500
Subject: [PATCH 5/6] Add cursor pointer to comments icon (#739)

---
 packages/berlin/src/components/option/Option.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/berlin/src/components/option/Option.tsx b/packages/berlin/src/components/option/Option.tsx
index ca7485d6..167c11e6 100644
--- 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>
   );

From 619180c78ffa0613d990d2963bec289bc84fab4d Mon Sep 17 00:00:00 2001
From: Camilo Vega <59750365+camilovegag@users.noreply.github.com>
Date: Tue, 6 Aug 2024 09:14:06 -0500
Subject: [PATCH 6/6] 733 default to past tab when all questions are closed
 (#734)

* Remove internal state from tabs header

* Add useEffect to handle empty openCycles

* Change prop to initial tab and remove extra if

* Set active tab after openCycles response, removing unwanted useEffect

* simplify state

* wip: add sepearte section for question tabs

* remove not needed function

* fix linting

* move tabs so they can modify the activetab state in questions

* Fix grid

---------

Co-authored-by: Diego Alzate <diego35.da@gmail.com>
---
 .../berlin/src/components/tabs/TabsHeader.tsx |   9 +-
 packages/berlin/src/pages/Event.tsx           | 109 +++++++++++-------
 2 files changed, 71 insertions(+), 47 deletions(-)

diff --git a/packages/berlin/src/components/tabs/TabsHeader.tsx b/packages/berlin/src/components/tabs/TabsHeader.tsx
index 1c256e88..abee1a7d 100644
--- a/packages/berlin/src/components/tabs/TabsHeader.tsx
+++ b/packages/berlin/src/components/tabs/TabsHeader.tsx
@@ -1,19 +1,16 @@
-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;
+  activeTab?: string;
   className?: string;
   onTabChange?: (tab: string) => void;
 };
 
-export function TabsHeader({ tabNames, initialTab, className, onTabChange }: TabsHeaderProps) {
-  const [activeTab, setActiveTab] = useState<string>(initialTab || tabNames[0]);
-
+export function TabsHeader({ tabNames, activeTab, className, onTabChange }: TabsHeaderProps) {
   const handleTabClick = (tab: string) => {
-    setActiveTab(tab);
     if (onTabChange) {
       onTabChange(tab);
     }
diff --git a/packages/berlin/src/pages/Event.tsx b/packages/berlin/src/pages/Event.tsx
index 7846f9af..c8e079a3 100644
--- 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';
@@ -44,8 +44,66 @@ function Event() {
     [eventCycles],
   );
 
+  const initialTab = useMemo(
+    () => (openCycles && openCycles.length > 0 ? 'upcoming' : 'past'),
+    [openCycles],
+  );
+
+  return (
+    <>
+      <Onboarding steps={eventSteps} type="event" />
+      <section className="event grid w-full grid-cols-3 gap-4">
+        <div className={`${event?.imageUrl ? 'col-span-2' : 'col-span-3'} flex flex-col gap-4`}>
+          <BackButton fallbackRoute="/events" />
+          <Subtitle>{event?.name}</Subtitle>
+          {event?.description && (
+            <div>
+              <Markdown
+                components={{
+                  a: ({ node, ...props }) => <Link to={props.href ?? ''}>{props.children}</Link>,
+                  p: ({ node, ...props }) => <Body>{props.children}</Body>,
+                }}
+              >
+                {event.description}
+              </Markdown>
+            </div>
+          )}
+        </div>
+        {event?.imageUrl && (
+          <div className="col-span-3 md:col-span-1">
+            <img
+              src={event?.imageUrl}
+              alt={`${event.name} image`}
+              className="h-52 w-full object-cover object-center md:h-full"
+            />
+          </div>
+        )}
+        <Questions
+          initialTab={initialTab}
+          key={initialTab}
+          closedCycles={closedCycles}
+          eventId={eventId}
+          openCycles={openCycles}
+        />
+      </section>
+    </>
+  );
+}
+
+function Questions({
+  initialTab,
+  openCycles,
+  closedCycles,
+  eventId,
+}: {
+  initialTab: string;
+  openCycles: GetCycleResponse[] | undefined;
+  eventId?: string;
+  closedCycles: GetCycleResponse[] | undefined;
+}) {
+  const [activeTab, setActiveTab] = useState<string>(initialTab);
+
   const tabNames = ['upcoming', 'past'];
-  const [activeTab, setActiveTab] = useState<string>('upcoming');
 
   const tabs = {
     upcoming: (
@@ -73,46 +131,15 @@ function Event() {
   };
 
   return (
-    <>
-      <Onboarding steps={eventSteps} type="event" />
-      <FlexColumn $gap="2rem" className="event">
-        <section className="grid w-full grid-cols-3 gap-x-4">
-          <div className={`${event?.imageUrl ? 'col-span-2' : 'col-span-3'} flex flex-col gap-4`}>
-            <BackButton fallbackRoute="/events" />
-            <Subtitle>{event?.name}</Subtitle>
-            {event?.description && (
-              <div>
-                <Markdown
-                  components={{
-                    a: ({ node, ...props }) => <Link to={props.href ?? ''}>{props.children}</Link>,
-                    p: ({ node, ...props }) => <Body>{props.children}</Body>,
-                  }}
-                >
-                  {event.description}
-                </Markdown>
-              </div>
-            )}
-          </div>
-          {event?.imageUrl && (
-            <div className="col-span-1">
-              <img
-                src={event?.imageUrl}
-                alt={`${event.name} image`}
-                className="h-full w-full object-cover object-center"
-              />
-            </div>
-          )}
-        </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} />
-        </section>
-        <FlexColumn className="cycles">
-          <Tabs.TabsManager tabs={tabs} tab={activeTab} fallback={'Tab not found'} />
-        </FlexColumn>
+    <FlexColumn className="col-span-3">
+      <section className="flex w-full flex-col justify-between gap-2 md:flex-row md:items-center">
+        <Subtitle>Questions</Subtitle>
+        <Tabs.TabsHeader tabNames={tabNames} activeTab={activeTab} onTabChange={setActiveTab} />
+      </section>
+      <FlexColumn className="cycles">
+        <Tabs.TabsManager tabs={tabs} tab={activeTab} fallback={'Tab not found'} />
       </FlexColumn>
-    </>
+    </FlexColumn>
   );
 }
-
 export default Event;