From 13fee16563fbb391223aa9b82f03de8dc5b014c3 Mon Sep 17 00:00:00 2001
From: Mikael Siidorow <87767032+MikaelSiidorow@users.noreply.github.com>
Date: Wed, 30 Oct 2024 12:37:01 +0200
Subject: [PATCH] feat: support infinite quota in UI (#544)

---
 .../src/app/[locale]/events/[slug]/page.tsx   | 33 ++++++++++++-------
 .../[signupId]/[signupEditToken]/page.tsx     | 18 ++++++----
 apps/web/src/custom-pages/events-page.tsx     | 12 ++++---
 .../src/lib/api/external/ilmomasiina/index.ts |  2 +-
 apps/web/src/locales/en.ts                    |  2 ++
 apps/web/src/locales/fi.ts                    |  2 ++
 6 files changed, 46 insertions(+), 23 deletions(-)

diff --git a/apps/web/src/app/[locale]/events/[slug]/page.tsx b/apps/web/src/app/[locale]/events/[slug]/page.tsx
index 2bcab902..b7a1baeb 100644
--- a/apps/web/src/app/[locale]/events/[slug]/page.tsx
+++ b/apps/web/src/app/[locale]/events/[slug]/page.tsx
@@ -359,18 +359,27 @@ async function SignUpQuotas({ event }: { event: IlmomasiinaEvent }) {
             ) : (
               <>
                 <span>{quota.title}</span>
-                <div className="relative">
-                  <Progress
-                    value={Math.min(
-                      ((quota.signupCount ?? 0) / quota.size) * 100,
-                      100,
-                    )}
-                  />
-                  <span className="absolute bottom-1/2 left-0 w-full translate-y-1/2 text-center text-sm">
-                    {Math.min(quota.signupCount ?? 0, quota.size)} /{" "}
-                    {quota.size}
-                  </span>
-                </div>
+                {typeof quota.size === "number" ? (
+                  <div className="relative">
+                    <Progress
+                      value={Math.min(
+                        ((quota.signupCount ?? 0) / quota.size) * 100,
+                        100,
+                      )}
+                    />
+                    <span className="absolute bottom-1/2 left-0 w-full translate-y-1/2 text-center text-sm">
+                      {Math.min(quota.signupCount ?? 0, quota.size)} /{" "}
+                      {quota.size}
+                    </span>
+                  </div>
+                ) : (
+                  <div className="relative">
+                    <Progress value={100} />
+                    <span className="absolute bottom-1/2 left-0 w-full translate-y-1/2 text-center text-sm">
+                      {quota.signupCount}
+                    </span>
+                  </div>
+                )}
               </>
             )}
           </li>
diff --git a/apps/web/src/app/[locale]/signups/[signupId]/[signupEditToken]/page.tsx b/apps/web/src/app/[locale]/signups/[signupId]/[signupEditToken]/page.tsx
index 67d321dc..7c75183d 100644
--- a/apps/web/src/app/[locale]/signups/[signupId]/[signupEditToken]/page.tsx
+++ b/apps/web/src/app/[locale]/signups/[signupId]/[signupEditToken]/page.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary -- I like */
 import { notFound } from "next/navigation";
 import { getSignup } from "../../../../../lib/api/external/ilmomasiina";
 import { openGraphImage } from "../../../../shared-metadata";
@@ -64,14 +65,19 @@ export default async function Page({
               ? t("You are in queue at position {position}", {
                   position: signupInfo.data.signup.position,
                 })
-              : t(
-                  "You are in the quota {quotaName} at position {position}/{quotaSize}",
-                  {
+              : typeof signupInfo.data.signup.quota.size === "number"
+                ? t(
+                    "You are in the quota {quotaName} at position {position}/{quotaSize}",
+                    {
+                      quotaName: signupInfo.data.signup.quota.title,
+                      position: signupInfo.data.signup.position,
+                      quotaSize: signupInfo.data.signup.quota.size,
+                    },
+                  )
+                : t("You are in the quota {quotaName} at position {position}", {
                     quotaName: signupInfo.data.signup.quota.title,
                     position: signupInfo.data.signup.position,
-                    quotaSize: signupInfo.data.signup.quota.size,
-                  },
-                )}
+                  })}
           </p>
         </hgroup>
         <SignupForm
diff --git a/apps/web/src/custom-pages/events-page.tsx b/apps/web/src/custom-pages/events-page.tsx
index a536d324..af5344a2 100644
--- a/apps/web/src/custom-pages/events-page.tsx
+++ b/apps/web/src/custom-pages/events-page.tsx
@@ -76,7 +76,7 @@ async function SignupQuotas({
     (acc, quota) => acc + (quota.signupCount ?? 0),
     0,
   );
-  const totalSize = quotas.reduce((acc, quota) => acc + quota.size, 0);
+  const totalSize = quotas.reduce((acc, quota) => acc + (quota.size ?? 0), 0);
 
   const isSingleQuota = quotas.length === 1;
 
@@ -107,9 +107,13 @@ async function SignupQuotas({
           key={quota.id}
         >
           <span className="w-3/4 truncate">{quota.title}</span>{" "}
-          <span className="w-1/4 text-left">
-            {quota.signupCount} / {quota.size}
-          </span>
+          {typeof quota.size === "number" ? (
+            <span className="w-1/4 text-left">
+              {quota.signupCount} / {quota.size}
+            </span>
+          ) : (
+            <span className="w-1/4 text-left">{quota.signupCount}</span>
+          )}
         </li>
       ))}
     </ul>
diff --git a/apps/web/src/lib/api/external/ilmomasiina/index.ts b/apps/web/src/lib/api/external/ilmomasiina/index.ts
index fe39ded9..3e084b57 100644
--- a/apps/web/src/lib/api/external/ilmomasiina/index.ts
+++ b/apps/web/src/lib/api/external/ilmomasiina/index.ts
@@ -51,7 +51,7 @@ export interface EventQuestion {
 export interface EventQuota {
   id: string;
   title: string;
-  size: number;
+  size?: number | null;
   signupCount?: number;
   signups?: QuotaSignup[] | null;
 }
diff --git a/apps/web/src/locales/en.ts b/apps/web/src/locales/en.ts
index 884f39b0..a1b08a6b 100644
--- a/apps/web/src/locales/en.ts
+++ b/apps/web/src/locales/en.ts
@@ -68,6 +68,8 @@ const en = {
   "invoicegenerator.Invoicer information": "Invoicer information",
   "ilmomasiina.form.You are in queue at position {position}":
     "You are in queue at position {position}.",
+  "ilmomasiina.form.You are in the quota {quotaName} at position {position}":
+    "You are in the quota {quotaName} at position {position}.",
   "ilmomasiina.form.You are in the quota {quotaName} at position {position}/{quotaSize}":
     "You are in the quota {quotaName} at position {position}/{quotaSize}.",
   "ilmomasiina.form.fieldError.missing": "This field is required.",
diff --git a/apps/web/src/locales/fi.ts b/apps/web/src/locales/fi.ts
index 5e36274b..d5cb7abc 100644
--- a/apps/web/src/locales/fi.ts
+++ b/apps/web/src/locales/fi.ts
@@ -68,6 +68,8 @@ const fi = {
   "invoicegenerator.Invoicer information": "Laskuttajan tiedot",
   "ilmomasiina.form.You are in queue at position {position}":
     "Olet jonossa sijalla {position}.",
+  "ilmomasiina.form.You are in the quota {quotaName} at position {position}":
+    "Olet kiintiössä {quotaName} sijalla {position}.",
   "ilmomasiina.form.You are in the quota {quotaName} at position {position}/{quotaSize}":
     "Olet kiintiössä {quotaName} sijalla {position}/{quotaSize}.",
   "ilmomasiina.form.fieldError.missing": "Tämä kenttä on pakollinen.",