cluedin-widget/core/components/cluedinapp.old.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';
import { shouldFetchEntityIfNeeded } from '../action/entity';
import Layouts from '../Layouts/index.jsx';

class CluedInApp extends Component {
    componentWillMount() {
        const {  type, entityId  } = this.props;
        this.props.dispatch( fetchWidgetsIfNeeded( type ) );
        if ( entityId ) {
            this.props.dispatch( shouldFetchEntityIfNeeded( entityId ) );
        }
    }

    componentDidMount() {

    }

    render() {
        const { widgets, token, entityId } = 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.filter( ( w ) => {
            return !w.hasOwnGrid;
        } ) );

        var widgetWithOwnGrid = widgets.filter( ( w ) => {
            return w.hasOwnGrid;
        } );

        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 ], {
                                            index: index,
                                            entityId: entityId,
                                            parameters: widget.parameters
                                        } )}
                                    </div>
                                </div>
                            )
                        } )}
                    </div>);
                } )}
                {widgetWithOwnGrid.map( ( w, index ) => {
                    index += widgets.length;
                    return (
                        <div key={index}>
                            {React.createElement( window.__cluedin_in[ w.name ], {
                                index: index,
                                entityId: entityId,
                                parameters: w.parameters
                            } )}
                        </div>
                    );
                } )}
            </div>
        </div>);
    }
}

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

export default connect( select )( CluedInApp );