fix(demo): load the proper widget files for demo

Author: adamweeks

package.json

@@ -17,7 +17,8 @@
     "eslint": "eslint packages",
     "serve": "npm run start",
     "stylelint": "stylelint \"packages/node_modules/**/*.css\"",
-    "start": "NODE_ENV=development webpack-dev-server --config scripts/webpack/webpack.dev.babel.js --hot --inline --history-api-fallback"
+    "start": "NODE_ENV=development webpack-dev-server --config scripts/webpack/webpack.dev.babel.js --hot --inline --history-api-fallback",
+    "start:demo": "NODE_ENV=development webpack-dev-server --config scripts/webpack/webpack.demo.babel.js --hot --inline --history-api-fallback"
   },
   "repository": {
     "type": "git",
@@ -99,6 +100,7 @@
     "postcss-cssnext": "^2.9.0",
     "postcss-loader": "^1.2.1",
     "postcss-reporter": "^3.0.0",
+    "react-cookie": "^1.0.4",
     "react-router": "^3.0.2",
     "react-tap-event-plugin": "^2.0.1",
     "react-test-renderer": "^15.4.1",

packages/node_modules/@ciscospark/widget-message-meet/src/index.js

@@ -0,0 +1,46 @@
+/**
+ * In development we assume that the code generated is going to be consumed by
+ * webpack dev server and we are bundling into a single js file.
+ */
+
+import webpack from 'webpack';
+import webpackConfigBase from './webpack.base.babel';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+
+const plugins = [
+  new HtmlWebpackPlugin({
+    template: `index.html`
+  }),
+  new webpack.EnvironmentPlugin([
+    `CISCOSPARK_ACCESS_TOKEN`,
+    `MESSAGE_DEMO_CLIENT_ID`,
+    `MESSAGE_DEMO_CLIENT_SECRET`,
+    `TO_PERSON_EMAIL`,
+    `TO_PERSON_ID`
+  ])
+];
+
+export default webpackConfigBase({
+  entry: `./demo.js`,
+  plugins,
+  devtool: `cheap-module-eval-source-map`,
+  devServer: {
+    port: 8000,
+    stats: {
+      colors: true,
+      hash: false,
+      version: false,
+      timings: false,
+      assets: true,
+      chunks: false,
+      modules: false,
+      reasons: false,
+      children: false,
+      source: false,
+      errors: true,
+      errorDetails: true,
+      warnings: true,
+      publicPath: false
+    }
+  }
+});

scripts/webpack/webpack.demo.babel.js

@@ -1,6 +1,7 @@
 /* eslint-disable react/no-set-state */
 import React, {Component} from 'react';
 import classNames from 'classnames';
+import cookie from 'react-cookie';
 
 import SparkLogo from '@ciscospark/react-component-spark-logo';
 import SparkOAuth from '@ciscospark/react-component-spark-oauth';
@@ -19,8 +20,8 @@ class DemoWidgetMessageMeet extends Component {
     this.state = {
       authenticate: false,
       mode: MODE_INLINE,
-      accessToken: ``,
-      toPersonEmail: ``,
+      accessToken: cookie.load(`accessToken`) || ``,
+      toPersonEmail: cookie.load(`toPersonEmail`) || ``,
       running: false,
       clientId: process.env.MESSAGE_DEMO_CLIENT_ID,
       clientSecret: process.env.MESSAGE_DEMO_CLIENT_SECRET,
@@ -41,6 +42,8 @@ class DemoWidgetMessageMeet extends Component {
 
   handleSubmit(e) {
     e.preventDefault();
+    cookie.save(`accessToken`, this.state.accessToken);
+    cookie.save(`toPersonEmail`, this.state.toPersonEmail);
     this.setState({running: true});
   }