import * as React from 'react';
import { connect } from 'react-redux';

function Spinner(props){
    return (
        <svg className="spinner" viewBox="0 0 50 50">
            <circle className="path" cx="25" cy="25" r="20" fill="none" strokeWidth="5"></circle>
        </svg>
    )
}
module.exports.Spinner = Spinner;

class Loading extends React.Component {
    constructor(props) {
        super(props);
        this.componentName = "[Loading.jsx] ";
    }

    render() {
        console.log(this.componentName + 'render');
        return (
            <div className={ "loading " + this.props.loadingState }>
                <Spinner/>
            </div>
        );
    }
}


function mapStateToProps(state) {
    return {
        loadingState: state.app.loadingState,
    }
};

export default connect(mapStateToProps, null)(Loading);