UNPKG

cluedin-widget

Version:

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

154 lines (131 loc) 5.41 kB
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 );