Merge pull request #474 from cboard-org/fix-board-title-edit

Fix board title edit

src/components/Board/Board.component.js

@@ -4,8 +4,12 @@ import keycode from 'keycode';
 import classNames from 'classnames';
 import CheckCircleIcon from '@material-ui/icons/CheckCircle';
 import { Scanner, Scannable } from 'react-scannable';
-import { FormattedMessage } from 'react-intl';
 import TextField from '@material-ui/core/TextField';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
 
 import Grid from '../Grid';
 import Symbol from './Symbol';
@@ -16,7 +20,6 @@ import Tile from './Tile';
 import EmptyBoard from './EmptyBoard';
 import CommunicatorToolbar from '../Communicator/CommunicatorToolbar';
 import { DISPLAY_SIZE_GRID_COLS } from '../Settings/Display/Display.constants';
-import FormDialog from '../UI/FormDialog';
 import NavigationButtons from '../NavigationButtons';
 import messages from './Board.messages';
 
@@ -124,17 +127,10 @@ export class Board extends Component {
     if (!this.props.userData.email) {
       return false;
     }
-
-    if (!this.isBoardTitleClicked) {
-      this.isBoardTitleClicked = setTimeout(() => {
-        this.isBoardTitleClicked = false;
-      }, 400);
-    } else {
-      this.setState({
-        openTitleDialog: true,
-        titleDialogValue: this.props.board.name
-      });
-    }
+    this.setState({
+      openTitleDialog: true,
+      titleDialogValue: this.props.board.name
+    });
   };
 
   handleBoardTitleChange = event => {
@@ -202,6 +198,7 @@ export class Board extends Component {
   render() {
     const {
       board,
+      intl,
       userData,
       disableBackButton,
       isLocked,
@@ -320,23 +317,36 @@ export class Board extends Component {
             toRootBoard={onRequestRootBoard}
           />
 
-          <FormDialog
+          <Dialog
             open={this.state.openTitleDialog}
-            title={<FormattedMessage {...messages.editTitle} />}
+            aria-labelledby="board-dialog-title"
             onSubmit={this.handleBoardTitleSubmit}
             onClose={this.handleBoardTitleClose}
           >
-            <TextField
-              autoFocus
-              margin="dense"
-              label={<FormattedMessage {...messages.boardTitle} />}
-              value={this.state.titleDialogValue}
-              type="text"
-              onChange={this.handleBoardTitleChange}
-              fullWidth
-              required
-            />
-          </FormDialog>
+            <DialogTitle id="board-dialog-title">
+              {intl.formatMessage(messages.editTitle)}
+            </DialogTitle>
+            <DialogContent>
+              <TextField
+                autoFocus
+                margin="dense"
+                id="board title"
+                label={intl.formatMessage(messages.boardTitle)}
+                type="text"
+                fullWidth
+                value={this.state.titleDialogValue}
+                onChange={this.handleBoardTitleChange}
+              />
+            </DialogContent>
+            <DialogActions>
+              <Button onClick={this.handleBoardTitleClose} color="primary">
+                {intl.formatMessage(messages.boardEditTitleCancel)}
+              </Button>
+              <Button onClick={this.handleBoardTitleSubmit} color="primary">
+                {intl.formatMessage(messages.boardEditTitleAccept)}
+              </Button>
+            </DialogActions>
+          </Dialog>
         </div>
       </Scanner>
     );

src/components/Board/Board.container.js

@@ -143,8 +143,8 @@ export class BoardContainer extends Component {
      */
     addBoardCommunicator: PropTypes.func.isRequired,
     /**
-   * Deletes a Board from the Active Communicator
-   */
+     * Deletes a Board from the Active Communicator
+     */
     deleteBoardCommunicator: PropTypes.func.isRequired
   };
 
@@ -168,14 +168,21 @@ export class BoardContainer extends Component {
       history
     } = this.props;
 
-    const { board, boards, communicator, changeBoard, addBoards, userData } = this.props;
+    const {
+      board,
+      boards,
+      communicator,
+      changeBoard,
+      addBoards,
+      userData
+    } = this.props;
 
     // Loggedin user?
     if ('name' in userData && 'email' in userData) {
       //synchronize communicator and boards with API
       this.props.getApiObjects();
     }
-    
+
     if (!board || (id && board.id !== id)) {
       let boardId = id || communicator.rootBoard;
       const boardExists = boards.find(b => b.id === boardId);
@@ -318,7 +325,14 @@ export class BoardContainer extends Component {
     audio.play();
   }
 
-  handleEditBoardTitle = async name => {};
+  handleEditBoardTitle = async name => {
+    const { board, updateBoard } = this.props;
+    const titledBoard = {
+      ...board,
+      name: name
+    };
+    updateBoard(titledBoard);
+  };
 
   handleEditClick = () => {
     this.setState({ tileEditorOpen: true });
@@ -437,7 +451,14 @@ export class BoardContainer extends Component {
   };
 
   handleDeleteClick = () => {
-    const { intl, deleteTiles, showNotification, board, userData, communicator } = this.props;
+    const {
+      intl,
+      deleteTiles,
+      showNotification,
+      board,
+      userData,
+      communicator
+    } = this.props;
     deleteTiles(this.state.selectedTileIds, board.id);
     this.setState({
       selectedTileIds: [],
@@ -449,15 +470,19 @@ export class BoardContainer extends Component {
     if ('name' in userData && 'email' in userData) {
       for (let i = 0; i < this.state.selectedTileIds.length; i++) {
         for (let j = 0; j < board.tiles.length; j++) {
-          if (board.tiles[j].id === this.state.selectedTileIds[i] &&
+          if (
+            board.tiles[j].id === this.state.selectedTileIds[i] &&
             board.tiles[j].hasOwnProperty('loadBoard') &&
             board.tiles[j].loadBoard &&
-            board.tiles[j].loadBoard.length > 14) {
+            board.tiles[j].loadBoard.length > 14
+          ) {
             if (board.tiles[j].loadBoard !== communicator.rootBoard) {
               this.props.deleteBoardCommunicator(board.tiles[j].loadBoard);
               this.props.deleteApiBoard(board.tiles[j].loadBoard);
             } else {
-              showNotification(intl.formatMessage(messages.rootBoardNotDeleted));
+              showNotification(
+                intl.formatMessage(messages.rootBoardNotDeleted)
+              );
             }
           }
         }
@@ -555,8 +580,7 @@ export class BoardContainer extends Component {
         this.props.addBoardCommunicator(childBoardData.id);
       }
       //check if we have to create a copy of the parent
-      if (board.isPublic &&
-        board.email !== userData.email) {
+      if (board.isPublic && board.email !== userData.email) {
         if (communicatorData.rootBoard === board.id) {
           parentBoardData.id = shortid.generate();
           this.props.createBoard(parentBoardData);
@@ -571,54 +595,53 @@ export class BoardContainer extends Component {
           this.props.updateBoard(parentBoardData);
           this.props.addBoardCommunicator(parentBoardData.id);
           if (parentBoardData.id.length < 15) {
-            createParentBoard = true; 
+            createParentBoard = true;
           }
-          //if it is a new communicator , need to set as root 
+          //if it is a new communicator , need to set as root
           if (createCommunicator === true) {
             communicatorData.rootBoard = parentBoardData.id;
             communicatorData.activeBoardId = parentBoardData.id;
-            this.props.upsertCommunicator(communicatorData);
+            this.props.upsertCommunicator(communicatorData);
           }
-        }
+        }
       }
       //api updates
-        if (!createChildBoard) {
-          this.props
-            .updateApiObjectsNoChild(
-              parentBoardData,
-              createCommunicator,
-              createParentBoard
-            )
-            .then(parentBoardId => {
-              if (createParentBoard) {
-                this.props.historyRemovePreviousBoard(parentBoardId);
-              }
-              this.props.history.replace(`/board/${parentBoardId}`);
-              this.setState({ isSaving: false });
-            })
-            .catch(e => {
-              this.setState({ isSaving: false });
-            });
-
-        } else {
-          this.props
-            .updateApiObjects(
-              childBoardData,
-              parentBoardData,
-              createCommunicator,
-              createParentBoard
-            )
-            .then(parentBoardId => {
-              if (createParentBoard) {
-                this.props.historyRemovePreviousBoard(parentBoardId);
-              }
-              this.props.history.replace(`/board/${parentBoardId}`);
-              this.setState({ isSaving: false });
-            })
-            .catch(e => {
-              this.setState({ isSaving: false });
-            });
-        }
+      if (!createChildBoard) {
+        this.props
+          .updateApiObjectsNoChild(
+            parentBoardData,
+            createCommunicator,
+            createParentBoard
+          )
+          .then(parentBoardId => {
+            if (createParentBoard) {
+              this.props.historyRemovePreviousBoard(parentBoardId);
+            }
+            this.props.history.replace(`/board/${parentBoardId}`);
+            this.setState({ isSaving: false });
+          })
+          .catch(e => {
+            this.setState({ isSaving: false });
+          });
+      } else {
+        this.props
+          .updateApiObjects(
+            childBoardData,
+            parentBoardData,
+            createCommunicator,
+            createParentBoard
+          )
+          .then(parentBoardId => {
+            if (createParentBoard) {
+              this.props.historyRemovePreviousBoard(parentBoardId);
+            }
+            this.props.history.replace(`/board/${parentBoardId}`);
+            this.setState({ isSaving: false });
+          })
+          .catch(e => {
+            this.setState({ isSaving: false });
+          });
+      }
     }
   };
 
@@ -678,6 +701,7 @@ export class BoardContainer extends Component {
       <Fragment>
         <Board
           board={this.state.translatedBoard}
+          intl={this.props.intl}
           scannerSettings={this.props.scannerSettings}
           deactivateScanner={this.props.deactivateScanner}
           disableBackButton={disableBackButton}

src/components/Board/Board.messages.js

@@ -8,7 +8,7 @@ export default defineMessages({
   rootBoardNotDeleted: {
     id: 'cboard.components.Board.rootBoardNotDeleted',
     defaultMessage: 'Root Board cannot be deleted'
-  }, 
+  },
   tilesCreated: {
     id: 'cboard.components.Board.tilesCreated',
     defaultMessage: 'Tiles created'
@@ -19,7 +19,8 @@ export default defineMessages({
   },
   boardNotSavedNotification: {
     id: 'cboard.components.Board.boardNotSavedNotification',
-    defaultMessage: 'There was an error updating your board on the cloud. Check your connection'
+    defaultMessage:
+      'There was an error updating your board on the cloud. Check your connection'
   },
   editTitle: {
     id: 'cboard.components.Board.editTitle',
@@ -29,6 +30,14 @@ export default defineMessages({
     id: 'cboard.components.Board.boardTitle',
     defaultMessage: 'Board Title'
   },
+  boardEditTitleCancel: {
+    id: 'cboard.components.Board.boardEditTitleCancel',
+    defaultMessage: 'Cancel'
+  },
+  boardEditTitleAccept: {
+    id: 'cboard.components.Board.boardEditTitleAccept',
+    defaultMessage: 'Accept'
+  },
   share: {
     id: 'cboard.components.Board.share',
     defaultMessage: 'Share'
@@ -59,5 +68,5 @@ export default defineMessages({
     id: 'cboard.components.Board.userProfileLocked',
     defaultMessage:
       'User Profile is locked, please unlock settings to see your user profile.'
-  },
+  }
 });

src/components/Board/__tests__/Board.component.test.js

@@ -10,11 +10,24 @@ jest.mock('../Board.messages', () => ({
   boardTitle: {
     id: 'cboard.components.Board.boardTitle',
     defaultMessage: 'Board Title'
+  },
+  boardEditTitleCancel: {
+    id: 'cboard.components.Board.boardEditTitleCancel',
+    defaultMessage: 'Cancel'
+  },
+  boardEditTitleAccept: {
+    id: 'cboard.components.Board.boardEditTitleAccept',
+    defaultMessage: 'Accept'
   }
 }));
 
+const intlMock = {
+  formatMessage: ({ id }) => id
+};
+
 it('renders without crashing', () => {
   const props = {
+    intl: intlMock,
     board: {
       id: 'root',
       name: 'home',