@greatapps/common 1.1.190 → 1.1.192

package/dist/components/layouts/UsersSelectorPopover.mjs

@@ -3,7 +3,6 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { Plus, Settings, User, Users } from "lucide-react";
 import { UserAvatar } from "../ui/data-display/UserAvatar";
-import { useQueryClient, useMutation } from "@tanstack/react-query";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/overlay/Popover";
 import { Button } from "../ui/buttons/Button";
 import {
@@ -16,16 +15,10 @@ import {
 import { Checkbox } from "../ui/form/Checkbox";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
 import { cn } from "../../infra/utils/clsx";
-import {
-  useListProjectUsers,
-  LIST_PROJECT_USERS_BASE_KEY
-} from "../../modules/projects/hooks/list-project-users.hook";
-import {
-  useListAllAccountUsers,
-  LIST_ALL_ACCOUNT_USERS_BASE_KEY
-} from "../../modules/projects/hooks/list-all-account-users.hook";
-import { removeProjectUserAction } from "../../modules/projects/actions/remove-project-user.action";
-import { addProjectUserAction } from "../../modules/projects/actions/add-project-user.action";
+import { useListProjectUsers } from "../../modules/projects/hooks/list-project-users.hook";
+import { useListAllAccountUsers } from "../../modules/projects/hooks/list-all-account-users.hook";
+import { useAddProjectUser } from "../../modules/projects/hooks/add-project-user.hook";
+import { useRemoveProjectUser } from "../../modules/projects/hooks/remove-project-user.hook";
 function UserItemSkeleton() {
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 py-1.5 gap-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1", children: [
@@ -42,7 +35,6 @@ function UsersSelectorPopover({
   align,
   contentClassName
 }) {
-  const queryClient = useQueryClient();
   const [open, setOpen] = useState(false);
   const [hoveredId, setHoveredId] = useState(null);
   const [searchInput, setSearchInput] = useState("");
@@ -54,22 +46,12 @@ function UsersSelectorPopover({
   }, [searchInput]);
   const accountUsers = useListAllAccountUsers(search, id || void 0);
   const projectUsers = useListProjectUsers(id, "");
+  const addMutation = useAddProjectUser(id);
+  const removeMutation = useRemoveProjectUser(id);
   const allUsers = accountUsers.data?.pages.flatMap((p) => p.data) ?? [];
   const isLoading = accountUsers.isLoading;
   const isFetchingMore = accountUsers.isFetchingNextPage;
   const totalInProject = projectUsers.data?.pages[0]?.total ?? 0;
-  const invalidate = () => {
-    queryClient.invalidateQueries({ queryKey: LIST_PROJECT_USERS_BASE_KEY(id) });
-    queryClient.invalidateQueries({ queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY() });
-  };
-  const removeMutation = useMutation({
-    mutationFn: (userId) => removeProjectUserAction({ projectId: id, users: [userId] }),
-    onSuccess: invalidate
-  });
-  const addMutation = useMutation({
-    mutationFn: (userId) => addProjectUserAction({ projectId: id, users: [userId] }),
-    onSuccess: invalidate
-  });
   const toggleUser = (userId, inProject, removable) => {
     if (inProject) {
       if (!removable) return;

package/dist/components/layouts/UsersSelectorPopover.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layouts/UsersSelectorPopover.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { Plus, Settings, User, Users } from \"lucide-react\";\nimport { UserAvatar } from \"../ui/data-display/UserAvatar\";\nimport { useQueryClient, useMutation } from \"@tanstack/react-query\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../ui/overlay/Popover\";\nimport { Button } from \"../ui/buttons/Button\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"../ui/overlay/Command\";\nimport { Checkbox } from \"../ui/form/Checkbox\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\";\nimport { cn } from \"../../infra/utils/clsx\";\nimport {\n  useListProjectUsers,\n  LIST_PROJECT_USERS_BASE_KEY,\n} from \"../../modules/projects/hooks/list-project-users.hook\";\nimport {\n  useListAllAccountUsers,\n  LIST_ALL_ACCOUNT_USERS_BASE_KEY,\n} from \"../../modules/projects/hooks/list-all-account-users.hook\";\nimport { removeProjectUserAction } from \"../../modules/projects/actions/remove-project-user.action\";\nimport { addProjectUserAction } from \"../../modules/projects/actions/add-project-user.action\";\n\nexport interface UsersSelectorPopoverProps {\n  projectId?: number;\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  align?: \"start\" | \"center\" | \"end\";\n  contentClassName?: string;\n}\n\nfunction UserItemSkeleton() {\n  return (\n    <div className=\"flex items-center justify-between px-2 py-1.5 gap-2\">\n      <div className=\"flex items-center gap-2 flex-1\">\n        <div className=\"skeleton size-8 rounded-full shrink-0\" />\n        <div className=\"skeleton h-3.5 w-28 rounded\" />\n      </div>\n      <div className=\"skeleton size-4 rounded shrink-0\" />\n    </div>\n  );\n}\n\nconst GAPPS_URL = process.env.NEXT_PUBLIC_GREAT_APPS ?? \"\";\n\nexport function UsersSelectorPopover({\n  projectId,\n  side,\n  align,\n  contentClassName,\n}: UsersSelectorPopoverProps) {\n  const queryClient = useQueryClient();\n  const [open, setOpen] = useState(false);\n  const [hoveredId, setHoveredId] = useState<number | null>(null);\n  const [searchInput, setSearchInput] = useState(\"\");\n  const [search, setSearch] = useState(\"\");\n\n  const id = projectId ?? 0;\n\n  useEffect(() => {\n    const timer = setTimeout(() => setSearch(searchInput), 300);\n    return () => clearTimeout(timer);\n  }, [searchInput]);\n\n  const accountUsers = useListAllAccountUsers(search, id || undefined);\n  const projectUsers = useListProjectUsers(id, \"\");\n\n  const allUsers = accountUsers.data?.pages.flatMap((p) => p.data) ?? [];\n  const isLoading = accountUsers.isLoading;\n  const isFetchingMore = accountUsers.isFetchingNextPage;\n  const totalInProject = projectUsers.data?.pages[0]?.total ?? 0;\n\n  const invalidate = () => {\n    queryClient.invalidateQueries({ queryKey: LIST_PROJECT_USERS_BASE_KEY(id) });\n    queryClient.invalidateQueries({ queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY() });\n  };\n\n  const removeMutation = useMutation({\n    mutationFn: (userId: number) =>\n      removeProjectUserAction({ projectId: id, users: [userId] }),\n    onSuccess: invalidate,\n  });\n\n  const addMutation = useMutation({\n    mutationFn: (userId: number) =>\n      addProjectUserAction({ projectId: id, users: [userId] }),\n    onSuccess: invalidate,\n  });\n\n  const toggleUser = (userId: number, inProject: boolean, removable: boolean) => {\n    if (inProject) {\n      if (!removable) return;\n      removeMutation.mutate(userId);\n    } else {\n      addMutation.mutate(userId);\n    }\n  };\n\n  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {\n    const target = e.currentTarget;\n    const nearBottom =\n      target.scrollTop + target.clientHeight >= target.scrollHeight - 50;\n    if (!nearBottom) return;\n    if (accountUsers.hasNextPage && !accountUsers.isFetchingNextPage) {\n      accountUsers.fetchNextPage();\n    }\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger className=\"cursor-pointer\">\n        <div className=\"flex items-center gap-2 text-gray-950 px-3 py-2 border border-gray-200 rounded-full hover:border-gray-950\">\n          <span className=\"paragraph-small-semibold\">{totalInProject}</span>\n          <User size={16} />\n        </div>\n      </PopoverTrigger>\n\n      <PopoverContent\n        className={cn(\n          \"absolute right-[-88px] w-[273px] p-0 bg-white rounded-2xl shadow-md border border-gray-200\",\n          contentClassName,\n        )}\n        side={side}\n        align={align}\n        sideOffset={8}\n      >\n        <div className=\"flex flex-col p-3 gap-2\">\n          <div className=\"flex items-center justify-between\">\n            <span className=\"paragraph-small-semibold\">Usuários</span>\n            <div className=\"flex items-center gap-1.5\">\n              <Button\n                variant=\"secondary\"\n                className=\"h-8 paragraph-small-semibold text-gray-950\"\n                onClick={() => {\n                  window.location.href = `${GAPPS_URL}/my-teams?createNew=true`;\n                }}\n              >\n                <Plus size={16} />\n                Adicionar\n              </Button>\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <Button\n                    variant=\"secondary\"\n                    className=\"p-0 size-8\"\n                    onClick={() => {\n                      window.location.href = `${GAPPS_URL}/my-teams`;\n                    }}\n                  >\n                    <Settings size={18} />\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent className=\"z-[1002]\">\n                  Visualizar todos usuários\n                </TooltipContent>\n              </Tooltip>\n            </div>\n          </div>\n\n          <Command shouldFilter={false} className=\"gap-2\" value=\"\">\n            <CommandInput\n              placeholder=\"Busque aqui\"\n              value={searchInput}\n              onValueChange={setSearchInput}\n            />\n            <CommandList\n              className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]\"\n              onScroll={handleScroll}\n            >\n              {isLoading ? (\n                <>\n                  <UserItemSkeleton />\n                  <UserItemSkeleton />\n                  <UserItemSkeleton />\n                </>\n              ) : allUsers.length === 0 ? (\n                <div className=\"flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4\">\n                  <Users size={28} className=\"text-gray-300\" />\n                  <span className=\"paragraph-small-medium text-center text-gray-500\">\n                    Nenhum usuário encontrado.\n                  </span>\n                </div>\n              ) : (\n                <>\n                  <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\n                  {allUsers.map((user) => {\n                    const inProject = user.in_project ?? false;\n                    const removable =\n                      inProject &&\n                      user.profile !== \"owner\" &&\n                      user.profile !== \"admin\";\n                    const interactive = !inProject || removable;\n\n                    return (\n                      <CommandItem\n                        key={user.id}\n                        value={user.name || String(user.id)}\n                        autoFocus={false}\n                        onPointerEnter={() => setHoveredId(user.id)}\n                        onPointerLeave={() => setHoveredId(null)}\n                        onFocus={() => setHoveredId(user.id)}\n                        onBlur={() => setHoveredId(null)}\n                        onSelect={() => toggleUser(user.id, inProject, removable)}\n                        className={interactive ? \"cursor-pointer\" : \"cursor-default\"}\n                      >\n                        <div className=\"flex items-center justify-between w-full\">\n                          <div className=\"flex items-center gap-2 min-w-0\">\n                            <UserAvatar\n                              photo={user.photo}\n                              name={user.name ?? undefined}\n                              size={32}\n                            />\n                            <span className=\"truncate\">{user.name}</span>\n                          </div>\n                          <Tooltip open={interactive && hoveredId === user.id}>\n                            <TooltipTrigger\n                              onClick={(e) => e.stopPropagation()}\n                              onPointerDown={(e) => e.stopPropagation()}\n                            >\n                              <Checkbox\n                                checked={inProject}\n                                disabled={!interactive}\n                                onCheckedChange={() =>\n                                  toggleUser(user.id, inProject, removable)\n                                }\n                                className={cn(\n                                  interactive && hoveredId === user.id\n                                    ? \"border-gray-950\"\n                                    : \"\",\n                                  \"disabled:opacity-10\",\n                                )}\n                              />\n                            </TooltipTrigger>\n                            <TooltipContent className=\"z-[1002]\">\n                              {inProject ? \"Remover do projeto\" : \"Adicionar ao projeto\"}\n                            </TooltipContent>\n                          </Tooltip>\n                        </div>\n                      </CommandItem>\n                    );\n                  })}\n                  {isFetchingMore && (\n                    <>\n                      <UserItemSkeleton />\n                      <UserItemSkeleton />\n                    </>\n                  )}\n                </>\n              )}\n            </CommandList>\n          </Command>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/layouts/UsersSelectorPopover.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { Plus, Settings, User, Users } from \"lucide-react\";\nimport { UserAvatar } from \"../ui/data-display/UserAvatar\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../ui/overlay/Popover\";\nimport { Button } from \"../ui/buttons/Button\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"../ui/overlay/Command\";\nimport { Checkbox } from \"../ui/form/Checkbox\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\";\nimport { cn } from \"../../infra/utils/clsx\";\nimport { useListProjectUsers } from \"../../modules/projects/hooks/list-project-users.hook\";\nimport { useListAllAccountUsers } from \"../../modules/projects/hooks/list-all-account-users.hook\";\nimport { useAddProjectUser } from \"../../modules/projects/hooks/add-project-user.hook\";\nimport { useRemoveProjectUser } from \"../../modules/projects/hooks/remove-project-user.hook\";\n\nexport interface UsersSelectorPopoverProps {\n  projectId?: number;\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  align?: \"start\" | \"center\" | \"end\";\n  contentClassName?: string;\n}\n\nfunction UserItemSkeleton() {\n  return (\n    <div className=\"flex items-center justify-between px-2 py-1.5 gap-2\">\n      <div className=\"flex items-center gap-2 flex-1\">\n        <div className=\"skeleton size-8 rounded-full shrink-0\" />\n        <div className=\"skeleton h-3.5 w-28 rounded\" />\n      </div>\n      <div className=\"skeleton size-4 rounded shrink-0\" />\n    </div>\n  );\n}\n\nconst GAPPS_URL = process.env.NEXT_PUBLIC_GREAT_APPS ?? \"\";\n\nexport function UsersSelectorPopover({\n  projectId,\n  side,\n  align,\n  contentClassName,\n}: UsersSelectorPopoverProps) {\n  const [open, setOpen] = useState(false);\n  const [hoveredId, setHoveredId] = useState<number | null>(null);\n  const [searchInput, setSearchInput] = useState(\"\");\n  const [search, setSearch] = useState(\"\");\n\n  const id = projectId ?? 0;\n\n  useEffect(() => {\n    const timer = setTimeout(() => setSearch(searchInput), 300);\n    return () => clearTimeout(timer);\n  }, [searchInput]);\n\n  const accountUsers = useListAllAccountUsers(search, id || undefined);\n  const projectUsers = useListProjectUsers(id, \"\");\n  const addMutation = useAddProjectUser(id);\n  const removeMutation = useRemoveProjectUser(id);\n\n  const allUsers = accountUsers.data?.pages.flatMap((p) => p.data) ?? [];\n  const isLoading = accountUsers.isLoading;\n  const isFetchingMore = accountUsers.isFetchingNextPage;\n  const totalInProject = projectUsers.data?.pages[0]?.total ?? 0;\n\n  const toggleUser = (userId: number, inProject: boolean, removable: boolean) => {\n    if (inProject) {\n      if (!removable) return;\n      removeMutation.mutate(userId);\n    } else {\n      addMutation.mutate(userId);\n    }\n  };\n\n  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {\n    const target = e.currentTarget;\n    const nearBottom =\n      target.scrollTop + target.clientHeight >= target.scrollHeight - 50;\n    if (!nearBottom) return;\n    if (accountUsers.hasNextPage && !accountUsers.isFetchingNextPage) {\n      accountUsers.fetchNextPage();\n    }\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger className=\"cursor-pointer\">\n        <div className=\"flex items-center gap-2 text-gray-950 px-3 py-2 border border-gray-200 rounded-full hover:border-gray-950\">\n          <span className=\"paragraph-small-semibold\">{totalInProject}</span>\n          <User size={16} />\n        </div>\n      </PopoverTrigger>\n\n      <PopoverContent\n        className={cn(\n          \"absolute right-[-88px] w-[273px] p-0 bg-white rounded-2xl shadow-md border border-gray-200\",\n          contentClassName,\n        )}\n        side={side}\n        align={align}\n        sideOffset={8}\n      >\n        <div className=\"flex flex-col p-3 gap-2\">\n          <div className=\"flex items-center justify-between\">\n            <span className=\"paragraph-small-semibold\">Usuários</span>\n            <div className=\"flex items-center gap-1.5\">\n              <Button\n                variant=\"secondary\"\n                className=\"h-8 paragraph-small-semibold text-gray-950\"\n                onClick={() => {\n                  window.location.href = `${GAPPS_URL}/my-teams?createNew=true`;\n                }}\n              >\n                <Plus size={16} />\n                Adicionar\n              </Button>\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <Button\n                    variant=\"secondary\"\n                    className=\"p-0 size-8\"\n                    onClick={() => {\n                      window.location.href = `${GAPPS_URL}/my-teams`;\n                    }}\n                  >\n                    <Settings size={18} />\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent className=\"z-[1002]\">\n                  Visualizar todos usuários\n                </TooltipContent>\n              </Tooltip>\n            </div>\n          </div>\n\n          <Command shouldFilter={false} className=\"gap-2\" value=\"\">\n            <CommandInput\n              placeholder=\"Busque aqui\"\n              value={searchInput}\n              onValueChange={setSearchInput}\n            />\n            <CommandList\n              className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]\"\n              onScroll={handleScroll}\n            >\n              {isLoading ? (\n                <>\n                  <UserItemSkeleton />\n                  <UserItemSkeleton />\n                  <UserItemSkeleton />\n                </>\n              ) : allUsers.length === 0 ? (\n                <div className=\"flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4\">\n                  <Users size={28} className=\"text-gray-300\" />\n                  <span className=\"paragraph-small-medium text-center text-gray-500\">\n                    Nenhum usuário encontrado.\n                  </span>\n                </div>\n              ) : (\n                <>\n                  <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\n                  {allUsers.map((user) => {\n                    const inProject = user.in_project ?? false;\n                    const removable =\n                      inProject &&\n                      user.profile !== \"owner\" &&\n                      user.profile !== \"admin\";\n                    const interactive = !inProject || removable;\n\n                    return (\n                      <CommandItem\n                        key={user.id}\n                        value={user.name || String(user.id)}\n                        autoFocus={false}\n                        onPointerEnter={() => setHoveredId(user.id)}\n                        onPointerLeave={() => setHoveredId(null)}\n                        onFocus={() => setHoveredId(user.id)}\n                        onBlur={() => setHoveredId(null)}\n                        onSelect={() => toggleUser(user.id, inProject, removable)}\n                        className={interactive ? \"cursor-pointer\" : \"cursor-default\"}\n                      >\n                        <div className=\"flex items-center justify-between w-full\">\n                          <div className=\"flex items-center gap-2 min-w-0\">\n                            <UserAvatar\n                              photo={user.photo}\n                              name={user.name ?? undefined}\n                              size={32}\n                            />\n                            <span className=\"truncate\">{user.name}</span>\n                          </div>\n                          <Tooltip open={interactive && hoveredId === user.id}>\n                            <TooltipTrigger\n                              onClick={(e) => e.stopPropagation()}\n                              onPointerDown={(e) => e.stopPropagation()}\n                            >\n                              <Checkbox\n                                checked={inProject}\n                                disabled={!interactive}\n                                onCheckedChange={() =>\n                                  toggleUser(user.id, inProject, removable)\n                                }\n                                className={cn(\n                                  interactive && hoveredId === user.id\n                                    ? \"border-gray-950\"\n                                    : \"\",\n                                  \"disabled:opacity-10\",\n                                )}\n                              />\n                            </TooltipTrigger>\n                            <TooltipContent className=\"z-[1002]\">\n                              {inProject ? \"Remover do projeto\" : \"Adicionar ao projeto\"}\n                            </TooltipContent>\n                          </Tooltip>\n                        </div>\n                      </CommandItem>\n                    );\n                  })}\n                  {isFetchingMore && (\n                    <>\n                      <UserItemSkeleton />\n                      <UserItemSkeleton />\n                    </>\n                  )}\n                </>\n              )}\n            </CommandList>\n          </Command>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/modules/projects/hooks/add-project-user.hook.mjs

@@ -0,0 +1,61 @@
+"use client";
+import { useQueryClient, useMutation } from "@tanstack/react-query";
+import { addProjectUserAction } from "../actions/add-project-user.action";
+import { LIST_PROJECT_USERS_BASE_KEY } from "./list-project-users.hook";
+import { LIST_ALL_ACCOUNT_USERS_BASE_KEY } from "./list-all-account-users.hook";
+function useAddProjectUser(projectId) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (userId) => addProjectUserAction({ projectId, users: [userId] }),
+    onMutate: async (userId) => {
+      await queryClient.cancelQueries({ queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY() });
+      await queryClient.cancelQueries({ queryKey: LIST_PROJECT_USERS_BASE_KEY(projectId) });
+      const prevAccountUsers = queryClient.getQueriesData({
+        queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY()
+      });
+      const prevProjectUsers = queryClient.getQueriesData({
+        queryKey: LIST_PROJECT_USERS_BASE_KEY(projectId)
+      });
+      queryClient.setQueriesData(
+        { queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY(), exact: false },
+        (old) => {
+          if (!old) return old;
+          return {
+            ...old,
+            pages: old.pages.map((page) => ({
+              ...page,
+              data: page.data.map(
+                (u) => u.id === userId ? { ...u, in_project: true } : u
+              )
+            }))
+          };
+        }
+      );
+      queryClient.setQueriesData(
+        { queryKey: LIST_PROJECT_USERS_BASE_KEY(projectId), exact: false },
+        (old) => {
+          if (!old?.pages.length) return old;
+          return {
+            ...old,
+            pages: old.pages.map(
+              (page, i) => i === 0 ? { ...page, total: page.total + 1 } : page
+            )
+          };
+        }
+      );
+      return { prevAccountUsers, prevProjectUsers };
+    },
+    onError: (_err, _userId, ctx) => {
+      ctx?.prevAccountUsers.forEach(([key, data]) => queryClient.setQueryData(key, data));
+      ctx?.prevProjectUsers.forEach(([key, data]) => queryClient.setQueryData(key, data));
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: LIST_PROJECT_USERS_BASE_KEY(projectId) });
+      queryClient.invalidateQueries({ queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY() });
+    }
+  });
+}
+export {
+  useAddProjectUser
+};
+//# sourceMappingURL=add-project-user.hook.mjs.map

package/dist/modules/projects/hooks/add-project-user.hook.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/modules/projects/hooks/add-project-user.hook.ts"],"sourcesContent":["'use client';\n\nimport { useQueryClient, useMutation, InfiniteData } from '@tanstack/react-query';\nimport { addProjectUserAction } from '../actions/add-project-user.action';\nimport { LIST_PROJECT_USERS_BASE_KEY } from './list-project-users.hook';\nimport { LIST_ALL_ACCOUNT_USERS_BASE_KEY } from './list-all-account-users.hook';\nimport type { UsersPage, AccountUser, ProjectUser } from '../types';\n\nexport function useAddProjectUser(projectId: number) {\n  const queryClient = useQueryClient();\n\n  return useMutation({\n    mutationFn: (userId: number) =>\n      addProjectUserAction({ projectId, users: [userId] }),\n\n    onMutate: async (userId) => {\n      await queryClient.cancelQueries({ queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY() });\n      await queryClient.cancelQueries({ queryKey: LIST_PROJECT_USERS_BASE_KEY(projectId) });\n\n      const prevAccountUsers = queryClient.getQueriesData<InfiniteData<UsersPage<AccountUser>>>({\n        queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY(),\n      });\n      const prevProjectUsers = queryClient.getQueriesData<InfiniteData<UsersPage<ProjectUser>>>({\n        queryKey: LIST_PROJECT_USERS_BASE_KEY(projectId),\n      });\n\n      queryClient.setQueriesData<InfiniteData<UsersPage<AccountUser>>>(\n        { queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY(), exact: false },\n        (old) => {\n          if (!old) return old;\n          return {\n            ...old,\n            pages: old.pages.map((page) => ({\n              ...page,\n              data: page.data.map((u) =>\n                u.id === userId ? { ...u, in_project: true } : u\n              ),\n            })),\n          };\n        }\n      );\n\n      queryClient.setQueriesData<InfiniteData<UsersPage<ProjectUser>>>(\n        { queryKey: LIST_PROJECT_USERS_BASE_KEY(projectId), exact: false },\n        (old) => {\n          if (!old?.pages.length) return old;\n          return {\n            ...old,\n            pages: old.pages.map((page, i) =>\n              i === 0 ? { ...page, total: page.total + 1 } : page\n            ),\n          };\n        }\n      );\n\n      return { prevAccountUsers, prevProjectUsers };\n    },\n\n    onError: (_err, _userId, ctx) => {\n      ctx?.prevAccountUsers.forEach(([key, data]) => queryClient.setQueryData(key, data));\n      ctx?.prevProjectUsers.forEach(([key, data]) => queryClient.setQueryData(key, data));\n    },\n\n    onSettled: () => {\n      queryClient.invalidateQueries({ queryKey: LIST_PROJECT_USERS_BASE_KEY(projectId) });\n      queryClient.invalidateQueries({ queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY() });\n    },\n  });\n}\n"],"mappings":";AAEA,SAAS,gBAAgB,mBAAiC;AAC1D,SAAS,4BAA4B;AACrC,SAAS,mCAAmC;AAC5C,SAAS,uCAAuC;AAGzC,SAAS,kBAAkB,WAAmB;AACnD,QAAM,cAAc,eAAe;AAEnC,SAAO,YAAY;AAAA,IACjB,YAAY,CAAC,WACX,qBAAqB,EAAE,WAAW,OAAO,CAAC,MAAM,EAAE,CAAC;AAAA,IAErD,UAAU,OAAO,WAAW;AAC1B,YAAM,YAAY,cAAc,EAAE,UAAU,gCAAgC,EAAE,CAAC;AAC/E,YAAM,YAAY,cAAc,EAAE,UAAU,4BAA4B,SAAS,EAAE,CAAC;AAEpF,YAAM,mBAAmB,YAAY,eAAqD;AAAA,QACxF,UAAU,gCAAgC;AAAA,MAC5C,CAAC;AACD,YAAM,mBAAmB,YAAY,eAAqD;AAAA,QACxF,UAAU,4BAA4B,SAAS;AAAA,MACjD,CAAC;AAED,kBAAY;AAAA,QACV,EAAE,UAAU,gCAAgC,GAAG,OAAO,MAAM;AAAA,QAC5D,CAAC,QAAQ;AACP,cAAI,CAAC,IAAK,QAAO;AACjB,iBAAO;AAAA,YACL,GAAG;AAAA,YACH,OAAO,IAAI,MAAM,IAAI,CAAC,UAAU;AAAA,cAC9B,GAAG;AAAA,cACH,MAAM,KAAK,KAAK;AAAA,gBAAI,CAAC,MACnB,EAAE,OAAO,SAAS,EAAE,GAAG,GAAG,YAAY,KAAK,IAAI;AAAA,cACjD;AAAA,YACF,EAAE;AAAA,UACJ;AAAA,QACF;AAAA,MACF;AAEA,kBAAY;AAAA,QACV,EAAE,UAAU,4BAA4B,SAAS,GAAG,OAAO,MAAM;AAAA,QACjE,CAAC,QAAQ;AACP,cAAI,CAAC,KAAK,MAAM,OAAQ,QAAO;AAC/B,iBAAO;AAAA,YACL,GAAG;AAAA,YACH,OAAO,IAAI,MAAM;AAAA,cAAI,CAAC,MAAM,MAC1B,MAAM,IAAI,EAAE,GAAG,MAAM,OAAO,KAAK,QAAQ,EAAE,IAAI;AAAA,YACjD;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAEA,aAAO,EAAE,kBAAkB,iBAAiB;AAAA,IAC9C;AAAA,IAEA,SAAS,CAAC,MAAM,SAAS,QAAQ;AAC/B,WAAK,iBAAiB,QAAQ,CAAC,CAAC,KAAK,IAAI,MAAM,YAAY,aAAa,KAAK,IAAI,CAAC;AAClF,WAAK,iBAAiB,QAAQ,CAAC,CAAC,KAAK,IAAI,MAAM,YAAY,aAAa,KAAK,IAAI,CAAC;AAAA,IACpF;AAAA,IAEA,WAAW,MAAM;AACf,kBAAY,kBAAkB,EAAE,UAAU,4BAA4B,SAAS,EAAE,CAAC;AAClF,kBAAY,kBAAkB,EAAE,UAAU,gCAAgC,EAAE,CAAC;AAAA,IAC/E;AAAA,EACF,CAAC;AACH;","names":[]}

package/dist/modules/projects/hooks/remove-project-user.hook.mjs

@@ -0,0 +1,61 @@
+"use client";
+import { useQueryClient, useMutation } from "@tanstack/react-query";
+import { removeProjectUserAction } from "../actions/remove-project-user.action";
+import { LIST_PROJECT_USERS_BASE_KEY } from "./list-project-users.hook";
+import { LIST_ALL_ACCOUNT_USERS_BASE_KEY } from "./list-all-account-users.hook";
+function useRemoveProjectUser(projectId) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (userId) => removeProjectUserAction({ projectId, users: [userId] }),
+    onMutate: async (userId) => {
+      await queryClient.cancelQueries({ queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY() });
+      await queryClient.cancelQueries({ queryKey: LIST_PROJECT_USERS_BASE_KEY(projectId) });
+      const prevAccountUsers = queryClient.getQueriesData({
+        queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY()
+      });
+      const prevProjectUsers = queryClient.getQueriesData({
+        queryKey: LIST_PROJECT_USERS_BASE_KEY(projectId)
+      });
+      queryClient.setQueriesData(
+        { queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY(), exact: false },
+        (old) => {
+          if (!old) return old;
+          return {
+            ...old,
+            pages: old.pages.map((page) => ({
+              ...page,
+              data: page.data.map(
+                (u) => u.id === userId ? { ...u, in_project: false } : u
+              )
+            }))
+          };
+        }
+      );
+      queryClient.setQueriesData(
+        { queryKey: LIST_PROJECT_USERS_BASE_KEY(projectId), exact: false },
+        (old) => {
+          if (!old?.pages.length) return old;
+          return {
+            ...old,
+            pages: old.pages.map(
+              (page, i) => i === 0 ? { ...page, total: page.total - 1 } : page
+            )
+          };
+        }
+      );
+      return { prevAccountUsers, prevProjectUsers };
+    },
+    onError: (_err, _userId, ctx) => {
+      ctx?.prevAccountUsers.forEach(([key, data]) => queryClient.setQueryData(key, data));
+      ctx?.prevProjectUsers.forEach(([key, data]) => queryClient.setQueryData(key, data));
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: LIST_PROJECT_USERS_BASE_KEY(projectId) });
+      queryClient.invalidateQueries({ queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY() });
+    }
+  });
+}
+export {
+  useRemoveProjectUser
+};
+//# sourceMappingURL=remove-project-user.hook.mjs.map

package/dist/modules/projects/hooks/remove-project-user.hook.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/modules/projects/hooks/remove-project-user.hook.ts"],"sourcesContent":["'use client';\n\nimport { useQueryClient, useMutation, InfiniteData } from '@tanstack/react-query';\nimport { removeProjectUserAction } from '../actions/remove-project-user.action';\nimport { LIST_PROJECT_USERS_BASE_KEY } from './list-project-users.hook';\nimport { LIST_ALL_ACCOUNT_USERS_BASE_KEY } from './list-all-account-users.hook';\nimport type { UsersPage, AccountUser, ProjectUser } from '../types';\n\nexport function useRemoveProjectUser(projectId: number) {\n  const queryClient = useQueryClient();\n\n  return useMutation({\n    mutationFn: (userId: number) =>\n      removeProjectUserAction({ projectId, users: [userId] }),\n\n    onMutate: async (userId) => {\n      await queryClient.cancelQueries({ queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY() });\n      await queryClient.cancelQueries({ queryKey: LIST_PROJECT_USERS_BASE_KEY(projectId) });\n\n      const prevAccountUsers = queryClient.getQueriesData<InfiniteData<UsersPage<AccountUser>>>({\n        queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY(),\n      });\n      const prevProjectUsers = queryClient.getQueriesData<InfiniteData<UsersPage<ProjectUser>>>({\n        queryKey: LIST_PROJECT_USERS_BASE_KEY(projectId),\n      });\n\n      queryClient.setQueriesData<InfiniteData<UsersPage<AccountUser>>>(\n        { queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY(), exact: false },\n        (old) => {\n          if (!old) return old;\n          return {\n            ...old,\n            pages: old.pages.map((page) => ({\n              ...page,\n              data: page.data.map((u) =>\n                u.id === userId ? { ...u, in_project: false } : u\n              ),\n            })),\n          };\n        }\n      );\n\n      queryClient.setQueriesData<InfiniteData<UsersPage<ProjectUser>>>(\n        { queryKey: LIST_PROJECT_USERS_BASE_KEY(projectId), exact: false },\n        (old) => {\n          if (!old?.pages.length) return old;\n          return {\n            ...old,\n            pages: old.pages.map((page, i) =>\n              i === 0 ? { ...page, total: page.total - 1 } : page\n            ),\n          };\n        }\n      );\n\n      return { prevAccountUsers, prevProjectUsers };\n    },\n\n    onError: (_err, _userId, ctx) => {\n      ctx?.prevAccountUsers.forEach(([key, data]) => queryClient.setQueryData(key, data));\n      ctx?.prevProjectUsers.forEach(([key, data]) => queryClient.setQueryData(key, data));\n    },\n\n    onSettled: () => {\n      queryClient.invalidateQueries({ queryKey: LIST_PROJECT_USERS_BASE_KEY(projectId) });\n      queryClient.invalidateQueries({ queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY() });\n    },\n  });\n}\n"],"mappings":";AAEA,SAAS,gBAAgB,mBAAiC;AAC1D,SAAS,+BAA+B;AACxC,SAAS,mCAAmC;AAC5C,SAAS,uCAAuC;AAGzC,SAAS,qBAAqB,WAAmB;AACtD,QAAM,cAAc,eAAe;AAEnC,SAAO,YAAY;AAAA,IACjB,YAAY,CAAC,WACX,wBAAwB,EAAE,WAAW,OAAO,CAAC,MAAM,EAAE,CAAC;AAAA,IAExD,UAAU,OAAO,WAAW;AAC1B,YAAM,YAAY,cAAc,EAAE,UAAU,gCAAgC,EAAE,CAAC;AAC/E,YAAM,YAAY,cAAc,EAAE,UAAU,4BAA4B,SAAS,EAAE,CAAC;AAEpF,YAAM,mBAAmB,YAAY,eAAqD;AAAA,QACxF,UAAU,gCAAgC;AAAA,MAC5C,CAAC;AACD,YAAM,mBAAmB,YAAY,eAAqD;AAAA,QACxF,UAAU,4BAA4B,SAAS;AAAA,MACjD,CAAC;AAED,kBAAY;AAAA,QACV,EAAE,UAAU,gCAAgC,GAAG,OAAO,MAAM;AAAA,QAC5D,CAAC,QAAQ;AACP,cAAI,CAAC,IAAK,QAAO;AACjB,iBAAO;AAAA,YACL,GAAG;AAAA,YACH,OAAO,IAAI,MAAM,IAAI,CAAC,UAAU;AAAA,cAC9B,GAAG;AAAA,cACH,MAAM,KAAK,KAAK;AAAA,gBAAI,CAAC,MACnB,EAAE,OAAO,SAAS,EAAE,GAAG,GAAG,YAAY,MAAM,IAAI;AAAA,cAClD;AAAA,YACF,EAAE;AAAA,UACJ;AAAA,QACF;AAAA,MACF;AAEA,kBAAY;AAAA,QACV,EAAE,UAAU,4BAA4B,SAAS,GAAG,OAAO,MAAM;AAAA,QACjE,CAAC,QAAQ;AACP,cAAI,CAAC,KAAK,MAAM,OAAQ,QAAO;AAC/B,iBAAO;AAAA,YACL,GAAG;AAAA,YACH,OAAO,IAAI,MAAM;AAAA,cAAI,CAAC,MAAM,MAC1B,MAAM,IAAI,EAAE,GAAG,MAAM,OAAO,KAAK,QAAQ,EAAE,IAAI;AAAA,YACjD;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAEA,aAAO,EAAE,kBAAkB,iBAAiB;AAAA,IAC9C;AAAA,IAEA,SAAS,CAAC,MAAM,SAAS,QAAQ;AAC/B,WAAK,iBAAiB,QAAQ,CAAC,CAAC,KAAK,IAAI,MAAM,YAAY,aAAa,KAAK,IAAI,CAAC;AAClF,WAAK,iBAAiB,QAAQ,CAAC,CAAC,KAAK,IAAI,MAAM,YAAY,aAAa,KAAK,IAAI,CAAC;AAAA,IACpF;AAAA,IAEA,WAAW,MAAM;AACf,kBAAY,kBAAkB,EAAE,UAAU,4BAA4B,SAAS,EAAE,CAAC;AAClF,kBAAY,kBAAkB,EAAE,UAAU,gCAAgC,EAAE,CAAC;AAAA,IAC/E;AAAA,EACF,CAAC;AACH;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/common",
-  "version": "1.1.190",
+  "version": "1.1.192",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",
@@ -32,7 +32,6 @@
   "license": "ISC",
   "dependencies": {
     "@greatapps/cache": "^2.0.1",
-    "@greatapps/common": "^1.1.138",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-popover": "^1.1.15",

package/src/components/layouts/UsersSelectorPopover.tsx

@@ -3,7 +3,6 @@
 import { useEffect, useState } from "react";
 import { Plus, Settings, User, Users } from "lucide-react";
 import { UserAvatar } from "../ui/data-display/UserAvatar";
-import { useQueryClient, useMutation } from "@tanstack/react-query";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/overlay/Popover";
 import { Button } from "../ui/buttons/Button";
 import {
@@ -16,16 +15,10 @@ import {
 import { Checkbox } from "../ui/form/Checkbox";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
 import { cn } from "../../infra/utils/clsx";
-import {
-  useListProjectUsers,
-  LIST_PROJECT_USERS_BASE_KEY,
-} from "../../modules/projects/hooks/list-project-users.hook";
-import {
-  useListAllAccountUsers,
-  LIST_ALL_ACCOUNT_USERS_BASE_KEY,
-} from "../../modules/projects/hooks/list-all-account-users.hook";
-import { removeProjectUserAction } from "../../modules/projects/actions/remove-project-user.action";
-import { addProjectUserAction } from "../../modules/projects/actions/add-project-user.action";
+import { useListProjectUsers } from "../../modules/projects/hooks/list-project-users.hook";
+import { useListAllAccountUsers } from "../../modules/projects/hooks/list-all-account-users.hook";
+import { useAddProjectUser } from "../../modules/projects/hooks/add-project-user.hook";
+import { useRemoveProjectUser } from "../../modules/projects/hooks/remove-project-user.hook";
 
 export interface UsersSelectorPopoverProps {
   projectId?: number;
@@ -54,7 +47,6 @@ export function UsersSelectorPopover({
   align,
   contentClassName,
 }: UsersSelectorPopoverProps) {
-  const queryClient = useQueryClient();
   const [open, setOpen] = useState(false);
   const [hoveredId, setHoveredId] = useState<number | null>(null);
   const [searchInput, setSearchInput] = useState("");
@@ -69,29 +61,14 @@ export function UsersSelectorPopover({
 
   const accountUsers = useListAllAccountUsers(search, id || undefined);
   const projectUsers = useListProjectUsers(id, "");
+  const addMutation = useAddProjectUser(id);
+  const removeMutation = useRemoveProjectUser(id);
 
   const allUsers = accountUsers.data?.pages.flatMap((p) => p.data) ?? [];
   const isLoading = accountUsers.isLoading;
   const isFetchingMore = accountUsers.isFetchingNextPage;
   const totalInProject = projectUsers.data?.pages[0]?.total ?? 0;
 
-  const invalidate = () => {
-    queryClient.invalidateQueries({ queryKey: LIST_PROJECT_USERS_BASE_KEY(id) });
-    queryClient.invalidateQueries({ queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY() });
-  };
-
-  const removeMutation = useMutation({
-    mutationFn: (userId: number) =>
-      removeProjectUserAction({ projectId: id, users: [userId] }),
-    onSuccess: invalidate,
-  });
-
-  const addMutation = useMutation({
-    mutationFn: (userId: number) =>
-      addProjectUserAction({ projectId: id, users: [userId] }),
-    onSuccess: invalidate,
-  });
-
   const toggleUser = (userId: number, inProject: boolean, removable: boolean) => {
     if (inProject) {
       if (!removable) return;

package/src/modules/projects/hooks/add-project-user.hook.ts

@@ -0,0 +1,69 @@
+'use client';
+
+import { useQueryClient, useMutation, InfiniteData } from '@tanstack/react-query';
+import { addProjectUserAction } from '../actions/add-project-user.action';
+import { LIST_PROJECT_USERS_BASE_KEY } from './list-project-users.hook';
+import { LIST_ALL_ACCOUNT_USERS_BASE_KEY } from './list-all-account-users.hook';
+import type { UsersPage, AccountUser, ProjectUser } from '../types';
+
+export function useAddProjectUser(projectId: number) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (userId: number) =>
+      addProjectUserAction({ projectId, users: [userId] }),
+
+    onMutate: async (userId) => {
+      await queryClient.cancelQueries({ queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY() });
+      await queryClient.cancelQueries({ queryKey: LIST_PROJECT_USERS_BASE_KEY(projectId) });
+
+      const prevAccountUsers = queryClient.getQueriesData<InfiniteData<UsersPage<AccountUser>>>({
+        queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY(),
+      });
+      const prevProjectUsers = queryClient.getQueriesData<InfiniteData<UsersPage<ProjectUser>>>({
+        queryKey: LIST_PROJECT_USERS_BASE_KEY(projectId),
+      });
+
+      queryClient.setQueriesData<InfiniteData<UsersPage<AccountUser>>>(
+        { queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY(), exact: false },
+        (old) => {
+          if (!old) return old;
+          return {
+            ...old,
+            pages: old.pages.map((page) => ({
+              ...page,
+              data: page.data.map((u) =>
+                u.id === userId ? { ...u, in_project: true } : u
+              ),
+            })),
+          };
+        }
+      );
+
+      queryClient.setQueriesData<InfiniteData<UsersPage<ProjectUser>>>(
+        { queryKey: LIST_PROJECT_USERS_BASE_KEY(projectId), exact: false },
+        (old) => {
+          if (!old?.pages.length) return old;
+          return {
+            ...old,
+            pages: old.pages.map((page, i) =>
+              i === 0 ? { ...page, total: page.total + 1 } : page
+            ),
+          };
+        }
+      );
+
+      return { prevAccountUsers, prevProjectUsers };
+    },
+
+    onError: (_err, _userId, ctx) => {
+      ctx?.prevAccountUsers.forEach(([key, data]) => queryClient.setQueryData(key, data));
+      ctx?.prevProjectUsers.forEach(([key, data]) => queryClient.setQueryData(key, data));
+    },
+
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: LIST_PROJECT_USERS_BASE_KEY(projectId) });
+      queryClient.invalidateQueries({ queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY() });
+    },
+  });
+}

package/src/modules/projects/hooks/remove-project-user.hook.ts

@@ -0,0 +1,69 @@
+'use client';
+
+import { useQueryClient, useMutation, InfiniteData } from '@tanstack/react-query';
+import { removeProjectUserAction } from '../actions/remove-project-user.action';
+import { LIST_PROJECT_USERS_BASE_KEY } from './list-project-users.hook';
+import { LIST_ALL_ACCOUNT_USERS_BASE_KEY } from './list-all-account-users.hook';
+import type { UsersPage, AccountUser, ProjectUser } from '../types';
+
+export function useRemoveProjectUser(projectId: number) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (userId: number) =>
+      removeProjectUserAction({ projectId, users: [userId] }),
+
+    onMutate: async (userId) => {
+      await queryClient.cancelQueries({ queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY() });
+      await queryClient.cancelQueries({ queryKey: LIST_PROJECT_USERS_BASE_KEY(projectId) });
+
+      const prevAccountUsers = queryClient.getQueriesData<InfiniteData<UsersPage<AccountUser>>>({
+        queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY(),
+      });
+      const prevProjectUsers = queryClient.getQueriesData<InfiniteData<UsersPage<ProjectUser>>>({
+        queryKey: LIST_PROJECT_USERS_BASE_KEY(projectId),
+      });
+
+      queryClient.setQueriesData<InfiniteData<UsersPage<AccountUser>>>(
+        { queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY(), exact: false },
+        (old) => {
+          if (!old) return old;
+          return {
+            ...old,
+            pages: old.pages.map((page) => ({
+              ...page,
+              data: page.data.map((u) =>
+                u.id === userId ? { ...u, in_project: false } : u
+              ),
+            })),
+          };
+        }
+      );
+
+      queryClient.setQueriesData<InfiniteData<UsersPage<ProjectUser>>>(
+        { queryKey: LIST_PROJECT_USERS_BASE_KEY(projectId), exact: false },
+        (old) => {
+          if (!old?.pages.length) return old;
+          return {
+            ...old,
+            pages: old.pages.map((page, i) =>
+              i === 0 ? { ...page, total: page.total - 1 } : page
+            ),
+          };
+        }
+      );
+
+      return { prevAccountUsers, prevProjectUsers };
+    },
+
+    onError: (_err, _userId, ctx) => {
+      ctx?.prevAccountUsers.forEach(([key, data]) => queryClient.setQueryData(key, data));
+      ctx?.prevProjectUsers.forEach(([key, data]) => queryClient.setQueryData(key, data));
+    },
+
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: LIST_PROJECT_USERS_BASE_KEY(projectId) });
+      queryClient.invalidateQueries({ queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY() });
+    },
+  });
+}