From 1838889a0c284f57ac7048a88d4b55629c73d13b Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 10 Nov 2024 20:52:48 +0100
Subject: [PATCH 1/3] Extract a common TableOfContents component

---
 app/ui/arrangements/arrangements-table.tsx | 57 ++++++++--------------
 app/ui/components/table-of-contents.tsx    | 26 ++++++++++
 2 files changed, 45 insertions(+), 38 deletions(-)
 create mode 100644 app/ui/components/table-of-contents.tsx

diff --git a/app/ui/arrangements/arrangements-table.tsx b/app/ui/arrangements/arrangements-table.tsx
index 5f2f164..66e41d4 100644
--- a/app/ui/arrangements/arrangements-table.tsx
+++ b/app/ui/arrangements/arrangements-table.tsx
@@ -5,6 +5,7 @@
 import React, { useState } from "react"
 import { TableArrangement } from '@/app/lib/definitions';
 import { classNames } from "../components/button";
+import TableOfContents from "../components/table-of-contents";
 
 export default function ArrangementsTable ({onArrangementSelected}: {onArrangementSelected: (arrangementId: string) => void}) {
     const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
@@ -32,43 +33,23 @@ export default function ArrangementsTable ({onArrangementSelected}: {onArrangeme
     arrangements.length === 0 && loadArrangements();
 
     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">
-            Simulations
-            <p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
-              There are {arrangements.length} simmulations 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">
-                Discomfort
-              </th>              
-              <th scope="col" className="px-6 py-3">
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {arrangements.map((arrangement) => (
-              <tr key={arrangement.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">
-                  {arrangement.name}
-                </th>
-                <td className="px-6 py-4">
-                  {arrangement.discomfort}
-                </td>
-                <td>
-                    <button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
+      <TableOfContents
+        headers={['Name', 'Discomfort', 'Actions']}
+        caption='Simulations'
+        elements={arrangements}
+        rowRender={(arrangement) => (
+          <tr key={arrangement.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">
+              {arrangement.name}
+            </th>
+            <td className="px-6 py-4">
+              {arrangement.discomfort}
+            </td>
+            <td>
+                <button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
+            </td>
+          </tr>
+        )}
+      />
     );
 }
\ No newline at end of file
diff --git a/app/ui/components/table-of-contents.tsx b/app/ui/components/table-of-contents.tsx
new file mode 100644
index 0000000..209af87
--- /dev/null
+++ b/app/ui/components/table-of-contents.tsx
@@ -0,0 +1,26 @@
+export default function TableOfContents<Type>({ headers, caption, elements, rowRender }: { headers: string[], caption: string, elements: Type[], rowRender: (element: Type) => JSX.Element }) {
+    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">
+                    {caption}
+                    <p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
+                        There are {elements.length} elements 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>
+                        {headers.map((header) => (
+                            <th scope="col" className="px-6 py-3">
+                                {header}
+                            </th>
+                        ))}
+                    </tr>
+                </thead>
+                <tbody>
+                    {elements.map((element) => rowRender(element))}
+                </tbody>
+            </table>
+        </div>
+    )
+}

From 79b4e9ac82938b8f211137d74cd5ea9a2059c112 Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 10 Nov 2024 19:53:34 +0000
Subject: [PATCH 2/3] Add copyright notice

---
 app/ui/components/table-of-contents.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/ui/components/table-of-contents.tsx b/app/ui/components/table-of-contents.tsx
index 209af87..70c39e2 100644
--- a/app/ui/components/table-of-contents.tsx
+++ b/app/ui/components/table-of-contents.tsx
@@ -1,3 +1,5 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
 export default function TableOfContents<Type>({ headers, caption, elements, rowRender }: { headers: string[], caption: string, elements: Type[], rowRender: (element: Type) => JSX.Element }) {
     return (
         <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">

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 3/3] 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>
+      )}
+    />
+   );
 }