cluedin-widget/core/components/cluedinapp.jsx

This is the project for creating and managing widgets in CluedIn.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchWidgetsIfNeeded } from '../action/core';
import layout from '../layout';

class CluedInApp extends Component {
    componentWillMount() {
        this.props.dispatch( fetchWidgetsIfNeeded() )
    }

    componentDidMount() {

    }

    render() {
        const { widgets, token  } = this.props;

        if ( !token ) {
            return (<div className="cluedIn_container">
                You are not connected to CluedIn, to see your widget, <a href="https://app." target="__blank">sign in to
                CluedIn</a>
            </div>);
        }
        if ( !widgets || widgets.length === 0 ) {
            return (<div className="cluedIn_container">No widget configure for this CODE.</div>);
        }

        var result = layout.findBestLayout( widgets );

        return (<div className="cluedIn_container">
            <div className="cluedIn_row cluedIn_realEstate">
                {result.rows.map( function( row, indexRow ) {
                    return (<div key={indexRow} className="cluedIn_row">
                        {row.widgets.map( function( widget, index ) {

                            var sizeCol = 12;
                            if ( widget.size ) {
                                sizeCol = ( widget.size > 0 && widget.size < 12 ) ? widget.size : 12;
                            }

                            var colClassName = "cluedIn_col s" + sizeCol + ' cluedIn_widget_col';

                            return (
                                <div key={index} className={colClassName}>
                                    <div>
                                        {React.createElement( window.__cluedin_in[ widget.name ] )}
                                    </div>
                                </div>
                            )
                        } )}
                    </div>);
                } )}
            </div>
        </div>);
    }
}

var select = ( state ) => {
    return {
        widgets: state.core.widgets,
        token: state.core.token
    };
};

export default connect( select )( CluedInApp );