delete project and update projects

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<IDeleteProjectModal> = ({
 	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 (
 		<Modal
@@ -69,6 +67,7 @@ const DeleteProjectModal: FC<IDeleteProjectModal> = ({
 						})}
 						size='small'
 						onClick={handleRemoveProject}
+						loading={isPending}
 					/>
 					<Button
 						buttonType='texty-gray'
@@ -77,6 +76,7 @@ const DeleteProjectModal: FC<IDeleteProjectModal> = ({
 						})}
 						size='small'
 						onClick={() => setShowModal(false)}
+						disabled={isPending}
 					/>
 				</Flex>
 			</ModalContainer>

src/components/views/userProfile/projectsTab/ProfileProjectsTab.tsx

@@ -3,9 +3,8 @@ import { FC, useState } from 'react';
 import styled from 'styled-components';
 
 import { useIntl } from 'react-intl';
-import { keepPreviousData, useQuery } from '@tanstack/react-query';
-import { IUserProfileView, EOrderBy, IOrder } from '../UserProfile.view';
-import { EDirection } from '@/apollo/types/gqlEnums';
+import { useQuery } from '@tanstack/react-query';
+import { IUserProfileView } from '../UserProfile.view';
 import NothingToSee from '@/components/views/userProfile/NothingToSee';
 import Pagination from '@/components/Pagination';
 import ProjectCard from '@/components/project-card/ProjectCard';
@@ -15,24 +14,19 @@ import { useProfileContext } from '@/context/profile.context';
 import ProjectItem from './ProjectItem';
 import { getUserName } from '@/helpers/user';
 import { fetchUserProjects } from './services';
-
-const itemPerPage = 12;
+import { projectsOrder, userProjectsPerPage } from './constants';
 
 const ProfileProjectsTab: FC<IUserProfileView> = () => {
 	const [page, setPage] = useState(0);
-	const [order, setOrder] = useState<IOrder>({
-		by: EOrderBy.CreationDate,
-		direction: EDirection.DESC,
-	});
 	const { user, myAccount } = useProfileContext();
 	const { formatMessage } = useIntl();
 	const userName = getUserName(user);
 
-	const { data, isLoading } = useQuery({
-		queryKey: [user.id, 'projects', page, order],
-		queryFn: () => fetchUserProjects(user.id!, page, order),
-		placeholderData: keepPreviousData,
-		enabled: !!user, // only fetch if user exists
+	// Set staleTime: 0 to force refetch when invalidating queries
+	const { data, isLoading, refetch } = useQuery({
+		queryKey: ['dashboard-projects', user.id, page, projectsOrder],
+		queryFn: () => fetchUserProjects(user.id!, page, projectsOrder),
+		enabled: !!user.id,
 	});
 
 	return (
@@ -74,7 +68,11 @@ const ProfileProjectsTab: FC<IUserProfileView> = () => {
 				) : myAccount ? (
 					<Flex $flexDirection='column' gap='18px'>
 						{data?.projects.map(project => (
-							<ProjectItem project={project} key={project.id} />
+							<ProjectItem
+								project={project}
+								key={project.id}
+								refetchProjects={refetch}
+							/>
 						))}
 					</Flex>
 				) : (
@@ -92,7 +90,7 @@ const ProfileProjectsTab: FC<IUserProfileView> = () => {
 				currentPage={page}
 				totalCount={data?.totalCount || 0}
 				setPage={setPage}
-				itemPerPage={itemPerPage}
+				itemPerPage={userProjectsPerPage}
 			/>
 		</UserProfileTab>
 	);

src/components/views/userProfile/projectsTab/ProjectItem.tsx

@@ -26,6 +26,7 @@ import DeleteProjectModal from './DeleteProjectModal';
 
 interface IProjectItem {
 	project: IProject;
+	refetchProjects: () => void;
 }
 
 const ProjectItem: FC<IProjectItem> = props => {
@@ -142,6 +143,7 @@ const ProjectItem: FC<IProjectItem> = props => {
 				<DeleteProjectModal
 					setShowModal={setShowDeleteModal}
 					project={selectedProject}
+					refetchProjects={props.refetchProjects}
 				/>
 			)}
 		</ProjectContainer>