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,29 +33,11 @@ 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
-            </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}
@@ -66,9 +49,7 @@ export default function ArrangementsTable ({onArrangementSelected}: {onArrangeme
                 <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,30 +51,11 @@ 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
-          </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}
@@ -110,9 +92,7 @@ export default function guestsTable() {
             )}
           </td>
         </tr>
-          ))}
+      )}
-        </tbody>
+    />
-      </table>
-    </div>
    );
 }