application/components/site/index.js

import React from 'react';
import {connect} from 'react-redux';
import {Link, browserHistory} from 'react-router';

import Config from './../../config';
import CurrentUser from './../../current-user';

import {Row, Col} from './../flexbox';
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
import Divider from 'material-ui/Divider';

import SiteWrapper from './wrapper';

import LoadingIndicator from './../common/loading-indicator';

import {
    snackbarShowMessage
} from './../../redux/actions/snackbar-actions';

import {
    siteFetch
} from './../../redux/actions/site-actions';


class Site extends React.Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        const {dispatch} = this.props;
        dispatch(siteFetch());
    }

    render() {

        if (this.props.site.isFetching) {
            return (
                <SiteWrapper>
                    <h1 className='first'>Your Site</h1>
                    <LoadingIndicator />
                </SiteWrapper>
            );

        }
        return (
            <SiteWrapper>
                <h1 className='first'>Your Site</h1>
                <Row className="clear-bottom">
                    <Col xs={4}>
                        <strong>Status</strong>
                    </Col>
                    <Col xs={8}>
                        {
                            this.props.site.information.get('time')
                            ? (
                                <span className="success-box">Online</span>
                            )
                            : (
                                <span className="error-box">Offline</span>
                            )
                        }
                    </Col>
                </Row>

                <Divider/>

                <Row className="clear-bottom clear-top">
                    <Col xs={4}>
                        <strong>Site Version</strong>
                    </Col>
                    <Col xs={8}>
                        {this.props.site.information.get('version')}
                    </Col>
                </Row>

                <Divider />

                <Row className="clear-bottom clear-top">
                    <Col xs={4}>
                        <strong>Gryphon Compatibility Mode</strong>
                    </Col>
                    <Col xs={8}>
                        {
                            this.props.site.information.get('enableCompatibility')
                            ? 'On'
                            : 'Off'
                        }
                    </Col>
                </Row>
            </SiteWrapper>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        site: state.site
    }
}
export default connect(mapStateToProps)(Site);