Merge pull request #126 from Tietokilta/frontend-quota-fix

fix open quotas bugging UI like hell when there are many events
Tietokilta · Feb 22, 2024 · df1a4b2 · df1a4b2
2 parents c0916cd + 8a905d4
commit df1a4b2
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 27 deletions.
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}
     />
@@ -57,6 +57,8 @@ const EventListView = () => {
   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 +82,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 +94,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
@@ -6,18 +6,15 @@ import type {
   EventID, EventSlug, QuotaID, UserEventListItem, UserEventListResponse,
 } from '@tietokilta/ilmomasiina-models';
 import { signupState, SignupStateInfo } from './signupStateText';
-import { OPENQUOTA, WAITLIST } from './signupUtils';
-
-export { OPENQUOTA, WAITLIST };
 
 export interface EventTableOptions {
   /** If true, quotas are not placed on separate rows. */
   compact?: boolean;
 }
 
 export type EventRow = {
-  isEvent: true;
   id: EventID,
+  type: 'event';
   slug: EventSlug,
   title: string,
   date: Moment | null,
@@ -28,8 +25,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 +42,7 @@ export function eventToRows(event: UserEventListItem, { compact }: EventTableOpt
 
   // Event row
   const rows: TableRow[] = [{
-    isEvent: true,
+    type: 'event',
     id,
     signupState: state,
     slug,
@@ -63,7 +60,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 +73,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 +83,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,
     });

diff --git a/packages/ilmomasiina-components/src/utils/signupUtils.ts b/packages/ilmomasiina-components/src/utils/signupUtils.ts
@@ -11,9 +11,9 @@ import { SignupStatus } from '@tietokilta/ilmomasiina-models';
 import { timezone } from '../config';
 
 /** Placeholder quota ID for the open quota. */
-export const OPENQUOTA = '\x00open';
+export const OPENQUOTA = '\x00open' as const;
 /** Placeholder quota ID for the queue. */
-export const WAITLIST = '\x00waitlist';
+export const WAITLIST = '\x00waitlist' as const;
 
 export type AnyEventSchema = AdminEventResponse | UserEventResponse;
 export type AnySignupSchema = AdminSignupSchema | PublicSignupSchema;
@@ -76,7 +76,7 @@ export function getSignupsByQuota(event: AnyEventSchema): QuotaSignups[] {
   const openSignups = signups.filter((signup) => signup.status === 'in-open');
   // Open quota is shown if the event has one, or if signups have been assigned there nevertheless.
   const openQuota = openSignups.length > 0 || event.openQuotaSize > 0 ? [{
-    id: OPENQUOTA as typeof OPENQUOTA,
+    id: OPENQUOTA,
     title: 'Avoin kiintiö',
     size: event.openQuotaSize,
     signups: openSignups,
@@ -86,7 +86,7 @@ export function getSignupsByQuota(event: AnyEventSchema): QuotaSignups[] {
   const queueSignups = signups.filter((signup) => signup.status === 'in-queue');
   // Queue is shown if signups have been assigned there.
   const queue = queueSignups.length > 0 ? [{
-    id: WAITLIST as typeof WAITLIST,
+    id: WAITLIST,
     title: 'Jonossa',
     size: null,
     signups: queueSignups,