cluedin-widget
Version:
This is the project for creating and managing widgets in CluedIn.
154 lines (131 loc) • 5.41 kB
JSX
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 );