fix open quotas bugging UI like hell when there are many events

Tietokilta · Jan 21, 2024 · 99e9c5a · 99e9c5a
1 parent f499e5a
commit 99e9c5a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 23 deletions.
diff --git a/packages/ilmomasiina-components/src/modules/events/index.tsx b/packages/ilmomasiina-components/src/modules/events/index.tsx
@@ -11,7 +11,7 @@ export type EventListProps = {
 };
 
 type State = {
-  events?: UserEventListResponse;
+  events: UserEventListResponse;
   pending: boolean;
   error?: ApiError;
 };
@@ -26,7 +26,7 @@ export function useEventListState({ category }: EventListProps = {}) {
   }, [category]);
 
   return useShallowMemo<State>({
-    events: fetchEvents.result,
+    events: fetchEvents.result ?? [],
     pending: fetchEvents.pending,
     error: fetchEvents.error as ApiError | undefined,
   });

diff --git a/packages/ilmomasiina-components/src/routes/Events/index.tsx b/packages/ilmomasiina-components/src/routes/Events/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { Spinner, Table } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
@@ -11,7 +11,7 @@ import { I18nProvider } from '../../i18n';
 import { EventListProps, EventListProvider, useEventListContext } from '../../modules/events';
 import { errorDesc, errorTitle } from '../../utils/errorMessage';
 import {
-  EventRow, eventsToRows, OPENQUOTA, QuotaRow, WAITLIST,
+  EventRow, eventsToRows, QuotaRow,
 } from '../../utils/eventListUtils';
 import { useSignupStateText } from '../../utils/signupStateText';
 import TableRow from './components/TableRow';
@@ -38,14 +38,14 @@ const ListEventRow = ({
 
 const ListQuotaRow = ({
   row: {
-    id, title, signupCount, quotaSize,
+    type, title, signupCount, quotaSize,
   },
 }: { row: QuotaRow }) => {
   const { t } = useTranslation();
   return (
     <TableRow
       className="ilmo--quota-row"
-      title={id === OPENQUOTA ? t('events.openQuota') : title}
+      title={type === 'openquota' ? t('events.openQuota') : title}
       signupCount={signupCount}
       quotaSize={quotaSize}
     />
@@ -56,7 +56,7 @@ const EventListView = () => {
   const { events, error, pending } = useEventListContext();
   const { t } = useTranslation();
   const paths = usePaths();
-
+  const tableRows = useMemo(() => eventsToRows(events).filter((row) => row.type !== 'waitlist'), [events]);
   // If initial setup is needed and is possible on this frontend, redirect to that page.
   if (error && error.code === ErrorCode.INITIAL_SETUP_NEEDED && paths.hasAdmin) {
     return <Navigate to={paths.adminInitialSetup} />;
@@ -80,12 +80,6 @@ const EventListView = () => {
     );
   }
 
-  const tableRows = eventsToRows(events!).map((row) => {
-    if (row.isEvent) return <ListEventRow key={row.id} row={row} />;
-    if (row.id !== WAITLIST) return <ListQuotaRow key={row.id} row={row} />;
-    return null;
-  });
-
   return (
     <>
       <h1>{t('events.title')}</h1>
@@ -98,7 +92,12 @@ const EventListView = () => {
             <th>{t('events.column.signupCount')}</th>
           </tr>
         </thead>
-        <tbody>{tableRows}</tbody>
+        <tbody>
+          {tableRows.map((row) => (row.type === 'event'
+            ? <ListEventRow key={row.id} row={row} />
+            : <ListQuotaRow key={row.id} row={row} />))}
+
+        </tbody>
       </Table>
     </>
   );

diff --git a/packages/ilmomasiina-components/src/utils/eventListUtils.ts b/packages/ilmomasiina-components/src/utils/eventListUtils.ts
@@ -16,8 +16,8 @@ export interface EventTableOptions {
 }
 
 export type EventRow = {
-  isEvent: true;
   id: EventID,
+  type: 'event';
   slug: EventSlug,
   title: string,
   date: Moment | null,
@@ -28,8 +28,8 @@ export type EventRow = {
   totalQuotaSize: number | null;
 };
 export type QuotaRow = {
-  isEvent: false;
-  id: QuotaID | typeof OPENQUOTA | typeof WAITLIST;
+  type: 'quota' | 'openquota' | 'waitlist';
+  id: QuotaID;
   title?: string;
   signupCount: number;
   quotaSize: number | null;
@@ -45,7 +45,7 @@ export function eventToRows(event: UserEventListItem, { compact }: EventTableOpt
 
   // Event row
   const rows: TableRow[] = [{
-    isEvent: true,
+    type: 'event',
     id,
     signupState: state,
     slug,
@@ -63,7 +63,7 @@ export function eventToRows(event: UserEventListItem, { compact }: EventTableOpt
   // Multiple quotas go on their own rows
   if (quotas.length > 1) {
     quotas.forEach((quota) => rows.push({
-      isEvent: false,
+      type: 'quota',
       id: quota.id,
       title: quota.title,
       signupCount: quota.size ? Math.min(quota.signupCount, quota.size) : quota.signupCount,
@@ -76,8 +76,8 @@ export function eventToRows(event: UserEventListItem, { compact }: EventTableOpt
   // Open quota
   if (openQuotaSize > 0) {
     rows.push({
-      isEvent: false,
-      id: OPENQUOTA,
+      type: 'openquota',
+      id: event.id + OPENQUOTA,
       signupCount: Math.min(overflow, openQuotaSize),
       quotaSize: openQuotaSize,
     });
@@ -86,8 +86,8 @@ export function eventToRows(event: UserEventListItem, { compact }: EventTableOpt
   // Queue/waitlist
   if (overflow > openQuotaSize) {
     rows.push({
-      isEvent: false,
-      id: WAITLIST,
+      type: 'waitlist',
+      id: event.id + WAITLIST,
       signupCount: overflow - openQuotaSize,
       quotaSize: null,
     });