From 2ea1fd26678706993c4b0b35232cda5136aa4211 Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 10 Nov 2024 20:55:03 +0100
Subject: [PATCH] Reuse the table of contents component for the guests list

---
 app/ui/guests/table.tsx | 110 ++++++++++++++++------------------------
 1 file changed, 45 insertions(+), 65 deletions(-)

diff --git a/app/ui/guests/table.tsx b/app/ui/guests/table.tsx
index 9df0f30..3504089 100644
--- a/app/ui/guests/table.tsx
+++ b/app/ui/guests/table.tsx
@@ -7,6 +7,7 @@ import React, { useState, useEffect } from 'react';
 import { Guest } from '@/app/lib/definitions';
 import { getCsrfToken } from '@/app/lib/utils';
 import {classNames} from '@/app/ui/components/button';
+import TableOfContents from '../components/table-of-contents';
 
 export default function guestsTable() {
   const [guests, setGuests] = useState<Array<Guest>>([]);
@@ -50,69 +51,48 @@ export default function guestsTable() {
   guests.length === 0 && loadGuests();
 
   return (
-    <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
-      <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-        <caption className="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
-          Guests
-          <p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
-            There are {guests.length} guests in the list
-          </p>
-        </caption>
-        <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-          <tr>
-            <th scope="col" className="px-6 py-3">
-              Name
-            </th>
-            <th scope="col" className="px-6 py-3">
-              Group
-            </th>
-            <th scope="col" className="px-6 py-3">
-              Status
-            </th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          {guests.map((guest) => (
-            <tr key={guest.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
-              <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                {guest.name}
-              </th>
-              <td className="px-6 py-4">
-                {guest.group_name}
-              </td>
-              <td className="px-6 py-4">
-                <span className="flex items-center text-sm dark:text-white me-3">
-                  <span className={clsx(
-                    'flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0',
-                    {
-                      'bg-gray-400': guest.status === 'Considered',
-                      'bg-blue-400': guest.status === 'Invited',
-                      'bg-green-600': guest.status === 'Confirmed',
-                      'bg-red-400': guest.status === 'Declined',
-                      'bg-yellow-400': guest.status === 'Tentative',
-                    }
-                  )}>
-                  </span>
-                  {guest.status}
-                </span>
-              </td>
-              <td>
-                {guest.status === 'Considered' && (<button data-guest-id={guest.id} onClick={handleInviteGuest} className={classNames('blue')}>
-                  Invite
-                </button>)}
-                {(guest.status === 'Invited' || guest.status === 'Tentative') && (
-                  <>
-                    <button data-guest-id={guest.id} onClick={handleConfirmGuest} className={classNames('green')}>Confirm</button>
-                    {guest.status != 'Tentative' && <button data-guest-id={guest.id} onClick={handleTentativeGuest} className={classNames('yellow')}>Tentative</button>}
-                    <button data-guest-id={guest.id} onClick={handleDeclineGuest} className={classNames('red')}>Decline</button>
-                  </>
-                )}
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
+    <TableOfContents
+      headers={['Name', 'Group', 'Status', 'Actions']}
+      caption='Guests'
+      elements={guests}
+      rowRender={(guest) => (
+        <tr key={guest.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
+          <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+            {guest.name}
+          </th>
+          <td className="px-6 py-4">
+            {guest.group_name}
+          </td>
+          <td className="px-6 py-4">
+            <span className="flex items-center text-sm dark:text-white me-3">
+              <span className={clsx(
+                'flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0',
+                {
+                  'bg-gray-400': guest.status === 'Considered',
+                  'bg-blue-400': guest.status === 'Invited',
+                  'bg-green-600': guest.status === 'Confirmed',
+                  'bg-red-400': guest.status === 'Declined',
+                  'bg-yellow-400': guest.status === 'Tentative',
+                }
+              )}>
+              </span>
+              {guest.status}
+            </span>
+          </td>
+          <td>
+            {guest.status === 'Considered' && (<button data-guest-id={guest.id} onClick={handleInviteGuest} className={classNames('blue')}>
+              Invite
+            </button>)}
+            {(guest.status === 'Invited' || guest.status === 'Tentative') && (
+              <>
+                <button data-guest-id={guest.id} onClick={handleConfirmGuest} className={classNames('green')}>Confirm</button>
+                {guest.status != 'Tentative' && <button data-guest-id={guest.id} onClick={handleTentativeGuest} className={classNames('yellow')}>Tentative</button>}
+                <button data-guest-id={guest.id} onClick={handleDeclineGuest} className={classNames('red')}>Decline</button>
+              </>
+            )}
+          </td>
+        </tr>
+      )}
+    />
+   );
 }