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 { fetchLayoutIfNeeded } from '../action/core';
import Grid from './Layouts/Grid.jsx';
import { shouldFetchEntityIfNeeded } from '../action/entity';
import { shouldFetchCurrentUser } from '../action/user';
import { shouldResetLayout } from '../action/core';
import { fetchAllFollow } from '../action/follow';
import LayoutsList from './Layouts/index.jsx';
import localStorage from 'store';

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

    componentWillUnmount() {
        this.props.dispatch( shouldResetLayout() );
    }

    render() {
        const { layout, token, entityId, entity, isFetchingEntity } = this.props;
        let widgetConfig = localStorage.get( 'excludes' ) || [];

        let content;

        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 ( !layout || !layout.widgets || layout.widgets.length === 0 ) {
            return (<div className="cluedIn_container">No widget configure for this CODE.</div>);
        }

        layout.widgets = layout.widgets.filter( ( w ) => {
            return !(widgetConfig.indexOf( w.name ) > -1);
        } );

        if ( entityId && entity && !isFetchingEntity && layout.includeSuggestedSearches ) {
            entity.SuggestedSearches.forEach( ( search, index ) => {
                var suggestedSearchWidget = {
                    name: 'entitySuggestedSearch',
                    place: layout.placeSuggestedSearches || 'Content',
                    size: 4,
                    parameters: {
                        search: search,
                        index: index
                    }
                };

                if ( layout.includeSuggestedSearchesBefore ) {
                    layout.widgets.shift( suggestedSearchWidget );
                } else {
                    layout.widgets.push( suggestedSearchWidget );
                }
            } );
        }

        if ( layout.layout && layout.layout.name ) {
            var currentLayout = LayoutsList[ layout.layout.name ];

            if ( !currentLayout ) {
                throw new Error( "Invalid Layout Name" + layout.layout.name );
            }

            return (<div className="cluedIn_container">{
                React.createElement( currentLayout, {
                    widgets: layout.widgets
                } )}
            </div> );
        } else {
            return (<div className="cluedIn_container">
                <Grid widgets={layout.widgets}></Grid>
            </div>);
        }
    }
}

var select = ( state ) => {
    return {
        layout: state.core.layout,
        token: state.core.token,
        entity: state.entity.selectedEntity,
        isFetchingEntity: state.entity.isFetchingEntity
    };
};

export default connect( select )( CluedInApp );