Architect some asyncronous data fetching

app/javascript/packs/frontend/api.js

@@ -0,0 +1,23 @@
+import axios from 'axios';
+
+//const csrfParamName = document.querySelector('meta[name="csrf-param"]').content;
+//const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
+
+const instance = axios.create({
+  baseURL: 'http://localhost:3000/api/v1',
+  timeout: 3000,
+  responseType: 'json',
+  headers: {post: {'Content-Type': 'application/json'}},
+  //xsrfHeaderName: csrfParamName,
+});
+
+export const Pokemon = {
+  index: async () => instance.get('/pokemon'),
+  get: async id => instance.get(`/pokemon/${id}`),
+};
+
+const API = {
+  Pokemon,
+};
+
+export default API;

app/javascript/packs/frontend/components/pages/pokemon/index.jsx

@@ -8,6 +8,15 @@ class PokemonIndex extends React.Component {
     pokemon: [],
   };
 
+  async componentDidMount() {
+    try {
+      const data = await Pokemon.index();
+      this.setState({pokemon: data.data});
+    } catch (err) {
+      console.log(JSON.stringify(err, null, 2));
+    }
+  }
+
   render() {
     const pokemon = this.state.pokemon.map((pkmn, i) => {
       return (

app/javascript/packs/frontend/components/pages/pokemon/show.jsx

@@ -1,7 +1,32 @@
 import React from 'react';
+import {Link} from 'react-router-dom';
 
-function ShowPokemon() {
-  return <>a pokemon?</>;
+import {Pokemon} from '../../../api';
+
+class PokemonShow extends React.Component {
+  state = {
+    pokemon: {},
+  };
+
+  async componentDidMount() {
+    try {
+      const data = await Pokemon.get(this.props.match.params.id);
+      this.setState({pokemon: data.data});
+    } catch (err) {
+      console.log(JSON.stringify(err, null, 2));
+    }
+  }
+
+  render() {
+    return (
+      <>
+        {this.state.pokemon.id}: {this.state.pokemon.nickname}
+        <p>
+          <Link to={`${this.props.match.url}/404`}>404 page</Link>
+        </p>
+      </>
+    );
+  }
 }
 
-export default ShowPokemon;
+export default PokemonShow;

package.json

@@ -14,6 +14,7 @@
     "@rails/activestorage": "^6.0.0-alpha",
     "@rails/ujs": "^6.0.0-alpha",
     "@rails/webpacker": "^4.0.2",
+    "axios": "^0.18.0",
     "bootstrap": "^4.3.1",
     "core-js": "^3.0.1",
     "prop-types": "^15.7.2",

yarn.lock

@@ -1547,6 +1547,14 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
   integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
 
+axios@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
+  integrity sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=
+  dependencies:
+    follow-redirects "^1.3.0"
+    is-buffer "^1.1.5"
+
 babel-core@^7.0.0-bridge.0:
   version "7.0.0-bridge.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
@@ -3548,7 +3556,7 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.3.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76"
   integrity sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==
@@ -7150,7 +7158,7 @@ prop-types-extra@^1.1.0:
     react-is "^16.3.2"
     warning "^3.0.0"
 
-prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==