Handling booleans.

silviogutierrez · Jul 7, 2018 · 08294c6 · 08294c6
1 parent d5fd997
commit 08294c6
Show file tree

Hide file tree

Showing 8 changed files with 1,723 additions and 8 deletions.
diff --git a/app.tsx b/app.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import {hydrate} from 'react-dom';
+import FormView from './templates/FormView';
+
+
+const props = (window as any).__PRELOADED_STATE__;
+const CastedFormView = FormView as any;
+
+hydrate(<CastedFormView {...props} />, document.getElementById('root'));
diff --git a/components/Widget.tsx b/components/Widget.tsx
@@ -22,7 +22,7 @@ type Optgroup = [
         {
             name: string;
             // value: string|number|boolean|null;
-            value: string|number|null;
+            value: string|number|boolean|null;
             label: string;
             selected: boolean;
         }
@@ -56,6 +56,21 @@ interface Props {
     widget: WidgetType;
 }
 
+const getValue = (optgroup: Optgroup) => {
+    const rawValue = optgroup[1][0].value;
+
+    if (rawValue == null) {
+        return '';
+    }
+    else if (rawValue === true) {
+        return 'True';
+    }
+    else if (rawValue === false) {
+        return 'False';
+    }
+    return rawValue;
+}
+
 export const Widget = (props: Props) => {
     const {widget} = props;
 
@@ -69,8 +84,8 @@ export const Widget = (props: Props) => {
             // return <div>I am a select single</div>;
             const value = isMultiple(widget) ? widget.value : (widget.value[0] || '');
             return <select name={widget.name} multiple={isMultiple(widget)} defaultValue={value}>
-                {widget.optgroups.map((optgroup, index) => 
-                <option key={index} value={optgroup[1][0].value || []}>{optgroup[1][0].label}</option>
+                {widget.optgroups.map((optgroup, index) =>
+                <option key={index} value={getValue(optgroup)}>{optgroup[1][0].label}</option>
                 )}
             </select>;
         }

diff --git a/index.tsx b/index.tsx
@@ -1,13 +1,52 @@
 import React from 'react';
 import axios from 'axios';
+import webpack from 'webpack';
 import express, {Request, Response} from 'express';
 import ReactDOMServer from 'react-dom/server';
+import middleware from 'webpack-dev-middleware';
 import {IncomingMessage} from 'http';
 
+
+import webpackConfig from './webpack.config';
+
+const compiler = webpack({
+    ...webpackConfig,
+    mode: 'development',
+});
 const proxy = require('express-http-proxy');
 
 const app = express();
 
+const index = `
+<html>
+    <script src="/bundle.js"></script>
+    <body>
+
+    </body>
+</html>
+`;
+
+export const renderPage = ({html, css, props}: {html: string, css: string, props: any}) => `
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+    <style id="styles-target">
+        ${css}
+    </style>
+    <script>
+        // WARNING: See the following for security issues around embedding JSON in HTML:
+        // http://redux.js.org/recipes/ServerRendering.html#security-considerations
+        window.__PRELOADED_STATE__ = ${JSON.stringify(props).replace(/</g, '\\u003c')}
+    </script>
+</head>
+<body>
+    <div id="root">${html}</div>
+    <script src="/bundle.js"></script>
+</body>
+</html>
+`;
+
 const ssrProxy = proxy('localhost:8000', {
     userResHeaderDecorator(headers: Request['headers'], userReq: Request, userRes: Response, proxyReq: Request, proxyRes: IncomingMessage) {
         if (!('raw' in userReq.query) && proxyRes.headers['content-type'] === 'application/ssr+json') {
@@ -24,8 +63,12 @@ const ssrProxy = proxy('localhost:8000', {
         const responseAsJSON: any = JSON.parse(proxyResData.toString('utf8'));
         const {template_name, props, ...globalProps} = responseAsJSON;
         const Template = require(`./templates/${template_name}.tsx`).default;
-        const rendered = ReactDOMServer.renderToString(<Template {...globalProps} {...props} />);
-        return rendered;
+        const propsForTemplate = {
+            ...globalProps,
+            ...props,
+        };
+        const rendered = ReactDOMServer.renderToString(<Template {...propsForTemplate} />);
+        return renderPage({html: rendered, css: '', props: propsForTemplate});
     },
 });
 
@@ -42,6 +85,10 @@ app.get('/', async (req, res) => {
 });
 */
 
+app.use(middleware(compiler, {
+    publicPath: '/',
+}));
+
 app.use(PATHS, ssrProxy);
 
 app.listen(3000, () => console.log('Example app listening on port 3000!'));