Skip to content

Commit

Permalink
Merge pull request #1622 from rakeshkumar1019/feature/add-loading-spi…
Browse files Browse the repository at this point in the history
…nner-on-upload-image

Feature - add loading spinner on upload image
  • Loading branch information
martinbedouret authored Dec 12, 2023
2 parents 5e3517a + 30e5ef7 commit 9c30ec6
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 9 deletions.
27 changes: 20 additions & 7 deletions src/components/Board/TileEditor/TileEditor.component.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -107,7 +108,8 @@ export class TileEditor extends Component {
tile: this.defaultTile,
linkedBoard: '',
imageUploadedData: [],
isEditImageBtnActive: false
isEditImageBtnActive: false,
isLoading: false
};

this.defaultimageUploadedData = {
Expand Down Expand Up @@ -288,6 +290,10 @@ export class TileEditor extends Component {
this.updateTileProperty('image', image);
};

handleLoadingStateChange = isLoading => {
this.setState({ isLoading: isLoading });
};

setimageUploadedData = (isUploaded, fileName, blobHQ = null, blob = null) => {
const { activeStep } = this.state;
let imageUploadedData = this.state.imageUploadedData.map((item, indx) => {
Expand Down Expand Up @@ -523,11 +529,15 @@ export class TileEditor extends Component {
Boolean(tileInView.loadBoard) ? 'folder' : 'button'
}
>
<Symbol
image={tileInView.image}
label={currentLabel}
keyPath={tileInView.keyPath}
/>
{this.state.isLoading ? (
<CircularProgress />
) : (
<Symbol
image={tileInView.image}
label={currentLabel}
keyPath={tileInView.keyPath}
/>
)}
</Tile>
</div>
{this.state.isEditImageBtnActive && (
Expand Down Expand Up @@ -562,7 +572,10 @@ export class TileEditor extends Component {
{intl.formatMessage(messages.symbols)}
</Button>
<div className="TileEditor__input-image">
<InputImage onChange={this.handleInputImageChange} />
<InputImage
onChange={this.handleInputImageChange}
setIsLoadingImage={this.handleLoadingStateChange}
/>
</div>
</div>
<div className="TileEditor__form-fields">
Expand Down
12 changes: 11 additions & 1 deletion src/components/UI/InputImage/InputImage.component.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,11 @@ class InputImage extends Component {
/**
* Callback fired when input changes
*/
onChange: PropTypes.func.isRequired
onChange: PropTypes.func.isRequired,
/**
* Set image loading state
*/
setIsLoadingImage: PropTypes.func.isRequired
};

async resizeImage(file, imageName = null) {
Expand All @@ -50,11 +54,13 @@ class InputImage extends Component {
}

onClick = async () => {
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,
Expand Down Expand Up @@ -82,14 +88,18 @@ class InputImage extends Component {
} catch (err) {
console.error(err);
}
setIsLoadingImage(false);
};

handleChange = async event => {
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;
Expand Down
11 changes: 10 additions & 1 deletion src/components/UI/InputImage/InputImage.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,19 @@ jest.mock('./InputImage.messages', () => {
describe('InputImage tests', () => {
test('default render ', () => {
const onChange = jest.fn();
const wrapper = mount(<InputImage disabled={false} onChange={onChange} />);
const setIsLoadingImage = jest.fn();
const wrapper = mount(
<InputImage
disabled={false}
onChange={onChange}
setIsLoadingImage={setIsLoadingImage}
/>
);
expect(wrapper).toMatchSnapshot();
});
test('on buttton click', () => {
const onChange = jest.fn();
const setIsLoadingImage = jest.fn();
const event = {
target: {
files: [new File(['foo'], 'foo.txt')]
Expand All @@ -32,6 +40,7 @@ describe('InputImage tests', () => {
user={{ email: 'test' }}
disabled={false}
onChange={onChange}
setIsLoadingImage={setIsLoadingImage}
/>
);
wrapper.find('input').prop('onChange')(event);
Expand Down

0 comments on commit 9c30ec6

Please sign in to comment.