fix(frontend): crash on empty planned events (#87)

apps/frontend/src/app/(main)/[lang]/planned-events/client.tsx

@@ -11,6 +11,7 @@ import type { ILocalizableProps, ITranslatableProps } from "#components/types";
 import {
   PlannedEventCreateForm,
   PlannedEventPreview,
+  countPlannedEvents,
   createPlannedEvent,
   getPlannedEvents,
   type IPlannedEventInit,
@@ -25,23 +26,35 @@ export function Client({ language, commonTranslation, translation }: IProps) {
   const searchParams = useSearchParams();
   const [plannedEvents, changePlannedEvents] =
     useState<Awaited<ReturnType<typeof getPlannedEvents>>>();
+  const [isLoading, switchLoading] = useState(true);
   const inputPage = searchParams.get("page")?.trim();
   const page = !inputPage ? undefined : parseInt(inputPage, 10);
 
   useEffect(() => {
     (async () => {
-      const newPlannedEvents = await getPlannedEvents(page);
+      try {
+        switchLoading(true);
+        const count = await countPlannedEvents();
 
-      if (!page) {
-        const url = createPlannedEventsPageURL(language, {
-          page: newPlannedEvents.pagination.totalPages,
-        });
-        router.replace(url);
+        if (count === 0) {
+          return;
+        }
 
-        return;
-      }
+        const newPlannedEvents = await getPlannedEvents(page);
+
+        if (!page) {
+          const url = createPlannedEventsPageURL(language, {
+            page: newPlannedEvents.pagination.totalPages,
+          });
+          router.replace(url);
 
-      changePlannedEvents(newPlannedEvents);
+          return;
+        }
+
+        changePlannedEvents(newPlannedEvents);
+      } finally {
+        switchLoading(false);
+      }
     })();
   }, [page]);
 
@@ -70,9 +83,9 @@ export function Client({ language, commonTranslation, translation }: IProps) {
         )}
       </Overview>
 
-      {!plannedEvents ? (
+      {isLoading ? (
         <Loading />
-      ) : plannedEvents.pagination.totalCount === 0 ? (
+      ) : !plannedEvents ? (
         <Overview headingLevel={2}>
           {() => (
             <OverviewHeader>

apps/frontend/src/browser/store/indexed/count.ts

@@ -0,0 +1,25 @@
+import { getTransaction } from "./get-transaction";
+import type { IStorageName } from "./types";
+
+export async function countIndexedDBItems(
+  storeName: IStorageName,
+): Promise<number> {
+  const resultCount = await new Promise<number>((resolve, reject) => {
+    getTransaction([storeName], "readonly").then((transaction) => {
+      transaction.onerror = (event) => {
+        reject(event);
+      };
+
+      const objectStore = transaction.objectStore(storeName);
+      const countRequest = objectStore.count();
+
+      countRequest.onsuccess = (event) => {
+        const count = (event.target as typeof countRequest).result;
+
+        resolve(count);
+      }
+    });
+  });
+
+  return resultCount
+}

apps/frontend/src/browser/store/indexed/create.ts

@@ -1,4 +1,4 @@
-import { getOneIndexedDBItem } from "./get";
+import { getOneIndexedDBItem } from "./one";
 import { getTransaction } from "./get-transaction";
 import type { IStorageName } from "./types";
 

apps/frontend/src/browser/store/indexed/delete.ts

@@ -1,4 +1,4 @@
-import { getOneIndexedDBItem } from "./get";
+import { getOneIndexedDBItem } from "./one";
 import { getTransaction } from "./get-transaction";
 import type { IStorageName } from "./types";
 

apps/frontend/src/browser/store/indexed/get.ts

@@ -6,32 +6,7 @@ import {
 import { getTransaction } from "./get-transaction";
 import type { IStorageName } from "./types";
 
-export async function getOneIndexedDBItem<Type>(
-  storeName: IStorageName,
-  query: IDBValidKey,
-  validate: (input: unknown) => asserts input is Type,
-): Promise<Type> {
-  const result = await new Promise((resolve, reject) => {
-    getTransaction([storeName], "readonly").then((transaction) => {
-      const objectStore = transaction.objectStore(storeName);
-      const request = objectStore.get(query);
-
-      request.onerror = (event) => {
-        reject(event);
-      };
-
-      request.onsuccess = (event) => {
-        const result: unknown = (event.target as typeof request).result;
-
-        resolve(result);
-      };
-    });
-  });
 
-  validate(result);
-
-  return result;
-}
 
 export async function getManyIndexedDBItems<Type>(
   storeName: IStorageName,
@@ -51,6 +26,11 @@ export async function getManyIndexedDBItems<Type>(
 
         countRequest.onsuccess = (event) => {
           const count = (event.target as typeof countRequest).result;
+
+          if (count === 0) {
+            return reject(new Error(`No results found for store "${storeName}".`))
+          }
+
           const pagination = createClientPagination(count, limit, page);
           // collecting all keys is kinda cringe
           // but better than getting all values

apps/frontend/src/browser/store/indexed/index.ts

@@ -1,4 +1,6 @@
-export { getOneIndexedDBItem, getManyIndexedDBItems } from "./get";
+export { countIndexedDBItems } from "./count";
+export { getManyIndexedDBItems } from "./get";
+export { getOneIndexedDBItem } from "./one";
 export { createOneIndexedDBItem } from "./create";
 export { updateOneIndexedDBItem } from "./update";
 export { deleteOneIndexedDBItem } from "./delete";

apps/frontend/src/browser/store/indexed/one.ts

@@ -0,0 +1,29 @@
+import { getTransaction } from "./get-transaction";
+import type { IStorageName } from "./types";
+
+export async function getOneIndexedDBItem<Type>(
+  storeName: IStorageName,
+  query: IDBValidKey,
+  validate: (input: unknown) => asserts input is Type,
+): Promise<Type> {
+  const result = await new Promise((resolve, reject) => {
+    getTransaction([storeName], "readonly").then((transaction) => {
+      const objectStore = transaction.objectStore(storeName);
+      const request = objectStore.get(query);
+
+      request.onerror = (event) => {
+        reject(event);
+      };
+
+      request.onsuccess = (event) => {
+        const result: unknown = (event.target as typeof request).result;
+
+        resolve(result);
+      };
+    });
+  });
+
+  validate(result);
+
+  return result;
+}

apps/frontend/src/browser/store/indexed/update.ts

@@ -1,4 +1,4 @@
-import { getOneIndexedDBItem } from "./get";
+import { getOneIndexedDBItem } from "./one";
 import { getTransaction } from "./get-transaction";
 import type { IStorageName } from "./types";
 

apps/frontend/src/entities/planned-event/index.ts

@@ -1,5 +1,9 @@
 export { createPlannedEvent } from "./lib/create";
-export { getPlannedEvents, getPlannedEvent } from "./lib/get";
+export {
+  countPlannedEvents,
+  getPlannedEvents,
+  getPlannedEvent,
+} from "./lib/get";
 export { editPlannedEvent } from "./lib/edit";
 export { deletePlannedEvent } from "./lib/delete";
 export { PlannedEventCreateForm } from "./forms/create";

apps/frontend/src/entities/planned-event/lib/get.ts

@@ -1,11 +1,18 @@
 import {
   getManyIndexedDBItems,
   getOneIndexedDBItem,
+  countIndexedDBItems,
 } from "#browser/store/indexed";
 import type { IPaginatedCollection } from "#lib/pagination";
 import type { IPlannedEvent } from "../types";
 import { validatePlannedEvent } from "./validate";
 
+export async function countPlannedEvents(): Promise<number> {
+  const count = await countIndexedDBItems("planned_events");
+
+  return count;
+}
+
 export async function getPlannedEvents(
   page?: number,
 ): Promise<IPaginatedCollection<IPlannedEvent>> {