Merge pull request #5992 from ericrosenbaum/transfer-modal6

More transfer host modal fixes

src/views/studio/lib/studio-member-actions.js

@@ -45,7 +45,7 @@ const normalizeError = (err, body, res) => {
     return null;
 };
 
-const loadManagers = (reloadAll = false) => ((dispatch, getState) => {
+const loadManagers = (reloadAll = false) => ((dispatch, getState) => new Promise((resolve, reject) => {
     const state = getState();
     const studioId = selectStudioId(state);
     const managerCount = reloadAll ? 0 : managers.selector(state).items.length;
@@ -55,11 +55,15 @@ const loadManagers = (reloadAll = false) => ((dispatch, getState) => {
     };
     api(withAdmin(opts, state), (err, body, res) => {
         const error = normalizeError(err, body, res);
-        if (error) return dispatch(managers.actions.error(error));
+        if (error) {
+            dispatch(managers.actions.error(error));
+            return reject(error);
+        }
         if (reloadAll) dispatch(managers.actions.clear());
         dispatch(managers.actions.append(body, body.length === PER_PAGE_LIMIT));
+        return resolve();
     });
-});
+}));
 
 const loadCurators = () => ((dispatch, getState) => {
     const state = getState();

src/views/studio/modals/transfer-host-confirmation.jsx

@@ -27,10 +27,17 @@ const TransferHostConfirmation = ({
     hostId,
     selectedId
 }) => {
-    const currentHostUsername = items.find(item => item.id === hostId).username;
-    const currentHostImage = items.find(item => item.id === hostId).profile.images['90x90'];
-    const newHostUsername = items.find(item => item.id === selectedId).username;
-    const newHostImage = items.find(item => item.id === selectedId).profile.images['90x90'];
+    // Initialize host info so it does not get updated after we reload the manager list
+    const [hostInfo] = useState(() => {
+        const currentHostItem = items.find(item => item.id === hostId);
+        const newHostItem = items.find(item => item.id === selectedId);
+        return {
+            currentHostUsername: currentHostItem.username,
+            currentHostImage: currentHostItem.profile.images['90x90'],
+            newHostUsername: newHostItem.username,
+            newHostImage: newHostItem.profile.images['90x90']
+        };
+    });
     const [passwordInputValue, setPasswordInputValue] = useState('');
     const [submitting, setSubmitting] = useState(false);
     const [validationError, setValidationError] = useState(null);
@@ -46,13 +53,13 @@ const TransferHostConfirmation = ({
 
     const handleSubmit = () => {
         setSubmitting(true);
-        handleTransferHost(passwordInputValue, newHostUsername, selectedId)
+        handleTransferHost(passwordInputValue, hostInfo.newHostUsername, selectedId)
+            .then(() => handleLoadManagers(true)) // reload the list of managers, to get them in the correct order
             .then(() => {
                 handleClose();
-                handleLoadManagers(true); // reload the list of managers, to get them in the correct order
                 successAlert({
                     id: 'studio.alertTransfer',
-                    values: {name: newHostUsername}
+                    values: {name: hostInfo.newHostUsername}
                 });
             })
             .catch(e => {
@@ -78,7 +85,7 @@ const TransferHostConfirmation = ({
     return (
         <ModalInnerContent>
             <div className="transfer-outcome">
-                <div>
+                <div className="transfer-outcome-tile-container">
                     <div className="transfer-outcome-label">
                         <FormattedMessage id="studio.transfer.currentHost" />
                     </div>
@@ -86,8 +93,8 @@ const TransferHostConfirmation = ({
                         className="transfer-outcome-tile"
                         key={hostId}
                         id={hostId}
-                        image={currentHostImage}
-                        username={currentHostUsername}
+                        image={hostInfo.currentHostImage}
+                        username={hostInfo.currentHostUsername}
                         isCreator={false}
                     />
                 </div>
@@ -95,7 +102,7 @@ const TransferHostConfirmation = ({
                     className="transfer-outcome-arrow"
                     src="/svgs/studio/r-arrow.svg"
                 />
-                <div>
+                <div className="transfer-outcome-tile-container">
                     <div className="transfer-outcome-label">
                         <FormattedMessage id="studio.transfer.newHost" />
                     </div>
@@ -103,8 +110,8 @@ const TransferHostConfirmation = ({
                         className="transfer-outcome-tile"
                         key={selectedId}
                         id={selectedId}
-                        image={newHostImage}
-                        username={newHostUsername}
+                        image={hostInfo.newHostImage}
+                        username={hostInfo.newHostUsername}
                         isCreator={false}
                     />
                 </div>

src/views/studio/modals/transfer-host-modal.scss

@@ -150,7 +150,7 @@
         display: flex;
         align-items: center;
         margin-bottom: 1rem;
-        height: 4rem;
+        height: 3.5rem;
     }
 
     .transfer-password-validation {
@@ -173,8 +173,11 @@
         display: flex;
     }
 
+    .transfer-outcome-tile-container {
+        flex-basis: 220px;
+    }
+
     .transfer-outcome-tile {
-        width: 220px;
         box-shadow: 0px 3px 5px $box-shadow-light-gray;
     }
 
@@ -188,4 +191,23 @@
         width: 40px;
         margin: auto 3rem 1rem 3rem;
     }
+
+    @media #{$intermediate-and-smaller} {
+        .transfer-password-row {
+            display: inline;
+            height: unset;
+        }
+        .transfer-password-validation {
+            margin-left: 2rem;
+            margin-top: 1rem;
+            transform: unset;
+        }
+        .transfer-forgot-link {
+            margin-top: 1rem;
+            margin-bottom: 1rem;
+        }
+        .transfer-outcome-arrow {
+            margin: auto 1.5rem 1rem 1.5rem;
+        }
+    }
 }
\ No newline at end of file

src/views/studio/modals/transfer-host-selection.jsx

@@ -111,6 +111,6 @@ export default connect(
         ...managers.selector(state)
     }),
     {
-        onLoadMore: loadManagers
+        onLoadMore: () => loadManagers()
     }
 )(TransferHostSelection);

src/views/studio/studio-managers.jsx

@@ -151,6 +151,6 @@ export default connect(
         ...managers.selector(state)
     }),
     {
-        onLoadMore: loadManagers
+        onLoadMore: () => loadManagers()
     }
 )(StudioManagers);