diff --git a/src/components/views/userProfile/projectsTab/DeleteProjectModal.tsx b/src/components/views/userProfile/projectsTab/DeleteProjectModal.tsx index e6d22f2f4..903052f2d 100644 --- a/src/components/views/userProfile/projectsTab/DeleteProjectModal.tsx +++ b/src/components/views/userProfile/projectsTab/DeleteProjectModal.tsx @@ -1,46 +1,44 @@ import styled from 'styled-components'; -import { useCallback, type FC } from 'react'; +import { type FC } from 'react'; import { Button, Flex, IconTrash32, P } from '@giveth/ui-design-system'; import { useIntl } from 'react-intl'; -import { useMutation, useQueryClient } from '@tanstack/react-query'; +import { useMutation } from '@tanstack/react-query'; import { IProject } from '@/apollo/types/types'; import { Modal } from '@/components/modals/Modal'; import { IModal } from '@/types/common'; import { useModalAnimation } from '@/hooks/useModalAnimation'; import { client } from '@/apollo/apolloClient'; import { DELETE_DRAFT_PROJECT } from '@/apollo/gql/gqlProjects'; -import { useProfileContext } from '@/context/profile.context'; interface IDeleteProjectModal extends IModal { project: IProject; + refetchProjects: () => void; } const DeleteProjectModal: FC = ({ setShowModal, project, + refetchProjects, }) => { const { formatMessage } = useIntl(); const { isAnimating, closeModal } = useModalAnimation(setShowModal); - const queryClient = useQueryClient(); - const { user } = useProfileContext(); - const deleteProjectMutation = useMutation({ - mutationFn: (projectId: string) => + const { mutate: deleteProject, isPending } = useMutation({ + mutationFn: (projectId: number) => client.mutate({ mutation: DELETE_DRAFT_PROJECT, - variables: { id: projectId }, + variables: { projectId: projectId }, }), // On success, refetch the user's projects - onSuccess: () => { - queryClient.invalidateQueries({ - queryKey: [user.id, 'projects'], - }); + onSuccess: async () => { + const res = await refetchProjects(); + closeModal(); }, }); - const handleRemoveProject = useCallback(async () => { - deleteProjectMutation.mutate(project.id); - }, [deleteProjectMutation, project.id]); + const handleRemoveProject = async () => { + deleteProject(parseFloat(project.id)); + }; return ( = ({ })} size='small' onClick={handleRemoveProject} + loading={isPending} />