Merge pull request 'Extract a common TableOfContents component' (#91) from extract-table-component into main

Reviewed-on: #91

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">
+      <TableOfContents
-        <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+        headers={['Name', 'Discomfort', 'Actions']}
-          <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='Simulations'
-            Simulations
+        elements={arrangements}
-            <p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
+        rowRender={(arrangement) => (
-              There are {arrangements.length} simmulations in the list
+          <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">
-            </p>
+            <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-          </caption>
+              {arrangement.name}
-          <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+            </th>
-            <tr>
+            <td className="px-6 py-4">
-              <th scope="col" className="px-6 py-3">
+              {arrangement.discomfort}
-                Name
+            </td>
-              </th>
+            <td>
-              <th scope="col" className="px-6 py-3">
+                <button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
-                Discomfort
+            </td>
-              </th>              
+          </tr>
-              <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>
     );
 }

app/ui/components/table-of-contents.tsx

@@ -0,0 +1,28 @@
+/* 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">
+            <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>
+    )
+}

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">
+    <TableOfContents
-      <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+      headers={['Name', 'Group', 'Status', 'Actions']}
-        <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='Guests'
-          Guests
+      elements={guests}
-          <p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
+      rowRender={(guest) => (
-            There are {guests.length} guests in the list
+        <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">
-          </p>
+          <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-        </caption>
+            {guest.name}
-        <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+          </th>
-          <tr>
+          <td className="px-6 py-4">
-            <th scope="col" className="px-6 py-3">
+            {guest.group_name}
-              Name
+          </td>
-            </th>
+          <td className="px-6 py-4">
-            <th scope="col" className="px-6 py-3">
+            <span className="flex items-center text-sm dark:text-white me-3">
-              Group
+              <span className={clsx(
-            </th>
+                'flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0',
-            <th scope="col" className="px-6 py-3">
+                {
-              Status
+                  'bg-gray-400': guest.status === 'Considered',
-            </th>
+                  'bg-blue-400': guest.status === 'Invited',
-            <th>Actions</th>
+                  'bg-green-600': guest.status === 'Confirmed',
-          </tr>
+                  'bg-red-400': guest.status === 'Declined',
-        </thead>
+                  'bg-yellow-400': guest.status === 'Tentative',
-        <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">
+              </span>
-              <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+              {guest.status}
-                {guest.name}
+            </span>
-              </th>
+          </td>
-              <td className="px-6 py-4">
+          <td>
-                {guest.group_name}
+            {guest.status === 'Considered' && (<button data-guest-id={guest.id} onClick={handleInviteGuest} className={classNames('blue')}>
-              </td>
+              Invite
-              <td className="px-6 py-4">
+            </button>)}
-                <span className="flex items-center text-sm dark:text-white me-3">
+            {(guest.status === 'Invited' || guest.status === 'Tentative') && (
-                  <span className={clsx(
+              <>
-                    'flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0',
+                <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>}
-                      'bg-gray-400': guest.status === 'Considered',
+                <button data-guest-id={guest.id} onClick={handleDeclineGuest} className={classNames('red')}>Decline</button>
-                      'bg-blue-400': guest.status === 'Invited',
+              </>
-                      'bg-green-600': guest.status === 'Confirmed',
+            )}
-                      'bg-red-400': guest.status === 'Declined',
+          </td>
-                      'bg-yellow-400': guest.status === 'Tentative',
+        </tr>
-                    }
+      )}
-                  )}>
+    />
-                  </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>
-  );
 }