refactor: migrate createRole to use mutation atom with proper types in team page

This commit is contained in:
CREDO23 2025-12-16 07:25:15 +00:00
parent 635be2b4e6
commit 7d89fea31d

View file

@ -45,6 +45,9 @@ import { motion } from "motion/react";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { useCallback, useMemo, useState } from "react"; import { useCallback, useMemo, useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { createRoleMutationAtom } from "@/atoms/roles/roles-mutation.atoms";
import { useAtomValue } from "jotai";
import type { CreateRoleRequest } from "@/contracts/types/roles.types";
import { rolesApiService } from "@/lib/apis/roles-api.service"; import { rolesApiService } from "@/lib/apis/roles-api.service";
import { cacheKeys } from "@/lib/query-client/cache-keys"; import { cacheKeys } from "@/lib/query-client/cache-keys";
import { import {
@ -107,7 +110,6 @@ import {
type InviteCreate, type InviteCreate,
type Member, type Member,
type Role, type Role,
type RoleCreate,
useInvites, useInvites,
useMembers, useMembers,
usePermissions, usePermissions,
@ -154,11 +156,23 @@ export default function TeamManagementPage() {
removeMember, removeMember,
} = useMembers(searchSpaceId); } = useMembers(searchSpaceId);
const { const {
createRole,
updateRole, updateRole,
deleteRole, deleteRole,
} = useRoles(searchSpaceId); } = useRoles(searchSpaceId);
const { mutateAsync: createRole } = useAtomValue(createRoleMutationAtom);
const handleCreateRole = useCallback(
async (roleData: CreateRoleRequest['data']): Promise<Role> => {
const request: CreateRoleRequest = {
search_space_id: searchSpaceId,
data: roleData,
};
return await createRole(request);
},
[createRole, searchSpaceId]
);
const { const {
data: roles = [], data: roles = [],
isLoading: rolesLoading, isLoading: rolesLoading,
@ -339,7 +353,7 @@ export default function TeamManagementPage() {
{activeTab === "roles" && hasPermission("roles:create") && ( {activeTab === "roles" && hasPermission("roles:create") && (
<CreateRoleDialog <CreateRoleDialog
groupedPermissions={groupedPermissions} groupedPermissions={groupedPermissions}
onCreateRole={createRole} onCreateRole={handleCreateRole}
/> />
)} )}
</div> </div>
@ -1168,7 +1182,7 @@ function CreateRoleDialog({
onCreateRole, onCreateRole,
}: { }: {
groupedPermissions: Record<string, { value: string; name: string; category: string }[]>; groupedPermissions: Record<string, { value: string; name: string; category: string }[]>;
onCreateRole: (data: RoleCreate) => Promise<Role>; onCreateRole: (data: CreateRoleRequest['data']) => Promise<Role>;
}) { }) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [creating, setCreating] = useState(false); const [creating, setCreating] = useState(false);
@ -1187,7 +1201,7 @@ function CreateRoleDialog({
try { try {
await onCreateRole({ await onCreateRole({
name: name.trim(), name: name.trim(),
description: description.trim() || undefined, description: description.trim() || null,
permissions: selectedPermissions, permissions: selectedPermissions,
is_default: isDefault, is_default: isDefault,
}); });