app/ui/guests/affinity-groups-tree.tsx

@@ -1,89 +1,49 @@
 'use client'
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, Suspense } from 'react';
 import { Tree } from 'primereact/tree';
 import { PrimeIcons } from 'primereact/api';
+import { debug } from 'console';
 
 export default function AffinityGroupsTree() {
-    const [nodes, setNodes] = useState(
-        [
-            {
-                key: 1,
-                label: "Lilly's guests",
-                icon: PrimeIcons.HEART,
-                draggable: false,
-                children: [
-                    {
-                        key: 11,
-                        label: "Family",
-                        icon: PrimeIcons.HOME,
-                        leaf: true,
-                        className: "px-4",
-                    },
-                    {
-                        key: 12,
-                        label: "Country club",
-                        icon: PrimeIcons.SUN,
-                        className: "px-4",
+    const [nodes, setNodes] = useState([]);
+    const parseNode = (record: any, included: any[]) => {
+        if (!record.attributes) {
+            record = included.find((a) => a.id === record.id);
+        }
+        
+        const children = (record?.relationships?.children?.data || []).map((child: any) => {
+            return (parseNode(child, included));
+        });
 
-                    },
-                    {
-                        key: 13,
-                        label: "Work",
-                        icon: PrimeIcons.DESKTOP,
-                        className: "px-4",
-                    },
-                ]
-            },
-            {
-                key: 2,
-                label: "Dave's guests",
-                icon: PrimeIcons.HEART_FILL,
-                draggable: false,
-                children: [
-                    {
-                        key: 21,
-                        label: "Family",
-                        icon: PrimeIcons.HOME,
-                        leaf: true,
-                        className: "px-4",
-                    },
-                    {
-                        key: 22,
-                        label: "College friends",
-                        icon: PrimeIcons.GRADUATION_CAP,
-                        leaf: true,
-                        className: "px-4",
-                    },
-                ]
-            },
-            {
-                key: 3,
-                label: "Common guests",
-                icon: PrimeIcons.USERS,
-                draggable: false,
-                children: [
-                    {
-                        key: 31,
-                        label: "Common workplace",
-                        icon: PrimeIcons.BRIEFCASE,
-                        leaf: true,
-                        className: "px-4",
-                    },
-                    {
-                        key: 32,
-                        label: "Lifetime friends",
-                        icon: PrimeIcons.STAR,
-                        leaf: true,
-                        className: "px-4",
-                    },
-                ]
-            }
-        ]);
+        return ({
+            key: record.id,
+            label: record.attributes.name,
+            icon: record.attributes.icon,
+            children: children,
+            className: "px-4",
+        })
+    }
+
+
+    useEffect(() => {
+        if (nodes.length > 0) {
+            return;
+        }
+        fetch("http://localhost:3001/groups.json")
+            .then((response) => response.json())
+            .then((data) => {
+                setNodes(data.data.map((record: any) => {
+                    return (parseNode(record, data.included));
+                }))
+            });
+    });
 
     return (
         <div className="card flex justify-content-center">
-            <Tree value={nodes} dragdropScope="affinity-groups" onDragDrop={(e) => setNodes(e.value)} className="w-full md:w-30rem" />
+            <Suspense>
+                <Tree value={nodes} dragdropScope="affinity-groups" onDragDrop={(e) => setNodes(e.value)} className="w-full md:w-30rem" />
+            </Suspense>
         </div>
     )
 }

app/ui/guests/table.tsx

@@ -42,7 +42,7 @@ export default function guestsTable() {
           </tr>
         </thead>
         <tbody>
-          <Suspense fallback="<tr><td colspan=3> Loading data</td></tr>">
+          <Suspense>
             {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">