import React, { Component } from 'react'
import PropTypes from 'prop-types'

import { connect } from 'react-redux'
import { Link, Router } from 'react-router-dom'

import { fetchSmifDetails } from '../actions/actions.js'

class Footer extends Component {
    
    constructor(props) {
        super(props)

    }

    componentDidMount() {
        const { dispatch } = this.props
        dispatch(fetchSmifDetails())
    }

    renderLoading() {
        return (
            <div className="alert alert-primary">
                Loading...
            </div>
        )
    }

    renderError() {
        return (
            <div className="alert alert-danger">
                Error
            </div>
        )
    }

    renderFooter(version) {
        return (  
            <div className="container">
                <div className="row justify-content-md-center">
                    <div className="col-md-auto">
                        <span className="badge badge-dark">{version}</span>
                    </div>
                </div>
            </div>
        )
    }

    render() {
        const {isFetching, smif} = this.props

        if (isFetching) {
            return this.renderLoading()
        } else {
            return this.renderFooter(smif.version)
        }
    }
}

Footer.propTypes = {
    smif: PropTypes.object.isRequired
}

function mapStateToProps(state) {
    const { smif } = state

    return {
        smif: state.smif.item,
        isFetching: (state.smif.isFetching)
    }
}

export default connect(mapStateToProps)(Footer)

@@ -248,20 +248,16 @@
 onent %7B%0A
-    
 %0A    con
@@ -757,11 +757,9 @@
 rn (
-  
 %0A
+
     
@@ -833,34 +833,8 @@
 %22row
- justify-content-md-center
 %22%3E%0A 
@@ -875,16 +875,8 @@
 %22col
--md-auto
 %22%3E%0A 
@@ -897,16 +897,30 @@
         
+ smif version:
  %3Cspan c

Add 'smif version' to label