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 AppWithTabs from './Layouts/AppWithTabs.jsx'
import localStorage from 'store'
import userProfile from '../userProfile/index'

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, type, isFetchingEntity, currentUser, index } = this.props;
        let widgets;
        let layoutInformation = {
            layoutIndex: index,
            type: type
        };

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

        let singleLayout    = layout[ index ];
        let excludedWidgets = userProfile.getExcludedWidgets( type );

        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 || !singleLayout ) {
            return <div></div>;
        }

        if ( !singleLayout.widgets || singleLayout.widgets.length === 0 ) {
            if ( singleLayout.tabs && singleLayout.tabs.length > 0 ) {
                return (
                    <AppWithTabs layout={layout}
                                 type={type}
                                 index={index}
                                 currentUser={currentUser}
                                 entityId={entityId}
                                 isFetchingEntity={isFetchingEntity}
                                 entity={entity}>
                    </AppWithTabs>);
            }

            return (<div className="cluedIn_container">No widget configure for this CODE.</div>);
        } else {
            widgets = singleLayout.widgets.slice( 0 );
        }

        widgets = widgets.filter( ( w ) => {
            return !(excludedWidgets.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,
                        layoutInformation: layoutInformation,
                        isAdmin: currentUser.client.IsAdmin
                    }
                };

                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,
                    layoutInformation: layoutInformation,
                    isAdmin: currentUser.client.IsAdmin
                } )}
            </div> );
        } else {
            return (<div className="cluedIn_container">
                <Grid layoutInformation={layoutInformation} isAdmin={currentUser.client.IsAdmin}
                      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 );