Prevent Switch Between Pages During Upload

There could be some case when you want to prevent switch between links during upload time. Here's an example how you can show a warning message to the user.

import React, { Component } from 'react';
import {Link, Prompt} from 'react-router-dom';
import { ZiggeoRecorder } from 'react-ziggeo'
import {apiKey} from './constants'

export default class Recorder extends Component {

    constructor (props) {
        super(props);
        this.state = {
            blockLocation: false
        }
    }

    onVerified = () => {
        console.log('video is verified and now you can move to other link');
        if (this.state.blockLocation)
            this.setState({ blockLocation: false });
    };

    uploadSelected = () => {
        console.log('Recorder Upload File Selected');
        if (!this.state.blockLocation)
            this.setState({ blockLocation: true });
    };

    render() {

        const { blockLocation } = this.state;

        return (
            <div>
                <Prompt
                    when={ blockLocation }
                    message={location => (
                        `Currently, there're download process, do you want to prevent it and switching to ${location.pathname} URL?`
                    )}
                />
                <p>
                    <Link to='/'>Home</Link>
                    <Link to='/path-name'>Other Link</Link>
                </p>

                <ZiggeoRecorder
                    apiKey={apiKey}
                    onVerified={this.onVerified}
                    onUploadSelected={this.uploadSelected}
                />
            </div>
        );
    }
}