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 info@togglecorp.com
 

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'));