"use client"; import { ColumnDef, Row } from "@tanstack/react-table"; import { useTranslations } from "next-intl"; import { useMemo } from "react"; import { cellDate, cellId, UserAvatar } from "../../../components"; import { Modules } from "../../../core"; import { TableContent, UseTableStructureHook } from "../../../hooks/types"; import { usePageUrlGenerator } from "../../../hooks/usePageUrlGenerator"; import { Link } from "../../../shadcnui"; import { cn } from "../../../utils"; import { UserFields, UserInterface } from "../data"; export const useUserTableStructure: UseTableStructureHook = (params) => { const t = useTranslations(); const generateUrl = usePageUrlGenerator(); // Memoize tableData to prevent infinite re-renders const tableData = useMemo(() => { return params.data.map((user: UserInterface) => { const entry: TableContent = { jsonApiData: user, }; entry[UserFields.userId] = user.id; params.fields.forEach((field) => { entry[field] = user[field as keyof UserInterface]; }); return entry; }); }, [params.data, params.fields]); const fieldColumnMap: Partial any>> = { [UserFields.userId]: () => cellId({ name: "userId", checkedIds: params.checkedIds, toggleId: params.toggleId, }), [UserFields.name]: () => ({ id: "name", accessorKey: "name", header: t(`user.fields.name.label`), cell: ({ row }: { row: Row> }) => { const user = row.original.jsonApiData as UserInterface; return ( {user.name} {user.isDeleted ? ` - ${t("user.errors.deleted")}` : ""} {!user.isActivated ? ` - ${t("user.errors.inactive")}` : ""} ); }, enableSorting: false, enableHiding: false, }), [UserFields.email]: () => ({ id: "email", accessorKey: "email", header: t(`common.fields.email.label`), cell: ({ row }: { row: Row> }) => <>{row.getValue("email")}, enableSorting: false, enableHiding: false, }), // Only meaningful on a platform-wide list (PlatformUsersList), where users // from every company sit in one table; a company-scoped list would repeat // the same value on every row. [UserFields.company]: () => ({ id: "company", accessorKey: "company", header: t(`entities.companies`, { count: 1 }), cell: ({ row }: { row: Row> }) => { const company = (row.original.jsonApiData as UserInterface).company; if (!company) return ; return {company.name}; }, enableSorting: false, enableHiding: false, }), [UserFields.relevance]: () => ({ id: "relevance", accessorKey: "relevance", header: t(`common.relevance`), cell: ({ row }: { row: TableContent }) => { const user: UserInterface = row.original.jsonApiData; if (!user.relevance) return <>; const response = `${user.relevance.toFixed(0)}%`; return (
{response}
); }, enableSorting: false, enableHiding: false, }), [UserFields.createdAt]: () => cellDate({ name: "createdAt", title: t(`common.date.create`), }), }; // Memoize columns to prevent infinite re-renders const columns = useMemo(() => { return params.fields.map((field) => fieldColumnMap[field]?.()).filter((col) => col !== undefined) as ColumnDef< TableContent >[]; }, [params.fields, fieldColumnMap, t, generateUrl]); // Memoize the return object to prevent infinite re-renders return useMemo(() => ({ data: tableData, columns: columns }), [tableData, columns]); };