Release to Develop

.travis.yml

@@ -26,16 +26,30 @@ script:
 
 after_success:
   - docker-compose push
+  - |
+    if [[ "$TRAVIS_BRANCH" = "release" ]] ; then
+      docker pull $ZAPPA_IMG || true
+      docker build -t $ZAPPA_IMG --cache-from $ZAPPA_IMG -f ./server/zappa.dockerfile ./server/
+      docker run --rm \
+          -e AWS_ACCESS_KEY_ID=$ZAPPA_AWS_ACCESS_KEY_ID \
+          -e AWS_SECRET_ACCESS_KEY=$ZAPPA_AWS_SECRET_ACCESS_KEY \
+          -e AWS_DEFAULT_REGION=$ZAPPA_AWS_DEFAULT_REGION \
+          -v `pwd`/server/=/code/ \
+        $ZAPPA_IMG \
+        bash -c 'source /venv/bin/activate && cd /code/ && zappa update prod && zappa manage prod migrate'
+      docker push $ZAPPA_IMG
+    fi
 
 deploy:
   provider: s3
-  access_key_id: $AWS_ACCESS_KEY_ID
-  secret_access_key: $AWS_SECRET_ACCESS_KEY
+  access_key_id: $ZAPPA_AWS_ACCESS_KEY_ID
+  secret_access_key: $ZAPPA_AWS_SECRET_ACCESS_KEY
   bucket: $TOGGLECORP_S3_BUCKET
   skip_cleanup: true
   local_dir: ./client/build
   acl: public_read
-  region: $DEPLOYMENT_REGION
+  region: $ZAPPA_AWS_DEFAULT_REGION
+  edge: true # opt in to dpl v2
   on:
     branch: release
 
@@ -44,3 +58,4 @@ env:
   global:
   - REACT_STORE_DIR=client/src/vendor/react-store
   - TC_BRANCH_NAME=`echo ${TRAVIS_PULL_REQUEST_BRANCH:-$TRAVIS_BRANCH} | tr / _`
+  - ZAPPA_IMG=docker.pkg.github.com/toggle-corp/togglecorp/zappa:latest

client/.babelrc

@@ -47,6 +47,7 @@
                     "#redux": "./src/redux",
                     "#resources": "./src/resources",
                     "#rest": "./src/rest",
+                    "#request": "./src/request",
                     "#schema": "./src/schema",
                     "#utils": "./src/utils",
                     "#notify": "./src/notify",

client/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:10-alpine
+FROM node:12.20-alpine
 
 MAINTAINER togglecorp [email protected]
 

client/package.json

@@ -87,9 +87,9 @@
         "identity-obj-proxy": "^3.0.0",
         "jest": "^22.4.3",
         "mini-css-extract-plugin": "^0.4.0",
-        "node-sass": "4.12.0",
         "optimize-css-assets-webpack-plugin": "^4.0.1",
         "react-test-renderer": "^16.3.2",
+        "sass": "^1.45.1",
         "sass-loader": "^7.3.1",
         "style-loader": "^0.23.1",
         "stylelint": "^10.1.0",
@@ -105,7 +105,9 @@
         "webpack-pwa-manifest": "^3.6.2"
     },
     "dependencies": {
+        "@togglecorp/fujs": "^1.9.0",
         "@togglecorp/ravl": "^1.0.2",
+        "@togglecorp/react-rest-request": "^2.4.5",
         "body-parser": "^1.18.3",
         "d3-area-label": "^1.4.0",
         "d3-array": "^1.2.1",
@@ -146,15 +148,11 @@
         "react-focus-trap": "^2.5.0",
         "react-ga": "^2.5.0",
         "react-helmet": "^5.2.0",
-        "react-redux": "^5.0.7",
+        "react-markdown": "^4.3.1",
         "react-resize-detector": "^2.3.0",
         "react-router-dom": "^4.2.2",
         "react-sortable-hoc": "^0.6.8",
         "react-svg": "^3.0.2",
-        "redux": "^4.0.0",
-        "redux-mock-store": "^1.5.1",
-        "redux-persist": "^5.9.1",
-        "redux-thunk": "^2.2.0",
         "reselect": "^3.0.1",
         "svgsaver": "^0.9.0"
     }

client/src/App.js

@@ -1,12 +1,10 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 
-import getUserConfirmation from '#utils/getUserConfirmation';
 import Multiplexer from './Multiplexer';
 
-
 export default () => (
-    <BrowserRouter getUserConfirmation={getUserConfirmation}>
+    <BrowserRouter>
         <Multiplexer />
     </BrowserRouter>
 );

client/src/Multiplexer.js

@@ -5,11 +5,6 @@ import {
     withRouter,
 } from 'react-router-dom';
 
-import ExclusivelyPublicRoute from '#rscg/ExclusivelyPublicRoute';
-import PrivateRoute from '#rscg/PrivateRoute';
-
-// import Navbar from '#components/Navbar';
-
 import {
     pathNames,
     routesOrder,
@@ -18,9 +13,7 @@ import {
 } from '#constants';
 
 const ROUTE = {
-    exclusivelyPublic: 'exclusively-public',
     public: 'public',
-    private: 'private',
 };
 
 // NOTE: withRouter is required here so that link change are updated
@@ -35,34 +28,9 @@ export default class Multiplexer extends React.PureComponent {
                 return null;
             }
             const path = pathNames[routeId];
-            const { redirectTo, type } = routes[routeId];
-
-            // FIXME: Use actual authenticated status from redux
-            const authenticated = false;
+            const { type } = routes[routeId];
 
             switch (type) {
-                case ROUTE.exclusivelyPublic:
-                    return (
-                        <ExclusivelyPublicRoute
-                            component={view}
-                            key={routeId}
-                            path={path}
-                            authenticated={authenticated}
-                            redirectLink={redirectTo}
-                            exact
-                        />
-                    );
-                case ROUTE.private:
-                    return (
-                        <PrivateRoute
-                            component={view}
-                            key={routeId}
-                            path={path}
-                            authenticated={authenticated}
-                            redirectLink={redirectTo}
-                            exact
-                        />
-                    );
                 case ROUTE.public:
                     return (
                         <Route

client/src/Root.js

@@ -1,36 +1,4 @@
 import React from 'react';
-import { Provider } from 'react-redux';
-import { persistStore } from 'redux-persist';
-
-import store from '#store';
 import App from './App';
 
-export default class Root extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = { rehydrated: false };
-        this.store = store;
-
-        console.info('React version:', React.version);
-    }
-
-    componentWillMount() {
-        const afterRehydrateCallback = () => this.setState({ rehydrated: true });
-        // NOTE: We can also use PersistGate instead of callback to wait for rehydration
-        persistStore(this.store, undefined, afterRehydrateCallback);
-    }
-
-    render() {
-        if (!this.state.rehydrated) {
-            // NOTE: showing empty div, this lasts for a fraction of a second
-            return <div />;
-        }
-
-        return (
-            <Provider store={this.store}>
-                <App />
-            </Provider>
-        );
-    }
-}
+return App;

client/src/components/Bundle.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    load: PropTypes.func.isRequired,
+    errorText: PropTypes.string,
+    loadingText: PropTypes.string,
+    decorator: PropTypes.func,
+};
+const defaultProps = {
+    errorText: 'Error while loading page.',
+    loadingText: 'Loading...',
+    decorator: undefined,
+};
+
+// NOTE: Intentionally opted out of PureComponent
+class Bundle extends React.Component {
+    static propTypes = propTypes;
+    static defaultProps = defaultProps;
+
+    static loadingStyle = {
+        height: '100%',
+        fontSize: '2em',
+        color: 'rgba(0, 0, 0, 0.5)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            BundledComponent: null,
+            failed: false,
+        };
+    }
+
+    componentWillMount() {
+        this.mounted = true;
+        this.props.load()
+            .then(this.handleLoad)
+            .catch(this.handleLoadError);
+    }
+
+    componentWillUnmount() {
+        this.mounted = false;
+    }
+
+    handleLoad = (BundledComponent) => {
+        if (!this.mounted) {
+            console.error('Bundle unmounted while loading Component.');
+            return;
+        }
+
+        let Component = BundledComponent.default || BundledComponent;
+        if (this.props.decorator) {
+            Component = this.props.decorator(Component);
+        }
+
+        this.setState({
+            BundledComponent: Component,
+        });
+    }
+
+    handleLoadError = (err) => {
+        if (!this.mounted) {
+            console.error('Bundle unmounted while loading Component.');
+            return;
+        }
+        this.setState({ failed: true });
+        console.error('Bundle load failed.', err);
+    }
+
+    renderLoading = ({ text }) => (
+        <div style={Bundle.loadingStyle}>
+            {text}
+        </div>
+    )
+
+    render() {
+        const {
+            load, // eslint-disable-line no-unused-vars
+            decorator, // eslint-disable-line no-unused-vars
+            errorText,
+            loadingText,
+            ...otherProps
+        } = this.props;
+        const {
+            BundledComponent,
+            failed,
+        } = this.state;
+
+        if (!BundledComponent) {
+            const message = failed ? errorText : loadingText;
+            const Loading = this.renderLoading;
+            return <Loading text={message} />;
+        }
+
+        return <BundledComponent {...otherProps} />;
+    }
+}
+
+export default Bundle;

client/src/components/RouteSynchronizer.js

@@ -1,7 +1,7 @@
 import Helmet from 'react-helmet';
 import React, { Fragment } from 'react';
 
-import Bundle from '#rscg/Bundle';
+import Bundle from '#components/Bundle';
 
 export default ({ name, ...otherProps }) => (
     <Fragment>

client/src/constants/routes.js

@@ -18,6 +18,12 @@ export const routes = {
         path: '/',
         loader: () => import('../views/Home'),
     },
+    career: {
+        order: 2,
+        type: ROUTE.public,
+        path: '/career/',
+        loader: () => import('../views/Career'),
+    },
 };
 
 export const pathNames = mapObjectToObject(routes, route => route.path);

client/src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Root from './Root';
+import App from './App';
 
-ReactDOM.render(<Root />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById('root'));