@carlonicora/nextjs-jsonapi 1.0.3 → 1.0.5

package/src/features/user/hooks/useUserTableStructure.tsx

@@ -0,0 +1,115 @@
+"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<UserInterface, UserFields> = (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<UserInterface> = {
+        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<Record<UserFields, () => any>> = {
+    [UserFields.userId]: () =>
+      cellId({
+        name: "userId",
+        checkedIds: params.checkedIds,
+        toggleId: params.toggleId,
+      }),
+    [UserFields.name]: () => ({
+      id: "name",
+      accessorKey: "name",
+      header: t(`foundations.user.fields.name.label`),
+      cell: ({ row }: { row: Row<TableContent<UserInterface>> }) => {
+        const user = row.original.jsonApiData as UserInterface;
+        return (
+          <Link
+            href={generateUrl({ page: Modules.User, id: user.id })}
+            className={cn(
+              `flex items-center justify-start gap-2`,
+              user.isDeleted || !user.isActivated ? "text-muted-foreground italic" : "",
+            )}
+          >
+            <UserAvatar user={user} />
+            {user.name}
+            {user.isDeleted ? ` - ${t("foundations.user.errors.deleted")}` : ""}
+            {!user.isActivated ? ` - ${t("foundations.user.errors.inactive")}` : ""}
+          </Link>
+        );
+      },
+      enableSorting: false,
+      enableHiding: false,
+    }),
+    [UserFields.email]: () => ({
+      id: "email",
+      accessorKey: "email",
+      header: t(`generic.fields.email.label`),
+      cell: ({ row }: { row: Row<TableContent<UserInterface>> }) => <>{row.getValue("email")}</>,
+      enableSorting: false,
+      enableHiding: false,
+    }),
+    [UserFields.relevance]: () => ({
+      id: "relevance",
+      accessorKey: "relevance",
+      header: t(`generic.relevance`),
+      cell: ({ row }: { row: TableContent<UserInterface> }) => {
+        const user: UserInterface = row.original.jsonApiData;
+
+        if (!user.relevance) return <></>;
+
+        const response = `${user.relevance.toFixed(0)}%`;
+
+        return (
+          <div className="relative flex h-5 w-20 items-center justify-center overflow-hidden rounded border text-center">
+            <div
+              className={`bg-accent absolute top-0 left-0 h-full opacity-${Math.round(user.relevance)}`}
+              style={{ width: `${user.relevance}%` }}
+            ></div>
+            <span
+              className={`relative text-xs ${user.relevance < 40 ? "text-muted-foreground" : "text-accent-foreground font-semibold"}`}
+            >
+              {response}
+            </span>
+          </div>
+        );
+      },
+      enableSorting: false,
+      enableHiding: false,
+    }),
+    [UserFields.createdAt]: () =>
+      cellDate({
+        name: "createdAt",
+        title: t(`generic.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<UserInterface>
+    >[];
+  }, [params.fields, fieldColumnMap, t, generateUrl]);
+
+  // Memoize the return object to prevent infinite re-renders
+  return useMemo(() => ({ data: tableData, columns: columns }), [tableData, columns]);
+};

package/src/features/user/index.ts

@@ -0,0 +1,3 @@
+export * from "./author.module";
+// Note: contexts are exported from @carlonicora/nextjs-jsonapi/contexts to avoid "use client" issues
+export * from "./data";

package/src/features/user/user.module.ts

@@ -0,0 +1,21 @@
+import { User } from "./data/user";
+import { createJsonApiInclusion } from "../../core";
+import { ModuleFactory } from "../../permissions";
+
+export const UserModule = (factory: ModuleFactory) =>
+  factory({
+    pageUrl: "/users",
+    name: "users",
+    model: User,
+    moduleId: "04cfc677-0fd2-4f5e-adf4-2483a00c0277",
+    inclusions: {
+      lists: {
+        fields: [
+          createJsonApiInclusion("users", [`name`, `email`, `avatar`, `title`]),
+          createJsonApiInclusion("usertopics", [`level`]),
+          createJsonApiInclusion("userexpertises", [`level`]),
+          createJsonApiInclusion("topics", [`name`]),
+        ],
+      },
+    },
+  });

package/src/hooks/TableGeneratorRegistry.ts

@@ -0,0 +1,53 @@
+"use client";
+
+import { UseTableStructureHook, UseTableStructureHookParams, UseTableStructureHookReturn } from "./types";
+
+type TableGeneratorHook = UseTableStructureHook<any, any>;
+
+export class TableGeneratorRegistry {
+  private static instance: TableGeneratorRegistry;
+  private registry = new Map<string, TableGeneratorHook>();
+
+  private constructor() {}
+
+  public static getInstance(): TableGeneratorRegistry {
+    if (!TableGeneratorRegistry.instance) {
+      TableGeneratorRegistry.instance = new TableGeneratorRegistry();
+    }
+    return TableGeneratorRegistry.instance;
+  }
+
+  public register<T, U>(type: string, hook: UseTableStructureHook<T, U>): void {
+    if (!this.registry.has(type)) this.registry.set(type, hook as TableGeneratorHook);
+  }
+
+  public get<T, U>(type: string, params: UseTableStructureHookParams<T, U>): UseTableStructureHookReturn<T> {
+    const hook = this.registry.get(type);
+    if (!hook) {
+      throw new Error(
+        `Table generator for type "${type}" is not registered. Available types: ${Array.from(this.registry.keys()).join(
+          ", ",
+        )}`,
+      );
+    }
+    return hook(params);
+  }
+
+  public isRegistered(type: string): boolean {
+    return this.registry.has(type);
+  }
+
+  public getRegisteredTypes(): string[] {
+    return Array.from(this.registry.keys());
+  }
+
+  public unregister(type: string): boolean {
+    return this.registry.delete(type);
+  }
+
+  public clear(): void {
+    this.registry.clear();
+  }
+}
+
+export const tableGeneratorRegistry = TableGeneratorRegistry.getInstance();

package/src/hooks/index.ts

@@ -0,0 +1,37 @@
+export { TableGeneratorRegistry, tableGeneratorRegistry } from "./TableGeneratorRegistry";
+export type {
+  TableContent,
+  TableStructureGeneratorInterface,
+  UseTableStructureHook,
+  UseTableStructureHookParams,
+  UseTableStructureHookReturn,
+} from "./types";
+export { useUrlRewriter } from "./url.rewriter";
+export { useDataListRetriever, type DataListRetriever } from "./useDataListRetriever";
+export { useDebounce } from "./useDebounce";
+export { usePageUrlGenerator } from "./usePageUrlGenerator";
+export { registerTableGenerator, useTableGenerator } from "./useTableGenerator";
+
+// I18n hooks and configuration
+export {
+  configureI18n,
+  getI18nLink,
+  useI18nDateFnsLocale,
+  useI18nLocale,
+  useI18nRouter,
+  useI18nTranslations,
+} from "../i18n";
+export type {
+  I18nConfig,
+  I18nRouter,
+  LinkComponent,
+  UseDateFnsLocaleHook,
+  UseLocaleHook,
+  UseRouterHook,
+  UseTranslationsHook,
+} from "../i18n";
+export * from "./useCustomD3Graph";
+export * from "./useNotificationSync";
+export * from "./usePageTracker";
+export * from "./usePushNotifications";
+export * from "./useSocket";

package/src/hooks/types.ts

@@ -0,0 +1,35 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { PageUrl } from "../permissions/types";
+import { DataListRetriever } from "./useDataListRetriever";
+
+export type TableContent<T> = {
+  jsonApiData: T;
+  [key: string]: any;
+};
+
+export interface TableStructureGeneratorInterface<T, U> {
+  generateTableStructure: (params: {
+    t: (key: string) => string;
+    generateUrl: (params: { page: string | PageUrl | string; id?: string }) => string;
+    data: T[];
+    fields: Array<U>;
+    checkedIds?: string[];
+    toggleId?: (id: string) => void;
+  }) => { data: TableContent<T>[]; columns: ColumnDef<TableContent<T>>[] };
+}
+
+export type UseTableStructureHookParams<T, U> = {
+  data: T[];
+  fields: Array<U>;
+  checkedIds?: string[];
+  toggleId?: (id: string) => void;
+  dataRetriever?: DataListRetriever<T>;
+  context?: Record<string, any>;
+};
+
+export type UseTableStructureHookReturn<T> = {
+  data: TableContent<T>[];
+  columns: ColumnDef<TableContent<T>>[];
+};
+
+export type UseTableStructureHook<T, U> = (params: UseTableStructureHookParams<T, U>) => UseTableStructureHookReturn<T>;

package/src/hooks/url.rewriter.ts

@@ -0,0 +1,22 @@
+"use client";
+
+import { useLocale } from "next-intl";
+import { useCallback } from "react";
+import { ModuleWithPermissions } from "../permissions";
+import { usePageUrlGenerator } from "./usePageUrlGenerator";
+
+export function useUrlRewriter() {
+  const locale = useLocale();
+  const generateUrl = usePageUrlGenerator();
+
+  return useCallback(
+    (params: { page: ModuleWithPermissions | string; id?: string; childPage?: string }): void => {
+      window.history.replaceState(
+        null,
+        "",
+        generateUrl({ page: params.page, id: params.id, childPage: params.childPage, language: locale }),
+      );
+    },
+    [locale, generateUrl],
+  );
+}