fix: Fix actions with members

Closes #737

client/src/components/Memberships/ActionsStep.jsx

@@ -3,6 +3,7 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button } from 'semantic-ui-react';
+import { Popup } from '../../lib/custom-ui';
 
 import { useSteps } from '../../hooks';
 import User from '../User';
@@ -19,6 +20,7 @@ const ActionsStep = React.memo(
   ({
     membership,
     permissionsSelectStep,
+    title,
     leaveButtonContent,
     leaveConfirmationTitle,
     leaveConfirmationContent,
@@ -31,6 +33,7 @@ const ActionsStep = React.memo(
     canLeave,
     onUpdate,
     onDelete,
+    onBack,
     onClose,
   }) => {
     const [t] = useTranslation();
@@ -53,6 +56,11 @@ const ActionsStep = React.memo(
       [onUpdate],
     );
 
+    const handleDeleteConfirm = useCallback(() => {
+      onDelete();
+      onClose();
+    }, [onDelete, onClose]);
+
     if (step) {
       switch (step.type) {
         case StepTypes.EDIT_PERMISSIONS: {
@@ -81,7 +89,7 @@ const ActionsStep = React.memo(
                   ? leaveConfirmationButtonContent
                   : deleteConfirmationButtonContent
               }
-              onConfirm={onDelete}
+              onConfirm={handleDeleteConfirm}
               onBack={handleBack}
             />
           );
@@ -89,7 +97,7 @@ const ActionsStep = React.memo(
       }
     }
 
-    return (
+    const contentNode = (
       <>
         <span className={styles.user}>
           <User name={membership.user.name} avatarUrl={membership.user.avatarUrl} size="large" />
@@ -125,12 +133,26 @@ const ActionsStep = React.memo(
             )}
       </>
     );
+
+    return onBack ? (
+      <>
+        <Popup.Header onBack={onBack}>
+          {t(title, {
+            context: 'title',
+          })}
+        </Popup.Header>
+        <Popup.Content>{contentNode}</Popup.Content>
+      </>
+    ) : (
+      contentNode
+    );
   },
 );
 
 ActionsStep.propTypes = {
   membership: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   permissionsSelectStep: PropTypes.elementType,
+  title: PropTypes.string,
   leaveButtonContent: PropTypes.string,
   leaveConfirmationTitle: PropTypes.string,
   leaveConfirmationContent: PropTypes.string,
@@ -143,11 +165,13 @@ ActionsStep.propTypes = {
   canLeave: PropTypes.bool.isRequired,
   onUpdate: PropTypes.func,
   onDelete: PropTypes.func.isRequired,
+  onBack: PropTypes.func,
   onClose: PropTypes.func.isRequired,
 };
 
 ActionsStep.defaultProps = {
   permissionsSelectStep: undefined,
+  title: 'common.memberActions',
   leaveButtonContent: 'action.leaveBoard',
   leaveConfirmationTitle: 'common.leaveBoard',
   leaveConfirmationContent: 'common.areYouSureYouWantToLeaveBoard',
@@ -157,6 +181,7 @@ ActionsStep.defaultProps = {
   deleteConfirmationContent: 'common.areYouSureYouWantToRemoveThisMemberFromBoard',
   deleteConfirmationButtonContent: 'action.removeMember',
   onUpdate: undefined,
+  onBack: undefined,
 };
 
 export default ActionsStep;

client/src/components/Memberships/Memberships.jsx

@@ -5,10 +5,10 @@ import { usePopup } from '../../lib/popup';
 
 import AddStep from './AddStep';
 import ActionsStep from './ActionsStep';
+import MembershipsStep from './MembershipsStep';
 import User from '../User';
 
 import styles from './Memberships.module.scss';
-import MembershipsStep from './MembershipsStep';
 
 const MAX_MEMBERS = 6;
 
@@ -17,7 +17,9 @@ const Memberships = React.memo(
     items,
     allUsers,
     permissionsSelectStep,
+    title,
     addTitle,
+    actionsTitle,
     leaveButtonContent,
     leaveConfirmationTitle,
     leaveConfirmationContent,
@@ -73,6 +75,8 @@ const Memberships = React.memo(
           <MembershipsPopup
             items={items}
             permissionsSelectStep={permissionsSelectStep}
+            title={title}
+            actionsTitle={actionsTitle}
             leaveButtonContent={leaveButtonContent}
             leaveConfirmationTitle={leaveConfirmationTitle}
             leaveConfirmationContent={leaveConfirmationContent}
@@ -87,7 +91,7 @@ const Memberships = React.memo(
             onDelete={onDelete}
           >
             <Button icon className={styles.addUser}>
-              + {remainMembersCount < 99 ? remainMembersCount : 99}
+              +{remainMembersCount < 99 ? remainMembersCount : 99}
             </Button>
           </MembershipsPopup>
         )}
@@ -113,7 +117,9 @@ Memberships.propTypes = {
   allUsers: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
   permissionsSelectStep: PropTypes.elementType,
+  title: PropTypes.string,
   addTitle: PropTypes.string,
+  actionsTitle: PropTypes.string,
   leaveButtonContent: PropTypes.string,
   leaveConfirmationTitle: PropTypes.string,
   leaveConfirmationContent: PropTypes.string,
@@ -131,7 +137,9 @@ Memberships.propTypes = {
 
 Memberships.defaultProps = {
   permissionsSelectStep: undefined,
+  title: undefined,
   addTitle: undefined,
+  actionsTitle: undefined,
   leaveButtonContent: undefined,
   leaveConfirmationTitle: undefined,
   leaveConfirmationContent: undefined,

client/src/components/Memberships/MembershipsStep.jsx

@@ -1,15 +1,20 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
 
-import BoardMembershipsStep from '../BoardMembershipsStep/BoardMembershipsStep';
+import { useSteps } from '../../hooks';
 import ActionsStep from './ActionsStep';
-import { Popup } from '../../lib/custom-ui';
+import BoardMembershipsStep from '../BoardMembershipsStep';
+
+const StepTypes = {
+  EDIT: 'EDIT',
+};
 
 const MembershipsStep = React.memo(
   ({
     items,
     permissionsSelectStep,
+    title,
+    actionsTitle,
     leaveButtonContent,
     leaveConfirmationTitle,
     leaveConfirmationContent,
@@ -24,49 +29,54 @@ const MembershipsStep = React.memo(
     onDelete,
     onClose,
   }) => {
-    const [t] = useTranslation();
+    const [step, openStep, handleBack] = useSteps();
 
-    const [editingItem, setEditingItem] = useState();
-
-    const handleUserClick = useCallback(
-      (id) => {
-        setEditingItem(items.find((item) => item.user.id === id));
+    const handleUserSelect = useCallback(
+      (userId) => {
+        openStep(StepTypes.EDIT, {
+          userId,
+        });
       },
-      [setEditingItem, items],
+      [openStep],
     );
 
-    if (editingItem) {
-      return (
-        <>
-          <Popup.Header onBack={() => setEditingItem(null)}>{t('common.memberInfo')}</Popup.Header>
-          <Popup.Content>
-            <ActionsStep
-              membership={editingItem}
-              permissionsSelectStep={permissionsSelectStep}
-              leaveButtonContent={leaveButtonContent}
-              leaveConfirmationTitle={leaveConfirmationTitle}
-              leaveConfirmationContent={leaveConfirmationContent}
-              leaveConfirmationButtonContent={leaveConfirmationButtonContent}
-              deleteButtonContent={deleteButtonContent}
-              deleteConfirmationTitle={deleteConfirmationTitle}
-              deleteConfirmationContent={deleteConfirmationContent}
-              deleteConfirmationButtonContent={deleteConfirmationButtonContent}
-              canEdit={canEdit}
-              canLeave={canLeave}
-              onUpdate={onUpdate}
-              onDelete={onDelete}
-              onClose={onClose}
-            />
-          </Popup.Content>
-        </>
-      );
+    if (step && step.type === StepTypes.EDIT) {
+      const currentItem = items.find((item) => item.userId === step.params.userId);
+
+      if (currentItem) {
+        return (
+          <ActionsStep
+            membership={currentItem}
+            permissionsSelectStep={permissionsSelectStep}
+            title={actionsTitle}
+            leaveButtonContent={leaveButtonContent}
+            leaveConfirmationTitle={leaveConfirmationTitle}
+            leaveConfirmationContent={leaveConfirmationContent}
+            leaveConfirmationButtonContent={leaveConfirmationButtonContent}
+            deleteButtonContent={deleteButtonContent}
+            deleteConfirmationTitle={deleteConfirmationTitle}
+            deleteConfirmationContent={deleteConfirmationContent}
+            deleteConfirmationButtonContent={deleteConfirmationButtonContent}
+            canEdit={canEdit}
+            canLeave={canLeave}
+            onUpdate={(data) => onUpdate(currentItem.id, data)}
+            onDelete={() => onDelete(currentItem.id)}
+            onBack={handleBack}
+            onClose={onClose}
+          />
+        );
+      }
+
+      openStep(null);
     }
 
     return (
+      // FIXME: hack
       <BoardMembershipsStep
         items={items}
         currentUserIds={[]}
-        onUserSelect={handleUserClick}
+        title={title}
+        onUserSelect={handleUserSelect}
         onUserDeselect={() => {}}
       />
     );
@@ -76,6 +86,8 @@ const MembershipsStep = React.memo(
 MembershipsStep.propTypes = {
   items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
   permissionsSelectStep: PropTypes.elementType,
+  title: PropTypes.string,
+  actionsTitle: PropTypes.string,
   leaveButtonContent: PropTypes.string,
   leaveConfirmationTitle: PropTypes.string,
   leaveConfirmationContent: PropTypes.string,
@@ -93,14 +105,16 @@ MembershipsStep.propTypes = {
 
 MembershipsStep.defaultProps = {
   permissionsSelectStep: undefined,
-  leaveButtonContent: 'action.leaveBoard',
-  leaveConfirmationTitle: 'common.leaveBoard',
-  leaveConfirmationContent: 'common.areYouSureYouWantToLeaveBoard',
-  leaveConfirmationButtonContent: 'action.leaveBoard',
-  deleteButtonContent: 'action.removeFromBoard',
-  deleteConfirmationTitle: 'common.removeMember',
-  deleteConfirmationContent: 'common.areYouSureYouWantToRemoveThisMemberFromBoard',
-  deleteConfirmationButtonContent: 'action.removeMember',
+  title: undefined,
+  actionsTitle: undefined,
+  leaveButtonContent: undefined,
+  leaveConfirmationTitle: undefined,
+  leaveConfirmationContent: undefined,
+  leaveConfirmationButtonContent: undefined,
+  deleteButtonContent: undefined,
+  deleteConfirmationTitle: undefined,
+  deleteConfirmationContent: undefined,
+  deleteConfirmationButtonContent: undefined,
   onUpdate: undefined,
 };
 

client/src/components/ProjectSettingsModal/ManagersPane.jsx

@@ -12,7 +12,9 @@ const ManagersPane = React.memo(({ items, allUsers, onCreate, onDelete }) => {
       <Memberships
         items={items}
         allUsers={allUsers}
+        title="common.managers"
         addTitle="common.addManager"
+        actionsTitle="common.managerActions"
         leaveButtonContent="action.leaveProject"
         leaveConfirmationTitle="common.leaveProject"
         leaveConfirmationContent="common.areYouSureYouWantToLeaveProject"

client/src/locales/en/core.js

@@ -109,8 +109,9 @@ export default {
       list: 'List',
       listActions_title: 'List Actions',
       managers: 'Managers',
-      memberInfo: 'Member Info',
+      managerActions_title: 'Manager Actions',
       members: 'Members',
+      memberActions_title: 'Member Actions',
       minutes: 'Minutes',
       moveCard_title: 'Move Card',
       name: 'Name',

client/src/locales/it/core.js

@@ -108,7 +108,6 @@ export default {
       list: 'Lista',
       listActions_title: 'Lista delle Azioni',
       managers: 'Managers',
-      memberInfo: 'Info membro',
       members: 'Membri',
       minutes: 'Minuti',
       moveCard_title: 'Sposta card',

client/src/locales/pt/core.js

@@ -111,7 +111,6 @@ export default {
       list: 'Lista',
       listActions_title: 'Ações da Lista',
       managers: 'Gerentes',
-      memberInfo: 'Informações do Membro',
       members: 'Membros',
       minutes: 'Minutos',
       moveCard_title: 'Mover Cartão',