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 { markAsVisited } from '../action/boarding';

import localStorage from 'store';

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

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

    render() {
        const { layout, token, entityId, entity, isFetchingEntity, currentUser, index } = this.props;
        let widgets;
        let layoutIndex = index;

        if ( !layout ) {
            return (<div></div>);
        }

        let singleLayout = layout[ index ];
        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 ( !currentUser ) {
            return <div></div>;
        }

        if ( !singleLayout || !singleLayout.widgets || singleLayout.widgets.length === 0 ) {
            console.log( 'No Widget Configure for this code' );
            return (<div></div>);
            //return (<div className="cluedIn_container">No widget configure for this CODE.</div>);
        } else {
            widgets = singleLayout.widgets.slice( 0 );
        }

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

        widgets = widgets.filter( ( w ) => {
            if ( w.onlyAdmin ) {
                return currentUser.client.IsAdmin;
            }

            return true;
        } );

        if ( entityId ) {
            widgets.forEach( function( w ) {
                w.parameters          = w.parameters || {};
                w.parameters.entityId = entityId;
            } );
        }

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

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

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

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

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

var select = ( state ) => {
    return {
        layout: state.core.layout,
        token: state.core.token,
        entity: state.entity.selectedEntity,
        isFetchingEntity: state.entity.isFetchingEntity,
        org: state.core.org,
        isFetchingCurrentUser: state.user.isFetchingCurrentUser,
        currentUser: state.user.currentUser

    };
};

export default connect( select )( CluedInApp );