refactor: use useProjectMemberActions in ProjectDetails

Author: haydnli-shopify

frontend/src/pages/Project/Details/index.tsx

@@ -9,18 +9,17 @@ import { selectUserData } from 'App/slice';
 import { ROUTES } from 'routes';
 import { useGetProjectQuery, useAddProjectMemberMutation, useRemoveProjectMemberMutation } from 'services/project';
 import { getProjectRoleByUserName } from '../utils';
+import { useProjectMemberActions } from '../hooks/useProjectMemberActions';
 
 export const ProjectDetails: React.FC = () => {
     const { t } = useTranslation();
     const params = useParams();
     const navigate = useNavigate();
     const paramProjectName = params.projectName ?? '';
-    const [pushNotification] = useNotifications();
     const userData = useAppSelector(selectUserData);
+    const { handleJoinProject, handleLeaveProject, isMemberActionLoading } = useProjectMemberActions();
 
     const { data: project } = useGetProjectQuery({ name: paramProjectName });
-    const [addMember, { isLoading: isAdding }] = useAddProjectMemberMutation();
-    const [removeMember, { isLoading: isRemoving }] = useRemoveProjectMemberMutation();
 
     const currentUserRole = useMemo(() => {
         if (!userData?.username || !project) return null;
@@ -30,55 +29,6 @@ export const ProjectDetails: React.FC = () => {
     const isProjectOwner = userData?.username === project?.owner.username;
 
     const isMember = currentUserRole !== null;
-    const isMemberActionLoading = isAdding || isRemoving;
-
-    const handleJoinProject = async () => {
-        if (!userData?.username || !project) return;
-        
-        try {
-            await addMember({
-                project_name: project.project_name,
-                username: userData.username,
-                project_role: 'user',
-            }).unwrap();
-            
-            pushNotification({
-                type: 'success',
-                content: t('projects.join_success'),
-            });
-        } catch (error) {
-            console.error('Failed to join project:', error);
-            pushNotification({
-                type: 'error',
-                content: t('projects.join_error'),
-            });
-        }
-    };
-
-    const handleLeaveProject = async () => {
-        if (!userData?.username || !project) return;
-        
-        try {
-            await removeMember({
-                project_name: project.project_name,
-                username: userData.username,
-            }).unwrap();
-            
-            pushNotification({
-                type: 'success',
-                content: t('projects.leave_success'),
-            });
-            
-            // Redirect to project list after successfully leaving
-            navigate(ROUTES.PROJECT.LIST);
-        } catch (error) {
-            console.error('Failed to leave project:', error);
-            pushNotification({
-                type: 'error',
-                content: t('projects.leave_error'),
-            });
-        }
-    };
 
     const renderJoinLeaveButton = () => {
         // Only show button if user is authenticated and project is loaded
@@ -87,7 +37,7 @@ export const ProjectDetails: React.FC = () => {
         if (!isMember) {
             return (
                 <Button
-                    onClick={handleJoinProject}
+                    onClick={() => handleJoinProject(project.project_name, userData.username!)}
                     disabled={isMemberActionLoading}
                     variant="primary"
                 >
@@ -100,7 +50,7 @@ export const ProjectDetails: React.FC = () => {
 
             return (
                 <Button
-                    onClick={handleLeaveProject}
+                    onClick={() => handleLeaveProject(project.project_name, userData.username!)}
                     disabled={isMemberActionLoading || !canLeave}
                     variant="normal"
                 >