fix: Fix actions with members

Closes #737
2 years ago · 5a32b6327c
parent 8488105810
commit 5a32b6327c
7 changed files with 100 additions and 52 deletions
--- a/client/src/components/Memberships/ActionsStep.jsx
+++ b/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;
--- a/client/src/components/Memberships/Memberships.jsx
+++ b/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,
--- a/client/src/components/Memberships/MembershipsStep.jsx
+++ b/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,25 +29,26 @@ const MembershipsStep = React.memo(
    onDelete,
    onClose,
  }) => {
-    const [t] = useTranslation();
-
-    const [editingItem, setEditingItem] = useState();
+    const [step, openStep, handleBack] = useSteps();

-    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) {
+    if (step && step.type === StepTypes.EDIT) {
+      const currentItem = items.find((item) => item.userId === step.params.userId);
+
+      if (currentItem) {
        return (
-        <>
-          <Popup.Header onBack={() => setEditingItem(null)}>{t('common.memberInfo')}</Popup.Header>
-          <Popup.Content>
          <ActionsStep
-              membership={editingItem}
+            membership={currentItem}
            permissionsSelectStep={permissionsSelectStep}
+            title={actionsTitle}
            leaveButtonContent={leaveButtonContent}
            leaveConfirmationTitle={leaveConfirmationTitle}
            leaveConfirmationContent={leaveConfirmationContent}
@ -53,20 +59,24 @@ const MembershipsStep = React.memo(
            deleteConfirmationButtonContent={deleteConfirmationButtonContent}
            canEdit={canEdit}
            canLeave={canLeave}
-              onUpdate={onUpdate}
-              onDelete={onDelete}
+            onUpdate={(data) => onUpdate(currentItem.id, data)}
+            onDelete={() => onDelete(currentItem.id)}
+            onBack={handleBack}
            onClose={onClose}
          />
-          </Popup.Content>
-        </>
        );
      }

+      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,
 };

--- a/client/src/components/ProjectSettingsModal/ManagersPane.jsx
+++ b/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"
--- a/client/src/locales/en/core.js
+++ b/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',
--- a/client/src/locales/it/core.js
+++ b/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',
--- a/client/src/locales/pt/core.js
+++ b/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',