Admin Next

[kevinhughes27]

A new admin client built with react, relay, typescript with GraphQL for the backend

• client (react on rails) will go away
• all clients will live in the clients folder and will be self sufficient in terms of development. They will be built on their own and then served by rails in production

Matthieu Segret wrote an example blog using more or less the exact architecture I am imagining here: https://github.com/MatthieuSegret/graphql-rails-blog

Why?

Rails is an excellent framework for interacting with a database and building backends however in my opinion Rails frontend is inadequate for building a rich user experience. Attempts to integrate Rails with modern frontend technologies (like react_on_rails) add significant complexity to Rails when two separate toolchains would be simpler.

GraphQL is the new hottness in API design and for good reason. Its more opinionated and strongly typed compared to Rails controllers and RESTful APIs plus it automatically documents itself. Long term a backend only API is a lot easier to maintain and more flexible in terms of how we productize the app.

ToDo

• Add the rails plumbing for the new app
• Generate new react app with typescript
• Pick a new UI framework (styles and low level components like drop downs etc).
  • http://www.material-ui.com/#/
    • https://github.com/mui-org/material-ui/tree/master/examples/create-react-app-with-typescript
  • https://www.primefaces.org/primereact/#/setup
  • https://coreui.io/react/
  • https://github.com/marmelab/react-admin (uses material-ui and generates an admin, probably too generic)
  • https://themeforest.net/item/material-design-reactjs-admin-web-app-with-bootstrap-4/19582625
  • https://grommet.github.io/
• how to handle authentications both for even rendering the client at all and for making API calls.
  • Rails checks for a user before sending the client. If an API call is not for the right tournament the client will handle this error. This doesn't work for authenticating API calls with the react dev server. Discussion Team Mutations #800
  • Add JWT JWT Auth #805
  • Need to write the JWT into a cookie from Rails so it can be used immediately from signup. Also a similar system for graphiql auth during dev. fix graphiql for jwt auth #818
• Material UI layout, sidebar etc
• Add relay and query the API Add relay #775
• Add team update to establish the form and mutation pattern in the admin_next client
  • https://github.com/gauravtiwari/relay-rails-blog/blob/master/client/app/bundles/Mutations/CreateComment.js
  • https://github.com/gauravtiwari/relay-rails-blog/blob/a50dc1b384698be8e9b4be69a782e8e621b6d0ca/client/app/bundles/PostsShow/components/Post.jsx
  • https://github.com/gauravtiwari/relay-rails-blog/blob/a50dc1b384698be8e9b4be69a782e8e621b6d0ca/app/api/mutations/comment_mutations.rb
  • https://github.com/secoya/typescript-relay-modern/blob/master/src/mutations/AddTodoMutation.ts
• Add logout in the new admin (I tried to add this but it it broken. same error on prod and locally)
• Admin Next tests and integration tests, browser tests
• Full mutation types, Mutation, Input and Payload (hopefully generated from the schema)
• form to create a new Team, how will this affect code / component re-use? Admin Next Team Create #820
• update + confirm pattern
• See about leveraging the cache smarter. Can use QueryRenderLookup as a guide potentially
• Relay network tools, need to renew token behind the scenes
• Performance tests that count number or queries
• Show page animations / transitions. Lots of stuff on Google for doing this with react router
• Clean up usage of typescript ! for withTheme ([typescript] Style typing improvements mui/material-ui#12492)

Post 🚢 Cleanup

• remove the non-global ID fields from the API. Old Schedule Editor uses fieldId and team controller uses divisionId
• remove a few workarounds in mutations resolvers for the old admin. There are comments showing these
• remove force param from updateScore and resolver