Our first Post/Redirect/Get

components/Widget.tsx

@@ -7,13 +7,26 @@ interface BaseWidget {
     attrs: {
         id: string;
         disabled?: boolean;
+        required?: boolean;
     };
 }
 
 interface TextInput extends BaseWidget {
     type: 'text';
     template_name: 'django/forms/widgets/text.html';
     value: string;
+    attrs: BaseWidget['attrs'] & {
+        maxlength?: number;
+    }
+}
+
+interface NumberInput extends BaseWidget {
+    type: 'number';
+    template_name: 'django/forms/widgets/number.html';
+    value: string;
+    attrs: BaseWidget['attrs'] & {
+        step: string;
+    }
 }
 
 type Optgroup = [
@@ -50,7 +63,7 @@ interface SelectMultiple extends Select {
     }
 }
 
-export type WidgetType = TextInput|Select|SelectMultiple;
+export type WidgetType = TextInput|NumberInput|Select|SelectMultiple;
 
 interface Props {
     widget: WidgetType;
@@ -83,17 +96,23 @@ 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}>
+            return <select
+                name={widget.name}
+                multiple={isMultiple(widget)}
+                defaultValue={value}
+            >
                 {widget.optgroups.map((optgroup, index) =>
                 <option key={index} value={getValue(optgroup)}>{optgroup[1][0].label}</option>
                 )}
             </select>;
         }
+        case "django/forms/widgets/number.html":
         case "django/forms/widgets/text.html": {
-            return <input defaultValue={widget.value || ""} name={widget.name} />;
+            return <input type={widget.type} defaultValue={widget.value || ""} name={widget.name} />;
             // return <div>I am a text</div>;
         }
         default: {
+            console.log(widget);
             const _exhaustiveCheck: never = widget;
             throw new Error('Cannot happen');
         }

index.tsx

@@ -61,14 +61,10 @@ 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 propsForTemplate = {
-            ...globalProps,
-            ...props,
-        };
-        const rendered = ReactDOMServer.renderToString(<Template {...propsForTemplate} />);
-        return renderPage({html: rendered, css: '', props: propsForTemplate});
+        const props = responseAsJSON;
+        const Template = require(`./templates/${props.template_name}.tsx`).default;
+        const rendered = ReactDOMServer.renderToString(<Template {...props} />);
+        return renderPage({html: rendered, css: '', props});
     },
 });
 

server/server/settings.py

@@ -32,6 +32,7 @@
 
 INSTALLED_APPS = [
     'django_extensions',
+    'server.testing',
 
     'django.contrib.admin',
     'django.contrib.auth',

server/server/testing/admin.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

server/server/testing/apps.py

@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class TestingConfig(AppConfig):
+    name = 'testing'

server/server/testing/migrations/0001_initial.py

@@ -0,0 +1,32 @@
+# Generated by Django 2.0.7 on 2018-07-07 14:59
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Category',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=200)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Widget',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=200)),
+                ('price', models.DecimalField(decimal_places=2, max_digits=10)),
+                ('type', models.CharField(choices=[('cheap', 'Cheap'), ('expensive', 'Expensive')], max_length=100)),
+                ('category', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='testing.Category')),
+            ],
+        ),
+    ]

server/server/testing/models.py

@@ -0,0 +1,23 @@
+from django.db import models
+
+import decimal
+
+
+class Category(models.Model):
+    name: str = models.CharField(max_length=200)
+
+    def __str__(self) -> str:
+        return self.name
+
+
+class Widget(models.Model):
+    name: str = models.CharField(max_length=200)
+    category: Category = models.ForeignKey(Category, on_delete=models.CASCADE)
+    price: decimal.Decimal = models.DecimalField(decimal_places=2, max_digits=10)
+    type: str = models.CharField(max_length=100, choices=(
+        ('cheap', 'Cheap'),
+        ('expensive', 'Expensive'),
+    ))
+
+    def __str__(self) -> str:
+        return self.name

server/server/testing/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

server/server/testing/views.py

@@ -0,0 +1,3 @@
+from django.shortcuts import render
+
+# Create your views here.

server/server/urls.py

@@ -19,6 +19,7 @@
 from . import views
 
 urlpatterns = [
+    path('record/', views.test_record),
     path('test/', views.test),
     path('form/', views.test_form),
     path('admin/', admin.site.urls),

server/server/views.py

@@ -4,13 +4,21 @@
 
 from typing import Any, NamedTuple
 
+from server.testing import models
+
 import simplejson
 
 
-class JSXResponse(NamedTuple):
-    csrf_token: str
-    template_name: str
-    props: Any
+class JSXResponse:
+    def __init__(self, *, csrf_token: str, template_name: str, props: Any) -> None:
+        self.props = {
+            'csrf_token': csrf_token,
+            'template_name': template_name,
+            **props,
+        }
+
+    def as_json(self) -> Any:
+        return simplejson.dumps(self.props)
 
 
 def test(request: HttpRequest) -> HttpResponse:
@@ -28,6 +36,41 @@ def render(self, template_name, context, request=None):
         return simplejson.dumps(context)
 
 
+def test_record(request: HttpRequest) -> HttpResponse:
+    from django import forms
+
+    class WidgetForm(forms.ModelForm):
+        class Meta:
+            model = models.Widget
+            fields = '__all__'
+
+    if request.method == 'POST':
+        form = WidgetForm(request.POST, renderer=SSRFormRenderer())
+
+        if form.is_valid():
+            form.save()
+            return redirect(request.path)
+    else:
+        form = WidgetForm(renderer=SSRFormRenderer())
+
+    serialized_form = {
+        'errors': form.errors,
+        'fields': [simplejson.loads(str(field)) for field in form],
+    }
+
+    response = JSXResponse(
+        template_name='FormView',
+        csrf_token=get_token(request),
+        props={
+            'form': serialized_form,
+            'widget_list': [
+                widget.name for widget in models.Widget.objects.all()
+            ],
+        },
+    )
+    return HttpResponse(response.as_json(), content_type='application/ssr+json')
+
+
 def test_form(request: HttpRequest) -> HttpResponse:
     from django import forms
     from django.contrib.auth.models import User

templates/FormView.tsx

@@ -4,7 +4,15 @@ import {FormType, Form} from '../components/Form';
 
 interface Props {
     form: FormType;
+    widget_list: string[];
     csrf_token: string;
 }
 
-export default (props: Props) => <Form csrf_token={props.csrf_token} form={props.form} />;
+export default (props: Props) => <div>
+    <ul>
+        {props.widget_list.map(widget =>
+        <li key={widget}>{widget}</li>
+        )}
+    </ul>
+    <Form csrf_token={props.csrf_token} form={props.form} />
+</div>;