Create simple form to create a pokemon

app/javascript/packs/frontend/App.tsx

@@ -26,6 +26,9 @@ function App(): React.ReactElement {
           <p>
             <Link to='/pokemon'>Show me the pokemon!</Link>
           </p>
+          <p>
+            <Link to='/pokemon/create'>Create a pokemon!</Link>
+          </p>
         </Suspense>
       </ApplicationLayout>
     </Router>

app/javascript/packs/frontend/__generated__/CreatePokemonMutation.graphql.ts

@@ -0,0 +1,145 @@
+/* tslint:disable */
+
+import { ConcreteRequest } from "relay-runtime";
+export type CreatePokemonMutationVariables = {
+    readonly nickname: string;
+    readonly pokedexNumber: string;
+};
+export type CreatePokemonMutationResponse = {
+    readonly createPokemon: {
+        readonly pokemon: {
+            readonly id: string;
+            readonly iid: string;
+            readonly nickname: string | null;
+            readonly pokedexNumber: number | null;
+        } | null;
+    } | null;
+};
+export type CreatePokemonMutation = {
+    readonly response: CreatePokemonMutationResponse;
+    readonly variables: CreatePokemonMutationVariables;
+};
+
+
+
+/*
+mutation CreatePokemonMutation(
+  $nickname: String!
+  $pokedexNumber: ID!
+) {
+  createPokemon(nickname: $nickname, pokedexNumber: $pokedexNumber) {
+    pokemon {
+      id
+      iid
+      nickname
+      pokedexNumber
+    }
+  }
+}
+*/
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "kind": "LocalArgument",
+    "name": "nickname",
+    "type": "String!",
+    "defaultValue": null
+  },
+  {
+    "kind": "LocalArgument",
+    "name": "pokedexNumber",
+    "type": "ID!",
+    "defaultValue": null
+  }
+],
+v1 = [
+  {
+    "kind": "LinkedField",
+    "alias": null,
+    "name": "createPokemon",
+    "storageKey": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "nickname",
+        "variableName": "nickname"
+      },
+      {
+        "kind": "Variable",
+        "name": "pokedexNumber",
+        "variableName": "pokedexNumber"
+      }
+    ],
+    "concreteType": "CreatePokemonPayload",
+    "plural": false,
+    "selections": [
+      {
+        "kind": "LinkedField",
+        "alias": null,
+        "name": "pokemon",
+        "storageKey": null,
+        "args": null,
+        "concreteType": "Pokemon",
+        "plural": false,
+        "selections": [
+          {
+            "kind": "ScalarField",
+            "alias": null,
+            "name": "id",
+            "args": null,
+            "storageKey": null
+          },
+          {
+            "kind": "ScalarField",
+            "alias": null,
+            "name": "iid",
+            "args": null,
+            "storageKey": null
+          },
+          {
+            "kind": "ScalarField",
+            "alias": null,
+            "name": "nickname",
+            "args": null,
+            "storageKey": null
+          },
+          {
+            "kind": "ScalarField",
+            "alias": null,
+            "name": "pokedexNumber",
+            "args": null,
+            "storageKey": null
+          }
+        ]
+      }
+    ]
+  }
+];
+return {
+  "kind": "Request",
+  "fragment": {
+    "kind": "Fragment",
+    "name": "CreatePokemonMutation",
+    "type": "Mutation",
+    "metadata": null,
+    "argumentDefinitions": (v0/*: any*/),
+    "selections": (v1/*: any*/)
+  },
+  "operation": {
+    "kind": "Operation",
+    "name": "CreatePokemonMutation",
+    "argumentDefinitions": (v0/*: any*/),
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "operationKind": "mutation",
+    "name": "CreatePokemonMutation",
+    "id": null,
+    "text": "mutation CreatePokemonMutation(\n  $nickname: String!\n  $pokedexNumber: ID!\n) {\n  createPokemon(nickname: $nickname, pokedexNumber: $pokedexNumber) {\n    pokemon {\n      id\n      iid\n      nickname\n      pokedexNumber\n    }\n  }\n}\n",
+    "metadata": {}
+  }
+};
+})();
+(node as any).hash = '6358b6ddc3c56eadd4291d337c538808';
+export default node;

app/javascript/packs/frontend/components/pages/Pokemon.tsx

@@ -2,6 +2,7 @@ import React, {lazy, Suspense} from 'react';
 import {Route, Switch, RouteComponentProps} from 'react-router-dom';
 
 const PokemonIndex = lazy((): Promise<any> => import('./pokemon/Index'));
+const PokemonCreate = lazy((): Promise<any> => import('./pokemon/Create'));
 
 import NotFound from './NotFound';
 
@@ -11,6 +12,7 @@ function Pokemon({match}: RouteComponentProps<void>): React.FunctionComponentEle
       <Suspense fallback={<div>Loading...</div>}>
         <Switch>
           <Route component={PokemonIndex} exact path={`${match.path}`} />
+          <Route component={PokemonCreate} exact path={`${match.path}/create`} />
 
           <Route component={NotFound} />
         </Switch>

app/javascript/packs/frontend/components/pages/pokemon/Create.tsx

@@ -0,0 +1,39 @@
+import React, {useState} from 'react';
+import {Form, Button} from 'react-bootstrap';
+import environment from '../../../graphqlEnvironment';
+import {createPokemon} from './CreatePokemon';
+
+function onSubmit(e: Event, nickname: string, pokedexNumber: number): void {
+  e.preventDefault();
+  createPokemon(environment, nickname, pokedexNumber);
+}
+
+const Create: React.FC<void> = (): React.ReactElement<void> => {
+  const [nickname, setNickname] = useState('');
+  const [pokedexNumber, setPokedexNumber] = useState(1);
+
+  return (
+    <Form onSubmit={e => onSubmit(e, nickname, pokedexNumber)}>
+      <Form.Group controlId='nickname'>
+        <Form.Label>Nickname</Form.Label>
+        <Form.Control onChange={e => setNickname(e.target.value)} placeholder='Pokemon Nickname' />
+      </Form.Group>
+
+      <Form.Group controlId='pokedexNumber'>
+        <Form.Label>National Pokedex Number</Form.Label>
+        <Form.Control
+          max={809}
+          min={1}
+          onChange={e => setPokedexNumber(e.target.value)}
+          placeholder='Nation Pokedex Number'
+          type='number'
+        />
+      </Form.Group>
+      <Button type='submit' variant='primary'>
+        Submit
+      </Button>
+    </Form>
+  );
+};
+
+export default Create;

app/javascript/packs/frontend/components/pages/pokemon/CreatePokemon.ts

@@ -0,0 +1,34 @@
+import {commitMutation, graphql} from 'react-relay';
+import history from '../../../history';
+
+const mutation = graphql`
+  mutation CreatePokemonMutation($nickname: String!, $pokedexNumber: ID!) {
+    createPokemon(nickname: $nickname, pokedexNumber: $pokedexNumber) {
+      pokemon {
+        id
+        iid
+        nickname
+        pokedexNumber
+      }
+    }
+  }
+`;
+
+/* eslint-disable no-console */
+export function createPokemon(environment: any, nickname: string, pokedexNumber: number): void {
+  const variables = {
+    nickname,
+    pokedexNumber,
+  };
+
+  commitMutation(environment, {
+    mutation,
+    variables,
+    onCompleted: (response, errors): void => {
+      console.log('Response received from server: ', response);
+      console.log('Errors received from server: ', errors);
+      history.push('/pokemon');
+    },
+    onError: (err): void => console.error(err),
+  });
+}