Merge pull request #1750 from RodriSanchez1/fix/loadingStateOnCopyRemoteBoards

Show loading state on remote boards copy

Author: RodriSanchez1

src/components/Board/Board.container.js

@@ -70,6 +70,7 @@ import {
   IS_BROWSING_FROM_APPLE_TOUCH,
   IS_BROWSING_FROM_SAFARI
 } from '../../constants';
+import LoadingIcon from '../UI/LoadingIcon';
 //import { isAndroid } from '../../cordova-util';
 
 const ogv = require('ogv');
@@ -1183,6 +1184,9 @@ export class BoardContainer extends Component {
   handleCopyRemoteBoard = async () => {
     const { intl, showNotification, history, switchBoard } = this.props;
     try {
+      this.setState({
+        isSaving: true
+      });
       const copiedBoard = await this.createBoardsRecursively(
         this.state.copyPublicBoard
       );
@@ -1194,15 +1198,18 @@ export class BoardContainer extends Component {
       const translatedBoard = this.translateBoard(copiedBoard);
       this.setState({
         translatedBoard,
-        isSaving: false,
         copyPublicBoard: false,
         blockedPrivateBoard: false
       });
       showNotification(intl.formatMessage(messages.boardCopiedSuccessfully));
     } catch (err) {
       console.log(err.message);
       showNotification(intl.formatMessage(messages.boardCopyError));
+      this.handleCloseDialog();
     }
+    this.setState({
+      isSaving: false
+    });
   };
 
   async createBoardsRecursively(board, records) {
@@ -1264,10 +1271,6 @@ export class BoardContainer extends Component {
 
     // Loggedin user?
     if ('name' in userData && 'email' in userData) {
-      this.setState({
-        isSaving: true
-      });
-
       try {
         const boardId = await updateApiObjectsNoChild(newBoard, true);
         newBoard = {
@@ -1290,7 +1293,7 @@ export class BoardContainer extends Component {
           const nextBoard = await API.getBoard(tile.loadBoard);
           await this.createBoardsRecursively(nextBoard, records);
         } catch (err) {
-          if (err.response.status === 404) {
+          if (!err.respose || err.response?.status === 404) {
             //look for this board in available boards
             const localBoard = boards.find(b => b.id === tile.loadBoard);
             if (localBoard) {
@@ -1348,7 +1351,9 @@ export class BoardContainer extends Component {
     });
   }
 
-  handleCloseDialog = () => {
+  handleCloseDialog = (event, reason) => {
+    const { isSaving } = this.state;
+    if (isSaving) return;
     this.setState({
       copyPublicBoard: false,
       blockedPrivateBoard: false
@@ -1611,16 +1616,25 @@ export class BoardContainer extends Component {
             </DialogContentText>
           </DialogContent>
           <DialogActions>
-            <Button onClick={this.handleCloseDialog} color="primary">
+            <Button
+              onClick={this.handleCloseDialog}
+              color="primary"
+              disabled={this.state.isSaving}
+            >
               {this.props.intl.formatMessage(messages.boardCopyCancel)}
             </Button>
             <PremiumFeature>
               <Button
                 onClick={this.handleCopyRemoteBoard}
                 color="primary"
                 variant="contained"
+                disabled={this.state.isSaving}
               >
-                {this.props.intl.formatMessage(messages.boardCopyAccept)}
+                {this.state.isSaving ? (
+                  <LoadingIcon />
+                ) : (
+                  this.props.intl.formatMessage(messages.boardCopyAccept)
+                )}
               </Button>
             </PremiumFeature>
           </DialogActions>

src/components/Communicator/CommunicatorDialog/CommunicatorDialog.container.js

@@ -293,20 +293,13 @@ class CommunicatorDialogContainer extends React.Component {
     // Loggedin user?
     if ('name' in userData && 'email' in userData) {
       try {
-        this.setState({
-          loading: true
-        });
         const boardId = await updateApiObjectsNoChild(newBoard, true);
         newBoard = {
           ...newBoard,
           id: boardId
         };
       } catch (err) {
         console.log(err.message);
-      } finally {
-        this.setState({
-          loading: false
-        });
       }
     }
 
@@ -321,7 +314,7 @@ class CommunicatorDialogContainer extends React.Component {
           const nextBoard = await API.getBoard(tile.loadBoard);
           await this.createBoardsRecursively(nextBoard, records);
         } catch (err) {
-          if (err.response.status === 404) {
+          if (!err.respose || err.response?.status === 404) {
             //look for this board in available boards
             const localBoard = availableBoards.find(
               b => b.id === tile.loadBoard

src/components/Communicator/CommunicatorDialog/CommunicatorDialogBoardItem.component.js

@@ -30,6 +30,7 @@ import TextField from '@material-ui/core/TextField';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import Slide from '@material-ui/core/Slide';
 import DialogContentText from '@material-ui/core/DialogContentText';
+import LoadingIcon from '../../UI/LoadingIcon';
 
 import IconButton from '../../UI/IconButton';
 import { TAB_INDEXES } from './CommunicatorDialog.constants';
@@ -73,6 +74,8 @@ class CommunicatorDialogBoardItem extends React.Component {
         ? props.board.description
         : ''
     };
+
+    this.handleDialogClose = this.handleDialogClose.bind(this);
   }
 
   openMenu(e) {
@@ -149,14 +152,14 @@ class CommunicatorDialogBoardItem extends React.Component {
 
   async handleBoardCopy(board) {
     this.setState({
-      openCopyBoard: false,
       loading: true
     });
     try {
       await this.props.copyBoard(board);
     } catch (err) {
     } finally {
       this.setState({
+        openCopyBoard: false,
         loading: false
       });
     }
@@ -839,7 +842,9 @@ class CommunicatorDialogBoardItem extends React.Component {
                   </Dialog>
 
                   <Dialog
-                    onClose={this.handleDialogClose.bind(this)}
+                    onClose={() => {
+                      if (!this.state.loading) this.handleDialogClose();
+                    }}
                     aria-labelledby="board-copy-dialog"
                     open={this.state.openCopyBoard}
                   >
@@ -858,6 +863,7 @@ class CommunicatorDialogBoardItem extends React.Component {
                       <Button
                         onClick={this.handleDialogClose.bind(this)}
                         color="primary"
+                        disabled={this.state.loading}
                       >
                         {intl.formatMessage(messages.close)}
                       </Button>
@@ -868,8 +874,13 @@ class CommunicatorDialogBoardItem extends React.Component {
                           }}
                           variant="contained"
                           color="primary"
+                          disabled={this.state.loading}
                         >
-                          {intl.formatMessage(messages.accept)}
+                          {this.state.loading ? (
+                            <LoadingIcon />
+                          ) : (
+                            intl.formatMessage(messages.accept)
+                          )}
                         </Button>
                       </PremiumFeature>
                     </DialogActions>