From c8d0e0e138d67f7e71481b852bbbd419be22559c Mon Sep 17 00:00:00 2001 From: rakeshkumar1019 Date: Fri, 24 Nov 2023 18:36:14 +0530 Subject: [PATCH 1/6] add loading spinner on upload image --- .../Board/TileEditor/TileEditor.component.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/components/Board/TileEditor/TileEditor.component.js b/src/components/Board/TileEditor/TileEditor.component.js index 1678af743..1e753f0d5 100644 --- a/src/components/Board/TileEditor/TileEditor.component.js +++ b/src/components/Board/TileEditor/TileEditor.component.js @@ -17,6 +17,7 @@ import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft'; import Select from '@material-ui/core/Select'; import MenuItem from '@material-ui/core/MenuItem'; import InputLabel from '@material-ui/core/InputLabel'; +import CircularProgress from '@material-ui/core/CircularProgress'; import messages from './TileEditor.messages'; import SymbolSearch from '../SymbolSearch'; @@ -107,7 +108,8 @@ export class TileEditor extends Component { tile: this.defaultTile, linkedBoard: '', imageUploadedData: [], - isEditImageBtnActive: false + isEditImageBtnActive: false, + loading: false }; this.defaultimageUploadedData = { @@ -289,6 +291,9 @@ export class TileEditor extends Component { }; setimageUploadedData = (isUploaded, fileName, blobHQ = null, blob = null) => { + this.setState({ + loading: true + }); const { activeStep } = this.state; let imageUploadedData = this.state.imageUploadedData.map((item, indx) => { if (indx === activeStep) { @@ -304,6 +309,9 @@ export class TileEditor extends Component { } }); this.setState({ imageUploadedData: imageUploadedData }); + this.setState({ + loading: false + }); }; handleSymbolSearchChange = ({ image, labelKey, label, keyPath }) => { @@ -523,11 +531,15 @@ export class TileEditor extends Component { Boolean(tileInView.loadBoard) ? 'folder' : 'button' } > - + : + } {this.state.isEditImageBtnActive && ( From 46045246e12af87e455a81cd7e63bebc14669c04 Mon Sep 17 00:00:00 2001 From: rakeshkumar1019 Date: Tue, 28 Nov 2023 11:39:12 +0530 Subject: [PATCH 2/6] add loading spinner on upload image in input image component --- .../Board/TileEditor/TileEditor.component.js | 34 +++++++++---------- .../UI/InputImage/InputImage.component.js | 9 ++++- 2 files changed, 24 insertions(+), 19 deletions(-) diff --git a/src/components/Board/TileEditor/TileEditor.component.js b/src/components/Board/TileEditor/TileEditor.component.js index 1e753f0d5..753ccd290 100644 --- a/src/components/Board/TileEditor/TileEditor.component.js +++ b/src/components/Board/TileEditor/TileEditor.component.js @@ -109,7 +109,7 @@ export class TileEditor extends Component { linkedBoard: '', imageUploadedData: [], isEditImageBtnActive: false, - loading: false + isLoading: false }; this.defaultimageUploadedData = { @@ -290,10 +290,11 @@ export class TileEditor extends Component { this.updateTileProperty('image', image); }; + handleLoadingStateChange = (isLoading) => { + this.setState({ isLoading: isLoading }) + }; + setimageUploadedData = (isUploaded, fileName, blobHQ = null, blob = null) => { - this.setState({ - loading: true - }); const { activeStep } = this.state; let imageUploadedData = this.state.imageUploadedData.map((item, indx) => { if (indx === activeStep) { @@ -309,9 +310,6 @@ export class TileEditor extends Component { } }); this.setState({ imageUploadedData: imageUploadedData }); - this.setState({ - loading: false - }); }; handleSymbolSearchChange = ({ image, labelKey, label, keyPath }) => { @@ -531,15 +529,15 @@ export class TileEditor extends Component { Boolean(tileInView.loadBoard) ? 'folder' : 'button' } > - { - this.state.loading - ? - : - } + { + this.state.isLoading + ? + : + } {this.state.isEditImageBtnActive && ( @@ -574,7 +572,7 @@ export class TileEditor extends Component { {intl.formatMessage(messages.symbols)}
- +
@@ -707,4 +705,4 @@ export class TileEditor extends Component { } } -export default injectIntl(TileEditor); +export default injectIntl(TileEditor); \ No newline at end of file diff --git a/src/components/UI/InputImage/InputImage.component.js b/src/components/UI/InputImage/InputImage.component.js index ea8149cbc..9702e2ce5 100644 --- a/src/components/UI/InputImage/InputImage.component.js +++ b/src/components/UI/InputImage/InputImage.component.js @@ -33,7 +33,11 @@ class InputImage extends Component { /** * Callback fired when input changes */ - onChange: PropTypes.func.isRequired + onChange: PropTypes.func.isRequired, + /** + * Callback fired when loading state changes + */ + onLoad: PropTypes.func.isRequired, }; async resizeImage(file, imageName = null) { @@ -85,11 +89,14 @@ class InputImage extends Component { }; handleChange = async event => { + const { onLoad } = this.props; + onLoad(true) const file = event.target.files[0]; if (file) { //if you cancel the image uploaded, the event is dispached and the file is null await this.resizeImage(file); } + onLoad(false) }; render() { const { intl } = this.props; From 46c2f0aa7b32583427635371736364153c9a9811 Mon Sep 17 00:00:00 2001 From: rakeshkumar1019 Date: Tue, 28 Nov 2023 11:49:29 +0530 Subject: [PATCH 3/6] update unit test input images --- src/components/UI/InputImage/InputImage.test.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/UI/InputImage/InputImage.test.js b/src/components/UI/InputImage/InputImage.test.js index 5720749cb..0e97c4ab4 100644 --- a/src/components/UI/InputImage/InputImage.test.js +++ b/src/components/UI/InputImage/InputImage.test.js @@ -17,11 +17,13 @@ jest.mock('./InputImage.messages', () => { describe('InputImage tests', () => { test('default render ', () => { const onChange = jest.fn(); - const wrapper = mount(); + const onLoad = jest.fn(); + const wrapper = mount(); expect(wrapper).toMatchSnapshot(); }); test('on buttton click', () => { const onChange = jest.fn(); + const onLoad = jest.fn(); const event = { target: { files: [new File(['foo'], 'foo.txt')] @@ -32,6 +34,7 @@ describe('InputImage tests', () => { user={{ email: 'test' }} disabled={false} onChange={onChange} + onLoad={onLoad} /> ); wrapper.find('input').prop('onChange')(event); From 371c1eb3f5060e0d8f90f52a9013d5bc92368dfa Mon Sep 17 00:00:00 2001 From: Rodri Sanchez Date: Mon, 11 Dec 2023 16:48:47 -0300 Subject: [PATCH 4/6] Add onLoad function to onClick --- src/components/UI/InputImage/InputImage.component.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/UI/InputImage/InputImage.component.js b/src/components/UI/InputImage/InputImage.component.js index 9702e2ce5..75d5c33ed 100644 --- a/src/components/UI/InputImage/InputImage.component.js +++ b/src/components/UI/InputImage/InputImage.component.js @@ -37,10 +37,11 @@ class InputImage extends Component { /** * Callback fired when loading state changes */ - onLoad: PropTypes.func.isRequired, + onLoad: PropTypes.func.isRequired }; async resizeImage(file, imageName = null) { + const { onLoad } = this.props; //if you cancel the image uploaded, the event is dispached and the file is null try { const { onChange } = this.props; @@ -51,9 +52,12 @@ class InputImage extends Component { } catch (err) { console.error(err); } + onLoad(false); } onClick = async () => { + const { onLoad } = this.props; + onLoad(true); try { const imageURL = await window.cordova.plugins.safMediastore.selectFile(); const imageName = await window.cordova.plugins.safMediastore.getFileName( @@ -90,13 +94,12 @@ class InputImage extends Component { handleChange = async event => { const { onLoad } = this.props; - onLoad(true) + onLoad(true); const file = event.target.files[0]; if (file) { //if you cancel the image uploaded, the event is dispached and the file is null await this.resizeImage(file); } - onLoad(false) }; render() { const { intl } = this.props; From b87121f409b4e482db003fb27f4e2abc3d7c14ea Mon Sep 17 00:00:00 2001 From: Rodri Sanchez Date: Mon, 11 Dec 2023 16:53:52 -0300 Subject: [PATCH 5/6] Change onLoad function name to setIsImageLoading --- .../Board/TileEditor/TileEditor.component.js | 29 ++++++++++--------- .../UI/InputImage/InputImage.component.js | 16 +++++----- .../UI/InputImage/InputImage.test.js | 14 ++++++--- 3 files changed, 34 insertions(+), 25 deletions(-) diff --git a/src/components/Board/TileEditor/TileEditor.component.js b/src/components/Board/TileEditor/TileEditor.component.js index 753ccd290..8a1ec6bd2 100644 --- a/src/components/Board/TileEditor/TileEditor.component.js +++ b/src/components/Board/TileEditor/TileEditor.component.js @@ -290,8 +290,8 @@ export class TileEditor extends Component { this.updateTileProperty('image', image); }; - handleLoadingStateChange = (isLoading) => { - this.setState({ isLoading: isLoading }) + handleLoadingStateChange = isLoading => { + this.setState({ isLoading: isLoading }); }; setimageUploadedData = (isUploaded, fileName, blobHQ = null, blob = null) => { @@ -529,15 +529,15 @@ export class TileEditor extends Component { Boolean(tileInView.loadBoard) ? 'folder' : 'button' } > - { - this.state.isLoading - ? - : - } + {this.state.isLoading ? ( + + ) : ( + + )}
{this.state.isEditImageBtnActive && ( @@ -572,7 +572,10 @@ export class TileEditor extends Component { {intl.formatMessage(messages.symbols)}
- +
@@ -705,4 +708,4 @@ export class TileEditor extends Component { } } -export default injectIntl(TileEditor); \ No newline at end of file +export default injectIntl(TileEditor); diff --git a/src/components/UI/InputImage/InputImage.component.js b/src/components/UI/InputImage/InputImage.component.js index 75d5c33ed..62c7cc6d6 100644 --- a/src/components/UI/InputImage/InputImage.component.js +++ b/src/components/UI/InputImage/InputImage.component.js @@ -35,13 +35,13 @@ class InputImage extends Component { */ onChange: PropTypes.func.isRequired, /** - * Callback fired when loading state changes + * Set image loading state */ - onLoad: PropTypes.func.isRequired + setIsImageLoading: PropTypes.func.isRequired }; async resizeImage(file, imageName = null) { - const { onLoad } = this.props; + const { setIsImageLoading } = this.props; //if you cancel the image uploaded, the event is dispached and the file is null try { const { onChange } = this.props; @@ -52,12 +52,12 @@ class InputImage extends Component { } catch (err) { console.error(err); } - onLoad(false); + setIsImageLoading(false); } onClick = async () => { - const { onLoad } = this.props; - onLoad(true); + const { setIsImageLoading } = this.props; + setIsImageLoading(true); try { const imageURL = await window.cordova.plugins.safMediastore.selectFile(); const imageName = await window.cordova.plugins.safMediastore.getFileName( @@ -93,8 +93,8 @@ class InputImage extends Component { }; handleChange = async event => { - const { onLoad } = this.props; - onLoad(true); + const { setIsImageLoading } = this.props; + setIsImageLoading(true); const file = event.target.files[0]; if (file) { //if you cancel the image uploaded, the event is dispached and the file is null diff --git a/src/components/UI/InputImage/InputImage.test.js b/src/components/UI/InputImage/InputImage.test.js index 0e97c4ab4..b85183b53 100644 --- a/src/components/UI/InputImage/InputImage.test.js +++ b/src/components/UI/InputImage/InputImage.test.js @@ -17,13 +17,19 @@ jest.mock('./InputImage.messages', () => { describe('InputImage tests', () => { test('default render ', () => { const onChange = jest.fn(); - const onLoad = jest.fn(); - const wrapper = mount(); + const setIsImageLoading = jest.fn(); + const wrapper = mount( + + ); expect(wrapper).toMatchSnapshot(); }); test('on buttton click', () => { const onChange = jest.fn(); - const onLoad = jest.fn(); + const setIsImageLoading = jest.fn(); const event = { target: { files: [new File(['foo'], 'foo.txt')] @@ -34,7 +40,7 @@ describe('InputImage tests', () => { user={{ email: 'test' }} disabled={false} onChange={onChange} - onLoad={onLoad} + setIsImageLoading={setIsImageLoading} /> ); wrapper.find('input').prop('onChange')(event); From 30e5ef7414d722d606d957468c3ec07d8ce80660 Mon Sep 17 00:00:00 2001 From: Rodri Sanchez Date: Mon, 11 Dec 2023 17:34:15 -0300 Subject: [PATCH 6/6] Small fix --- .../Board/TileEditor/TileEditor.component.js | 2 +- .../UI/InputImage/InputImage.component.js | 14 +++++++------- src/components/UI/InputImage/InputImage.test.js | 8 ++++---- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/Board/TileEditor/TileEditor.component.js b/src/components/Board/TileEditor/TileEditor.component.js index 8a1ec6bd2..7d8bce603 100644 --- a/src/components/Board/TileEditor/TileEditor.component.js +++ b/src/components/Board/TileEditor/TileEditor.component.js @@ -574,7 +574,7 @@ export class TileEditor extends Component {
diff --git a/src/components/UI/InputImage/InputImage.component.js b/src/components/UI/InputImage/InputImage.component.js index 62c7cc6d6..770491f72 100644 --- a/src/components/UI/InputImage/InputImage.component.js +++ b/src/components/UI/InputImage/InputImage.component.js @@ -37,11 +37,10 @@ class InputImage extends Component { /** * Set image loading state */ - setIsImageLoading: PropTypes.func.isRequired + setIsLoadingImage: PropTypes.func.isRequired }; async resizeImage(file, imageName = null) { - const { setIsImageLoading } = this.props; //if you cancel the image uploaded, the event is dispached and the file is null try { const { onChange } = this.props; @@ -52,17 +51,16 @@ class InputImage extends Component { } catch (err) { console.error(err); } - setIsImageLoading(false); } onClick = async () => { - const { setIsImageLoading } = this.props; - setIsImageLoading(true); + const { setIsLoadingImage } = this.props; try { const imageURL = await window.cordova.plugins.safMediastore.selectFile(); const imageName = await window.cordova.plugins.safMediastore.getFileName( imageURL ); + setIsLoadingImage(true); const file = await new Promise((resolve, reject) => { window.resolveLocalFileSystemURL( imageURL, @@ -90,16 +88,18 @@ class InputImage extends Component { } catch (err) { console.error(err); } + setIsLoadingImage(false); }; handleChange = async event => { - const { setIsImageLoading } = this.props; - setIsImageLoading(true); + const { setIsLoadingImage } = this.props; + setIsLoadingImage(true); const file = event.target.files[0]; if (file) { //if you cancel the image uploaded, the event is dispached and the file is null await this.resizeImage(file); } + setIsLoadingImage(false); }; render() { const { intl } = this.props; diff --git a/src/components/UI/InputImage/InputImage.test.js b/src/components/UI/InputImage/InputImage.test.js index b85183b53..b683f7030 100644 --- a/src/components/UI/InputImage/InputImage.test.js +++ b/src/components/UI/InputImage/InputImage.test.js @@ -17,19 +17,19 @@ jest.mock('./InputImage.messages', () => { describe('InputImage tests', () => { test('default render ', () => { const onChange = jest.fn(); - const setIsImageLoading = jest.fn(); + const setIsLoadingImage = jest.fn(); const wrapper = mount( ); expect(wrapper).toMatchSnapshot(); }); test('on buttton click', () => { const onChange = jest.fn(); - const setIsImageLoading = jest.fn(); + const setIsLoadingImage = jest.fn(); const event = { target: { files: [new File(['foo'], 'foo.txt')] @@ -40,7 +40,7 @@ describe('InputImage tests', () => { user={{ email: 'test' }} disabled={false} onChange={onChange} - setIsImageLoading={setIsImageLoading} + setIsLoadingImage={setIsLoadingImage} /> ); wrapper.find('input').prop('onChange')(event);