63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState, useEffect, Suspense } from 'react';
|
|
import { Tree, TreeNode } from 'primereact/tree';
|
|
import { PrimeIcons } from 'primereact/api';
|
|
import { debug } from 'console';
|
|
import { Group } from '@/app/lib/definitions';
|
|
|
|
export default function AffinityGroupsTree() {
|
|
const [nodes, setNodes] = useState([]);
|
|
|
|
const groupToNode = (group: Group): TreeNode => {
|
|
return({
|
|
key: group.id,
|
|
label: `${group.name} (${group.guest_count})`,
|
|
icon: group.icon,
|
|
children: group.children.map((child) => groupToNode(child)),
|
|
className: "px-4",
|
|
})
|
|
}
|
|
|
|
const parseNode = (record: any, included: any[]): Group => {
|
|
if (!record.attributes) {
|
|
record = included.find((a) => a.id === record.id);
|
|
}
|
|
|
|
const children: Group[] = (record?.relationships?.children?.data || []).map((child: any) => {
|
|
return (parseNode(child, included));
|
|
});
|
|
|
|
const children_guest_count: number = children.reduce((acc: number, child: Group) => acc + child.guest_count, 0);
|
|
|
|
return ({
|
|
id: record.id,
|
|
name: record.attributes.name,
|
|
guest_count: record.attributes.guest_count + children_guest_count,
|
|
icon: record.attributes.icon,
|
|
children: children,
|
|
})
|
|
}
|
|
|
|
|
|
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 (groupToNode(parseNode(record, data.included)));
|
|
}))
|
|
});
|
|
});
|
|
|
|
return (
|
|
<div className="card flex justify-content-center">
|
|
<Suspense>
|
|
<Tree value={nodes} dragdropScope="affinity-groups" onDragDrop={(e) => setNodes(e.value)} className="w-full md:w-30rem" />
|
|
</Suspense>
|
|
</div>
|
|
)
|
|
} |