Define an abstract API

app/[slug]/dashboard/guests/page.tsx

@@ -3,11 +3,12 @@
 'use client';
 
 import { loadGroups } from '@/app/api/groups';
-import { loadGuests } from '@/app/api/guests';
+import { AbstractApi,  } from '@/app/api/abstract-api';
-import { Group, Guest } from '@/app/lib/definitions';
+import { Group } from '@/app/lib/definitions';
+import { Guest, GuestSerializer } from '@/app/lib/guest';
 import { classNames } from '@/app/ui/components/button';
-import GuestFormDialog from '@/app/ui/components/guest-form-dialog';
 import GroupFormDialog from '@/app/ui/components/group-form-dialog';
+import GuestFormDialog from '@/app/ui/components/guest-form-dialog';
 import GroupsTable from '@/app/ui/groups/table';
 import SkeletonTable from '@/app/ui/guests/skeleton-row';
 import GuestsTable from '@/app/ui/guests/table';
@@ -17,8 +18,8 @@ import { Suspense, useState } from 'react';
 
 export default function Page() {
   function refreshGuests() {
-    loadGuests((guests) => {
+    new AbstractApi<Guest>().getAll(new GuestSerializer(), (objects: Guest[]) => {
-      setGuests(guests);
+      setGuests(objects);
       setGuestsLoaded(true);
     });
   }

app/api/abstract-api.tsx

@@ -0,0 +1,65 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import { Entity } from '@/app/lib/definitions';
+import { getCsrfToken, getSlug } from '@/app/lib/utils';
+
+export interface Api<T extends Entity> {
+  getAll(serializable: Serializable<T> ,callback: (objets: T[]) => void): void;
+  create(serializable: Serializable<T>, object: T, callback: () => void): void;
+  update(serializable: Serializable<T>, object: T, callback: () => void): void;
+  destroy(serializable: Serializable<T>, object: T, callback: () => void): void;
+}
+
+export interface Serializable<T> {
+  fromJson(json: any): T;
+  toJson(object: T): string;
+  apiPath(): string;
+}
+
+export class AbstractApi<T extends Entity> implements Api<T> {
+  getAll(serializable: Serializable<T>, callback: (objets: T[]) => void): void {
+    fetch(`/api/${getSlug()}/${serializable.apiPath()}`)
+      .then((response) => response.json())
+      .then((data) => {
+        callback(data.map((record: any) => {
+          return serializable.fromJson(record);
+        }));
+      }, (error) => {
+        return [];
+      });
+  }
+
+  update(serializable: Serializable<T>, object: T, callback: () => void): void {
+    fetch(`/api/${getSlug()}/${serializable.apiPath()}/${object.id}`, {
+      method: 'PUT',
+      body: serializable.toJson(object),
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-TOKEN': getCsrfToken(),
+      }
+    }).then(callback)
+      .catch((error) => console.error(error));
+  }
+
+  create(serializable: Serializable<T>, object: T, callback: () => void): void {
+    fetch(`/api/${getSlug()}/${serializable.apiPath()}`, {
+      method: 'POST',
+      body: serializable.toJson(object),
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-TOKEN': getCsrfToken(),
+      }
+    }).then(callback)
+      .catch((error) => console.error(error));
+  }
+
+  destroy(serializable: Serializable<T>, object: T, callback: () => void): void {
+    fetch(`/api/${getSlug()}/${serializable.apiPath()}/${object.id}`, {
+      method: 'DELETE',
+      headers: {
+        'X-CSRF-TOKEN': getCsrfToken(),
+      }
+    }).then(callback)
+      .catch((error) => console.error(error));
+  }
+}

app/api/guests.tsx

@@ -1,65 +0,0 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
-
-import { Guest } from '@/app/lib/definitions';
-import { getCsrfToken, getSlug } from '@/app/lib/utils';
-
-export function loadGuests(onLoad?: (guests: Guest[]) => void) {
-  fetch(`/api/${getSlug()}/guests`)
-    .then((response) => response.json())
-    .then((data) => {
-      onLoad && onLoad(data.map((record: any) => {
-        return ({
-          id: record.id,
-          name: record.name,
-          status: record.status,
-          group_name: record.group.name,
-          groupId: record.group.id,
-        });
-      }));
-    }, (error) => {
-      return [];
-    });
-};
-
-export function updateGuest(guest: Guest) {
-  return fetch(`/api/${getSlug()}/guests/${guest.id}`,
-    {
-      method: 'PUT',
-      body: JSON.stringify({ guest: { name: guest.name, status: guest.status, group_id: guest.groupId } }),
-      headers: {
-        'Content-Type': 'application/json',
-        'X-CSRF-TOKEN': getCsrfToken(),
-      }
-    })
-    .catch((error) => console.error(error));
-}
-
-export function createGuest(guest: Guest, onCreate?: () => void) {
-  fetch(`/api/${getSlug()}/guests`, {
-    method: 'POST',
-    body: JSON.stringify({ name: guest.name, group_id: guest.groupId, status: guest.status }),
-    headers: {
-      'Content-Type': 'application/json',
-      'X-CSRF-TOKEN': getCsrfToken(),
-    }
-  })
-    .then((response) => response.json())
-    .then((data) => {
-      onCreate && onCreate();
-    })
-    .catch((error) => console.error(error));
-}
-
-export function destroyGuest(guest: Guest, onDestroy?: () => void) {
-  fetch(`/api/${getSlug()}/guests/${guest.id}`, {
-    method: 'DELETE',
-    headers: {
-      'X-CSRF-TOKEN': getCsrfToken(),
-    }
-  })
-    .then((response) => response.json())
-    .then((data) => {
-      onDestroy && onDestroy();
-    })
-    .catch((error) => console.error(error));
-}

app/lib/definitions.ts

@@ -1,19 +1,9 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
-// This file contains type definitions for your data.
+import { Guest } from "./guest";
-// It describes the shape of the data, and what data type each property should accept.
-// For simplicity of teaching, we're manually defining these types.
-// However, these types are generated automatically if you're using an ORM such as Prisma.
 
-export const guestStatuses = ['considered', 'invited', 'confirmed', 'declined', 'tentative'] as const;
+export interface Entity {
-export type GuestStatus = typeof guestStatuses[number];
-export type Guest = {
   id?: string;
-  name?: string;
-  group_name?: string;
-  groupId?: string;
-  color?: string;
-  status?: GuestStatus
 }
 
 export type Expense = {
@@ -73,5 +63,5 @@ export type Captcha = {
 }
 
 export type StructuredErrors = {
-  [key: string]: string[]|string;
+  [key: string]: string[] | string;
 };

app/lib/guest.tsx

@@ -0,0 +1,38 @@
+import { Serializable } from "../api/abstract-api";
+
+export const guestStatuses = ['considered', 'invited', 'confirmed', 'declined', 'tentative'] as const;
+export type GuestStatus = typeof guestStatuses[number];
+
+
+export class Guest {
+  id?: string;
+  name?: string;
+  group_name?: string;
+  groupId?: string;
+  color?: string;
+  status?: GuestStatus;
+
+  constructor(id?: string, name?: string, group_name?: string, groupId?: string, color?: string, status?: GuestStatus) {
+    this.id = id;
+    this.name = name;
+    this.group_name = group_name;
+    this.groupId = groupId;
+    this.color = color;
+    this.status = status;
+  }
+}
+
+export class GuestSerializer implements Serializable<Guest> {
+  fromJson(data: any): Guest {
+    return new Guest(data.id, data.name, data.group_name, data.group_id, data.color, data.status);
+  }
+
+  toJson(guest: Guest): string {
+    return JSON.stringify({ guest: { name: guest.name, status: guest.status, group_id: guest.groupId } });
+  }
+
+  apiPath(): string {
+    return 'guests';
+  }
+}
+

app/ui/components/guest-form-dialog.tsx

@@ -2,8 +2,9 @@
 
 'use client';
 
-import { createGuest, updateGuest } from '@/app/api/guests';
+import { AbstractApi } from '@/app/api/abstract-api';
-import { Group, Guest, GuestStatus, guestStatuses } from '@/app/lib/definitions';
+import { Group } from '@/app/lib/definitions';
+import { Guest, GuestSerializer, GuestStatus, guestStatuses } from '@/app/lib/guest';
 import { capitalize } from '@/app/lib/utils';
 import { classNames } from '@/app/ui/components/button';
 import { Dialog } from 'primereact/dialog';
@@ -24,6 +25,9 @@ export default function GuestFormDialog({ groups, onCreate, onHide, guest, visib
   const [group, setGroup] = useState(guest?.groupId || null);
   const [status, setStatus] = useState<GuestStatus | null>(guest?.status || null);
 
+  const api = new AbstractApi<Guest>();
+  const serializer = new GuestSerializer();
+
   function resetForm() {
     setName('');
     setGroup(null);
@@ -39,12 +43,13 @@ export default function GuestFormDialog({ groups, onCreate, onHide, guest, visib
       guest.name = name;
       guest.groupId = group;  
       guest.status = status;
-      updateGuest(guest).then(() => {
+     
+      api.update(serializer, guest, () => {
         resetForm();
         onCreate && onCreate();
       });
     } else {
-      guest && createGuest({name: name, groupId: group, status: status}, () => {
+      api.create(serializer, new Guest(undefined, name, undefined, group, undefined, status), ()=> {
         resetForm();
         onCreate && onCreate();
       });

app/ui/guests/table.tsx

@@ -2,9 +2,8 @@
 
 'use client';
 
-import { destroyGuest, updateGuest } from '@/app/api/guests';
+import { AbstractApi } from '@/app/api/abstract-api';
-import { Guest, GuestStatus } from '@/app/lib/definitions';
+import { Guest , GuestSerializer} from '@/app/lib/guest';
-import { classNames } from '@/app/ui/components/button';
 import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import TableOfContents from '../components/table-of-contents';
@@ -14,6 +13,10 @@ export default function guestsTable({ guests, onUpdate, onEdit }: {
   onUpdate: () => void,
   onEdit: (guest: Guest) => void
 }) {
+
+  const api = new AbstractApi<Guest>();
+  const serializer = new GuestSerializer();
+
   return (
     <TableOfContents
       headers={['Name', 'Group', 'Status', 'Actions']}
@@ -45,7 +48,7 @@ export default function guestsTable({ guests, onUpdate, onEdit }: {
           </td>
           <td>
             <div className="flex flex-row items-center">
-              <TrashIcon className='size-6 cursor-pointer' onClick={() => { destroyGuest(guest, () => onUpdate()) }} />
+              <TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, guest, onUpdate)}} />
               <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(guest)} />
             </div>
           </td>