Update: Improved UNISYS LifeCycle integration with React

build/.eslintrc.json

@@ -136,6 +136,7 @@
         "no-confusing-arrow": "error",
         "no-console": "off",
         "no-continue": "off",
+        "no-debugger": "off",
         "no-div-regex": "error",
         "no-duplicate-imports": "error",
         "no-else-return": "off",

build/.gitignore

@@ -1,5 +1,5 @@
 # NetCreate ignored directories
-/runtime
+/runtime/netcreate.json
 
 # Also ignore build system directories
 .npmignore

build/app/assets/htmldemos/simple/simple.html

@@ -20,8 +20,13 @@ <h2>Simple HTML in an IFRAME</h2>
 	</body>
 	<script>
 		require("babel-polyfill"); // enables regenerators for async/await
-		// demonstrate that NetCreate system libraries are available
+		console.log('*** SCRIPT IN IFRAME ***');
+		// NOTE: because this simple file runs inside of an IFRAME,
+		// the javascript environment is SEPARATE from the one that loaded
+		// this page. Thus, most UNISYS NET services aren't available because 
+		// they rely on the global 'EJSprops' set in index.ejs
 		const STORE = require('system/datastore');
+		const UNISYS = require('unisys/client');
 		const $ = require('jquery');
 		$('body').append('<p>JQUERY ADDED THIS. Now D3 will turn me orange.</p>');
 		// d3 is loaded

build/app/assets/index.ejs

@@ -31,8 +31,11 @@
 					uport     : '<%=uport%>'
 				}
 			};
-			window.NC_DBG = {
-				inc : false
+			window.NC_DBG = null; // {} or null
+			if (window.NC_DBG) {
+				Object.assign(window.NC_DBG, {
+					lifecycle : true
+				});
 			}
 		</script>
 		<script src="/scripts/netc-lib.js"></script>

build/app/init-appshell.jsx

@@ -18,28 +18,16 @@
 /// REACT LIBRARIES ///////////////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
     const React = require('react');
-    const {
-      Alert,
-      Collapse,
-      Navbar,
-      NavbarToggler,
-      NavbarBrand,
-      Nav,
-      NavItem,
-      NavLink,
-      UncontrolledDropdown,
-      DropdownToggle,
-      DropdownMenu,
-      DropdownItem
-      } = require('reactstrap');
-    const {
-      Switch,
-      Route,
-      Redirect,
-      Link
-      } = require('react-router-dom');
+    const { Alert, Collapse } = require('reactstrap');
+    const { Navbar, NavbarToggler } = require('reactstrap');
+    const { NavbarBrand, Nav, NavItem, NavLink } = require('reactstrap');
+    const { UncontrolledDropdown, DropdownToggle } = require('reactstrap');
+    const { DropdownMenu, DropdownItem } = require('reactstrap');
+    const { Switch, Route, Redirect, Link } = require('react-router-dom');
     // workaround name collision in ReactRouterNavLink with ReactStrap
     const RRNavLink = require('react-router-dom').NavLink;
+    //
+    const { renderRoutes } = require('react-router-config');
 
 
 /** (1) ROUTED COMPONENTS ****************************************************\
@@ -60,9 +48,39 @@
     const AutoCompleteDemo  = require('view/autocompletedemo/AutoCompleteDemo');
     const DevUnisys         = require('view/dev-unisys/DevUnisys');
     const DevDB             = require('view/dev-db/DevDB');
+    const DevReact          = require('view/dev-react/DevReact');
 //  const Prototype         = require('view/prototype/Prototype');
 //  const D3Test            = require('view/d3test/D3Test');
 
+    const Routes = [
+      {
+        path: '/',
+        exact: true,
+        component: AutoCompleteDemo
+      },
+      {
+        path: '/dev-unisys',
+        component: DevUnisys
+      },
+      {
+        path: '/dev-db',
+        component: DevDB
+      },
+      {
+        path: '/dev-react',
+        component: DevReact
+      },
+      {
+        path: '/simple',
+        component: (props) => {return HTML(props)}
+      },
+      {
+        path: '*',
+        restricted: false,
+        component: NoMatch
+      }
+    ];
+
 
 /** (2) ROUTED FUNCTIONS *****************************************************\
   Used by render()'s <Switch> to load a plain html page that is
@@ -79,7 +97,7 @@
   init-appshell.HTML() |       iframe  flex:1 0 auto, border:0
 \*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
   function HTML ( props ) {
-    SETTINGS.ForceReloadSingleApp();
+    SETTINGS.ForceReloadOnNavigation();
     let loc = props.location.pathname.substring(1);
     loc  = '/htmldemos/'+loc+'/'+loc+'.html';
     return (
@@ -90,7 +108,6 @@
     );
 }
 
-
 /** (3) NO ROUTE *************************************************************\
   Used by render()'s <Switch> when there are no matching routes
 \*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
@@ -101,8 +118,6 @@
     );
   }
 
-
-
 /** APPLICATION NAVBAR + SWITCHED ROUTER VIEW ********************************\
 
     The application shell consists of a navbar implemented with Reactstrap
@@ -136,76 +151,53 @@ class AppShell extends React.Component {
   To add a new HTML, add the link to both the <Nav> and <Switch> staments.
   To add a new VIEW, load the component
 /*/ render() {
-
       /// return component with matching routed view
       return (
         <div style={{display:'flex', flexFlow:'column nowrap', width:'100%', height:'100vh'}}>
           <Navbar fixed="top" light expand="md" style={{ backgroundColor:'#f0f0f0'}}>
-            <NavbarBrand href="#">NetCreate Demo 1808</NavbarBrand>
+            <NavbarBrand href="#">NetCreate August Demo</NavbarBrand>
             <NavbarToggler onClick={this.toggle} />
             <Collapse isOpen={this.state.isOpen} navbar>
             {/*/ (1) add navigation links here /*/}
               <Nav className="ml-auto" navbar>
-            { /*
-                <NavItem>
-                  <NavLink to="/autocompletedemo" tag={RRNavLink} replace>Demo 1808</NavLink>
-                </NavItem>
+            { /* extra menu items
                 <NavItem>
                   <NavLink to="/d3forcedemo" tag={RRNavLink} replace>D3 ForceDemo</NavLink>
                 </NavItem>
-                <NavItem>
-                  <NavLink to="/prototype" tag={RRNavLink} replace>Prototype</NavLink>
-                </NavItem>
             */ }
-                <UncontrolledDropdown nav>
-                  <DropdownToggle nav caret>
-                    Developer
+                <UncontrolledDropdown direction="right" nav>
+                  <DropdownToggle>
+                    Extras
                   </DropdownToggle>
                   <DropdownMenu>
                     <DropdownItem>
-                      <NavLink to="/dev-unisys" tag={RRNavLink} replace>UNISYS tests</NavLink>
-                    </DropdownItem>
-                    <DropdownItem>
-                      <NavLink to="/dev-db" tag={RRNavLink} replace>DATABASE tests</NavLink>
+                      <NavLink to="/dev-react" tag={RRNavLink} replace>dev-react</NavLink>
                     </DropdownItem>
-                { /*
                     <DropdownItem>
-                      <NavLink to="/simple" tag={RRNavLink} replace>SimpleHTML</NavLink>
+                      <NavLink to="/dev-unisys" tag={RRNavLink} replace>dev-unisys</NavLink>
                     </DropdownItem>
                     <DropdownItem>
-                      <NavLink to="/d3test" tag={RRNavLink} replace>TEST D3</NavLink>
+                      <NavLink to="/dev-db" tag={RRNavLink} replace>dev-db</NavLink>
                     </DropdownItem>
-                    <DropdownItem divider />
                     <DropdownItem>
-                      <NavLink to="/test3" tag={RRNavLink} replace>Test Descriptions</NavLink>
+                      <NavLink to="/simple" tag={RRNavLink} replace>SimpleHTML Example</NavLink>
                     </DropdownItem>
-                */ }
                   </DropdownMenu>
                 </UncontrolledDropdown>
               </Nav>
             </Collapse>
           </Navbar>
           <div style={{height:'3.5em'}}>{/*/ add space underneath the fixed navbar /*/}</div>
           <Switch>
-          {/*/ (2) add route paths here /*/}
-            <Route path='/' exact component={AutoCompleteDemo}/>
-            <Route path='/dev-unisys' component={DevUnisys}/>
-            <Route path='/dev-db' component={DevDB}/>
-          {/*
-            <Route path='/autocompletedemo' exact component={AutoCompleteDemo}/>
-            <Route path='/prototype' exact component={Prototype}/>
-            <Route path='/d3forcedemo' exact component={ (props) => {return HTML(props)} }/>
-            <Route path='/simple' exact component={ (props) => {return HTML(props)} }/>
-            <Route path='/d3test' exact component={D3Test}/>
-          */}
-            <Route component={NoMatch}/>
+            {renderRoutes(Routes)}
           </Switch>
         </div>
       );
-    }
-  }
-
+    } // render()
+  } // AppShell()
 
+/// EXPORT ROUTE INFO /////////////////////////////////////////////////////////
+AppShell.Routes = Routes;
 
 /// EXPORT REACT CLASS ////////////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

build/app/init.jsx

@@ -1,4 +1,4 @@
-if (window.NC_DBG.inc) console.log(`inc ${module.id}`);
+if (window.NC_DBG) console.log(`inc ${module.id}`);
 /*//////////////////////////////// ABOUT \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*\
 
     init.jsx
@@ -14,30 +14,62 @@ require("babel-polyfill"); // enables regenerators for async/await
 
 /// LIBRARIES /////////////////////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-const ReactDOM    = require('react-dom');
-const React       = require('react');
-const HashRouter  = require('react-router-dom').HashRouter;
-
-/// REACT COMPONENTS //////////////////////////////////////////////////////////
-/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-const AppShell    = require('init-appshell');
+const React         = require('react');
+const ReactDOM      = require('react-dom');
+const HashRouter    = require('react-router-dom').HashRouter;
 
 /// SYSTEM MODULES ////////////////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /// demo: require system modules; this will likely be removed
-const SETTINGS    = require('settings');
-const UNISYS      = require('unisys/client');
-const DATASTORE   = require('system/datastore');
+const UNISYS        = require('unisys/client');
+const AppShell      = require('init-appshell');
 
-/// INITIALIZE WHEN DOM HAS FINISHED LOADING //////////////////////////////////
+/// UNISYS LIFECYCLE LOADER ///////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-const APP_CONTAINER = '#app-container';
+/*/ When the DOM is loaded, initialize UNISYS
+/*/ document.addEventListener('DOMContentLoaded', () => {
+      console.log('%cINIT %cDOMContentLoaded. Starting UNISYS Lifecycle!','color:blue','color:auto');
+      m_SetLifecycleScope();
+      (async () => {
+        await UNISYS.JoinNet();   // UNISYS socket connection (that is all)
+        await UNISYS.EnterApp();  // TEST_CONF, INITIALIZE, LOADASSETS, CONFIGURE
+        await m_RenderApp();      // compose React view
+        await UNISYS.SetupDOM();  // DOM_READY
+        await UNISYS.SetupRun();  // RESET, START, APP_READY, RUN
+      })();
+    });
 
-document.addEventListener('DOMContentLoaded', () => {
-  ReactDOM.render((
-    <HashRouter hashType="noslash">
-      <AppShell />
-    </HashRouter>
-    ), document.querySelector( APP_CONTAINER ));
-});
-/// execution continues in init-appshell.jsx
+/// LIFECYCLE HELPERS /////////////////////////////////////////////////////////
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/*/ helper to infer view module scope before module is routed lated (!)
+/*/ function m_SetLifecycleScope() {
+      // set scope for UNISYS execution
+      let routes = AppShell.Routes;
+      let loc = '/'+window.location.hash.substring(1);
+      let matches = routes.filter((route)=>{return route.path===loc});
+      let component = matches[0].component;
+      if (component.UMOD===undefined) console.warn(`WARNING: root view '${loc}' has no UMOD property, so can not set UNISYS scope`);
+      let modscope = component.UMOD || '<undefined>/init.jsx';
+      UNISYS.SetScope(modscope);
+  }
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/*/ Wraps ReactDOM.render() in a Promise. Execution continues in <AppShell>
+    and the routed view in AppShell.Routes
+/*/ function m_RenderApp() {
+      console.log('%cINIT %cReactDOM.render() begin','color:blue','color:auto');
+      return new Promise(( resolve, reject ) => {
+        try {
+          ReactDOM.render((
+            <HashRouter hashType="noslash">
+              <AppShell />
+            </HashRouter>
+            ), document.querySelector( '#app-container' ), ()=>{
+              console.log('%cINIT %cReactDOM.render() complete','color:blue','color:auto');
+              resolve();
+            })
+        } catch (e) {
+          console.error('m_RenderApp() Lifecycle Error. Check phase execution order effect on data validity.\n',e);
+          debugger;
+        }
+      }); // promise
+    }

build/app/settings.js

@@ -1,4 +1,4 @@
-if (window.NC_DBG.inc) console.log(`inc ${module.id}`);
+if (window.NC_DBG) console.log(`inc ${module.id}`);
 /*//////////////////////////////// ABOUT \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*\
 
     LOCAL SETTINGS
@@ -15,6 +15,8 @@ var EJSPROPS = window.NC_UNISYS || {};
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 let S        = {};
 let DATE     = new Date();
+let RELOAD_CHECK   = 0;
+let RELOAD_TIMER = null;
 
 /// MAIN GETTER/SETTER FUNCTION  //////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -46,14 +48,15 @@ let DATE     = new Date();
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /*/ Force Reload if another module was navigated to and we want to ensure the
     entire browser was refreshed so only one set of app modules is loaded
-/*/ MOD.ForceReloadSingleApp = () => {
-      const key = 'APP_LOAD_INIT';
-      if (MOD.Get(key)) {
-        location.reload();
-        return;
+/*/ MOD.ForceReloadOnNavigation = () => {
+      RELOAD_CHECK++;
+      if (RELOAD_CHECK>1) {
+        console.warn(`SETTINGS: ForceReloadOnNavigation active. Reloading!`);
+        if (RELOAD_TIMER) clearTimeout(RELOAD_TIMER);
+        RELOAD_TIMER = setTimeout(()=>{location.reload()},500);
+      } else {
+        console.warn(`SETTINGS: ForceReloadOnNavigation check OK`);
       }
-      // if reload didn't happen, then save info
-      MOD.Set(key,true);
     };
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /*/ test time function