Update to dexie v4

package.json

@@ -14,7 +14,7 @@
     "@types/node": "^17.0.45",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
-    "dexie": "^3.2.4",
+    "dexie": "^4.0.1-beta.1",
     "dexie-react-hooks": "^1.1.6",
     "html5-qrcode": "^2.3.8",
     "prop-types": "^15.8.1",

src/db/db.ts

@@ -1,17 +1,17 @@
-import Dexie, {Table} from 'dexie';
+import Dexie, {type EntityTable} from 'dexie';
 import {FieldProps} from '../pages/participant/fields';
 import {IndicoParticipant} from '../utils/client';
 
 export interface Server {
-  id?: number;
+  id: number;
   baseUrl: string;
   clientId: string;
   scope: string;
   authToken: string;
 }
 
 export interface Event {
-  id?: number;
+  id: number;
   indicoId: number;
   serverId: number;
   baseUrl: string;
@@ -20,7 +20,7 @@ export interface Event {
   deleted: boolean;
 }
 export interface Regform {
-  id?: number;
+  id: number;
   indicoId: number;
   eventId: number;
   title: string;
@@ -40,7 +40,7 @@ export interface RegistrationData {
 export type RegistrationState = 'complete' | 'pending' | 'rejected' | 'withdrawn' | 'unpaid';
 
 export interface Participant {
-  id?: number;
+  id: number;
   indicoId: number;
   regformId: number;
   fullName: string;
@@ -62,10 +62,10 @@ export interface Participant {
 class IndicoCheckin extends Dexie {
   // Declare implicit table properties.
   // (just to inform Typescript. Instanciated by Dexie in stores() method)
-  servers!: Table<Server, number>;
-  events!: Table<Event, number>;
-  regforms!: Table<Regform, number>;
-  participants!: Table<Participant, number>;
+  servers!: EntityTable<Server, 'id'>;
+  events!: EntityTable<Event, 'id'>;
+  regforms!: EntityTable<Regform, 'id'>;
+  participants!: EntityTable<Participant, 'id'>;
 
   constructor() {
     super('CheckinDatabase');
@@ -85,7 +85,7 @@ export default db;
 export async function deleteEvent(id: number) {
   const regforms = await db.regforms.where({eventId: id}).toArray();
   for (const regform of regforms) {
-    await deleteRegform(regform.id!);
+    await deleteRegform(regform.id);
   }
   await db.events.delete(id);
 }

src/pages/Events/checkin.ts

@@ -10,10 +10,10 @@ async function updateCheckinState(
   newCheckInState: boolean
 ) {
   return db.transaction('readwrite', db.regforms, db.participants, async () => {
-    await db.participants.update(participant.id!, {checkedIn: newCheckInState});
+    await db.participants.update(participant.id, {checkedIn: newCheckInState});
     const slots = participant.occupiedSlots;
     const checkedInCount = regform.checkedInCount + (newCheckInState ? slots : -slots);
-    await db.regforms.update(regform.id!, {checkedInCount});
+    await db.regforms.update(regform.id, {checkedInCount});
   });
 }
 

src/pages/Events/sync.ts

@@ -55,9 +55,9 @@ export async function syncEvents(
   for (const [i, response] of responses.entries()) {
     if (response.ok) {
       const {id, title, startDt: date} = response.data;
-      await db.events.update(events[i].id!, {indicoId: id, title, date});
+      await db.events.update(events[i].id, {indicoId: id, title, date});
     } else if (response.status === 404) {
-      await db.events.update(events[i].id!, {deleted: true});
+      await db.events.update(events[i].id, {deleted: true});
     } else {
       handleError(response, 'Something went wrong when updating events', errorModal);
     }
@@ -96,11 +96,11 @@ export async function syncRegforms(
 
       // no bulkUpdate yet..
       // regforms that don't exist in Indico anymore, mark them as deleted
-      const existingIds = onlyExisting.map(r => r.id!);
+      const existingIds = onlyExisting.map(r => r.id);
       const deleted = onlyExisting.map(() => ({deleted: true}));
       await bulkUpdate(db.regforms, existingIds, deleted);
       // regforms that we have both locally and in Indico, just update them
-      const commonIds = common.map(([r]) => r.id!);
+      const commonIds = common.map(([r]) => r.id);
       const commonData = common.map(([, r]) => r);
       await bulkUpdate(db.regforms, commonIds, commonData);
     });
@@ -124,15 +124,15 @@ export async function syncRegform(
 
   if (response.ok) {
     const {id, title, isOpen, registrationCount, checkedInCount} = response.data;
-    await db.regforms.update(regform.id!, {
+    await db.regforms.update(regform.id, {
       indicoId: id,
       title,
       isOpen,
       registrationCount,
       checkedInCount,
     });
   } else if (response.status === 404) {
-    await db.regforms.update(regform.id!, {deleted: true});
+    await db.regforms.update(regform.id, {deleted: true});
   } else {
     handleError(response, 'Something went wrong when updating registration form', errorModal);
   }
@@ -188,7 +188,7 @@ export async function syncParticipants(
       const [onlyExisting, onlyNew, common] = split(existingParticipants, newParticipants);
 
       // participants that don't exist in Indico anymore, mark them as deleted
-      const existingIds = onlyExisting.map(r => r.id!);
+      const existingIds = onlyExisting.map(r => r.id);
       const deleted = onlyExisting.map(() => ({deleted: true}));
       await bulkUpdate(db.participants, existingIds, deleted);
       // participants that we don't have locally, add them
@@ -200,7 +200,7 @@ export async function syncParticipants(
       }));
       await db.participants.bulkAdd(newData);
       // participants that we have both locally and in Indico, just update them
-      const commonIds = common.map(([r]) => r.id!);
+      const commonIds = common.map(([r]) => r.id);
       const commonData = common.map(([, r]) => r);
       await bulkUpdate(db.participants, commonIds, commonData);
     });
@@ -229,9 +229,9 @@ export async function syncParticipant(
   );
 
   if (response.ok) {
-    await updateParticipant(participant.id!, response.data);
+    await updateParticipant(participant.id, response.data);
   } else if (response.status === 404) {
-    await db.participants.update(participant.id!, {deleted: true});
+    await db.participants.update(participant.id, {deleted: true});
   } else {
     handleError(response, 'Something went wrong when updating participant', errorModal);
   }

src/pages/event/EventPage.tsx

@@ -199,7 +199,7 @@ function EventTopNav({event}: {event: DBResult<Event>}) {
           content: 'You can always re-add the event by scanning its QR code',
           confirmBtnText: 'Delete',
           onConfirm: async () => {
-            await deleteEvent(event.id!);
+            await deleteEvent(event.id);
             navigate(`/`, {replace: true});
           },
         });

src/pages/home/Homepage.tsx

@@ -125,7 +125,7 @@ function EventList({
   return (
     <div className="flex flex-col gap-4">
       {events.map(event => (
-        <EventItem key={event.id} event={event} regformCount={regformCount[event.id!] || 0} />
+        <EventItem key={event.id} event={event} regformCount={regformCount[event.id] || 0} />
       ))}
     </div>
   );
@@ -148,7 +148,7 @@ function groupServersById(servers: Server[]) {
   }
 
   return servers.reduce((acc, server) => {
-    acc[server.id!] = server;
+    acc[server.id] = server;
     return acc;
   }, {} as ServerMap);
 }

src/pages/participant/ParticipantPage.tsx

@@ -158,7 +158,7 @@ function ParticipantPageContent({
   const onAddNotes = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setNotes(e.target.value);
     debounce(() => {
-      db.participants.update(participant.id!, {notes: e.target.value});
+      db.participants.update(participant.id, {notes: e.target.value});
     });
   };
 

src/pages/participant/payment.tsx

@@ -44,7 +44,7 @@ async function togglePayment(
   );
 
   if (response.ok) {
-    await updateParticipant(participant.id!, response.data);
+    await updateParticipant(participant.id, response.data);
   } else {
     handleError(response, 'Something went wrong when updating payment status', errorModal);
   }

src/pages/regform/RegformPage.tsx

@@ -258,7 +258,7 @@ function RegformTopNav({event, regform}: {event: DBResult<Event>; regform: DBRes
               content: 'You can always re-add the registration form by scanning its QR code',
               confirmBtnText: 'Delete',
               onConfirm: async () => {
-                await deleteRegform(regform.id!);
+                await deleteRegform(regform.id);
                 navigate(`/event/${event.id}`, {replace: true});
               },
             });

src/pages/scan/Scan.tsx

@@ -40,7 +40,7 @@ async function handleEvent(
       } else {
         id = await db.events.add({
           indicoId: eventId,
-          serverId: server.id!,
+          serverId: server.id,
           baseUrl: server.baseUrl,
           title,
           date,
@@ -150,7 +150,7 @@ async function handleParticipant(
     });
   } else {
     const response = await getParticipant({
-      serverId: server.id!,
+      serverId: server.id,
       eventId: event.indicoId,
       regformId: regform.indicoId,
       participantId: data.registrationId,
@@ -183,7 +183,7 @@ async function handleParticipant(
 
       const participantId = await db.participants.add({
         indicoId: id,
-        regformId: regform.id!,
+        regformId: regform.id,
         fullName,
         registrationDate,
         registrationData,