ATD RPP form -- US Form System

[mateoclarke]

I'm using this PR to share the issues I've had integrating US Form System (USFS) within React-Static.

The main issue is that React-Static uses React v16 and react-router-dom v4 for routing while USFS depends on react-router v3 and React 15. USFS is currently discussing how they might remove this dependency, but that is a fresh discussion.

This manifests itself as a problem is in various forms.

One is that the history library which gets used by react-router has similar breaking changes b/t its v3 and v4. When trying to pass the Router the browser history, this results in errors likes:

./node_modules/react-static/lib/client/components/Router.js
Module not found: Can't resolve 'history/createBrowserHistory' in '/app/node_modules/react-static/lib/client/components'

Another way the problems arises is when you follow the example in the starter app, the way they suggest you pass the routes to the Router component as a child doesn't work for our version of React. It seems like there is an incompatible pattern where you used to be able to pass a "plain route object" to a Router and it would compose the Route component from the object, but this seems incompatible with React 16. I would see errors that React doesn't accept objects sandwiched within JSX components/elements as children. Stackoverflow

By pulling in pieces of the USFS codebase and trying to make modification to the FormApp component, I tried to manually re-create the routing but I kept hitting dead ends.

For example, in the screenshot above, I couldn't figure out how to pass the element I have highlighted the right children data. It seems to expect a Symbol.

So after all of this, here are the 4 options I see moving forward...

1. (Least likely) After this explanation, one of you have a quick idea of how to make this work so you either pick up this branch or we pair for a bit and voila!
2. USFS seems great and has come a long way in a short time, but as it stands, it is intended as standalone form apps. Their integration path into existing apps isn't fleshed out yet and there are active discussions about the refactoring involved to get it there. If we do want to ride the USFS train, we could create the ATD RPP form as a standalone app that we link to. The would mean the form lives in a separate codebase from alpha and we figure out how server level routing or subdomains could work (ex: forms.austin.gov/residential-parking-permit).
3. We take a step back from USFS and try to implement the form using react-jsonschema-form with USDS styles. This would be similar to what we started with the Animal Adoption Form but it should be quicker and ideally, updating the existing form config would be minimal work. TBD if its that easy.
4. If we intend to use Knack as the backend service where we submit data, we could use the frontend code that they generate and customize/modify the CSS/JS using their GUI for uploading code.

cc/ @amenity @briaguya @ifsimicoded

[mateoclarke]

@briaguya did you try the hash routing yet?