@carlonicora/nextjs-jsonapi 1.0.4 → 1.0.6

package/src/features/user/components/lists/RelevantUsersList.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { ContentListTable } from "../../../../components";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever } from "../../../../hooks";
+import { UserFields, UserInterface, UserService } from "../../data";
+
+type RelevantUsersListProps = {
+  id: string;
+};
+
+export function RelevantUsersList({ id }: RelevantUsersListProps) {
+  const t = useTranslations();
+
+  const data: DataListRetriever<UserInterface> = useDataListRetriever({
+    module: Modules.User,
+    retriever: (params) => UserService.findRelevant(params),
+    retrieverParams: { id: id },
+  }) as DataListRetriever<UserInterface>;
+
+  return (
+    <ContentListTable
+      data={data}
+      fields={[UserFields.name, UserFields.email, UserFields.relevance]}
+      tableGeneratorType={Modules.User}
+      title={t(`generic.relevant_users`)}
+    />
+  );
+}

package/src/features/user/components/lists/RoleUsersList.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { ContentListTable } from "../../../../components";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever } from "../../../../hooks";
+import { RoleInterface } from "../../../role";
+import { UserFields, UserInterface, UserService } from "../../data";
+
+type RoleUsersListProps = {
+  role: RoleInterface;
+};
+
+export function RoleUsersList({ role }: RoleUsersListProps) {
+  const t = useTranslations();
+
+  const data: DataListRetriever<UserInterface> = useDataListRetriever({
+    retriever: (params) => UserService.findAllUsersByRole(params),
+    retrieverParams: { roleId: role.id },
+    module: Modules.User,
+  }) as DataListRetriever<UserInterface>;
+
+  return (
+    <ContentListTable
+      data={data}
+      fields={[UserFields.name, UserFields.email]}
+      tableGeneratorType={Modules.User}
+      title={t(`types.users`, { count: 2 })}
+    />
+  );
+}

package/src/features/user/components/lists/UserListInAdd.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import React from "react";
+import { DataListRetriever } from "../../../../hooks";
+import { CommandItem } from "../../../../shadcnui";
+import { UserInterface } from "../../data";
+import { UserAvatar } from "../widgets";
+
+type UserListInAddProps = {
+  data: DataListRetriever<UserInterface>;
+  existingUsers: UserInterface[] | null;
+  setSelectedUser: (user: UserInterface) => void;
+  setLevelOpen?: (open: boolean) => void;
+};
+
+export function UserListInAdd({ data, existingUsers, setSelectedUser, setLevelOpen }: UserListInAddProps) {
+  return (
+    <>
+      {data.data !== undefined &&
+        (data.data as UserInterface[])
+          .filter(
+            (user: UserInterface) =>
+              existingUsers && !existingUsers.find((existingUser: UserInterface) => existingUser.id === user.id),
+          )
+          .map((user: UserInterface) => {
+            return (
+              <React.Fragment key={user.id}>
+                <CommandItem
+                  className="cursor-pointer"
+                  key={user.id}
+                  onClick={(e) => {
+                    setSelectedUser(user);
+                    setLevelOpen?.(true);
+                  }}
+                  onSelect={(e) => {
+                    setSelectedUser(user);
+                    setLevelOpen?.(true);
+                  }}
+                >
+                  <div className="flex w-full flex-row items-center justify-between px-4 py-1">
+                    <UserAvatar user={user} />
+                    <div className="ml-5 flex w-full flex-col">
+                      <div className="text-sm font-medium">{user.name}</div>
+                      <div className="text-xs font-normal">{user.email}</div>
+                    </div>
+                  </div>
+                </CommandItem>
+              </React.Fragment>
+            );
+          })}
+    </>
+  );
+}

package/src/features/user/components/lists/UsersList.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { ReactElement } from "react";
+import { ContentListTable } from "../../../../components";
+import { Modules } from "../../../../core";
+import { DataListRetriever } from "../../../../hooks";
+import { UserFields, UserInterface } from "../../data";
+
+type UsersListProps = {
+  data: DataListRetriever<UserInterface>;
+  optionComponents?: ReactElement<any>[];
+  removeFunction?: (user: UserInterface) => Promise<void>;
+  hideOptions?: boolean;
+  showRelevance?: boolean;
+  restrictToJoinRequests?: boolean;
+};
+
+export function UsersList({ data, optionComponents, removeFunction, hideOptions, showRelevance }: UsersListProps) {
+  const t = useTranslations();
+
+  return (
+    <ContentListTable
+      data={data}
+      fields={[UserFields.name, UserFields.email]}
+      tableGeneratorType={Modules.User}
+      title={t(`types.users`, { count: 2 })}
+    />
+  );
+}

package/src/features/user/components/lists/UsersListByContentIds.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { ContentListTable } from "../../../../components";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever } from "../../../../hooks";
+import { UserFields, UserInterface, UserService } from "../../data";
+
+type UsersListByContentIdsProps = {
+  contentIds: string[];
+};
+
+export function UsersListByContentIds({ contentIds }: UsersListByContentIdsProps) {
+  const t = useTranslations();
+
+  const data: DataListRetriever<UserInterface> = useDataListRetriever({
+    module: Modules.User,
+    retriever: (params) => UserService.findManyByContentIds(params),
+    retrieverParams: { contentIds: contentIds },
+  });
+
+  return (
+    <ContentListTable
+      data={data}
+      fields={[UserFields.name, UserFields.email]}
+      tableGeneratorType={Modules.User}
+      title={t(`generic.relevant_users`)}
+    />
+  );
+}

package/src/features/user/components/lists/index.ts

@@ -1 +1,8 @@
+export * from "./AdminUsersList";
+export * from "./CompanyUsersList";
 export * from "./ContributorsList";
+export * from "./RelevantUsersList";
+export * from "./RoleUsersList";
+export * from "./UserListInAdd";
+export * from "./UsersList";
+export * from "./UsersListByContentIds";

package/src/features/user/components/widgets/UserAvatarList.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { Modules } from "../../../../core";
+import { usePageUrlGenerator } from "../../../../hooks";
+import { Link } from "../../../../shadcnui";
+import { UserInterface } from "../../data";
+import { UserAvatar } from "./UserAvatar";
+
+type UserAvatarListProps = {
+  users: UserInterface[];
+};
+
+export function UserAvatarList({ users }: UserAvatarListProps) {
+  const generateUrl = usePageUrlGenerator();
+
+  return (
+    <div className="flex flex-row items-center">
+      <div className="flex flex-row-reverse justify-end -space-x-1 space-x-reverse">
+        {users.map((user: UserInterface) => (
+          <Link
+            key={user.id}
+            href={generateUrl({ page: Modules.User, id: user.id })}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <UserAvatar user={user} className="h-5 w-5" />
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/features/user/components/widgets/UserSearchPopover.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { RefreshCwIcon, SearchIcon, XIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { ReactNode, useEffect, useState } from "react";
+import {
+  Command,
+  CommandItem,
+  CommandList,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../../../shadcnui";
+import { useUserSearch } from "../../hooks";
+import { UserAvatar } from "./UserAvatar";
+
+type UserSearchPopoverProps = {
+  children: ReactNode;
+  onSelect: (userId: string) => void;
+  align?: "start" | "center" | "end";
+  className?: string;
+};
+
+export const UserSearchPopover = ({ children, onSelect, align = "start", className }: UserSearchPopoverProps) => {
+  const t = useTranslations();
+  const [isOpen, setIsOpen] = useState(false);
+  const { users, searchQuery, setSearchQuery, isLoading, loadUsers, clearSearch } = useUserSearch();
+
+  useEffect(() => {
+    if (isOpen && users.length === 0 && !searchQuery) {
+      loadUsers("");
+    }
+  }, [isOpen, users.length, searchQuery, loadUsers]);
+
+  const handleSelectUser = (userId: string) => {
+    onSelect(userId);
+    setIsOpen(false);
+    clearSearch();
+  };
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
+      <PopoverContent align={align} onClick={(e) => e.stopPropagation()} className={className ?? "w-80"}>
+        <Command shouldFilter={false}>
+          <div className="relative mb-2 w-full">
+            <SearchIcon className="text-muted-foreground absolute top-2.5 left-2.5 h-4 w-4" />
+            <Input
+              placeholder={t(`generic.search.placeholder`, { type: t(`types.users`, { count: 1 }) })}
+              type="text"
+              className="w-full pr-8 pl-8"
+              onChange={(e) => setSearchQuery(e.target.value)}
+              value={searchQuery}
+              onClick={(e) => e.stopPropagation()}
+            />
+            {isLoading ? (
+              <RefreshCwIcon className="text-muted-foreground absolute top-2.5 right-2.5 h-4 w-4 animate-spin" />
+            ) : searchQuery ? (
+              <XIcon
+                className="text-muted-foreground hover:text-foreground absolute top-2.5 right-2.5 h-4 w-4 cursor-pointer"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  clearSearch();
+                }}
+              />
+            ) : null}
+          </div>
+          <CommandList>
+            {users.length > 0 ? (
+              users.map((user) => (
+                <CommandItem key={user.id} className="cursor-pointer" onSelect={() => handleSelectUser(user.id)}>
+                  <UserAvatar user={user} className="mr-2 h-4 w-4" showLink={false} />
+                  <span>{user.name}</span>
+                </CommandItem>
+              ))
+            ) : (
+              <div className="text-muted-foreground py-6 text-center text-sm">
+                {isLoading
+                  ? t(`generic.loading`)
+                  : t(`generic.search.no_results`, { type: t(`types.users`, { count: 1 }) })}
+              </div>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/features/user/contexts/UserContext.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { createContext, ReactNode, useContext, useState } from "react";
+import { SharedProvider } from "../../../contexts";
+import { JsonApiHydratedDataInterface, Modules, rehydrate } from "../../../core";
+import { usePageUrlGenerator } from "../../../hooks";
+import { BreadcrumbItemData } from "../../../interfaces";
+import { Action } from "../../../permissions";
+import { UserDeleter, UserEditor, UserReactivator, UserResentInvitationEmail } from "../components/forms";
+import { UserInterface } from "../data";
+import { useCurrentUserContext } from "./CurrentUserContext";
+
+interface UserContextType {
+  user: UserInterface | undefined;
+  setUser: (value: UserInterface | undefined) => void;
+}
+
+const UserContext = createContext<UserContextType | undefined>(undefined);
+
+type UserProviderProps = {
+  children: ReactNode;
+  dehydratedUser?: JsonApiHydratedDataInterface;
+};
+
+export const UserProvider = ({ children, dehydratedUser }: UserProviderProps) => {
+  const generateUrl = usePageUrlGenerator();
+  const { hasPermissionToModule } = useCurrentUserContext<UserInterface>();
+  const t = useTranslations();
+
+  const [user, setUser] = useState<UserInterface | undefined>(
+    dehydratedUser ? rehydrate<UserInterface>(Modules.User, dehydratedUser) : undefined,
+  );
+
+  const breadcrumb = () => {
+    const response: BreadcrumbItemData[] = [];
+
+    if (hasPermissionToModule({ module: Modules.User, action: Action.Update })) {
+      response.push({
+        name: t(`generic.settings`),
+        href: generateUrl({ page: `/settings` }),
+      });
+
+      response.push({
+        name: t(`types.users`, { count: 2 }),
+        href: generateUrl({ page: `/settings`, id: Modules.User.pageUrl }),
+      });
+    }
+
+    if (user)
+      response.push({
+        name: `${user.name}${user.isDeleted ? ` (${t(`foundations.user.deleted`)})` : ""}`,
+        href: generateUrl({ page: Modules.User, id: user.id }),
+      });
+
+    return response;
+  };
+
+  const title = () => {
+    const response: any = {
+      type: t(`types.users`, { count: user ? 1 : 2 }),
+    };
+
+    const functions: ReactNode[] = [];
+
+    if (user) {
+      response.element = `${user.name}${user.isDeleted ? ` (${t(`foundations.user.deleted`)})` : ""}`;
+
+      if (user.isDeleted) {
+        functions.push(<UserReactivator key={`UserReactivator`} user={user} propagateChanges={setUser} />);
+      } else {
+        if (!user.isActivated)
+          functions.push(<UserResentInvitationEmail key={`UserResentInvitationEmail`} user={user} />);
+
+        functions.push(<UserDeleter key={`UserDeleter`} user={user} />);
+      }
+
+      functions.push(<UserEditor key={`UserEditor`} user={user} propagateChanges={setUser} />);
+    }
+
+    if (functions.length > 0) response.functions = functions;
+
+    return response;
+  };
+
+  return (
+    <SharedProvider value={{ breadcrumbs: breadcrumb(), title: title() }}>
+      <UserContext.Provider
+        value={{
+          user: user,
+          setUser: setUser,
+        }}
+      >
+        {children}
+      </UserContext.Provider>
+    </SharedProvider>
+  );
+};
+
+export const useUserContext = (): UserContextType => {
+  const context = useContext(UserContext);
+  if (context === undefined) {
+    throw new Error("useUserContext must be used within a UserProvider");
+  }
+  return context;
+};

package/src/features/user/contexts/index.ts

@@ -1 +1,2 @@
 export * from "./CurrentUserContext";
+export * from "./UserContext";

package/src/features/user/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from "./useUserSearch";
+export * from "./useUserTableStructure";

package/src/features/user/hooks/useUserSearch.ts

@@ -0,0 +1,53 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useDebounce } from "../../../hooks/useDebounce";
+import { UserInterface, UserService } from "../data";
+
+export const useUserSearch = () => {
+  const [users, setUsers] = useState<UserInterface[]>([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const searchQueryRef = useRef("");
+
+  const loadUsers = useCallback(
+    async (search: string) => {
+      try {
+        if (search === searchQueryRef.current && users.length > 0) return;
+        setIsLoading(true);
+        searchQueryRef.current = search;
+        const fetchedUsers = await UserService.findMany({ search, fetchAll: true });
+        setUsers(fetchedUsers);
+      } catch (error) {
+        console.error("Failed to load users:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [users.length],
+  );
+
+  const debouncedLoadUsers = useDebounce(loadUsers, 500);
+
+  useEffect(() => {
+    if (searchQuery !== searchQueryRef.current) {
+      setIsLoading(true);
+      debouncedLoadUsers(searchQuery);
+    }
+  }, [searchQuery, debouncedLoadUsers]);
+
+  const clearSearch = () => {
+    setSearchQuery("");
+    searchQueryRef.current = "";
+  };
+
+  return {
+    users,
+    searchQuery,
+    setSearchQuery,
+    isLoading,
+    loadUsers,
+    clearSearch,
+    searchQueryRef,
+  };
+};

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

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

package/src/hooks/index.ts

@@ -31,3 +31,7 @@ export type {
   UseTranslationsHook,
 } from "../i18n";
 export * from "./useCustomD3Graph";
+export * from "./useNotificationSync";
+export * from "./usePageTracker";
+export * from "./usePushNotifications";
+export * from "./useSocket";

package/src/hooks/useCustomD3Graph.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as d3 from "d3";
 import { Loader2 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef } from "react";

package/src/hooks/useNotificationSync.ts

@@ -0,0 +1,20 @@
+"use client";
+
+import { useEffect } from "react";
+import { useNotificationContext, useSocketContext } from "../contexts";
+
+export function useNotificationSync() {
+  const { socketNotifications, clearSocketNotifications } = useSocketContext();
+  const { addSocketNotifications } = useNotificationContext();
+
+  useEffect(() => {
+    if (socketNotifications.length > 0) {
+      try {
+        addSocketNotifications(socketNotifications);
+        clearSocketNotifications();
+      } catch (error) {
+        console.error("💥 [useNotificationSync] Error processing notifications:", error);
+      }
+    }
+  }, [socketNotifications, addSocketNotifications, clearSocketNotifications]);
+}