From 02681138f7102c3a56e63ba4db39c79b20730979 Mon Sep 17 00:00:00 2001
From: RodriSanchez1 <rodri.sanchez1998@gmail.com>
Date: Tue, 7 Sep 2021 16:00:32 -0300
Subject: [PATCH 01/10] First commit

---
 package.json                                  |   2 +-
 public/index.html                             |   1 +
 .../Board/TileEditor/TileEditor.component.js  |  59 ++++++++-
 .../Board/TileEditor/TileEditor.css           |   6 +
 .../UI/InputImage/InputImage.component.js     | 122 +++++++++++++++---
 5 files changed, 164 insertions(+), 26 deletions(-)
diff --git a/package.json b/package.json
index 50599a3ff..e801a4aaa 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "tts",
     "text-to-speech"
   ],
-  "homepage": "https://app.cboard.io",
+  "homepage": ".",
   "private": false,
   "license": "GPL-3.0-only",
   "dependencies": {
diff --git a/public/index.html b/public/index.html
index ca70e77df..8af861b23 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,6 +3,7 @@
 
 <head>
   <meta charset="utf-8">
+  <script src="cordova.js"></script>
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
   <meta http-equiv="Content-Security-Policy" content="
     default-src 'self'
diff --git a/src/components/Board/TileEditor/TileEditor.component.js b/src/components/Board/TileEditor/TileEditor.component.js
index 9b80cdec0..453662737 100644
--- a/src/components/Board/TileEditor/TileEditor.component.js
+++ b/src/components/Board/TileEditor/TileEditor.component.js
@@ -30,6 +30,8 @@ import IconButton from '../../UI/IconButton';
 import ColorSelect from '../../UI/ColorSelect';
 import VoiceRecorder from '../../VoiceRecorder';
 import './TileEditor.css';
+import RotateRightIcon from '@material-ui/icons/RotateRight';
+import RotateLeftIcon from '@material-ui/icons/RotateLeft';
 
 export class TileEditor extends Component {
   static propTypes = {
@@ -91,7 +93,9 @@ export class TileEditor extends Component {
       isSymbolSearchOpen: false,
       selectedBackgroundColor: '',
       tile: this.defaultTile,
-      linkedBoard: ''
+      linkedBoard: '',
+      imageUploaded: false,
+      rotateDeg: 0
     };
   }
 
@@ -141,7 +145,9 @@ export class TileEditor extends Component {
     this.setState({
       activeStep: 0,
       selectedBackgroundColor: '',
-      tile: this.defaultTile
+      tile: this.defaultTile,
+      imageUploaded: false,
+      rotateDeg: 0
     });
 
     if (this.editingTile()) {
@@ -163,12 +169,15 @@ export class TileEditor extends Component {
     this.setState({
       activeStep: 0,
       selectedBackgroundColor: '',
-      tile: this.defaultTile
+      tile: this.defaultTile,
+      imageUploaded: false,
+      rotateDeg: 0
     });
     onClose();
   };
 
   handleInputImageChange = image => {
+    this.setState({ imageUploaded: true });
     this.updateTileProperty('image', image);
   };
 
@@ -218,15 +227,18 @@ export class TileEditor extends Component {
   handleBack = event => {
     this.setState({ activeStep: this.state.activeStep - 1 });
     this.setState({ selectedBackgroundColor: '', linkedBoard: '' });
+    this.setState({ imageUploaded: false, rotateDeg: 0 });
   };
 
   handleNext = event => {
     this.setState({ activeStep: this.state.activeStep + 1 });
     this.setState({ selectedBackgroundColor: '', linkedBoard: '' });
+    this.setState({ imageUploaded: false, rotateDeg: 0 });
   };
 
   handleSearchClick = event => {
     this.setState({ isSymbolSearchOpen: true });
+    this.resetRotation();
   };
 
   handleColorChange = event => {
@@ -262,9 +274,25 @@ export class TileEditor extends Component {
     }
   };
 
+  handleOnClickRotationRigth = () => {
+    let actualPosition = this.state.rotateDeg;
+    actualPosition === 270
+      ? this.setState({ rotateDeg: 0 })
+      : this.setState({ rotateDeg: actualPosition + 90 });
+  };
+  handleOnClickRotationLeft = () => {
+    let actualPosition = this.state.rotateDeg;
+    actualPosition === 0
+      ? this.setState({ rotateDeg: 270 })
+      : this.setState({ rotateDeg: actualPosition - 90 });
+  };
+
+  resetRotation = () => {
+    this.setState({ imageUploaded: false, rotateDeg: 0 });
+  };
+
   render() {
     const { open, intl, boards } = this.props;
-
     const currentLabel = this.currentTileProp('labelKey')
       ? intl.formatMessage({ id: this.currentTileProp('labelKey') })
       : this.currentTileProp('label');
@@ -343,6 +371,22 @@ export class TileEditor extends Component {
                         <Symbol image={tileInView.image} label={currentLabel} />
                       </Tile>
                     </div>
+                    {this.state.imageUploaded && (
+                      <div className="TileEditor__rotateimage">
+                        <IconButton
+                          label={intl.formatMessage(messages.symbolSearch)}
+                          onClick={this.handleOnClickRotationLeft}
+                        >
+                          <RotateLeftIcon />
+                        </IconButton>
+                        <IconButton
+                          label={intl.formatMessage(messages.symbolSearch)}
+                          onClick={this.handleOnClickRotationRigth}
+                        >
+                          <RotateRightIcon />
+                        </IconButton>
+                      </div>
+                    )}
                     <Button
                       variant="contained"
                       color="primary"
@@ -352,7 +396,12 @@ export class TileEditor extends Component {
                       {intl.formatMessage(messages.symbols)}
                     </Button>
                     <div className="TileEditor__input-image">
-                      <InputImage onChange={this.handleInputImageChange} />
+                      <InputImage
+                        onChange={this.handleInputImageChange}
+                        rotateDeg={this.state.rotateDeg}
+                        imageUploaded={this.state.imageUploaded}
+                        resetRotation={this.resetRotation}
+                      />
                     </div>
                   </div>
                   <div className="TileEditor__form-fields">
diff --git a/src/components/Board/TileEditor/TileEditor.css b/src/components/Board/TileEditor/TileEditor.css
index 76ce606f4..15617b349 100644
--- a/src/components/Board/TileEditor/TileEditor.css
+++ b/src/components/Board/TileEditor/TileEditor.css
@@ -76,3 +76,9 @@
 .TileEditor__radiogroup__formcontrollabel {
   margin-top: 5px;
 }
+
+.TileEditor__rotateimage {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 2px;
+}
diff --git a/src/components/UI/InputImage/InputImage.component.js b/src/components/UI/InputImage/InputImage.component.js
index 687c12921..cbb3b5368 100644
--- a/src/components/UI/InputImage/InputImage.component.js
+++ b/src/components/UI/InputImage/InputImage.component.js
@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from 'react-intl';
 import {
@@ -15,7 +15,7 @@ import API from '../../../api';
 import messages from './InputImage.messages';
 import './InputImage.css';
 
-class InputImage extends PureComponent {
+class InputImage extends Component {
   static propTypes = {
     /**
      * @ignore
@@ -25,23 +25,26 @@ class InputImage extends PureComponent {
     /**
      * Callback fired when input changes
      */
-    onChange: PropTypes.func.isRequired
+    onChange: PropTypes.func.isRequired,
+    rotateDeg: PropTypes.number,
+    image: PropTypes.bool,
+    resetRotation: PropTypes.func.isRequired
   };
 
+  componentDidUpdate(prevProps) {
+    if (
+      prevProps.rotateDeg !== this.props.rotateDeg &&
+      this.props.imageUploaded
+    ) {
+      this.handleFile(this.state.imgFile);
+    }
+  }
+
   state = {
-    loading: false
+    loading: false,
+    imgFile: null
   };
 
-  blobToBase64(blob) {
-    const reader = new FileReader();
-
-    reader.onload = () => {
-      this.props.onChange(reader.result);
-    };
-
-    reader.readAsDataURL(blob);
-  }
-
   async resizeImage(
     file,
     config = {
@@ -58,41 +61,120 @@ class InputImage extends PureComponent {
   }
 
   handleChange = async event => {
-    const { onChange, user } = this.props;
+    this.props.resetRotation();
     const file = event.target.files[0];
+    this.setState({
+      imgFile: file
+    });
+    this.handleFile(file);
+  };
+
+  handleFile = async file => {
+    const { onChange, user } = this.props;
     const resizedImage = await this.resizeImage(file);
+    const rotatedImage = await this.drawRotated(
+      resizedImage,
+      this.props.rotateDeg
+    );
     // Loggedin user?
     if (user) {
       this.setState({
         loading: true
       });
       try {
-        const imageUrl = await API.uploadFile(resizedImage, file.name);
+        const imageUrl = await API.uploadFile(rotatedImage, file.name);
         onChange(imageUrl);
       } catch (error) {
-        this.saveLocalImage(file.name, resizedImage);
+        this.saveLocalImage(file.name, rotatedImage);
       } finally {
         this.setState({
           loading: false
         });
       }
     } else {
-      this.saveLocalImage(file.name, resizedImage);
+      this.saveLocalImage(file.name, rotatedImage);
     }
   };
 
+  drawRotated(blob, degrees) {
+    return new Promise((resolve, reject) => {
+      var image = new Image();
+      var urlCreator = window.URL || window.webkitURL;
+      var imageUrl = urlCreator.createObjectURL(blob);
+      image.src = imageUrl;
+      image.onload = () => {
+        var canvas = document.createElement('canvas');
+        var ctx = canvas.getContext('2d');
+        canvas.style.width = '20%';
+
+        if (degrees === 90 || degrees === 270) {
+          canvas.width = image.height;
+          canvas.height = image.width;
+        } else {
+          canvas.width = image.width;
+          canvas.height = image.height;
+        }
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        if (degrees === 90 || degrees === 270) {
+          ctx.translate(image.height / 2, image.width / 2);
+        } else {
+          ctx.translate(image.width / 2, image.height / 2);
+        }
+        ctx.rotate((degrees * Math.PI) / 180);
+        ctx.drawImage(image, -image.width / 2, -image.height / 2);
+        //console.log(image)
+        const imgRotated = canvas.toDataURL('image/png');
+        var imgFinal = this.dataURItoBlob(imgRotated);
+        resolve(imgFinal);
+      };
+    });
+  }
+
+  dataURItoBlob(dataURI) {
+    // convert base64/URLEncoded data component to raw binary data held in a string
+    var byteString;
+    if (dataURI.split(',')[0].indexOf('base64') >= 0)
+      byteString = atob(dataURI.split(',')[1]);
+    else byteString = unescape(dataURI.split(',')[1]);
+    // separate out the mime component
+    var mimeString = dataURI
+      .split(',')[0]
+      .split(':')[1]
+      .split(';')[0];
+    // write the bytes of the string to a typed array
+    var ia = new Uint8Array(byteString.length);
+    for (var i = 0; i < byteString.length; i++) {
+      ia[i] = byteString.charCodeAt(i);
+    }
+    return new Blob([ia], { type: mimeString });
+  }
+
   saveLocalImage = async (fileName, data) => {
     const { onChange } = this.props;
     if (isAndroid()) {
       const filePath = '/Android/data/com.unicef.cboard/files/' + fileName;
       const fEntry = await writeCvaFile(filePath, data);
-      onChange(fEntry.nativeURL);
+      console.log(fEntry);
+      var timestamp = new Date().getTime();
+      var queryString = fEntry.nativeURL + '?t=' + timestamp; //with timestamp the image will be loaded every time you rotate
+      onChange(queryString);
     } else {
-      const imageBase64 = this.blobToBase64(data);
+      // console.log(data)
+      const imageBase64 = await this.blobToBase64(data);
       onChange(imageBase64);
     }
   };
 
+  blobToBase64(blob) {
+    return new Promise(resolve => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        resolve(reader.result);
+      };
+      reader.readAsDataURL(blob);
+    });
+  }
+
   render() {
     const { intl } = this.props;
     if (isCordova()) {

From ecfe6a877e4fb5ff77c6fb6592ccbf5a8d0f8004 Mon Sep 17 00:00:00 2001
From: RodriSanchez1 <rodri.sanchez1998@gmail.com>
Date: Mon, 13 Sep 2021 13:11:45 -0300
Subject: [PATCH 02/10] wip

---
 .../Board/TileEditor/TileEditor.component.js  | 123 +++++++++++++++---
 .../Board/TileEditor/TileEditor.messages.js   |   8 ++
 .../UI/InputImage/InputImage.component.js     |  73 ++++++-----
 3 files changed, 154 insertions(+), 50 deletions(-)

diff --git a/src/components/Board/TileEditor/TileEditor.component.js b/src/components/Board/TileEditor/TileEditor.component.js
index 453662737..724163770 100644
--- a/src/components/Board/TileEditor/TileEditor.component.js
+++ b/src/components/Board/TileEditor/TileEditor.component.js
@@ -32,6 +32,8 @@ import VoiceRecorder from '../../VoiceRecorder';
 import './TileEditor.css';
 import RotateRightIcon from '@material-ui/icons/RotateRight';
 import RotateLeftIcon from '@material-ui/icons/RotateLeft';
+import API from '../../../api';
+import { isAndroid, writeCvaFile } from '../../../cordova-util';
 
 export class TileEditor extends Component {
   static propTypes = {
@@ -94,8 +96,10 @@ export class TileEditor extends Component {
       selectedBackgroundColor: '',
       tile: this.defaultTile,
       linkedBoard: '',
-      imageUploaded: false,
-      rotateDeg: 0
+      isImageUploaded: false,
+      rotateDeg: 0,
+      savedImage: null,
+      fileName: ''
     };
   }
 
@@ -139,23 +143,40 @@ export class TileEditor extends Component {
     }
   }
 
-  handleSubmit = () => {
+  handleSubmit = async () => {
     const { onEditSubmit, onAddSubmit } = this.props;
 
     this.setState({
       activeStep: 0,
       selectedBackgroundColor: '',
       tile: this.defaultTile,
-      imageUploaded: false,
-      rotateDeg: 0
+      isImageUploaded: false,
+      rotateDeg: 0,
+      savedImage: null,
+      fileName: ''
     });
-
     if (this.editingTile()) {
+      this.props.editingTiles.forEach((editedTile, index) =>
+        console.log(editedTile.image !== this.state.editingTiles[index].image)
+      );
+
+      if (
+        this.state.editingTiles[0].image !== this.props.editingTiles[0].image
+      ) {
+        console.log('logrado');
+      }
+
       onEditSubmit(this.state.editingTiles);
     } else {
       const tileToAdd = this.state.tile;
-      const selectedBackgroundColor = this.state.selectedBackgroundColor;
+      // console.log("hola", tileToAdd)
+
+      const isImageUploaded = this.state.isImageUploaded;
+      if (isImageUploaded) {
+        tileToAdd.image = await this.updateTileImgURL();
+      }
 
+      const selectedBackgroundColor = this.state.selectedBackgroundColor;
       if (selectedBackgroundColor) {
         tileToAdd.backgroundColor = selectedBackgroundColor;
       }
@@ -163,6 +184,12 @@ export class TileEditor extends Component {
     }
   };
 
+  updateTileImgURL = async () => {
+    const newUrl = await this.saveImageInApi();
+    console.log('newUrl', typeof newUrl);
+    return newUrl;
+  };
+
   handleCancel = () => {
     const { onClose } = this.props;
 
@@ -170,15 +197,70 @@ export class TileEditor extends Component {
       activeStep: 0,
       selectedBackgroundColor: '',
       tile: this.defaultTile,
-      imageUploaded: false,
-      rotateDeg: 0
+      isImageUploaded: false,
+      rotateDeg: 0,
+      savedImage: null,
+      fileName: ''
     });
     onClose();
   };
 
-  handleInputImageChange = image => {
-    this.setState({ imageUploaded: true });
+  async saveImageInApi() {
+    //const { userData } = this.props;
+    const { savedImage, fileName } = this.state;
+    const blob = this.dataURItoBlob(savedImage);
+    // const user = userData.email ? userData : null;
+    // if (user) {
+    // this.setState({
+    //   loading: true
+    // });
+    try {
+      const imageUrl = 'holaURL'; //await API.uploadFile(blob, fileName);
+      console.log('imagen guardada en servidor', imageUrl);
+      return imageUrl;
+    } catch (error) {
+      console.log('imagen no guardad en servidor');
+      console.log(fileName);
+      if (isAndroid()) {
+        console.log(fileName);
+        const filePath = '/Android/data/com.unicef.cboard/files/' + fileName;
+        const fEntry = await writeCvaFile(filePath, blob);
+        console.log(fEntry);
+        // var timestamp = new Date().getTime();
+        // var queryString = fEntry.nativeURL + '?t=' + timestamp; //with timestamp the image will be loaded every time you rotate
+        //this.handleInputImageChange(fEntry.nativeURL, fileName);
+        return fEntry.nativeURL;
+      }
+      // } finally {
+      //   this.setState({
+      //     loading: false
+      //   });
+    }
+    // }
+  }
+  dataURItoBlob(dataURI) {
+    // convert base64/URLEncoded data component to raw binary data held in a string
+    var byteString;
+    if (dataURI.split(',')[0].indexOf('base64') >= 0)
+      byteString = atob(dataURI.split(',')[1]);
+    else byteString = unescape(dataURI.split(',')[1]);
+    // separate out the mime component
+    var mimeString = dataURI
+      .split(',')[0]
+      .split(':')[1]
+      .split(';')[0];
+    // write the bytes of the string to a typed array
+    var ia = new Uint8Array(byteString.length);
+    for (var i = 0; i < byteString.length; i++) {
+      ia[i] = byteString.charCodeAt(i);
+    }
+    return new Blob([ia], { type: mimeString });
+  }
+
+  handleInputImageChange = (image, fileName) => {
+    this.setState({ isImageUploaded: true });
     this.updateTileProperty('image', image);
+    this.setState({ savedImage: image, fileName: fileName });
   };
 
   handleSymbolSearchChange = ({ image, labelKey, label }) => {
@@ -227,13 +309,16 @@ export class TileEditor extends Component {
   handleBack = event => {
     this.setState({ activeStep: this.state.activeStep - 1 });
     this.setState({ selectedBackgroundColor: '', linkedBoard: '' });
-    this.setState({ imageUploaded: false, rotateDeg: 0 });
+    this.setState({ isImageUploaded: false, rotateDeg: 0 });
   };
 
-  handleNext = event => {
+  handleNext = async event => {
+    // const image = await this.saveImageInApi();
+    // this.updateTileProperty('image', image);
+
     this.setState({ activeStep: this.state.activeStep + 1 });
     this.setState({ selectedBackgroundColor: '', linkedBoard: '' });
-    this.setState({ imageUploaded: false, rotateDeg: 0 });
+    this.setState({ isImageUploaded: false, rotateDeg: 0 });
   };
 
   handleSearchClick = event => {
@@ -288,7 +373,7 @@ export class TileEditor extends Component {
   };
 
   resetRotation = () => {
-    this.setState({ imageUploaded: false, rotateDeg: 0 });
+    this.setState({ isImageUploaded: false, rotateDeg: 0 });
   };
 
   render() {
@@ -371,16 +456,16 @@ export class TileEditor extends Component {
                         <Symbol image={tileInView.image} label={currentLabel} />
                       </Tile>
                     </div>
-                    {this.state.imageUploaded && (
+                    {this.state.isImageUploaded && (
                       <div className="TileEditor__rotateimage">
                         <IconButton
-                          label={intl.formatMessage(messages.symbolSearch)}
+                          label={intl.formatMessage(messages.rotateLeft)}
                           onClick={this.handleOnClickRotationLeft}
                         >
                           <RotateLeftIcon />
                         </IconButton>
                         <IconButton
-                          label={intl.formatMessage(messages.symbolSearch)}
+                          label={intl.formatMessage(messages.rotateRight)}
                           onClick={this.handleOnClickRotationRigth}
                         >
                           <RotateRightIcon />
@@ -399,7 +484,7 @@ export class TileEditor extends Component {
                       <InputImage
                         onChange={this.handleInputImageChange}
                         rotateDeg={this.state.rotateDeg}
-                        imageUploaded={this.state.imageUploaded}
+                        isImageUploaded={this.state.isImageUploaded}
                         resetRotation={this.resetRotation}
                       />
                     </div>
diff --git a/src/components/Board/TileEditor/TileEditor.messages.js b/src/components/Board/TileEditor/TileEditor.messages.js
index dfc113915..832d50ce9 100644
--- a/src/components/Board/TileEditor/TileEditor.messages.js
+++ b/src/components/Board/TileEditor/TileEditor.messages.js
@@ -64,5 +64,13 @@ export default defineMessages({
   symbols: {
     id: 'cboard.components.Board.TileEditor.symbols',
     defaultMessage: 'Symbols'
+  },
+  rotateRight: {
+    id: 'cboard.components.Board.TileEditor.rotateRight',
+    defaultMessage: 'Rotate right'
+  },
+  rotateLeft: {
+    id: 'cboard.components.Board.TileEditor.rotateLeft',
+    defaultMessage: 'Rotate left'
   }
 });
diff --git a/src/components/UI/InputImage/InputImage.component.js b/src/components/UI/InputImage/InputImage.component.js
index cbb3b5368..7b6e4e3c8 100644
--- a/src/components/UI/InputImage/InputImage.component.js
+++ b/src/components/UI/InputImage/InputImage.component.js
@@ -30,20 +30,26 @@ class InputImage extends Component {
     image: PropTypes.bool,
     resetRotation: PropTypes.func.isRequired
   };
+  state = {
+    loading: false,
+    resizedImage: null,
+    fileName: ''
+  };
 
   componentDidUpdate(prevProps) {
     if (
       prevProps.rotateDeg !== this.props.rotateDeg &&
-      this.props.imageUploaded
+      this.props.isImageUploaded
     ) {
-      this.handleFile(this.state.imgFile);
+      this.rotateImage(this.state.resizedImage, this.state.fileName);
     }
   }
 
-  state = {
-    loading: false,
-    imgFile: null
-  };
+  async rotateImage(resizedImage, fileName) {
+    const { onChange, rotateDeg } = this.props;
+    const imgRotated = await this.drawRotated(resizedImage, rotateDeg);
+    onChange(imgRotated, fileName);
+  }
 
   async resizeImage(
     file,
@@ -63,37 +69,41 @@ class InputImage extends Component {
   handleChange = async event => {
     this.props.resetRotation();
     const file = event.target.files[0];
-    this.setState({
-      imgFile: file
-    });
     this.handleFile(file);
   };
 
   handleFile = async file => {
     const { onChange, user } = this.props;
     const resizedImage = await this.resizeImage(file);
-    const rotatedImage = await this.drawRotated(
-      resizedImage,
-      this.props.rotateDeg
-    );
+    this.setState({ resizedImage: resizedImage, fileName: file.name });
+    // const rotatedImage = await this.drawRotated(
+    //   resizedImage,
+    //   rotateDeg
+    // );
+    // console.log("rotated", rotatedImage);
+
+    // onChange(rotatedImage);
+    const imgBase64 = await this.blobToBase64(resizedImage);
+    onChange(imgBase64, file.name);
+
     // Loggedin user?
-    if (user) {
-      this.setState({
-        loading: true
-      });
-      try {
-        const imageUrl = await API.uploadFile(rotatedImage, file.name);
-        onChange(imageUrl);
-      } catch (error) {
-        this.saveLocalImage(file.name, rotatedImage);
-      } finally {
-        this.setState({
-          loading: false
-        });
-      }
-    } else {
-      this.saveLocalImage(file.name, rotatedImage);
-    }
+    // if (user) {
+    //   this.setState({
+    //     loading: true
+    //   });
+    //   try {
+    //     const imageUrl = await API.uploadFile(rotatedImage, file.name);
+    //     onChange(imageUrl);
+    //   } catch (error) {
+    //     this.saveLocalImage(file.name, rotatedImage);
+    //   } finally {
+    //     this.setState({
+    //       loading: false
+    //     });
+    //   }
+    // } else {
+    //   this.saveLocalImage(file.name, rotatedImage);
+    // }
   };
 
   drawRotated(blob, degrees) {
@@ -125,7 +135,8 @@ class InputImage extends Component {
         //console.log(image)
         const imgRotated = canvas.toDataURL('image/png');
         var imgFinal = this.dataURItoBlob(imgRotated);
-        resolve(imgFinal);
+        //resolve(imgFinal);
+        resolve(imgRotated);
       };
     });
   }

From 4d54e7f6ac5fbdc6dd528a1f411cfe711bfb4b89 Mon Sep 17 00:00:00 2001
From: RodriSanchez1 <rodri.sanchez1998@gmail.com>
Date: Thu, 16 Sep 2021 08:17:32 -0300
Subject: [PATCH 03/10] wip

---
 public/index.html                             |   1 -
 src/components/Board/Board.container.js       |   1 +
 .../Board/TileEditor/TileEditor.component.js  | 199 +++++++++++-------
 .../UI/InputImage/InputImage.component.js     |  33 +--
 4 files changed, 126 insertions(+), 108 deletions(-)

diff --git a/public/index.html b/public/index.html
index 8af861b23..ca70e77df 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,6 @@
 
 <head>
   <meta charset="utf-8">
-  <script src="cordova.js"></script>
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
   <meta http-equiv="Content-Security-Policy" content="
     default-src 'self'
diff --git a/src/components/Board/Board.container.js b/src/components/Board/Board.container.js
index 99bdc40a5..dc04080cf 100644
--- a/src/components/Board/Board.container.js
+++ b/src/components/Board/Board.container.js
@@ -1457,6 +1457,7 @@ export class BoardContainer extends Component {
           onEditSubmit={this.handleEditTileEditorSubmit}
           onAddSubmit={this.handleAddTileEditorSubmit}
           boards={this.props.boards}
+          userData={this.props.userData}
         />
       </Fragment>
     );
diff --git a/src/components/Board/TileEditor/TileEditor.component.js b/src/components/Board/TileEditor/TileEditor.component.js
index 724163770..4b9b2c34e 100644
--- a/src/components/Board/TileEditor/TileEditor.component.js
+++ b/src/components/Board/TileEditor/TileEditor.component.js
@@ -96,13 +96,27 @@ export class TileEditor extends Component {
       selectedBackgroundColor: '',
       tile: this.defaultTile,
       linkedBoard: '',
-      isImageUploaded: false,
+      imageUploaded: [],
       rotateDeg: 0,
-      savedImage: null,
+      isRotationArrowActive: false
+    };
+
+    this.defaultImageUploaded = {
+      isUploaded: false,
       fileName: ''
     };
   }
 
+  createImageUploadedArray() {
+    if (this.editingTile()) {
+      let imageUploadedArray = new Array(this.props.editingTiles.length);
+      imageUploadedArray.fill(this.defaultImageUploaded);
+      this.setState({ imageUploaded: imageUploadedArray });
+    } else {
+      this.setState({ imageUploaded: new Array(this.defaultImageUploaded) });
+    }
+  }
+
   UNSAFE_componentWillReceiveProps(props) {
     this.updateTileProperty('id', shortid.generate()); // todo not here
     this.setState({ editingTiles: props.editingTiles });
@@ -145,99 +159,118 @@ export class TileEditor extends Component {
 
   handleSubmit = async () => {
     const { onEditSubmit, onAddSubmit } = this.props;
-
-    this.setState({
-      activeStep: 0,
-      selectedBackgroundColor: '',
-      tile: this.defaultTile,
-      isImageUploaded: false,
-      rotateDeg: 0,
-      savedImage: null,
-      fileName: ''
-    });
     if (this.editingTile()) {
-      this.props.editingTiles.forEach((editedTile, index) =>
-        console.log(editedTile.image !== this.state.editingTiles[index].image)
-      );
-
-      if (
-        this.state.editingTiles[0].image !== this.props.editingTiles[0].image
-      ) {
-        console.log('logrado');
+      if (this.state.imageUploaded.length) {
+        let tilesToAdd = JSON.parse(JSON.stringify(this.state.editingTiles));
+        this.state.imageUploaded.map(async (obj, index) => {
+          if (obj.isUploaded) {
+            tilesToAdd[index].image = await this.updateTileImgURL(
+              tilesToAdd[index].image,
+              obj.fileName
+            );
+            console.log('Aca entro', tilesToAdd);
+          }
+        });
+        onEditSubmit(tilesToAdd);
+      } else {
+        onEditSubmit(this.state.editingTiles);
       }
-
-      onEditSubmit(this.state.editingTiles);
     } else {
       const tileToAdd = this.state.tile;
-      // console.log("hola", tileToAdd)
 
-      const isImageUploaded = this.state.isImageUploaded;
-      if (isImageUploaded) {
-        tileToAdd.image = await this.updateTileImgURL();
+      if (this.state.imageUploaded.length) {
+        const imageUploaded = this.state.imageUploaded[this.state.activeStep];
+        if (imageUploaded.isUploaded) {
+          tileToAdd.image = await this.updateTileImgURL(
+            tileToAdd.image,
+            imageUploaded.fileName
+          );
+          //await this.loadImage(tileToAdd.image);
+        }
       }
 
       const selectedBackgroundColor = this.state.selectedBackgroundColor;
       if (selectedBackgroundColor) {
         tileToAdd.backgroundColor = selectedBackgroundColor;
       }
+      console.log('aca submit', tileToAdd);
       onAddSubmit(tileToAdd);
     }
-  };
-
-  updateTileImgURL = async () => {
-    const newUrl = await this.saveImageInApi();
-    console.log('newUrl', typeof newUrl);
-    return newUrl;
-  };
-
-  handleCancel = () => {
-    const { onClose } = this.props;
 
     this.setState({
       activeStep: 0,
       selectedBackgroundColor: '',
       tile: this.defaultTile,
-      isImageUploaded: false,
+      imageUploaded: [],
       rotateDeg: 0,
-      savedImage: null,
-      fileName: ''
+      isRotationArrowActive: false
+    });
+  };
+
+  loadImage = async url => {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => {
+        // when it finishes loading, update the component state
+        //this.setState({ imageIsReady: true });
+        console.log('imagen precargada');
+        resolve('Cargado');
+      };
+      img.src = url;
     });
-    onClose();
   };
 
-  async saveImageInApi() {
-    //const { userData } = this.props;
-    const { savedImage, fileName } = this.state;
-    const blob = this.dataURItoBlob(savedImage);
-    // const user = userData.email ? userData : null;
-    // if (user) {
-    // this.setState({
-    //   loading: true
-    // });
-    try {
-      const imageUrl = 'holaURL'; //await API.uploadFile(blob, fileName);
-      console.log('imagen guardada en servidor', imageUrl);
-      return imageUrl;
-    } catch (error) {
-      console.log('imagen no guardad en servidor');
-      console.log(fileName);
-      if (isAndroid()) {
-        console.log(fileName);
-        const filePath = '/Android/data/com.unicef.cboard/files/' + fileName;
-        const fEntry = await writeCvaFile(filePath, blob);
-        console.log(fEntry);
-        // var timestamp = new Date().getTime();
-        // var queryString = fEntry.nativeURL + '?t=' + timestamp; //with timestamp the image will be loaded every time you rotate
-        //this.handleInputImageChange(fEntry.nativeURL, fileName);
-        return fEntry.nativeURL;
+  updateTileImgURL = async (image, fileName) => {
+    const { userData } = this.props;
+    const blob = this.dataURItoBlob(image);
+    const user = userData.email ? userData : null;
+    if (user) {
+      // this.setState({
+      //   loading: true
+      // });
+      console.log('Hay usuario');
+
+      try {
+        const imageUrl = await API.uploadFile(blob, fileName);
+        console.log('imagen guardada en servidor', imageUrl);
+        console.log('URL', imageUrl);
+        console.log('FileName:', fileName);
+        return imageUrl;
+      } catch (error) {
+        console.log('imagen no guardad en servidor');
+        if (isAndroid()) {
+          console.log(fileName);
+          const filePath = '/Android/data/com.unicef.cboard/files/' + fileName;
+          const fEntry = await writeCvaFile(filePath, blob);
+          console.log(fEntry);
+          // var timestamp = new Date().getTime();
+          // var queryString = fEntry.nativeURL + '?t=' + timestamp; //with timestamp the image will be loaded every time you rotate
+          //this.handleInputImageChange(fEntry.nativeURL, fileName);
+          return fEntry.nativeURL;
+        }
       }
       // } finally {
       //   this.setState({
       //     loading: false
       //   });
+    } else {
+      return image;
     }
-    // }
-  }
+  };
+
+  handleCancel = () => {
+    const { onClose } = this.props;
+    this.setState({
+      activeStep: 0,
+      selectedBackgroundColor: '',
+      tile: this.defaultTile,
+      imageUploaded: [],
+      rotateDeg: 0,
+      isRotationArrowActive: false
+    });
+    onClose();
+  };
+
   dataURItoBlob(dataURI) {
     // convert base64/URLEncoded data component to raw binary data held in a string
     var byteString;
@@ -258,15 +291,30 @@ export class TileEditor extends Component {
   }
 
   handleInputImageChange = (image, fileName) => {
-    this.setState({ isImageUploaded: true });
+    if (!this.state.imageUploaded.length) {
+      this.createImageUploadedArray();
+    }
+    this.setImageUploaded(true, fileName);
+    this.setState({ isRotationArrowActive: true });
     this.updateTileProperty('image', image);
-    this.setState({ savedImage: image, fileName: fileName });
+  };
+
+  setImageUploaded = (isUploaded, fileName) => {
+    const { activeStep } = this.state;
+    let cpyImageUploaded = JSON.parse(JSON.stringify(this.state.imageUploaded)); //copy array value from state
+    cpyImageUploaded[activeStep].isUploaded = isUploaded;
+    cpyImageUploaded[activeStep].fileName = fileName;
+    this.setState({ imageUploaded: cpyImageUploaded });
   };
 
   handleSymbolSearchChange = ({ image, labelKey, label }) => {
     this.updateTileProperty('labelKey', labelKey);
     this.updateTileProperty('label', label);
     this.updateTileProperty('image', image);
+    this.resetRotation();
+    if (this.state.imageUploaded.length) {
+      this.setImageUploaded(false, '');
+    }
   };
 
   handleSymbolSearchClose = event => {
@@ -309,16 +357,13 @@ export class TileEditor extends Component {
   handleBack = event => {
     this.setState({ activeStep: this.state.activeStep - 1 });
     this.setState({ selectedBackgroundColor: '', linkedBoard: '' });
-    this.setState({ isImageUploaded: false, rotateDeg: 0 });
+    this.setState({ rotateDeg: 0, isRotationArrowActive: false });
   };
 
   handleNext = async event => {
-    // const image = await this.saveImageInApi();
-    // this.updateTileProperty('image', image);
-
     this.setState({ activeStep: this.state.activeStep + 1 });
     this.setState({ selectedBackgroundColor: '', linkedBoard: '' });
-    this.setState({ isImageUploaded: false, rotateDeg: 0 });
+    this.setState({ rotateDeg: 0, isRotationArrowActive: false });
   };
 
   handleSearchClick = event => {
@@ -373,7 +418,7 @@ export class TileEditor extends Component {
   };
 
   resetRotation = () => {
-    this.setState({ isImageUploaded: false, rotateDeg: 0 });
+    this.setState({ rotateDeg: 0, isRotationArrowActive: false });
   };
 
   render() {
@@ -456,7 +501,7 @@ export class TileEditor extends Component {
                         <Symbol image={tileInView.image} label={currentLabel} />
                       </Tile>
                     </div>
-                    {this.state.isImageUploaded && (
+                    {this.state.isRotationArrowActive && (
                       <div className="TileEditor__rotateimage">
                         <IconButton
                           label={intl.formatMessage(messages.rotateLeft)}
@@ -484,7 +529,7 @@ export class TileEditor extends Component {
                       <InputImage
                         onChange={this.handleInputImageChange}
                         rotateDeg={this.state.rotateDeg}
-                        isImageUploaded={this.state.isImageUploaded}
+                        isRotationArrowActive={this.state.isRotationArrowActive}
                         resetRotation={this.resetRotation}
                       />
                     </div>
diff --git a/src/components/UI/InputImage/InputImage.component.js b/src/components/UI/InputImage/InputImage.component.js
index 7b6e4e3c8..ee8a058ec 100644
--- a/src/components/UI/InputImage/InputImage.component.js
+++ b/src/components/UI/InputImage/InputImage.component.js
@@ -37,9 +37,10 @@ class InputImage extends Component {
   };
 
   componentDidUpdate(prevProps) {
+    console.log(this.props.isRotationArrowActive);
     if (
       prevProps.rotateDeg !== this.props.rotateDeg &&
-      this.props.isImageUploaded
+      this.props.isRotationArrowActive
     ) {
       this.rotateImage(this.state.resizedImage, this.state.fileName);
     }
@@ -76,13 +77,6 @@ class InputImage extends Component {
     const { onChange, user } = this.props;
     const resizedImage = await this.resizeImage(file);
     this.setState({ resizedImage: resizedImage, fileName: file.name });
-    // const rotatedImage = await this.drawRotated(
-    //   resizedImage,
-    //   rotateDeg
-    // );
-    // console.log("rotated", rotatedImage);
-
-    // onChange(rotatedImage);
     const imgBase64 = await this.blobToBase64(resizedImage);
     onChange(imgBase64, file.name);
 
@@ -132,34 +126,13 @@ class InputImage extends Component {
         }
         ctx.rotate((degrees * Math.PI) / 180);
         ctx.drawImage(image, -image.width / 2, -image.height / 2);
-        //console.log(image)
         const imgRotated = canvas.toDataURL('image/png');
-        var imgFinal = this.dataURItoBlob(imgRotated);
-        //resolve(imgFinal);
+        //var imgFinal = this.dataURItoBlob(imgRotated);
         resolve(imgRotated);
       };
     });
   }
 
-  dataURItoBlob(dataURI) {
-    // convert base64/URLEncoded data component to raw binary data held in a string
-    var byteString;
-    if (dataURI.split(',')[0].indexOf('base64') >= 0)
-      byteString = atob(dataURI.split(',')[1]);
-    else byteString = unescape(dataURI.split(',')[1]);
-    // separate out the mime component
-    var mimeString = dataURI
-      .split(',')[0]
-      .split(':')[1]
-      .split(';')[0];
-    // write the bytes of the string to a typed array
-    var ia = new Uint8Array(byteString.length);
-    for (var i = 0; i < byteString.length; i++) {
-      ia[i] = byteString.charCodeAt(i);
-    }
-    return new Blob([ia], { type: mimeString });
-  }
-
   saveLocalImage = async (fileName, data) => {
     const { onChange } = this.props;
     if (isAndroid()) {

From e927be7b73d8045cde740942cdb44e0d21e8dd6f Mon Sep 17 00:00:00 2001
From: RodriSanchez1 <rodri.sanchez1998@gmail.com>
Date: Thu, 16 Sep 2021 21:37:40 -0300
Subject: [PATCH 04/10] wip

---
 package.json                                  |  2 +-
 .../Board/TileEditor/TileEditor.component.js  | 21 +++++-----
 .../UI/InputImage/InputImage.component.js     | 38 +------------------
 3 files changed, 11 insertions(+), 50 deletions(-)

diff --git a/package.json b/package.json
index 3db1579e3..c617343c5 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "tts",
     "text-to-speech"
   ],
-  "homepage": ".",
+  "homepage": "https://app.cboard.io",
   "private": false,
   "license": "GPL-3.0-only",
   "dependencies": {
diff --git a/src/components/Board/TileEditor/TileEditor.component.js b/src/components/Board/TileEditor/TileEditor.component.js
index 4b9b2c34e..6745cc8fc 100644
--- a/src/components/Board/TileEditor/TileEditor.component.js
+++ b/src/components/Board/TileEditor/TileEditor.component.js
@@ -229,7 +229,6 @@ export class TileEditor extends Component {
       //   loading: true
       // });
       console.log('Hay usuario');
-
       try {
         const imageUrl = await API.uploadFile(blob, fileName);
         console.log('imagen guardada en servidor', imageUrl);
@@ -238,23 +237,21 @@ export class TileEditor extends Component {
         return imageUrl;
       } catch (error) {
         console.log('imagen no guardad en servidor');
-        if (isAndroid()) {
-          console.log(fileName);
-          const filePath = '/Android/data/com.unicef.cboard/files/' + fileName;
-          const fEntry = await writeCvaFile(filePath, blob);
-          console.log(fEntry);
-          // var timestamp = new Date().getTime();
-          // var queryString = fEntry.nativeURL + '?t=' + timestamp; //with timestamp the image will be loaded every time you rotate
-          //this.handleInputImageChange(fEntry.nativeURL, fileName);
-          return fEntry.nativeURL;
-        }
       }
       // } finally {
       //   this.setState({
       //     loading: false
       //   });
     } else {
-      return image;
+      if (isAndroid()) {
+        console.log(fileName);
+        const filePath = '/Android/data/com.unicef.cboard/files/' + fileName;
+        const fEntry = await writeCvaFile(filePath, blob);
+        console.log(fEntry);
+        return fEntry.nativeURL;
+      } else {
+        return image;
+      }
     }
   };
 
diff --git a/src/components/UI/InputImage/InputImage.component.js b/src/components/UI/InputImage/InputImage.component.js
index ee8a058ec..b6db4f813 100644
--- a/src/components/UI/InputImage/InputImage.component.js
+++ b/src/components/UI/InputImage/InputImage.component.js
@@ -74,30 +74,11 @@ class InputImage extends Component {
   };
 
   handleFile = async file => {
-    const { onChange, user } = this.props;
+    const { onChange } = this.props;
     const resizedImage = await this.resizeImage(file);
     this.setState({ resizedImage: resizedImage, fileName: file.name });
     const imgBase64 = await this.blobToBase64(resizedImage);
     onChange(imgBase64, file.name);
-
-    // Loggedin user?
-    // if (user) {
-    //   this.setState({
-    //     loading: true
-    //   });
-    //   try {
-    //     const imageUrl = await API.uploadFile(rotatedImage, file.name);
-    //     onChange(imageUrl);
-    //   } catch (error) {
-    //     this.saveLocalImage(file.name, rotatedImage);
-    //   } finally {
-    //     this.setState({
-    //       loading: false
-    //     });
-    //   }
-    // } else {
-    //   this.saveLocalImage(file.name, rotatedImage);
-    // }
   };
 
   drawRotated(blob, degrees) {
@@ -133,22 +114,6 @@ class InputImage extends Component {
     });
   }
 
-  saveLocalImage = async (fileName, data) => {
-    const { onChange } = this.props;
-    if (isAndroid()) {
-      const filePath = '/Android/data/com.unicef.cboard/files/' + fileName;
-      const fEntry = await writeCvaFile(filePath, data);
-      console.log(fEntry);
-      var timestamp = new Date().getTime();
-      var queryString = fEntry.nativeURL + '?t=' + timestamp; //with timestamp the image will be loaded every time you rotate
-      onChange(queryString);
-    } else {
-      // console.log(data)
-      const imageBase64 = await this.blobToBase64(data);
-      onChange(imageBase64);
-    }
-  };
-
   blobToBase64(blob) {
     return new Promise(resolve => {
       const reader = new FileReader();
@@ -158,7 +123,6 @@ class InputImage extends Component {
       reader.readAsDataURL(blob);
     });
   }
-
   render() {
     const { intl } = this.props;
     if (isCordova()) {

From 069d319d8a429332bf9710717ae0fcd14749487f Mon Sep 17 00:00:00 2001
From: RodriSanchez1 <rodri.sanchez1998@gmail.com>
Date: Wed, 6 Oct 2021 12:58:56 -0300
Subject: [PATCH 05/10] Prevent two tiles same id

---
 src/components/Board/Board.container.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Board/Board.container.js b/src/components/Board/Board.container.js
index dc04080cf..7a910d594 100644
--- a/src/components/Board/Board.container.js
+++ b/src/components/Board/Board.container.js
@@ -1002,7 +1002,9 @@ export class BoardContainer extends Component {
         );
       }
       if (tile && tile.type !== 'board') {
-        uTiles = [...board.tiles, tile];
+        uTiles = board.tiles.find(t => t.id === tile.id)
+          ? [...board.tiles]
+          : [...board.tiles, tile];
       }
       if (tile && tile.type === 'board') {
         uTiles = [...board.tiles];

From 5d0d81211330fba29b5881c01644824115266b41 Mon Sep 17 00:00:00 2001
From: RodriSanchez1 <rodri.sanchez1998@gmail.com>
Date: Mon, 25 Oct 2021 16:34:50 -0300
Subject: [PATCH 06/10] Image editor component created

---
 .../ImageEditor/ImageEditor.component.js      | 190 ++++++++++++++++++
 .../Board/ImageEditor/ImageEditor.css         |  18 ++
 .../Board/ImageEditor/ImageEditor.messages.js |  32 +++
 src/components/Board/ImageEditor/index.js     |   1 +
 .../Board/TileEditor/TileEditor.component.js  |  97 +++++----
 .../Board/TileEditor/TileEditor.css           |   6 +-
 .../Board/TileEditor/TileEditor.messages.js   |  10 +-
 .../UI/InputImage/InputImage.component.js     |  24 ++-
 8 files changed, 330 insertions(+), 48 deletions(-)
 create mode 100644 src/components/Board/ImageEditor/ImageEditor.component.js
 create mode 100644 src/components/Board/ImageEditor/ImageEditor.css
 create mode 100644 src/components/Board/ImageEditor/ImageEditor.messages.js
 create mode 100644 src/components/Board/ImageEditor/index.js

diff --git a/src/components/Board/ImageEditor/ImageEditor.component.js b/src/components/Board/ImageEditor/ImageEditor.component.js
new file mode 100644
index 000000000..733ed9ae5
--- /dev/null
+++ b/src/components/Board/ImageEditor/ImageEditor.component.js
@@ -0,0 +1,190 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogActions from '@material-ui/core/DialogActions';
+import IconButton from '../../UI/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+import withMobileDialog from '@material-ui/core/withMobileDialog';
+import messages from './ImageEditor.messages';
+import RotateRightIcon from '@material-ui/icons/RotateRight';
+import RotateLeftIcon from '@material-ui/icons/RotateLeft';
+import DoneIcon from '@material-ui/icons/Done';
+import CropIcon from '@material-ui/icons/Crop';
+import BlockIcon from '@material-ui/icons/Block';
+import ZoomInIcon from '@material-ui/icons/ZoomIn';
+import ZoomOutIcon from '@material-ui/icons/ZoomOut';
+
+import './ImageEditor.css';
+import Cropper from 'react-cropper';
+import 'cropperjs/dist/cropper.css';
+
+class ImageEditor extends PureComponent {
+  static defaultProps = {
+    open: false
+  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      isCropActive: false,
+      imgCropped: null
+    };
+  }
+  handleOnClickCrop = () => {
+    this.setState({ isCropActive: true });
+    this.state.cropper.setDragMode('crop');
+    this.state.cropper.crop();
+  };
+  handleOnClickDoneCrop = () => {
+    const { cropper } = this.state;
+    this.setState({
+      isCropActive: false,
+      imgCropped: cropper.getCroppedCanvas().toDataURL()
+    });
+    this.state.cropper.setDragMode('move');
+  };
+  handleOnClickClose = () => {
+    this.setState({ isCropActive: false, imgCropped: null });
+    this.props.onImageEditorClose();
+  };
+
+  handleOnClickDone = async () => {
+    const { cropper } = this.state;
+    cropper.setDragMode('move');
+    this.setState({ imgCropped: null });
+    this.props.onImageEditorDone(
+      cropper
+        .getCroppedCanvas({
+          maxWidth: 200,
+          maxHeight: 200,
+          fillColor: '#fff',
+          imageSmoothingEnabled: true,
+          imageSmoothingQuality: 'high'
+        })
+        .toDataURL('image/png', 1)
+    );
+  };
+  handleOnClickCancelCrop = () => {
+    this.setState({ isCropActive: false });
+    this.state.cropper.clear();
+    this.state.cropper.setDragMode('move');
+  };
+
+  render() {
+    const { intl, open, onImageEditorClose, image } = this.props;
+    const srcImage = this.state.imgCropped ? this.state.imgCropped : image;
+    return (
+      <React.Fragment>
+        <Dialog
+          open={open}
+          onClose={onImageEditorClose}
+          fullScreen={false}
+          className="ImageEditor__container"
+        >
+          <DialogTitle className="ImageEditor__title">
+            <div className="ImageEditor__Container">
+              <FormattedMessage {...messages.title} />
+            </div>
+          </DialogTitle>
+          <DialogContent>
+            <div className="TileEditor__cropper">
+              <Cropper
+                style={{ height: 200, width: '100%' }}
+                zoomTo={0}
+                //initialAspectRatio={1}
+                src={srcImage}
+                viewMode={2}
+                // minCropBoxHeight={10}
+                // minCropBoxWidth={10}
+                background={true}
+                responsive={true}
+                //autoCropArea={1}
+                checkOrientation={false} // https://github.com/fengyuanchen/cropperjs/issues/671
+                guides={true}
+                dragMode="move"
+                autoCrop={false}
+                onInitialized={instance => {
+                  this.setState({ cropper: instance });
+                }}
+              />
+            </div>
+            <div className="ImageEditor__rotateimage">
+              <IconButton
+                label={intl.formatMessage(messages.rotateLeft)}
+                onClick={() => {
+                  this.state.cropper.rotate(90);
+                }}
+              >
+                <RotateLeftIcon />
+              </IconButton>
+              {this.state.isCropActive ? (
+                <React.Fragment>
+                  <IconButton
+                    label={intl.formatMessage(messages.cropImage)}
+                    onClick={this.handleOnClickDoneCrop}
+                  >
+                    <DoneIcon />
+                  </IconButton>
+                  <IconButton
+                    label={intl.formatMessage(messages.cancelCrop)}
+                    onClick={this.handleOnClickCancelCrop}
+                  >
+                    <BlockIcon />
+                  </IconButton>
+                </React.Fragment>
+              ) : (
+                <IconButton
+                  label={intl.formatMessage(messages.cropImage)}
+                  onClick={this.handleOnClickCrop}
+                >
+                  <CropIcon />
+                </IconButton>
+              )}
+              <IconButton
+                label={intl.formatMessage(messages.rotateRight)}
+                onClick={() => {
+                  this.state.cropper.rotate(-90);
+                  this.state.cropper.zoomTo(0);
+                }}
+              >
+                <RotateRightIcon />
+              </IconButton>
+              <IconButton
+                label={intl.formatMessage(messages.cropImage)}
+                onClick={() => this.state.cropper.zoom(0.1)}
+              >
+                <ZoomInIcon />
+              </IconButton>
+              <IconButton
+                label={intl.formatMessage(messages.cropImage)}
+                onClick={() => this.state.cropper.zoom(-0.1)}
+              >
+                <ZoomOutIcon />
+              </IconButton>
+            </div>
+          </DialogContent>
+          <DialogActions>
+            <IconButton
+              label={intl.formatMessage(messages.done)}
+              onClick={this.handleOnClickDone}
+              disabled={this.state.isCropActive}
+            >
+              <DoneIcon />
+            </IconButton>
+
+            <IconButton
+              label={intl.formatMessage(messages.close)}
+              onClick={this.handleOnClickClose}
+            >
+              <CloseIcon />
+            </IconButton>
+          </DialogActions>
+        </Dialog>
+      </React.Fragment>
+    );
+  }
+}
+
+export default withMobileDialog()(ImageEditor);
diff --git a/src/components/Board/ImageEditor/ImageEditor.css b/src/components/Board/ImageEditor/ImageEditor.css
new file mode 100644
index 000000000..376d4f9b3
--- /dev/null
+++ b/src/components/Board/ImageEditor/ImageEditor.css
@@ -0,0 +1,18 @@
+.ImageEditor__container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.ImageEditor__rotateimage {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 2px;
+}
+
+.ImageEditor__title {
+  border-bottom: 1px solid #ccc;
+  margin-bottom: 18px;
+  padding: 20px 24px 18px;
+  position: relative;
+}
diff --git a/src/components/Board/ImageEditor/ImageEditor.messages.js b/src/components/Board/ImageEditor/ImageEditor.messages.js
new file mode 100644
index 000000000..75e3447b1
--- /dev/null
+++ b/src/components/Board/ImageEditor/ImageEditor.messages.js
@@ -0,0 +1,32 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  title: {
+    id: 'cboard.components.Board.ImageEditor.title',
+    defaultMessage: 'Images editor'
+  },
+  rotateRight: {
+    id: 'cboard.components.Board.ImageEditor.rotateRight',
+    defaultMessage: 'Rotate right'
+  },
+  rotateLeft: {
+    id: 'cboard.components.Board.ImageEditor.rotateLeft',
+    defaultMessage: 'Rotate left'
+  },
+  cropImage: {
+    id: 'cboard.components.Board.ImageEditor.cropImage',
+    defaultMessage: 'Crop image'
+  },
+  close: {
+    id: 'cboard.components.Board.ImageEditor.close',
+    defaultMessage: 'Close'
+  },
+  done: {
+    id: 'cboard.components.Board.ImageEditor.done',
+    defaultMessage: 'Done'
+  },
+  cancelCrop: {
+    id: 'cboard.components.Board.ImageEditor.cancelCrop',
+    defaultMessage: 'Cancel crop'
+  }
+});
diff --git a/src/components/Board/ImageEditor/index.js b/src/components/Board/ImageEditor/index.js
new file mode 100644
index 000000000..8f391128a
--- /dev/null
+++ b/src/components/Board/ImageEditor/index.js
@@ -0,0 +1 @@
+export { default } from './ImageEditor.component';
diff --git a/src/components/Board/TileEditor/TileEditor.component.js b/src/components/Board/TileEditor/TileEditor.component.js
index 6745cc8fc..faface736 100644
--- a/src/components/Board/TileEditor/TileEditor.component.js
+++ b/src/components/Board/TileEditor/TileEditor.component.js
@@ -30,10 +30,12 @@ import IconButton from '../../UI/IconButton';
 import ColorSelect from '../../UI/ColorSelect';
 import VoiceRecorder from '../../VoiceRecorder';
 import './TileEditor.css';
-import RotateRightIcon from '@material-ui/icons/RotateRight';
-import RotateLeftIcon from '@material-ui/icons/RotateLeft';
+import EditIcon from '@material-ui/icons/Edit';
+import ImageEditor from '../ImageEditor';
+
 import API from '../../../api';
 import { isAndroid, writeCvaFile } from '../../../cordova-util';
+import { Edit } from '@material-ui/icons';
 
 export class TileEditor extends Component {
   static propTypes = {
@@ -65,7 +67,8 @@ export class TileEditor extends Component {
   };
 
   static defaultProps = {
-    editingTiles: []
+    editingTiles: [],
+    openImageEditor: false
   };
 
   constructor(props) {
@@ -98,12 +101,14 @@ export class TileEditor extends Component {
       linkedBoard: '',
       imageUploaded: [],
       rotateDeg: 0,
-      isRotationArrowActive: false
+      isRotationArrowActive: false,
+      isEditImageActive: false
     };
 
     this.defaultImageUploaded = {
       isUploaded: false,
-      fileName: ''
+      fileName: '',
+      originalFile: null
     };
   }
 
@@ -185,7 +190,6 @@ export class TileEditor extends Component {
             tileToAdd.image,
             imageUploaded.fileName
           );
-          //await this.loadImage(tileToAdd.image);
         }
       }
 
@@ -203,20 +207,8 @@ export class TileEditor extends Component {
       tile: this.defaultTile,
       imageUploaded: [],
       rotateDeg: 0,
-      isRotationArrowActive: false
-    });
-  };
-
-  loadImage = async url => {
-    return new Promise((resolve, reject) => {
-      const img = new Image();
-      img.onload = () => {
-        // when it finishes loading, update the component state
-        //this.setState({ imageIsReady: true });
-        console.log('imagen precargada');
-        resolve('Cargado');
-      };
-      img.src = url;
+      isRotationArrowActive: false,
+      isCropActive: false
     });
   };
 
@@ -287,20 +279,21 @@ export class TileEditor extends Component {
     return new Blob([ia], { type: mimeString });
   }
 
-  handleInputImageChange = (image, fileName) => {
+  handleInputImageChange = (image, fileName, originalFile) => {
     if (!this.state.imageUploaded.length) {
       this.createImageUploadedArray();
     }
-    this.setImageUploaded(true, fileName);
+    this.setImageUploaded(true, fileName, originalFile);
     this.setState({ isRotationArrowActive: true });
     this.updateTileProperty('image', image);
   };
 
-  setImageUploaded = (isUploaded, fileName) => {
+  setImageUploaded = (isUploaded, fileName, originalFile) => {
     const { activeStep } = this.state;
     let cpyImageUploaded = JSON.parse(JSON.stringify(this.state.imageUploaded)); //copy array value from state
     cpyImageUploaded[activeStep].isUploaded = isUploaded;
     cpyImageUploaded[activeStep].fileName = fileName;
+    cpyImageUploaded[activeStep].originalFile = originalFile;
     this.setState({ imageUploaded: cpyImageUploaded });
   };
 
@@ -413,10 +406,33 @@ export class TileEditor extends Component {
       ? this.setState({ rotateDeg: 270 })
       : this.setState({ rotateDeg: actualPosition - 90 });
   };
+  handleOnClickCrop = () => {
+    this.setState({ isCropActive: true });
+  };
+  handleOnClickDoneCrop = () => {
+    const { cropper } = this.state;
+    this.setState({ isCropActive: false });
+    if (typeof cropper !== 'undefined') {
+      this.updateTileProperty('image', cropper.getCroppedCanvas().toDataURL());
+    }
+  };
+  handleEditImage = () => {
+    this.setState({ isEditImageActive: true });
+  };
 
   resetRotation = () => {
     this.setState({ rotateDeg: 0, isRotationArrowActive: false });
   };
+  handleOnClickImageEditor = () => {
+    this.setState({ openImageEditor: true });
+  };
+  onImageEditorClose = () => {
+    this.setState({ openImageEditor: false });
+  };
+  onImageEditorDone = imgCropped => {
+    this.setState({ openImageEditor: false });
+    this.updateTileProperty('image', imgCropped);
+  };
 
   render() {
     const { open, intl, boards } = this.props;
@@ -499,20 +515,29 @@ export class TileEditor extends Component {
                       </Tile>
                     </div>
                     {this.state.isRotationArrowActive && (
-                      <div className="TileEditor__rotateimage">
-                        <IconButton
-                          label={intl.formatMessage(messages.rotateLeft)}
-                          onClick={this.handleOnClickRotationLeft}
-                        >
-                          <RotateLeftIcon />
-                        </IconButton>
-                        <IconButton
-                          label={intl.formatMessage(messages.rotateRight)}
-                          onClick={this.handleOnClickRotationRigth}
+                      <React.Fragment>
+                        <ImageEditor
+                          intl={intl}
+                          open={this.state.openImageEditor}
+                          onImageEditorClose={this.onImageEditorClose}
+                          onImageEditorDone={this.onImageEditorDone}
+                          image={
+                            this.state.imageUploaded[this.state.activeStep]
+                              .originalFile
+                          }
+                        />
+                        {/* <div > */}
+                        <Button
+                          variant="contained"
+                          color="secondary"
+                          startIcon={<EditIcon />}
+                          onClick={this.handleOnClickImageEditor}
+                          className="TileEditor__EditImage"
                         >
-                          <RotateRightIcon />
-                        </IconButton>
-                      </div>
+                          {intl.formatMessage(messages.editImage)}
+                        </Button>
+                        {/* </div> */}
+                      </React.Fragment>
                     )}
                     <Button
                       variant="contained"
diff --git a/src/components/Board/TileEditor/TileEditor.css b/src/components/Board/TileEditor/TileEditor.css
index 15617b349..19bcb95de 100644
--- a/src/components/Board/TileEditor/TileEditor.css
+++ b/src/components/Board/TileEditor/TileEditor.css
@@ -77,8 +77,6 @@
   margin-top: 5px;
 }
 
-.TileEditor__rotateimage {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 2px;
+.TileEditor__EditImage {
+  margin-bottom: 6px !important;
 }
diff --git a/src/components/Board/TileEditor/TileEditor.messages.js b/src/components/Board/TileEditor/TileEditor.messages.js
index 832d50ce9..ef549af4a 100644
--- a/src/components/Board/TileEditor/TileEditor.messages.js
+++ b/src/components/Board/TileEditor/TileEditor.messages.js
@@ -65,12 +65,8 @@ export default defineMessages({
     id: 'cboard.components.Board.TileEditor.symbols',
     defaultMessage: 'Symbols'
   },
-  rotateRight: {
-    id: 'cboard.components.Board.TileEditor.rotateRight',
-    defaultMessage: 'Rotate right'
-  },
-  rotateLeft: {
-    id: 'cboard.components.Board.TileEditor.rotateLeft',
-    defaultMessage: 'Rotate left'
+  editImage: {
+    id: 'cboard.components.Board.ImageEditor.editImage',
+    defaultMessage: 'Edit image'
   }
 });
diff --git a/src/components/UI/InputImage/InputImage.component.js b/src/components/UI/InputImage/InputImage.component.js
index b6db4f813..7383a8869 100644
--- a/src/components/UI/InputImage/InputImage.component.js
+++ b/src/components/UI/InputImage/InputImage.component.js
@@ -15,6 +15,9 @@ import API from '../../../api';
 import messages from './InputImage.messages';
 import './InputImage.css';
 
+import Cropper from 'react-cropper';
+import 'cropperjs/dist/cropper.css';
+
 class InputImage extends Component {
   static propTypes = {
     /**
@@ -78,9 +81,28 @@ class InputImage extends Component {
     const resizedImage = await this.resizeImage(file);
     this.setState({ resizedImage: resizedImage, fileName: file.name });
     const imgBase64 = await this.blobToBase64(resizedImage);
-    onChange(imgBase64, file.name);
+    const config = {
+      quality: 1,
+      maxWidth: 800,
+      maxHeight: 800,
+      autoRotate: true,
+      debug: false,
+      mimeType: 'image/png'
+    };
+    const originalFile = await this.resizeImage(file, config);
+    const originalFileBs64 = await this.blobToBase64(originalFile);
+    onChange(imgBase64, file.name, originalFileBs64);
   };
 
+  fileToDataUri = file =>
+    new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = event => {
+        resolve(event.target.result);
+      };
+      reader.readAsDataURL(file);
+    });
+
   drawRotated(blob, degrees) {
     return new Promise((resolve, reject) => {
       var image = new Image();

From a32eb53e485504e0e5467bb078a4f1454aac15eb Mon Sep 17 00:00:00 2001
From: RodriSanchez1 <rodri.sanchez1998@gmail.com>
Date: Tue, 2 Nov 2021 20:06:52 -0300
Subject: [PATCH 07/10] Crop image ended

---
 .../ImageEditor/ImageEditor.component.js      | 104 ++++----
 .../Board/ImageEditor/ImageEditor.css         |   2 +-
 .../Board/ImageEditor/ImageEditor.messages.js |  14 +-
 .../Board/TileEditor/TileEditor.component.js  | 223 ++++++++----------
 .../UI/InputImage/InputImage.component.js     | 148 ++----------
 .../UI/InputImage/InputImage.container.js     |  12 -
 src/components/UI/InputImage/index.js         |   2 +-
 src/translations/src/cboard.json              |   9 +
 8 files changed, 191 insertions(+), 323 deletions(-)
 delete mode 100644 src/components/UI/InputImage/InputImage.container.js

diff --git a/src/components/Board/ImageEditor/ImageEditor.component.js b/src/components/Board/ImageEditor/ImageEditor.component.js
index 733ed9ae5..7756d3255 100644
--- a/src/components/Board/ImageEditor/ImageEditor.component.js
+++ b/src/components/Board/ImageEditor/ImageEditor.component.js
@@ -10,7 +10,6 @@ import CloseIcon from '@material-ui/icons/Close';
 import withMobileDialog from '@material-ui/core/withMobileDialog';
 import messages from './ImageEditor.messages';
 import RotateRightIcon from '@material-ui/icons/RotateRight';
-import RotateLeftIcon from '@material-ui/icons/RotateLeft';
 import DoneIcon from '@material-ui/icons/Done';
 import CropIcon from '@material-ui/icons/Crop';
 import BlockIcon from '@material-ui/icons/Block';
@@ -25,13 +24,30 @@ class ImageEditor extends PureComponent {
   static defaultProps = {
     open: false
   };
+  static propTypes = {
+    open: PropTypes.bool,
+    onImageEditorClose: PropTypes.func,
+    onImageEditorDone: PropTypes.func,
+    image: PropTypes.string,
+    intl: PropTypes.object.isRequired
+  };
+
   constructor(props) {
     super(props);
+    const setImageSize = () => {
+      if (window.innerWidth < 576) {
+        return { width: 248, height: 182 };
+      } else {
+        return { width: 492, height: 369 };
+      }
+    };
     this.state = {
       isCropActive: false,
-      imgCropped: null
+      imgCropped: null,
+      style: setImageSize()
     };
   }
+
   handleOnClickCrop = () => {
     this.setState({ isCropActive: true });
     this.state.cropper.setDragMode('crop');
@@ -47,6 +63,7 @@ class ImageEditor extends PureComponent {
   };
   handleOnClickClose = () => {
     this.setState({ isCropActive: false, imgCropped: null });
+    this.state.cropper.destroy();
     this.props.onImageEditorClose();
   };
 
@@ -54,17 +71,23 @@ class ImageEditor extends PureComponent {
     const { cropper } = this.state;
     cropper.setDragMode('move');
     this.setState({ imgCropped: null });
-    this.props.onImageEditorDone(
-      cropper
-        .getCroppedCanvas({
-          maxWidth: 200,
-          maxHeight: 200,
-          fillColor: '#fff',
-          imageSmoothingEnabled: true,
-          imageSmoothingQuality: 'high'
-        })
-        .toDataURL('image/png', 1)
-    );
+    this.props.onImageEditorClose();
+    cropper
+      .getCroppedCanvas({
+        maxWidth: 200,
+        maxHeight: 200,
+        fillColor: '#fff',
+        imageSmoothingEnabled: true,
+        imageSmoothingQuality: 'high'
+      })
+      .toBlob(
+        blob => {
+          this.props.onImageEditorDone(blob);
+        },
+        'image/png',
+        1
+      );
+    cropper.destroy();
   };
   handleOnClickCancelCrop = () => {
     this.setState({ isCropActive: false });
@@ -89,35 +112,29 @@ class ImageEditor extends PureComponent {
             </div>
           </DialogTitle>
           <DialogContent>
-            <div className="TileEditor__cropper">
-              <Cropper
-                style={{ height: 200, width: '100%' }}
-                zoomTo={0}
-                //initialAspectRatio={1}
-                src={srcImage}
-                viewMode={2}
-                // minCropBoxHeight={10}
-                // minCropBoxWidth={10}
-                background={true}
-                responsive={true}
-                //autoCropArea={1}
-                checkOrientation={false} // https://github.com/fengyuanchen/cropperjs/issues/671
-                guides={true}
-                dragMode="move"
-                autoCrop={false}
-                onInitialized={instance => {
-                  this.setState({ cropper: instance });
-                }}
-              />
-            </div>
-            <div className="ImageEditor__rotateimage">
+            <Cropper
+              style={this.state.style}
+              zoomTo={0}
+              src={srcImage}
+              viewMode={0}
+              background={true}
+              responsive={true}
+              checkOrientation={false}
+              guides={true}
+              dragMode="move"
+              autoCrop={false}
+              onInitialized={instance => {
+                this.setState({ cropper: instance });
+              }}
+            />
+            <div className="ImageEditor__actionBar">
               <IconButton
-                label={intl.formatMessage(messages.rotateLeft)}
+                label={intl.formatMessage(messages.rotateRight)}
                 onClick={() => {
                   this.state.cropper.rotate(90);
                 }}
               >
-                <RotateLeftIcon />
+                <RotateRightIcon />
               </IconButton>
               {this.state.isCropActive ? (
                 <React.Fragment>
@@ -143,22 +160,13 @@ class ImageEditor extends PureComponent {
                 </IconButton>
               )}
               <IconButton
-                label={intl.formatMessage(messages.rotateRight)}
-                onClick={() => {
-                  this.state.cropper.rotate(-90);
-                  this.state.cropper.zoomTo(0);
-                }}
-              >
-                <RotateRightIcon />
-              </IconButton>
-              <IconButton
-                label={intl.formatMessage(messages.cropImage)}
+                label={intl.formatMessage(messages.zoomIn)}
                 onClick={() => this.state.cropper.zoom(0.1)}
               >
                 <ZoomInIcon />
               </IconButton>
               <IconButton
-                label={intl.formatMessage(messages.cropImage)}
+                label={intl.formatMessage(messages.zoomOut)}
                 onClick={() => this.state.cropper.zoom(-0.1)}
               >
                 <ZoomOutIcon />
diff --git a/src/components/Board/ImageEditor/ImageEditor.css b/src/components/Board/ImageEditor/ImageEditor.css
index 376d4f9b3..ff3f3ca9f 100644
--- a/src/components/Board/ImageEditor/ImageEditor.css
+++ b/src/components/Board/ImageEditor/ImageEditor.css
@@ -4,7 +4,7 @@
   align-items: center;
 }
 
-.ImageEditor__rotateimage {
+.ImageEditor__actionBar {
   display: flex;
   justify-content: center;
   margin-bottom: 2px;
diff --git a/src/components/Board/ImageEditor/ImageEditor.messages.js b/src/components/Board/ImageEditor/ImageEditor.messages.js
index 75e3447b1..b14eb693d 100644
--- a/src/components/Board/ImageEditor/ImageEditor.messages.js
+++ b/src/components/Board/ImageEditor/ImageEditor.messages.js
@@ -3,16 +3,12 @@ import { defineMessages } from 'react-intl';
 export default defineMessages({
   title: {
     id: 'cboard.components.Board.ImageEditor.title',
-    defaultMessage: 'Images editor'
+    defaultMessage: 'Image editor'
   },
   rotateRight: {
     id: 'cboard.components.Board.ImageEditor.rotateRight',
     defaultMessage: 'Rotate right'
   },
-  rotateLeft: {
-    id: 'cboard.components.Board.ImageEditor.rotateLeft',
-    defaultMessage: 'Rotate left'
-  },
   cropImage: {
     id: 'cboard.components.Board.ImageEditor.cropImage',
     defaultMessage: 'Crop image'
@@ -28,5 +24,13 @@ export default defineMessages({
   cancelCrop: {
     id: 'cboard.components.Board.ImageEditor.cancelCrop',
     defaultMessage: 'Cancel crop'
+  },
+  zoomIn: {
+    id: 'cboard.components.Board.ImageEditor.zoomIn',
+    defaultMessage: 'Zoom in'
+  },
+  zoomOut: {
+    id: 'cboard.components.Board.ImageEditor.zoomOut',
+    defaultMessage: 'Zoom out'
   }
 });
diff --git a/src/components/Board/TileEditor/TileEditor.component.js b/src/components/Board/TileEditor/TileEditor.component.js
index faface736..b592ae988 100644
--- a/src/components/Board/TileEditor/TileEditor.component.js
+++ b/src/components/Board/TileEditor/TileEditor.component.js
@@ -35,7 +35,6 @@ import ImageEditor from '../ImageEditor';
 
 import API from '../../../api';
 import { isAndroid, writeCvaFile } from '../../../cordova-util';
-import { Edit } from '@material-ui/icons';
 
 export class TileEditor extends Component {
   static propTypes = {
@@ -63,7 +62,8 @@ export class TileEditor extends Component {
      * Callback fired when submitting a new board tile
      */
     onAddSubmit: PropTypes.func.isRequired,
-    boards: PropTypes.array
+    boards: PropTypes.array,
+    userData: PropTypes.object
   };
 
   static defaultProps = {
@@ -99,29 +99,18 @@ export class TileEditor extends Component {
       selectedBackgroundColor: '',
       tile: this.defaultTile,
       linkedBoard: '',
-      imageUploaded: [],
-      rotateDeg: 0,
-      isRotationArrowActive: false,
-      isEditImageActive: false
+      imageUploadedData: [],
+      isEditImageBtnActive: false
     };
 
-    this.defaultImageUploaded = {
+    this.defaultimageUploadedData = {
       isUploaded: false,
       fileName: '',
-      originalFile: null
+      blobHQ: null,
+      blob: null
     };
   }
 
-  createImageUploadedArray() {
-    if (this.editingTile()) {
-      let imageUploadedArray = new Array(this.props.editingTiles.length);
-      imageUploadedArray.fill(this.defaultImageUploaded);
-      this.setState({ imageUploaded: imageUploadedArray });
-    } else {
-      this.setState({ imageUploaded: new Array(this.defaultImageUploaded) });
-    }
-  }
-
   UNSAFE_componentWillReceiveProps(props) {
     this.updateTileProperty('id', shortid.generate()); // todo not here
     this.setState({ editingTiles: props.editingTiles });
@@ -165,39 +154,39 @@ export class TileEditor extends Component {
   handleSubmit = async () => {
     const { onEditSubmit, onAddSubmit } = this.props;
     if (this.editingTile()) {
-      if (this.state.imageUploaded.length) {
+      const { imageUploadedData } = this.state;
+      if (imageUploadedData.length) {
         let tilesToAdd = JSON.parse(JSON.stringify(this.state.editingTiles));
-        this.state.imageUploaded.map(async (obj, index) => {
-          if (obj.isUploaded) {
-            tilesToAdd[index].image = await this.updateTileImgURL(
-              tilesToAdd[index].image,
-              obj.fileName
-            );
-            console.log('Aca entro', tilesToAdd);
-          }
-        });
+        await Promise.all(
+          imageUploadedData.map(async (obj, index) => {
+            if (obj.isUploaded) {
+              tilesToAdd[index].image = await this.updateTileImgURL(
+                obj.blob,
+                obj.fileName
+              );
+            }
+          })
+        );
         onEditSubmit(tilesToAdd);
       } else {
         onEditSubmit(this.state.editingTiles);
       }
     } else {
       const tileToAdd = this.state.tile;
-
-      if (this.state.imageUploaded.length) {
-        const imageUploaded = this.state.imageUploaded[this.state.activeStep];
-        if (imageUploaded.isUploaded) {
-          tileToAdd.image = await this.updateTileImgURL(
-            tileToAdd.image,
-            imageUploaded.fileName
-          );
-        }
+      const imageUploadedData = this.state.imageUploadedData[
+        this.state.activeStep
+      ];
+      if (imageUploadedData && imageUploadedData.isUploaded) {
+        tileToAdd.image = await this.updateTileImgURL(
+          imageUploadedData.blob,
+          imageUploadedData.fileName
+        );
       }
 
       const selectedBackgroundColor = this.state.selectedBackgroundColor;
       if (selectedBackgroundColor) {
         tileToAdd.backgroundColor = selectedBackgroundColor;
       }
-      console.log('aca submit', tileToAdd);
       onAddSubmit(tileToAdd);
     }
 
@@ -205,30 +194,25 @@ export class TileEditor extends Component {
       activeStep: 0,
       selectedBackgroundColor: '',
       tile: this.defaultTile,
-      imageUploaded: [],
-      rotateDeg: 0,
-      isRotationArrowActive: false,
-      isCropActive: false
+      imageUploadedData: [],
+      isEditImageBtnActive: false
     });
   };
 
-  updateTileImgURL = async (image, fileName) => {
+  updateTileImgURL = async (blob, fileName) => {
     const { userData } = this.props;
-    const blob = this.dataURItoBlob(image);
     const user = userData.email ? userData : null;
     if (user) {
       // this.setState({
       //   loading: true
       // });
-      console.log('Hay usuario');
       try {
         const imageUrl = await API.uploadFile(blob, fileName);
         console.log('imagen guardada en servidor', imageUrl);
-        console.log('URL', imageUrl);
-        console.log('FileName:', fileName);
         return imageUrl;
       } catch (error) {
         console.log('imagen no guardad en servidor');
+        return await this.blobToBase64(blob);
       }
       // } finally {
       //   this.setState({
@@ -236,74 +220,83 @@ export class TileEditor extends Component {
       //   });
     } else {
       if (isAndroid()) {
-        console.log(fileName);
         const filePath = '/Android/data/com.unicef.cboard/files/' + fileName;
         const fEntry = await writeCvaFile(filePath, blob);
-        console.log(fEntry);
         return fEntry.nativeURL;
       } else {
-        return image;
+        return await this.blobToBase64(blob);
       }
     }
   };
 
+  blobToBase64 = async blob => {
+    return new Promise(resolve => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        resolve(reader.result);
+      };
+      reader.readAsDataURL(blob);
+    });
+  };
+
   handleCancel = () => {
     const { onClose } = this.props;
     this.setState({
       activeStep: 0,
       selectedBackgroundColor: '',
       tile: this.defaultTile,
-      imageUploaded: [],
-      rotateDeg: 0,
-      isRotationArrowActive: false
+      imageUploadedData: [],
+      isEditImageBtnActive: false
     });
     onClose();
   };
 
-  dataURItoBlob(dataURI) {
-    // convert base64/URLEncoded data component to raw binary data held in a string
-    var byteString;
-    if (dataURI.split(',')[0].indexOf('base64') >= 0)
-      byteString = atob(dataURI.split(',')[1]);
-    else byteString = unescape(dataURI.split(',')[1]);
-    // separate out the mime component
-    var mimeString = dataURI
-      .split(',')[0]
-      .split(':')[1]
-      .split(';')[0];
-    // write the bytes of the string to a typed array
-    var ia = new Uint8Array(byteString.length);
-    for (var i = 0; i < byteString.length; i++) {
-      ia[i] = byteString.charCodeAt(i);
+  createimageUploadedDataArray() {
+    if (this.editingTile()) {
+      let imageUploadedDataArray = new Array(this.state.editingTiles.length);
+      imageUploadedDataArray.fill(this.defaultimageUploadedData);
+      this.setState({ imageUploadedData: imageUploadedDataArray });
+    } else {
+      this.setState({
+        imageUploadedData: new Array(this.defaultimageUploadedData)
+      });
     }
-    return new Blob([ia], { type: mimeString });
   }
 
-  handleInputImageChange = (image, fileName, originalFile) => {
-    if (!this.state.imageUploaded.length) {
-      this.createImageUploadedArray();
+  handleInputImageChange = (blob, fileName, blobHQ) => {
+    if (!this.state.imageUploadedData.length) {
+      this.createimageUploadedDataArray();
     }
-    this.setImageUploaded(true, fileName, originalFile);
-    this.setState({ isRotationArrowActive: true });
+    this.setimageUploadedData(true, fileName, blobHQ, blob);
+    this.setState({ isEditImageBtnActive: true });
+    const image = URL.createObjectURL(blob);
     this.updateTileProperty('image', image);
   };
 
-  setImageUploaded = (isUploaded, fileName, originalFile) => {
+  setimageUploadedData = (isUploaded, fileName, blobHQ, blob) => {
     const { activeStep } = this.state;
-    let cpyImageUploaded = JSON.parse(JSON.stringify(this.state.imageUploaded)); //copy array value from state
-    cpyImageUploaded[activeStep].isUploaded = isUploaded;
-    cpyImageUploaded[activeStep].fileName = fileName;
-    cpyImageUploaded[activeStep].originalFile = originalFile;
-    this.setState({ imageUploaded: cpyImageUploaded });
+    let imageUploadedData = this.state.imageUploadedData.map((item, indx) => {
+      if (indx === activeStep) {
+        return {
+          ...item,
+          isUploaded: isUploaded,
+          fileName: fileName,
+          blobHQ: blobHQ,
+          blob: blob
+        };
+      } else {
+        return item;
+      }
+    });
+    this.setState({ imageUploadedData: imageUploadedData });
   };
 
   handleSymbolSearchChange = ({ image, labelKey, label }) => {
     this.updateTileProperty('labelKey', labelKey);
     this.updateTileProperty('label', label);
     this.updateTileProperty('image', image);
-    this.resetRotation();
-    if (this.state.imageUploaded.length) {
-      this.setImageUploaded(false, '');
+    if (this.state.imageUploadedData.length) {
+      this.setimageUploadedData(false, '');
     }
   };
 
@@ -347,18 +340,17 @@ export class TileEditor extends Component {
   handleBack = event => {
     this.setState({ activeStep: this.state.activeStep - 1 });
     this.setState({ selectedBackgroundColor: '', linkedBoard: '' });
-    this.setState({ rotateDeg: 0, isRotationArrowActive: false });
+    this.setState({ isEditImageBtnActive: false });
   };
 
   handleNext = async event => {
     this.setState({ activeStep: this.state.activeStep + 1 });
     this.setState({ selectedBackgroundColor: '', linkedBoard: '' });
-    this.setState({ rotateDeg: 0, isRotationArrowActive: false });
+    this.setState({ isEditImageBtnActive: false });
   };
 
   handleSearchClick = event => {
     this.setState({ isSymbolSearchOpen: true });
-    this.resetRotation();
   };
 
   handleColorChange = event => {
@@ -394,44 +386,20 @@ export class TileEditor extends Component {
     }
   };
 
-  handleOnClickRotationRigth = () => {
-    let actualPosition = this.state.rotateDeg;
-    actualPosition === 270
-      ? this.setState({ rotateDeg: 0 })
-      : this.setState({ rotateDeg: actualPosition + 90 });
-  };
-  handleOnClickRotationLeft = () => {
-    let actualPosition = this.state.rotateDeg;
-    actualPosition === 0
-      ? this.setState({ rotateDeg: 270 })
-      : this.setState({ rotateDeg: actualPosition - 90 });
-  };
-  handleOnClickCrop = () => {
-    this.setState({ isCropActive: true });
-  };
-  handleOnClickDoneCrop = () => {
-    const { cropper } = this.state;
-    this.setState({ isCropActive: false });
-    if (typeof cropper !== 'undefined') {
-      this.updateTileProperty('image', cropper.getCroppedCanvas().toDataURL());
-    }
-  };
-  handleEditImage = () => {
-    this.setState({ isEditImageActive: true });
-  };
-
-  resetRotation = () => {
-    this.setState({ rotateDeg: 0, isRotationArrowActive: false });
-  };
   handleOnClickImageEditor = () => {
     this.setState({ openImageEditor: true });
   };
   onImageEditorClose = () => {
     this.setState({ openImageEditor: false });
   };
-  onImageEditorDone = imgCropped => {
-    this.setState({ openImageEditor: false });
-    this.updateTileProperty('image', imgCropped);
+  onImageEditorDone = blob => {
+    this.setState(prevState => {
+      const newArray = [...prevState.imageUploadedData];
+      newArray[this.state.activeStep].blob = blob;
+      return { imageUploadedData: newArray };
+    });
+    const image = URL.createObjectURL(blob);
+    this.updateTileProperty('image', image);
   };
 
   render() {
@@ -514,19 +482,18 @@ export class TileEditor extends Component {
                         <Symbol image={tileInView.image} label={currentLabel} />
                       </Tile>
                     </div>
-                    {this.state.isRotationArrowActive && (
+                    {this.state.isEditImageBtnActive && (
                       <React.Fragment>
                         <ImageEditor
                           intl={intl}
                           open={this.state.openImageEditor}
                           onImageEditorClose={this.onImageEditorClose}
                           onImageEditorDone={this.onImageEditorDone}
-                          image={
-                            this.state.imageUploaded[this.state.activeStep]
-                              .originalFile
-                          }
+                          image={URL.createObjectURL(
+                            this.state.imageUploadedData[this.state.activeStep]
+                              .blobHQ
+                          )}
                         />
-                        {/* <div > */}
                         <Button
                           variant="contained"
                           color="secondary"
@@ -536,7 +503,6 @@ export class TileEditor extends Component {
                         >
                           {intl.formatMessage(messages.editImage)}
                         </Button>
-                        {/* </div> */}
                       </React.Fragment>
                     )}
                     <Button
@@ -548,12 +514,7 @@ export class TileEditor extends Component {
                       {intl.formatMessage(messages.symbols)}
                     </Button>
                     <div className="TileEditor__input-image">
-                      <InputImage
-                        onChange={this.handleInputImageChange}
-                        rotateDeg={this.state.rotateDeg}
-                        isRotationArrowActive={this.state.isRotationArrowActive}
-                        resetRotation={this.resetRotation}
-                      />
+                      <InputImage onChange={this.handleInputImageChange} />
                     </div>
                   </div>
                   <div className="TileEditor__form-fields">
diff --git a/src/components/UI/InputImage/InputImage.component.js b/src/components/UI/InputImage/InputImage.component.js
index 7383a8869..09af30612 100644
--- a/src/components/UI/InputImage/InputImage.component.js
+++ b/src/components/UI/InputImage/InputImage.component.js
@@ -1,87 +1,40 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from 'react-intl';
-import {
-  requestCvaPermissions,
-  isAndroid,
-  isCordova,
-  writeCvaFile
-} from '../../../cordova-util';
+import { requestCvaPermissions, isCordova } from '../../../cordova-util';
 import PhotoCameraIcon from '@material-ui/icons/PhotoCamera';
 import readAndCompressImage from 'browser-image-resizer';
-import CircularProgress from '@material-ui/core/CircularProgress';
-
-import API from '../../../api';
 import messages from './InputImage.messages';
 import './InputImage.css';
 
-import Cropper from 'react-cropper';
-import 'cropperjs/dist/cropper.css';
-
 class InputImage extends Component {
   static propTypes = {
     /**
      * @ignore
      */
     intl: intlShape.isRequired,
-    user: PropTypes.object,
     /**
      * Callback fired when input changes
      */
-    onChange: PropTypes.func.isRequired,
-    rotateDeg: PropTypes.number,
-    image: PropTypes.bool,
-    resetRotation: PropTypes.func.isRequired
-  };
-  state = {
-    loading: false,
-    resizedImage: null,
-    fileName: ''
+    onChange: PropTypes.func.isRequired
   };
 
-  componentDidUpdate(prevProps) {
-    console.log(this.props.isRotationArrowActive);
-    if (
-      prevProps.rotateDeg !== this.props.rotateDeg &&
-      this.props.isRotationArrowActive
-    ) {
-      this.rotateImage(this.state.resizedImage, this.state.fileName);
-    }
-  }
-
-  async rotateImage(resizedImage, fileName) {
-    const { onChange, rotateDeg } = this.props;
-    const imgRotated = await this.drawRotated(resizedImage, rotateDeg);
-    onChange(imgRotated, fileName);
+  async resizeImage(file, config) {
+    const resizedBlob = await readAndCompressImage(file, config);
+    return resizedBlob;
   }
 
-  async resizeImage(
-    file,
-    config = {
+  handleChange = async event => {
+    const file = event.target.files[0];
+    const configLQ = {
       quality: 7,
       maxWidth: 200,
       maxHeight: 200,
       autoRotate: true,
       debug: false,
       mimeType: 'image/png'
-    }
-  ) {
-    const resizedImage = await readAndCompressImage(file, config);
-    return resizedImage;
-  }
-
-  handleChange = async event => {
-    this.props.resetRotation();
-    const file = event.target.files[0];
-    this.handleFile(file);
-  };
-
-  handleFile = async file => {
-    const { onChange } = this.props;
-    const resizedImage = await this.resizeImage(file);
-    this.setState({ resizedImage: resizedImage, fileName: file.name });
-    const imgBase64 = await this.blobToBase64(resizedImage);
-    const config = {
+    };
+    const configHQ = {
       quality: 1,
       maxWidth: 800,
       maxHeight: 800,
@@ -89,62 +42,11 @@ class InputImage extends Component {
       debug: false,
       mimeType: 'image/png'
     };
-    const originalFile = await this.resizeImage(file, config);
-    const originalFileBs64 = await this.blobToBase64(originalFile);
-    onChange(imgBase64, file.name, originalFileBs64);
+    const { onChange } = this.props;
+    const resizedBlob = await this.resizeImage(file, configLQ);
+    const blobHQ = await this.resizeImage(file, configHQ);
+    onChange(resizedBlob, file.name, blobHQ);
   };
-
-  fileToDataUri = file =>
-    new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onload = event => {
-        resolve(event.target.result);
-      };
-      reader.readAsDataURL(file);
-    });
-
-  drawRotated(blob, degrees) {
-    return new Promise((resolve, reject) => {
-      var image = new Image();
-      var urlCreator = window.URL || window.webkitURL;
-      var imageUrl = urlCreator.createObjectURL(blob);
-      image.src = imageUrl;
-      image.onload = () => {
-        var canvas = document.createElement('canvas');
-        var ctx = canvas.getContext('2d');
-        canvas.style.width = '20%';
-
-        if (degrees === 90 || degrees === 270) {
-          canvas.width = image.height;
-          canvas.height = image.width;
-        } else {
-          canvas.width = image.width;
-          canvas.height = image.height;
-        }
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        if (degrees === 90 || degrees === 270) {
-          ctx.translate(image.height / 2, image.width / 2);
-        } else {
-          ctx.translate(image.width / 2, image.height / 2);
-        }
-        ctx.rotate((degrees * Math.PI) / 180);
-        ctx.drawImage(image, -image.width / 2, -image.height / 2);
-        const imgRotated = canvas.toDataURL('image/png');
-        //var imgFinal = this.dataURItoBlob(imgRotated);
-        resolve(imgRotated);
-      };
-    });
-  }
-
-  blobToBase64(blob) {
-    return new Promise(resolve => {
-      const reader = new FileReader();
-      reader.onload = () => {
-        resolve(reader.result);
-      };
-      reader.readAsDataURL(blob);
-    });
-  }
   render() {
     const { intl } = this.props;
     if (isCordova()) {
@@ -153,19 +55,15 @@ class InputImage extends Component {
     return (
       <div className="InputImage">
         <PhotoCameraIcon />
-        {this.state.loading ? (
-          <CircularProgress size={24} thickness={7} />
-        ) : (
-          <label className="InputImage__label">
-            {intl.formatMessage(messages.uploadImage)}
-            <input
-              className="InputImage__input"
-              type="file"
-              accept="image/*"
-              onChange={this.handleChange}
-            />
-          </label>
-        )}
+        <label className="InputImage__label">
+          {intl.formatMessage(messages.uploadImage)}
+          <input
+            className="InputImage__input"
+            type="file"
+            accept="image/*"
+            onChange={this.handleChange}
+          />
+        </label>
       </div>
     );
   }
diff --git a/src/components/UI/InputImage/InputImage.container.js b/src/components/UI/InputImage/InputImage.container.js
deleted file mode 100644
index 1bff79ab1..000000000
--- a/src/components/UI/InputImage/InputImage.container.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import InputImage from './InputImage.component';
-
-const InputImageContainer = props => <InputImage {...props} />;
-
-const mapStateToProps = ({ app: { userData } }, ownProps) => ({
-  ...ownProps,
-  user: userData.email ? userData : null
-});
-
-export default connect(mapStateToProps)(InputImageContainer);
diff --git a/src/components/UI/InputImage/index.js b/src/components/UI/InputImage/index.js
index 4e0734b72..1d67c83fd 100644
--- a/src/components/UI/InputImage/index.js
+++ b/src/components/UI/InputImage/index.js
@@ -1 +1 @@
-export { default } from './InputImage.container';
+export { default } from './InputImage.component';
diff --git a/src/translations/src/cboard.json b/src/translations/src/cboard.json
index b063efb87..18610728b 100644
--- a/src/translations/src/cboard.json
+++ b/src/translations/src/cboard.json
@@ -149,9 +149,18 @@
   "cboard.components.Board.TileEditor.existingBoards": "Link to an existing board",
   "cboard.components.Board.TileEditor.none": "None",
   "cboard.components.Board.TileEditor.symbols": "Symbols",
+  "cboard.components.Board.TileEditor.editImage": "Edit image",
   "cboard.components.Board.boardEditTitleCancel": "Cancel",
   "cboard.components.Board.boardEditTitleAccept": "Accept",
   "cboard.components.Board.userProfileLocked": "User Profile is locked, please unlock settings to see your user profile.",
+  "cboard.components.Board.ImageEditor.title": "Image editor",
+  "cboard.components.Board.ImageEditor.rotateRight": "Rotate right",
+  "cboard.components.Board.ImageEditor.cropImage": "Crop image",
+  "cboard.components.Board.ImageEditor.close": "Close",
+  "cboard.components.Board.ImageEditor.done": "Done",
+  "cboard.components.Board.ImageEditor.cancelCrop": "Cancel crop",
+  "cboard.components.Board.ImageEditor.zoomIn": "Zoom in",
+  "cboard.components.Board.ImageEditor.zoomOut": "Zoom out",
   "cboard.components.BoardShare.title": "Share your board",
   "cboard.components.BoardShare.close": "Close",
   "cboard.components.BoardShare.publishBoard": "Publish Board",

From 8cc00761b3a3999d2c9cd8cef829067b709fe42f Mon Sep 17 00:00:00 2001
From: RodriSanchez1 <rodri.sanchez1998@gmail.com>
Date: Fri, 5 Nov 2021 11:10:01 -0300
Subject: [PATCH 08/10] Cropper added to package.json

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index d45eb12fe..1f44b48b4 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
     "ramda": "^0.27.1",
     "react": "^17.0.2",
     "react-autosuggest": "^9.4.2",
+    "react-cropper": "^2.1.8",
     "react-dnd": "^11.1.3",
     "react-dnd-touch-backend": "^11.1.3",
     "react-dom": "^17.0.2",

From 57bfb62413eb9865f1ff6c961ee951369751578f Mon Sep 17 00:00:00 2001
From: RodriSanchez1 <rodri.sanchez1998@gmail.com>
Date: Tue, 16 Nov 2021 11:55:18 -0300
Subject: [PATCH 09/10] Fixes

---
 .../Board/SymbolSearch/SymbolSearch.component.js      |  4 ++--
 .../Board/TileEditor/TileEditor.component.js          | 10 +++++++++-
 src/components/UI/InputImage/InputImage.component.js  | 11 +++++++----
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/components/Board/SymbolSearch/SymbolSearch.component.js b/src/components/Board/SymbolSearch/SymbolSearch.component.js
index 95ae47372..fc45ce797 100644
--- a/src/components/Board/SymbolSearch/SymbolSearch.component.js
+++ b/src/components/Board/SymbolSearch/SymbolSearch.component.js
@@ -251,11 +251,11 @@ export class SymbolSearch extends PureComponent {
 
   handleSuggestionsClearRequested = () => {};
 
-  handleSuggestionSelected = (event, { suggestion }) => {
+  handleSuggestionSelected = async (event, { suggestion }) => {
     const { onChange, onClose } = this.props;
     this.setState({ value: '' });
 
-    onChange({
+    await onChange({
       image: suggestion.src,
       label: suggestion.translatedId,
       labelKey: undefined
diff --git a/src/components/Board/TileEditor/TileEditor.component.js b/src/components/Board/TileEditor/TileEditor.component.js
index b592ae988..adc21ed28 100644
--- a/src/components/Board/TileEditor/TileEditor.component.js
+++ b/src/components/Board/TileEditor/TileEditor.component.js
@@ -273,7 +273,7 @@ export class TileEditor extends Component {
     this.updateTileProperty('image', image);
   };
 
-  setimageUploadedData = (isUploaded, fileName, blobHQ, blob) => {
+  setimageUploadedData = (isUploaded, fileName, blobHQ = null, blob = null) => {
     const { activeStep } = this.state;
     let imageUploadedData = this.state.imageUploadedData.map((item, indx) => {
       if (indx === activeStep) {
@@ -301,7 +301,14 @@ export class TileEditor extends Component {
   };
 
   handleSymbolSearchClose = event => {
+    const { imageUploadedData } = this.state;
     this.setState({ isSymbolSearchOpen: false });
+    if (
+      imageUploadedData.length &&
+      imageUploadedData[this.state.activeStep].isUploaded
+    ) {
+      this.setState({ isEditImageBtnActive: true });
+    }
   };
 
   handleLabelChange = event => {
@@ -351,6 +358,7 @@ export class TileEditor extends Component {
 
   handleSearchClick = event => {
     this.setState({ isSymbolSearchOpen: true });
+    this.setState({ isEditImageBtnActive: false });
   };
 
   handleColorChange = event => {
diff --git a/src/components/UI/InputImage/InputImage.component.js b/src/components/UI/InputImage/InputImage.component.js
index 09af30612..97d421216 100644
--- a/src/components/UI/InputImage/InputImage.component.js
+++ b/src/components/UI/InputImage/InputImage.component.js
@@ -42,10 +42,13 @@ class InputImage extends Component {
       debug: false,
       mimeType: 'image/png'
     };
-    const { onChange } = this.props;
-    const resizedBlob = await this.resizeImage(file, configLQ);
-    const blobHQ = await this.resizeImage(file, configHQ);
-    onChange(resizedBlob, file.name, blobHQ);
+    if (file) {
+      //if you cancel the image uploaded, the event is dispached and the file is null
+      const { onChange } = this.props;
+      const resizedBlob = await this.resizeImage(file, configLQ);
+      const blobHQ = await this.resizeImage(file, configHQ);
+      onChange(resizedBlob, file.name, blobHQ);
+    }
   };
   render() {
     const { intl } = this.props;

From faebdaa9984dbb5648621c078aad04c0a31672f1 Mon Sep 17 00:00:00 2001
From: RodriSanchez1 <rodri.sanchez1998@gmail.com>
Date: Thu, 18 Nov 2021 11:17:55 -0300
Subject: [PATCH 10/10] Fixes update

---
 .../SymbolSearch/SymbolSearch.component.js    |  7 +++----
 .../Board/TileEditor/TileEditor.component.js  | 21 +++++++++++--------
 .../Board/TileEditor/TileEditor.css           |  4 ----
 3 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/components/Board/SymbolSearch/SymbolSearch.component.js b/src/components/Board/SymbolSearch/SymbolSearch.component.js
index fc45ce797..040900f30 100644
--- a/src/components/Board/SymbolSearch/SymbolSearch.component.js
+++ b/src/components/Board/SymbolSearch/SymbolSearch.component.js
@@ -251,16 +251,15 @@ export class SymbolSearch extends PureComponent {
 
   handleSuggestionsClearRequested = () => {};
 
-  handleSuggestionSelected = async (event, { suggestion }) => {
+  handleSuggestionSelected = (event, { suggestion }) => {
     const { onChange, onClose } = this.props;
     this.setState({ value: '' });
 
-    await onChange({
+    onChange({
       image: suggestion.src,
       label: suggestion.translatedId,
       labelKey: undefined
-    });
-    onClose();
+    }).then(() => onClose());
   };
 
   handleChange = (event, { newValue }) => {
diff --git a/src/components/Board/TileEditor/TileEditor.component.js b/src/components/Board/TileEditor/TileEditor.component.js
index adc21ed28..9c80bf343 100644
--- a/src/components/Board/TileEditor/TileEditor.component.js
+++ b/src/components/Board/TileEditor/TileEditor.component.js
@@ -208,10 +208,10 @@ export class TileEditor extends Component {
       // });
       try {
         const imageUrl = await API.uploadFile(blob, fileName);
-        console.log('imagen guardada en servidor', imageUrl);
+        // console.log('imagen guardada en servidor', imageUrl);
         return imageUrl;
       } catch (error) {
-        console.log('imagen no guardad en servidor');
+        //console.log('imagen no guardad en servidor');
         return await this.blobToBase64(blob);
       }
       // } finally {
@@ -292,12 +292,15 @@ export class TileEditor extends Component {
   };
 
   handleSymbolSearchChange = ({ image, labelKey, label }) => {
-    this.updateTileProperty('labelKey', labelKey);
-    this.updateTileProperty('label', label);
-    this.updateTileProperty('image', image);
-    if (this.state.imageUploadedData.length) {
-      this.setimageUploadedData(false, '');
-    }
+    return new Promise(resolve => {
+      this.updateTileProperty('labelKey', labelKey);
+      this.updateTileProperty('label', label);
+      this.updateTileProperty('image', image);
+      if (this.state.imageUploadedData.length) {
+        this.setimageUploadedData(false, '');
+      }
+      resolve();
+    });
   };
 
   handleSymbolSearchClose = event => {
@@ -507,7 +510,7 @@ export class TileEditor extends Component {
                           color="secondary"
                           startIcon={<EditIcon />}
                           onClick={this.handleOnClickImageEditor}
-                          className="TileEditor__EditImage"
+                          style={{ marginBottom: '6px' }}
                         >
                           {intl.formatMessage(messages.editImage)}
                         </Button>
diff --git a/src/components/Board/TileEditor/TileEditor.css b/src/components/Board/TileEditor/TileEditor.css
index 19bcb95de..76ce606f4 100644
--- a/src/components/Board/TileEditor/TileEditor.css
+++ b/src/components/Board/TileEditor/TileEditor.css
@@ -76,7 +76,3 @@
 .TileEditor__radiogroup__formcontrollabel {
   margin-top: 5px;
 }
-
-.TileEditor__EditImage {
-  margin-bottom: 6px !important;
-}
