Add leave project mutation and button in action cell of explore deep

page

app/views/ExploreDeepContent/ProjectContent/ActionCell/index.tsx

@@ -12,10 +12,16 @@ import { useModalState } from '#hooks/stateManagement';
 import {
     CancelJoinProjectMutation,
     CancelJoinProjectMutationVariables,
+    LeaveProjectMutation,
+    LeaveProjectMutationVariables,
 } from '#generated/types';
 
 import ProjectJoinModal from '#components/general/ProjectJoinModal';
 
+import { ObjectError, transformToFormError } from '#base/utils/errorTransform';
+import { removeNull } from '@togglecorp/toggle-form';
+
+import NonFieldError from '#components/NonFieldError';
 import styles from './styles.css';
 
 export interface Props {
@@ -31,6 +37,17 @@ export interface Props {
     variant?: ButtonProps<string>['variant'];
 }
 
+const LEAVE_PROJECT = gql`
+mutation LeaveProject($projectId: ID!) {
+  project(id: $projectId) {
+    leaveProject {
+      errors
+      ok
+    }
+  }
+}
+`;
+
 const CANCEL_JOIN_PROJECT = gql`
     mutation CancelJoinProject(
         $projectId: ID!,
@@ -92,19 +109,68 @@ function ActionCell(props: Props) {
         },
     );
 
+    const [
+        leaveProject,
+    ] = useMutation<LeaveProjectMutation, LeaveProjectMutationVariables>(
+        LEAVE_PROJECT,
+        {
+            onCompleted: (response) => {
+                const leaveProjectResponse = response?.project?.leaveProject;
+                if (!leaveProjectResponse) {
+                    return;
+                }
+                const {
+                    ok,
+                    errors,
+                } = leaveProjectResponse;
+
+                if (ok) {
+                    alert.show(
+                        'Project successfully left.',
+                        { variant: 'success' },
+                    );
+                    onMemberStatusChange();
+                } else if (errors) {
+                    const formError = transformToFormError(removeNull(errors) as ObjectError[]);
+                    alert.show(
+                        <NonFieldError
+                            className={styles.alertError}
+                            error={formError}
+                        />,
+                        { variant: 'error' },
+                    );
+                }
+            },
+            onError: (gqlError) => {
+                alert.show(
+                    gqlError.message ?? 'An error occurred while leaving a project.',
+                    { variant: 'error' },
+                );
+            },
+        },
+    );
+
+    const handleLeaveProject = useCallback(() => (
+        leaveProject({
+            variables: {
+                projectId,
+            },
+        })
+    ), [leaveProject, projectId]);
+
     const handleCancelJoinProjectClick = useCallback(() => {
         cancelJoinProject({
             variables: { projectId },
         });
     }, [projectId, cancelJoinProject]);
 
-    if (isMember || isRejected) {
+    if (isRejected) {
         return null;
     }
 
     return (
         <div className={_cs(styles.actionCell, className)}>
-            {!membershipPending ? (
+            {!isMember && !membershipPending && (
                 <Button
                     name={undefined}
                     onClick={showJoinModal}
@@ -114,7 +180,8 @@ function ActionCell(props: Props) {
                 >
                     Join
                 </Button>
-            ) : (
+            )}
+            {membershipPending && (
                 <ConfirmButton
                     name={undefined}
                     onConfirm={handleCancelJoinProjectClick}
@@ -126,6 +193,18 @@ function ActionCell(props: Props) {
                     Cancel Join
                 </ConfirmButton>
             )}
+            {isMember && (
+                <ConfirmButton
+                    name={undefined}
+                    onConfirm={handleLeaveProject}
+                    message="Are you sure you want to leave this project?"
+                    variant="secondary"
+                    spacing="compact"
+                >
+                    Leave Project
+                </ConfirmButton>
+
+            )}
             {projectJoinModalShown && (
                 <ProjectJoinModal
                     projectId={projectId}

app/views/ExploreDeepContent/ProjectContent/ActionCell/styles.css

@@ -1,3 +1,6 @@
+.alert-error {
+    color: var(--dui-color-white);
+}
 .action-cell {
     display: flex;
     justify-content: flex-end;

app/views/Home/ProjectItem/index.tsx

@@ -39,12 +39,17 @@ import {
     useAlert,
     QuickActionDropdownMenu,
     DropdownMenuItem,
+    useConfirmation,
 } from '@the-deep/deep-ui';
 import { useMutation, gql } from '@apollo/client';
+import { removeNull } from '@togglecorp/toggle-form';
 
+import _ts from '#ts';
 import SmartButtonLikeLink from '#base/components/SmartButtonLikeLink';
 import SmartQuickActionLink from '#base/components/SmartQuickActionLink';
+import { ObjectError, transformToFormError } from '#base/utils/errorTransform';
 import ProgressLine from '#components/ProgressLine';
+import NonFieldError from '#components/NonFieldError';
 import FrameworkImageButton from '#components/framework/FrameworkImageButton';
 import routes from '#base/configs/routes';
 
@@ -61,8 +66,6 @@ import {
     LeaveProjectMutationVariables,
 } from '#generated/types';
 
-import _ts from '#ts';
-
 import styles from './styles.css';
 
 const PIN_PROJECT = gql`
@@ -236,22 +239,34 @@ function ProjectItem(props: RecentProjectItemProps) {
         {
             onCompleted: (response) => {
                 const leaveProjectResponse = response?.project?.leaveProject;
-                if (leaveProjectResponse?.ok) {
+                if (!leaveProjectResponse) {
+                    return;
+                }
+                const {
+                    ok,
+                    errors,
+                } = leaveProjectResponse;
+
+                if (ok) {
                     onProjectPinChange();
                     alert.show(
                         'Project successfully left.',
                         { variant: 'success' },
                     );
-                } else {
+                } else if (errors) {
+                    const formError = transformToFormError(removeNull(errors) as ObjectError[]);
                     alert.show(
-                        'An error occured while leaving a project.',
+                        <NonFieldError
+                            className={styles.alertError}
+                            error={formError}
+                        />,
                         { variant: 'error' },
                     );
                 }
             },
-            onError: () => {
+            onError: (gqlError) => {
                 alert.show(
-                    'An error occured while leaving a project.',
+                    gqlError.message ?? 'An error occurred while leaving a project.',
                     { variant: 'error' },
                 );
             },
@@ -323,13 +338,24 @@ function ProjectItem(props: RecentProjectItemProps) {
         pinProject,
     ]);
 
-    const handleLeaveProject = useCallback((id: string) => (
-        leaveProject({
-            variables: {
-                projectId: id,
-            },
-        })
-    ), [leaveProject]);
+    const handleLeaveProject = useCallback((id: string | undefined) => {
+        if (id) {
+            leaveProject({
+                variables: {
+                    projectId: id,
+                },
+            });
+        }
+    }, [leaveProject]);
+
+    const [
+        modal,
+        onleaveProjectClick,
+    ] = useConfirmation<string>({
+        showConfirmationInitially: false,
+        onConfirm: handleLeaveProject,
+        message: 'Are you sure you want to leave this project?',
+    });
 
     if (isNotDefined(projectId)) {
         return null;
@@ -407,7 +433,7 @@ function ProjectItem(props: RecentProjectItemProps) {
                     >
                         <DropdownMenuItem
                             name={projectId}
-                            onClick={handleLeaveProject}
+                            onClick={onleaveProjectClick}
                         >
                             Leave Project
                         </DropdownMenuItem>
@@ -584,6 +610,7 @@ function ProjectItem(props: RecentProjectItemProps) {
                     </ResponsiveContainer>
                 </ContainerCard>
             </div>
+            {modal}
         </ContainerCard>
     );
 }

app/views/Home/ProjectItem/styles.css

@@ -110,3 +110,7 @@
         font-weight: var(--font-weight-bold);
     }
 }
+
+.alert-error {
+    color: var(--dui-color-white);
+}