periodicjs.ext.reactapp
Version:
180 lines (174 loc) • 8.57 kB
JavaScript
import React, { Component, } from 'react';
// import { Notification } from 're-bulma';
// import { Nav, NavGroup, NavItem, Button, Icon, NavToggle, } from 're-bulma';
// import { createStore, } from 'redux';
import { applyRouterMiddleware, Router, /*, Route, IndexRoute,*/ } from 'react-router';
import { connect, Provider, } from 'react-redux';
import { push, replace, go, goForward, goBack, } from 'react-router-redux';
import { historySettings, getHistory, } from '../../routers/history';
// import combinedReducers from '../../reducers';
import store from '../../stores';
import actions from '../../actions';
// import constants from '../../constants';
import MainApp from './Main';
import utilities from '../../util';
import AppConfigSettings from '../../content/config/settings.json';
// import AppLoginSettings from '../../content/config/login.json';
import { getRoutes, } from '../../routers/routes';
import CONSTANTS from '../../constants/index';
// import logo from './logo.svg';
// import './App.css';
import pluralize from 'pluralize';
import numeral from 'numeral';
import capitalize from 'capitalize';
import moment from 'moment';
import luxon from 'luxon';
import flatten from 'flat';
import io from 'socket.io-client';
window.io = io;
// import debounce from 'debounce';
const history = getHistory(historySettings, AppConfigSettings, store);
const mapStateToProps = (state) => {
return {
dynamic: state.dynamic,
page: state.page,
settings: state.settings,
ui: state.ui,
log: state.log,
user: state.user,
manifest: state.manifest,
notification: state.notification,
// tabBarExtensions: state.tabBarExtensions,
// fetchData: state.fetchData,
// messageBar: state.messageBar,
};
};
window.__reactapp = Object.assign({}, {
__ra_helpers: {
numeral,
moment,
luxon,
capitalize,
pluralize,
flatten,
},
}, window.__reactapp);
window.__reactapp.setDynamicData = (prop, val) => store.dispatch(actions.dynamic.setDynamicData(prop, val));
const reduxActions = {
isLoggedIn: () => store.getState().user.isLoggedIn,
getState: () => store.getState(), //.dispatch(actions.user.getUserStatus()),
debug: (data) => {
console.debug(data);
}, //.dispatch(actions.user.getUserStatus()),
fetchAction: function (pathname, fetchOptions, success) {
// console.debug('in redux actions this', this);
return utilities.fetchAction.call(this, pathname, fetchOptions, success);
}, //.dispatch(actions.user.getUserStatus()),
redirect: (locationURL) => {
// console.debug({ locationURL, });
if (typeof locationURL === 'string') {
window.location = locationURL;
} else {
window.location = locationURL.location;
}
},
getUserProfile: (jwt_token) => store.dispatch(actions.user.getUserProfile(jwt_token)),
updateUserProfile: (profile) => store.dispatch(actions.user.updateUserProfile(profile)),
setNavLabel: (label) => store.dispatch(actions.ui.setNavLabel(label)),
saveUserProfile: (url, response, json) => store.dispatch(actions.user.saveUserProfile(url, response, json)),
initializeAuthenticatedUser: (jwt_token, enforceMFA = true) => store.dispatch(actions.user.initializeAuthenticatedUser(jwt_token, enforceMFA)),
loginUser: (formdata) => store.dispatch(actions.user.loginUser(formdata)),
// ajaxModal: (options) => store.dispatch(actions.notification.ajaxModal(options)),
fileSaver: (options) => store.dispatch(actions.output.fileSaver(options)),
createModal: (options) => store.dispatch(actions.notification.createModal(options)),
useConfirmModal: (options) => store.dispatch(actions.notification.createModal(utilities.confirmModalPopUp(options))),
hideModal: (options) => store.dispatch(actions.notification.hideModal(options)),
createNotification: (options) => store.dispatch(actions.notification.createNotification(options)),
errorNotification: (options, timeout) => store.dispatch(actions.notification.errorNotification(options, timeout)),
hideNotification: (id) => store.dispatch(actions.notification.hideNotification(id)),
toggleUISidebar: () => store.dispatch(actions.ui.toggleUISidebar()),
setUILoadedState: (loaded, customLayout) => store.dispatch(actions.ui.setUILoadedState(loaded, customLayout)),
setDebugUILoadedState: (loaded, customLayout) => {
let t = setTimeout(() => {
store.dispatch(actions.ui.setUILoadedState(loaded, customLayout));
clearTimeout(t);
}, 2000);
},
logoutUser: () => store.dispatch(actions.user.logoutUser()),
setDynamicData: (prop, val) => store.dispatch(actions.dynamic.setDynamicData(prop, val)),
setSocket: (socket) => store.dispatch(actions.dynamic.setSocket(socket)),
fetchLoginComponent: () => store.dispatch(utilities.setCacheConfiguration(actions.ui.fetchComponent(CONSTANTS.ui.LOGIN_COMPONENT), 'components.login')),
fetchMainComponent: () => store.dispatch(utilities.setCacheConfiguration(actions.ui.fetchComponent(CONSTANTS.ui.MAIN_COMPONENT), 'components.main')),
fetchErrorComponents: () => store.dispatch(utilities.setCacheConfiguration(actions.ui.fetchComponent(CONSTANTS.ui.ERROR_COMPONENTS), 'components.error')),
setLoginComponent: () => store.dispatch(actions.ui.handleFetchedComponent(CONSTANTS.ui.LOGIN_COMPONENT)),
setMainComponent: () => store.dispatch(actions.ui.handleFetchedComponent(CONSTANTS.ui.MAIN_COMPONENT)),
setErrorComponents: () => store.dispatch(actions.ui.handleFetchedComponent(CONSTANTS.ui.ERROR_COMPONENTS)),
setConfigurationFromCache: () => store.dispatch(utilities.getCacheConfiguration(Object.assign({}, actions, {
setLoginComponent: reduxActions.setLoginComponent,
setMainComponent: reduxActions.setMainComponent,
setErrorComponents: reduxActions.setErrorComponents,
}))),
fetchUnauthenticatedManifest: (options = {}) => store.dispatch(actions.manifest.fetchUnauthenticatedManifest(options)),
hideLog: () => store.dispatch(actions.log.hideLog()),
showLog: () => store.dispatch(actions.log.showLog()),
createLog: (logData) => {
store.dispatch(actions.log.createLog(logData))
},
setActiveNavLink: (id) => store.dispatch(actions.ui.setActiveNavItem(id)),
enforceMFA: (noRedirect) => store.dispatch(actions.user.enforceMFA(noRedirect)),
validateMFA: (jwt_token) => store.dispatch(actions.user.validateMFA(jwt_token)),
authenticatedMFA: () => store.dispatch(actions.user.authenticatedMFA()),
refresh: ()=> store.dispatch(push(window.location.pathname+window.location.search)),
reduxRouter: {
push: (location) => store.dispatch(push(location)),
replace: (location) => store.dispatch(replace(location)),
go: (number) => store.dispatch(go(number)),
goForward: () => store.dispatch(goForward()),
goBack: () => store.dispatch(goBack()),
},
routerFormSubmit: (formdata) => {
// console.log({ formdata, });
const nonFormFields = ['$loki', 'formDataError', 'meta', '__formIsSubmitting', '__formOptions',];
const fields = Object.keys(formdata).filter(field=>nonFormFields.indexOf(field)===-1);
const qs = fields.reduce((querystring, field)=>{
if(typeof formdata[field] !=='undefined') querystring+=`&${field}=${formdata[field]}`;
return querystring;
}, '');
const pathname = window.location.pathname;
const redirect = `${pathname}?${qs}`;
// console.log({ fields, qs, pathname, redirect});
store.dispatch(push(redirect));
},
};
const mapDispatchToProps = (/*dispatch*/) => {
return reduxActions;
};
const MainAppContainer = connect(mapStateToProps, mapDispatchToProps)(MainApp);
const useExtraProps = {
renderRouteComponent: child => React.cloneElement(child, Object.assign({}, reduxActions)),
};
class Main extends Component{
componentDidMount() {
if (document && document.body && document.body.classList && document.body.classList.add) {
document.body.classList.add('__reactapp_body_loaded');
} else if (document && document.body && document.body.className) {
document.body.className = document.body.className += ' __reactapp_body_loaded';
}
if (document && document.querySelector && document.querySelector('html')&& document.querySelector('html').add) {
document.querySelector('html').classList.add('__reactapp_html_loaded');
}
}
render() {
// console.log('initial store',{store})
return (
<Provider store={store}>
<Router
history={history}
routes={getRoutes(MainAppContainer)}
render={applyRouterMiddleware(useExtraProps)}
/>
</Provider>
);
}
}
export default Main;