diff --git a/static_src/components/header.jsx b/static_src/components/header.jsx index 608df5e1..c08ebcb5 100644 --- a/static_src/components/header.jsx +++ b/static_src/components/header.jsx @@ -38,7 +38,7 @@ export default class Header extends React.Component {
- + +

Not Found

+ +export default NotFound; diff --git a/static_src/main.js b/static_src/main.js index 682796df..d07c7e22 100644 --- a/static_src/main.js +++ b/static_src/main.js @@ -12,6 +12,7 @@ import routes, { checkAuth, clearErrors, notFound } from './routes'; import RouterStore from './stores/router_store.js'; import MainContainer from './components/main_container.jsx'; +import Loading from './components/loading.jsx'; const meta = document.querySelector('meta[name="gorilla.csrf.Token"]'); @@ -51,12 +52,12 @@ class RouteHandler extends React.Component { render() { const { component: Component, props } = this.state; - return Component ? : null; + return Component ? : ; } } const cRouter = { - run(routes) { + run(routes, renderEl) { const router = new Router(routes); router.configure({ async: true, @@ -69,10 +70,10 @@ const cRouter = { ReactDOM.render( - , document.querySelector('.js-app')); + , renderEl); router.init('/'); } }; -cRouter.run(routes); +cRouter.run(routes, document.querySelector('.js-app')); diff --git a/static_src/routes.js b/static_src/routes.js index cd36fe4c..2c623b1e 100644 --- a/static_src/routes.js +++ b/static_src/routes.js @@ -11,6 +11,7 @@ import Login from './components/login.jsx'; import loginActions from './actions/login_actions'; import LoginStore from './stores/login_store'; import MainContainer from './components/main_container.jsx'; +import NotFound from './components/not_found.jsx'; import orgActions from './actions/org_actions.js'; import Overview from './components/overview_container.jsx'; import OrgContainer from './components/org_container.jsx'; @@ -33,7 +34,7 @@ const mainEl = document.querySelector('.js-app'); const MAX_OVERVIEW_SPACES = 10; export function login(next) { - ReactDOM.render(, mainEl); + routerActions.navigate(Login); } export function overview(next) { @@ -55,11 +56,8 @@ export function overview(next) { return Promise.all(fetches); }) - .then(pageActions.loadSuccess, pageActions.loadError); - - ReactDOM.render( - - , mainEl); + .then(pageActions.loadSuccess, pageActions.loadError) + .then(() => routerActions.navigate(Overview)); } export function org(orgGuid, next) { @@ -73,10 +71,7 @@ export function org(orgGuid, next) { userActions.changeCurrentlyViewedType('org_users'); userActions.fetchOrgUsers(orgGuid); userActions.fetchOrgUserRoles(orgGuid); - ReactDOM.render( - - - , mainEl); + routerActions.navigate(OrgContainer); } export function space(orgGuid, spaceGuid, next) { @@ -94,13 +89,6 @@ export function space(orgGuid, spaceGuid, next) { orgActions.fetch(orgGuid); serviceActions.fetchAllServices(orgGuid); routerActions.navigate(SpaceContainer, { currentPage: 'apps' }); - // - // ReactDOM.render( - // - // - // , mainEl); } export function app(orgGuid, spaceGuid, appGuid, next) { @@ -123,17 +111,11 @@ export function app(orgGuid, spaceGuid, appGuid, next) { serviceActions.fetchAllInstances(spaceGuid); serviceActions.fetchServiceBindings(); routerActions.navigate(AppContainer); - // ReactDOM.render( - // - // - // , mainEl); } export function checkAuth(...args) { const next = args.pop(); - console.log(next) - // These may or may not be set depending on route const [orgGuid, spaceGuid] = args; @@ -167,9 +149,14 @@ export function checkAuth(...args) { // Just in case something goes wrong, don't leave the user hanging. Show // a delayed loading indicator to give them a hint. Hopefully the // redirect is quick and they never see the loader. - ReactDOM.render( - - , mainEl); + // ReactDOM.render( + // + // , mainEl); + routerActions.navigate(Loading, { + text: 'Redirecting to login', + loadingDelayMS: 3000, + style: 'inline' + }); // Stop the routing next(false); @@ -197,8 +184,7 @@ export function notFound(next) { orgActions.changeCurrentOrg(); spaceActions.changeCurrentSpace(); appActions.changeCurrentApp(); - - ReactDOM.render(

Not Found

, mainEl); + routerActions.navigate(NotFound); } const routes = {