pokemon.trade/app/javascript/src/index.tsx

import React from 'react';
import {BrowserProtocol, queryMiddleware} from 'farce';
import {createFarceRouter, createRender, Route, makeRouteConfig} from 'found';
import {Resolver} from 'found-relay';
import {graphql} from 'react-relay';

import {hot} from 'react-hot-loader/root';

import ApplicationLayout from './components/layout/ApplicationLayout';
import graphqlEnvironment from './graphqlEnvironment';

import NotFound from './components/pages/NotFound';
import TestComponent from './components/TestComponent';

import PokemonIndex from './components/pages/pokemon/Index';
import PokemonCreate from './components/pages/pokemon/Create';
import Signup from './components/pages/Signup';
import Login from './components/pages/Login';
import Logout from './components/pages/Logout';
import {UserProvider} from './context/User';

function App(): React.ReactElement {
  const routeConfig = makeRouteConfig(
    <Route Component={ApplicationLayout} path='/'>
      <Route Component={TestComponent} />
      <Route
        Component={PokemonIndex}
        path='pokemon'
        query={graphql`
          query src_PokemonIndex_Query {
            pokemonConnection {
              edges {
                node {
                  id
                  ...Show_pokemon
                }
              }
            }
          }
        `}
      />

      <Route Component={PokemonCreate} path='pokemon/create' />
      <Route Component={Logout} path='logout' />
      <Route Component={Login} path='login' />
      <Route Component={Signup} path='signup' />
      <Route Component={NotFound} path='*' />
    </Route>
  );

  const Router = createFarceRouter({
    historyProtocol: new BrowserProtocol(),
    historyMiddlewares: [queryMiddleware],
    routeConfig,

    render: createRender({}),
  });

  return (
    <UserProvider>
      <Router resolver={new Resolver(graphqlEnvironment)} />
    </UserProvider>
  );
}

export default hot(App);