From 8f9bc76f8d99728da52f423ff14eb205a601dd01 Mon Sep 17 00:00:00 2001
From: AntonioCopete <antcopjim@gmail.com>
Date: Fri, 1 Oct 2021 10:42:58 +0200
Subject: [PATCH 01/11] initial commit

---
 package-lock.json | 339 ++++++++++++++++------------------------------
 package.json      |   2 +-
 2 files changed, 121 insertions(+), 220 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 993b456..19f2b75 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2097,6 +2097,15 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4="
     },
+    "@types/mdast": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz",
+      "integrity": "sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==",
+      "dev": true,
+      "requires": {
+        "@types/unist": "*"
+      }
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -2166,6 +2175,12 @@
         "source-map": "^0.6.1"
       }
     },
+    "@types/unist": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
+      "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==",
+      "dev": true
+    },
     "@types/webpack": {
       "version": "4.41.26",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.26.tgz",
@@ -3292,12 +3307,6 @@
       "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
       "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ=="
     },
-    "bail": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
-      "integrity": "sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==",
-      "dev": true
-    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -3578,15 +3587,32 @@
       }
     },
     "browserslist": {
-      "version": "4.16.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.3.tgz",
-      "integrity": "sha512-vIyhWmIkULaq04Gt93txdh+j02yX/JzlyhLYbV3YQCn/zvES3JnY7TifHHvvr1w5hTDluNKMkV05cs4vy8Q7sw==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.2.tgz",
+      "integrity": "sha512-jSDZyqJmkKMEMi7SZAgX5UltFdR5NAO43vY0AwTpu4X3sGH7GLLQ83KiUomgrnvZRCeW0yPPnKqnxPqQOER9zQ==",
       "requires": {
-        "caniuse-lite": "^1.0.30001181",
-        "colorette": "^1.2.1",
-        "electron-to-chromium": "^1.3.649",
+        "caniuse-lite": "^1.0.30001261",
+        "electron-to-chromium": "^1.3.854",
         "escalade": "^3.1.1",
-        "node-releases": "^1.1.70"
+        "nanocolors": "^0.2.12",
+        "node-releases": "^1.1.76"
+      },
+      "dependencies": {
+        "caniuse-lite": {
+          "version": "1.0.30001263",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001263.tgz",
+          "integrity": "sha512-doiV5dft6yzWO1WwU19kt8Qz8R0/8DgEziz6/9n2FxUasteZNwNNYSmJO3GLBH8lCVE73AB1RPDPAeYbcO5Cvw=="
+        },
+        "electron-to-chromium": {
+          "version": "1.3.856",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.856.tgz",
+          "integrity": "sha512-lSezYIe1/p5qkEswAfaQUseOBiwGwuCvRl/MKzOEVe++DcmQ92+43dznDl4rFJ4Zpu+kevhwyIf7KjJevyDA/A=="
+        },
+        "node-releases": {
+          "version": "1.1.76",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.76.tgz",
+          "integrity": "sha512-9/IECtNr8dXNmPWmFXepT0/7o5eolGesHUa3mtr0KlgnCvnZxwh2qensKL42JJY2vQKC3nIBXetFAqR+PW1CmA=="
+        }
       }
     },
     "bser": {
@@ -3970,12 +3996,6 @@
         }
       }
     },
-    "collapse-white-space": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz",
-      "integrity": "sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ==",
-      "dev": true
-    },
     "collect-v8-coverage": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
@@ -4989,9 +5009,9 @@
       "integrity": "sha1-s55/HabrCnW6nBcySzR1PEfgZU0="
     },
     "dns-packet": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.1.tgz",
-      "integrity": "sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.4.tgz",
+      "integrity": "sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA==",
       "requires": {
         "ip": "^1.1.0",
         "safe-buffer": "^5.0.1"
@@ -5880,13 +5900,12 @@
       }
     },
     "eslint-plugin-markdown": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-markdown/-/eslint-plugin-markdown-2.0.0.tgz",
-      "integrity": "sha512-zt10JoexHeJFMTE5egDcetAJ34bn5k/92s0wAuRZfhDAyI0ryEj+O91JL2CbBExajie6BE5L63y47dN1Sbp6mQ==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-markdown/-/eslint-plugin-markdown-2.2.1.tgz",
+      "integrity": "sha512-FgWp4iyYvTFxPwfbxofTvXxgzPsDuSKHQy2S+a8Ve6savbujey+lgrFFbXQA0HPygISpRYWYBjooPzhYSF81iA==",
       "dev": true,
       "requires": {
-        "remark-parse": "^5.0.0",
-        "unified": "^6.1.2"
+        "mdast-util-from-markdown": "^0.8.5"
       }
     },
     "eslint-plugin-node": {
@@ -7222,9 +7241,9 @@
       "integrity": "sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ=="
     },
     "hosted-git-info": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
-      "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg=="
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
     },
     "hpack.js": {
       "version": "2.1.6",
@@ -8029,23 +8048,11 @@
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
     },
-    "is-whitespace-character": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz",
-      "integrity": "sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==",
-      "dev": true
-    },
     "is-windows": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
       "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA=="
     },
-    "is-word-character": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.4.tgz",
-      "integrity": "sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==",
-      "dev": true
-    },
     "is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -9415,12 +9422,6 @@
         "object-visit": "^1.0.0"
       }
     },
-    "markdown-escapes": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz",
-      "integrity": "sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==",
-      "dev": true
-    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -9431,6 +9432,25 @@
         "safe-buffer": "^5.1.2"
       }
     },
+    "mdast-util-from-markdown": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz",
+      "integrity": "sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==",
+      "dev": true,
+      "requires": {
+        "@types/mdast": "^3.0.0",
+        "mdast-util-to-string": "^2.0.0",
+        "micromark": "~2.11.0",
+        "parse-entities": "^2.0.0",
+        "unist-util-stringify-position": "^2.0.0"
+      }
+    },
+    "mdast-util-to-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz",
+      "integrity": "sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==",
+      "dev": true
+    },
     "mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -9499,6 +9519,16 @@
       "resolved": "https://registry.npmjs.org/microevent.ts/-/microevent.ts-0.1.1.tgz",
       "integrity": "sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g=="
     },
+    "micromark": {
+      "version": "2.11.4",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-2.11.4.tgz",
+      "integrity": "sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.0.0",
+        "parse-entities": "^2.0.0"
+      }
+    },
     "micromatch": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
@@ -9758,10 +9788,10 @@
       "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
       "optional": true
     },
-    "nanoid": {
-      "version": "3.1.20",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz",
-      "integrity": "sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw=="
+    "nanocolors": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.2.12.tgz",
+      "integrity": "sha512-SFNdALvzW+rVlzqexid6epYdt8H9Zol7xDoQarioEFcFN0JHo4CYNztAxmtfgGTVRCmFlEOqqhBpoFGKqSAMug=="
     },
     "nanomatch": {
       "version": "1.2.13",
@@ -10344,9 +10374,9 @@
       }
     },
     "parse-entities": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-1.2.2.tgz",
-      "integrity": "sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
+      "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
       "dev": true,
       "requires": {
         "character-entities": "^1.0.0",
@@ -10430,9 +10460,9 @@
       "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A="
     },
     "path-parse": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "path-to-regexp": {
       "version": "0.1.7",
@@ -11555,13 +11585,20 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "8.2.8",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.8.tgz",
-          "integrity": "sha512-1F0Xb2T21xET7oQV9eKuctbM9S7BC0fetoHCc4H13z0PT6haiRLP4T0ZY4XWh7iLP0usgqykT6p9B2RtOf4FPw==",
+          "version": "8.3.8",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.8.tgz",
+          "integrity": "sha512-GT5bTjjZnwDifajzczOC+r3FI3Cu+PgPvrsjhQdRqa2kTJ4968/X9CUce9xttIB0xOs5c6xf0TCWZo/y9lF6bA==",
           "requires": {
-            "colorette": "^1.2.2",
-            "nanoid": "^3.1.20",
-            "source-map": "^0.6.1"
+            "nanocolors": "^0.2.2",
+            "nanoid": "^3.1.25",
+            "source-map-js": "^0.6.2"
+          },
+          "dependencies": {
+            "nanoid": {
+              "version": "3.1.28",
+              "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.28.tgz",
+              "integrity": "sha512-gSu9VZ2HtmoKYe/lmyPFES5nknFrHa+/DT9muUFWFMi6Jh9E1I7bkvlQ8xxf1Kos9pi9o8lBnIOkatMhKX/YUw=="
+            }
           }
         }
       }
@@ -12458,29 +12495,6 @@
       "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
       "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk="
     },
-    "remark-parse": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-5.0.0.tgz",
-      "integrity": "sha512-b3iXszZLH1TLoyUzrATcTQUZrwNl1rE70rVdSruJFlDaJ9z5aMkhrG43Pp68OgfHndL/ADz6V69Zow8cTQu+JA==",
-      "dev": true,
-      "requires": {
-        "collapse-white-space": "^1.0.2",
-        "is-alphabetical": "^1.0.0",
-        "is-decimal": "^1.0.0",
-        "is-whitespace-character": "^1.0.0",
-        "is-word-character": "^1.0.0",
-        "markdown-escapes": "^1.0.0",
-        "parse-entities": "^1.1.0",
-        "repeat-string": "^1.5.4",
-        "state-toggle": "^1.0.0",
-        "trim": "0.0.1",
-        "trim-trailing-lines": "^1.0.0",
-        "unherit": "^1.0.4",
-        "unist-util-remove-position": "^1.0.0",
-        "vfile-location": "^2.0.0",
-        "xtend": "^4.0.1"
-      }
-    },
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -12523,12 +12537,6 @@
       "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
       "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc="
     },
-    "replace-ext": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.0.tgz",
-      "integrity": "sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=",
-      "dev": true
-    },
     "request": {
       "version": "2.88.2",
       "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
@@ -13606,6 +13614,11 @@
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
     },
+    "source-map-js": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
+      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug=="
+    },
     "source-map-resolve": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
@@ -13749,12 +13762,6 @@
       "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz",
       "integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA=="
     },
-    "state-toggle": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz",
-      "integrity": "sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==",
-      "dev": true
-    },
     "static-extend": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
@@ -14164,9 +14171,9 @@
       "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA=="
     },
     "tar": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.0.tgz",
-      "integrity": "sha512-DUCttfhsnLCjwoDoFcI+B2iJgYa93vBnDUATYEeRx6sntCTdN01VnqsIuTlALXla/LWooNg0yEGeB+Y8WdFxGA==",
+      "version": "6.1.11",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz",
+      "integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==",
       "requires": {
         "chownr": "^2.0.0",
         "fs-minipass": "^2.0.0",
@@ -14483,24 +14490,6 @@
         "punycode": "^2.1.1"
       }
     },
-    "trim": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
-      "integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0=",
-      "dev": true
-    },
-    "trim-trailing-lines": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz",
-      "integrity": "sha512-rjUWSqnfTNrjbB9NQWfPMH/xRK1deHeGsHoVfpxJ++XeYXE0d6B1En37AHfw3jtfTU7dzMzZL2jjpe8Qb5gLIQ==",
-      "dev": true
-    },
-    "trough": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz",
-      "integrity": "sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==",
-      "dev": true
-    },
     "tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -14625,16 +14614,6 @@
         "which-boxed-primitive": "^1.0.1"
       }
     },
-    "unherit": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz",
-      "integrity": "sha512-Ft16BJcnapDKp0+J/rqFC3Rrk6Y/Ng4nzsC028k2jdDII/rdZ7Wd3pPT/6+vIIxRagwRc9K0IUX0Ra4fKvw+WQ==",
-      "dev": true,
-      "requires": {
-        "inherits": "^2.0.0",
-        "xtend": "^4.0.0"
-      }
-    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -14659,20 +14638,6 @@
       "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz",
       "integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg=="
     },
-    "unified": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/unified/-/unified-6.2.0.tgz",
-      "integrity": "sha512-1k+KPhlVtqmG99RaTbAv/usu85fcSRu3wY8X+vnsEhIxNP5VbVIDiXnLqyKIG+UMdyTg0ZX9EI6k2AfjJkHPtA==",
-      "dev": true,
-      "requires": {
-        "bail": "^1.0.0",
-        "extend": "^3.0.0",
-        "is-plain-obj": "^1.1.0",
-        "trough": "^1.0.0",
-        "vfile": "^2.0.0",
-        "x-is-string": "^0.1.0"
-      }
-    },
     "union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
@@ -14718,43 +14683,13 @@
         "crypto-random-string": "^1.0.0"
       }
     },
-    "unist-util-is": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz",
-      "integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==",
-      "dev": true
-    },
-    "unist-util-remove-position": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-1.1.4.tgz",
-      "integrity": "sha512-tLqd653ArxJIPnKII6LMZwH+mb5q+n/GtXQZo6S6csPRs5zB0u79Yw8ouR3wTw8wxvdJFhpP6Y7jorWdCgLO0A==",
-      "dev": true,
-      "requires": {
-        "unist-util-visit": "^1.1.0"
-      }
-    },
     "unist-util-stringify-position": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz",
-      "integrity": "sha512-pNCVrk64LZv1kElr0N1wPiHEUoXNVFERp+mlTg/s9R5Lwg87f9bM/3sQB99w+N9D/qnM9ar3+AKDBwo/gm/iQQ==",
-      "dev": true
-    },
-    "unist-util-visit": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz",
-      "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==",
-      "dev": true,
-      "requires": {
-        "unist-util-visit-parents": "^2.0.0"
-      }
-    },
-    "unist-util-visit-parents": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz",
-      "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
+      "integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
       "dev": true,
       "requires": {
-        "unist-util-is": "^3.0.0"
+        "@types/unist": "^2.0.2"
       }
     },
     "universalify": {
@@ -14870,9 +14805,9 @@
       }
     },
     "url-parse": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.1.tgz",
-      "integrity": "sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==",
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz",
+      "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==",
       "requires": {
         "querystringify": "^2.1.1",
         "requires-port": "^1.0.0"
@@ -14986,33 +14921,6 @@
         "extsprintf": "^1.2.0"
       }
     },
-    "vfile": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/vfile/-/vfile-2.3.0.tgz",
-      "integrity": "sha512-ASt4mBUHcTpMKD/l5Q+WJXNtshlWxOogYyGYYrg4lt/vuRjC1EFQtlAofL5VmtVNIZJzWYFJjzGWZ0Gw8pzW1w==",
-      "dev": true,
-      "requires": {
-        "is-buffer": "^1.1.4",
-        "replace-ext": "1.0.0",
-        "unist-util-stringify-position": "^1.0.0",
-        "vfile-message": "^1.0.0"
-      }
-    },
-    "vfile-location": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-2.0.6.tgz",
-      "integrity": "sha512-sSFdyCP3G6Ka0CEmN83A2YCMKIieHx0EDaj5IDP4g1pa5ZJ4FJDvpO0WODLxo4LUX4oe52gmSCK7Jw4SBghqxA==",
-      "dev": true
-    },
-    "vfile-message": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-1.1.1.tgz",
-      "integrity": "sha512-1WmsopSGhWt5laNir+633LszXvZ+Z/lxveBf6yhGsqnQIhlhzooZae7zV6YVM1Sdkw68dtAW3ow0pOdPANugvA==",
-      "dev": true,
-      "requires": {
-        "unist-util-stringify-position": "^1.1.1"
-      }
-    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -15523,8 +15431,7 @@
         },
         "ssri": {
           "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
-          "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
+          "resolved": "",
           "requires": {
             "figgy-pudding": "^3.5.1"
           }
@@ -16451,15 +16358,9 @@
       }
     },
     "ws": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.4.tgz",
-      "integrity": "sha512-Qm8k8ojNQIMx7S+Zp8u/uHOx7Qazv3Yv4q68MiWWWOJhiwG5W3x7iqmRtJo8xxrciZUY4vRxUTJCKuRnF28ZZw=="
-    },
-    "x-is-string": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/x-is-string/-/x-is-string-0.1.0.tgz",
-      "integrity": "sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI=",
-      "dev": true
+      "version": "7.5.5",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.5.tgz",
+      "integrity": "sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w=="
     },
     "xml-name-validator": {
       "version": "3.0.0",
diff --git a/package.json b/package.json
index a154f9e..6e16512 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^24.2.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-markdown": "^2.0.0",
+    "eslint-plugin-markdown": "^2.2.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",

From 9c13958e51e369129f510d7c45fab18a1fc77dd5 Mon Sep 17 00:00:00 2001
From: AntonioCopete <antcopjim@gmail.com>
Date: Fri, 1 Oct 2021 13:23:25 +0200
Subject: [PATCH 02/11] working on character card keys

---
 src/App.js                   | 18 +++++++++-
 src/pages/Episode/Episode.js | 69 ++++++++++++++++++++++++------------
 src/pages/Home/Home.js       | 69 +++++++++++++++++++++++-------------
 3 files changed, 108 insertions(+), 48 deletions(-)

diff --git a/src/App.js b/src/App.js
index 3a49c0e..4b7105c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,25 @@
 import React from "react";
+import { BrowserRouter, Switch, Route } from "react-router-dom";
+import Episode from "./pages/Episode";
 
 import Home from "./pages/Home";
 
 function App() {
-  return <Home />;
+  return (
+    <BrowserRouter>
+      <Switch>
+        <Route
+          exact
+          path="/episode/:episodeId"
+          render={(routeProps) => <Episode {...routeProps} />}
+        />
+
+        <Route path="/">
+          <Home />
+        </Route>
+      </Switch>
+    </BrowserRouter>
+  );
 }
 
 export default App;
diff --git a/src/pages/Episode/Episode.js b/src/pages/Episode/Episode.js
index 8255df5..87320c2 100644
--- a/src/pages/Episode/Episode.js
+++ b/src/pages/Episode/Episode.js
@@ -1,40 +1,65 @@
+import axios from "axios";
 import React, { Component } from "react";
 
 import Layout from "../../components/Layout";
-// import CharacterCard from "../../components/CharacterCard";
+import CharacterCard from "../../components/CharacterCard";
 
 class Episode extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {};
-    // episode: null,
-    // characters: [],
+    this.state = {
+      episode: null,
+      characters: [],
+    };
+    // ,
+    //
     // hasLoaded: false,
     // hasError: false,
     // errorMessage: null,
   }
 
+  componentDidMount() {
+    axios.get("https://rickandmortyapi.com/api/episode/1").then((data) => {
+      data.data.characters.forEach((element) => {
+        let newElement = element.split("/");
+        newElement = newElement[newElement.length - 1];
+        console.log(newElement);
+      });
+
+      this.setState({
+        episode: data.data.episode,
+        characters: data.data.characters,
+      });
+    });
+  }
+
   render() {
+    const { episode, characters } = this.state;
+
     return (
-      <Layout>
-        <section className="row">
-          <div className="col col-12">
-            {/* {characters.map((character) => (
-              <CharacterCard
-                key={character.id}
-                id={character.id}
-                name={character.name}
-                image={character.image}
-                species={character.species}
-                status={character.status}
-                origin={character.origin}
-                location={character.location}
-              />
-            ))} */}
-          </div>
-        </section>
-      </Layout>
+      <>
+        <Layout>
+          <section className="row">
+            <div className="col col-12">
+              {/* {characters.map((character, idx) => (
+                
+
+                <CharacterCard
+                  key={character.id}
+                  id={character.id}
+                  name={character.name}
+                  image={character.image}
+                  species={character.species}
+                  status={character.status}
+                  origin={character.origin}
+                  location={character.location}
+                />
+              ))} */}
+            </div>
+          </section>
+        </Layout>
+      </>
     );
   }
 }
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index f86e93c..18eb21f 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -1,42 +1,60 @@
 import React, { Component } from "react";
+import axios from "axios";
 
 import Layout from "../../components/Layout";
-// import EpisodeCard from "../../components/EpisodeCard";
+import EpisodeCard from "../../components/EpisodeCard";
 
 class Home extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {};
-    // page: 1,
-    // paginationInfo: null,
-    // episodes: [],
-    // hasLoaded: false,
-    // hasError: false,
-    // errorMessage: null,
+    this.state = {
+      page: 1,
+      paginationInfo: null,
+      episodes: [],
+      hasLoaded: false,
+      hasError: false,
+      errorMessage: null,
+    };
   }
 
   async componentDidMount() {
-    // this.loadEpisodes();
+    this.loadEpisodes();
   }
 
   async loadEpisodes() {
-    console.log(this);
+    axios.get("https://rickandmortyapi.com/api/episode?page=1").then((data) => {
+      // this.setState({ episodes: data.data.results });
+      const newInfo = data.data.results;
+      this.setState((prevState) => ({
+        episodes: [...prevState.episodes, newInfo].flat(),
+      }));
+    });
   }
 
   render() {
+    const {
+      page,
+      paginationInfo,
+      episodes,
+      hasLoaded,
+      hasError,
+      errorMessage,
+    } = this.state;
+
     return (
-      <Layout>
-        <section className="row">
-          {/* {hasLoaded && !hasError && (
+      <>
+        <Layout>
+          <section className="row">
+            {hasLoaded && !hasError && (
+              <div className="col col-12">
+                <h1>Episodes loaded!</h1>
+              </div>
+            )}
             <div className="col col-12">
-              <h1>Episodes loaded!</h1>
+              <hr />
             </div>
-          )} */}
-          <div className="col col-12">
-            <hr />
-          </div>
-          {/* {episodes.map((episode) => (
+            {episodes.map((episode) => (
               <EpisodeCard
                 key={episode.id}
                 id={episode.id}
@@ -44,12 +62,13 @@ class Home extends Component {
                 airDate={episode.air_date}
                 episode={episode.episode}
               />
-            ))} */}
-          <div className="col col-12">
-            <hr />
-          </div>
-        </section>
-      </Layout>
+            ))}
+            <div className="col col-12">
+              <hr />
+            </div>
+          </section>
+        </Layout>
+      </>
     );
   }
 }

From 4202742bd4e98fbb331ce93ce6fe6ac47f977b70 Mon Sep 17 00:00:00 2001
From: AntonioCopete <antcopjim@gmail.com>
Date: Sun, 3 Oct 2021 17:07:33 +0200
Subject: [PATCH 03/11] added episode cards, need to improve

---
 src/pages/Episode/Episode.js | 59 +++++++++++++++++++++++++-----------
 1 file changed, 42 insertions(+), 17 deletions(-)

diff --git a/src/pages/Episode/Episode.js b/src/pages/Episode/Episode.js
index 87320c2..2a2b931 100644
--- a/src/pages/Episode/Episode.js
+++ b/src/pages/Episode/Episode.js
@@ -11,40 +11,65 @@ class Episode extends Component {
     this.state = {
       episode: null,
       characters: [],
+      hasLoaded: false,
     };
     // ,
     //
-    // hasLoaded: false,
+    //
     // hasError: false,
     // errorMessage: null,
   }
 
   componentDidMount() {
-    axios.get("https://rickandmortyapi.com/api/episode/1").then((data) => {
-      data.data.characters.forEach((element) => {
-        let newElement = element.split("/");
-        newElement = newElement[newElement.length - 1];
-        console.log(newElement);
-      });
+    this.getCharacters();
+  }
+
+  getOneCharacter(character) {
+    this.setState({ characters: character });
+    return axios.get(character);
+  }
 
-      this.setState({
-        episode: data.data.episode,
-        characters: data.data.characters,
+  getCharacters() {
+    const { match } = this.props;
+    const { episodeId } = match.params;
+    axios
+      .get(`https://rickandmortyapi.com/api/episode/${episodeId}`)
+      .then((apiEpisode) => {
+        this.setState({
+          episode: apiEpisode.data.episode,
+        });
+
+        const characterUris = apiEpisode.data.characters;
+
+        axios
+          .all(
+            characterUris.map((char) => {
+              return this.getOneCharacter(char);
+            }),
+          )
+          .then((data) => {
+            const charactersArr = data.map((characterData) => {
+              return characterData.data;
+            });
+            this.setState({ characters: charactersArr, hasLoaded: true });
+          });
       });
-    });
   }
 
   render() {
-    const { episode, characters } = this.state;
-
+    const { episode, characters, hasLoaded } = this.state;
+    setTimeout(console.log(characters), 500);
+    // console.log(characters);
+    console.log(hasLoaded);
+    if (!hasLoaded) {
+      return <div />;
+    }
     return (
       <>
         <Layout>
           <section className="row">
             <div className="col col-12">
-              {/* {characters.map((character, idx) => (
-                
-
+              {characters.map((character) => (
                 <CharacterCard
                   key={character.id}
                   id={character.id}
@@ -55,7 +80,7 @@ class Episode extends Component {
                   origin={character.origin}
                   location={character.location}
                 />
-              ))} */}
+              ))}
             </div>
           </section>
         </Layout>

From a6d7c67a7964d9afcfe9e01ec1fd9f242e463c47 Mon Sep 17 00:00:00 2001
From: AntonioCopete <antcopjim@gmail.com>
Date: Mon, 4 Oct 2021 09:51:30 +0200
Subject: [PATCH 04/11] characters page working

---
 src/pages/Episode/Episode.js | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/pages/Episode/Episode.js b/src/pages/Episode/Episode.js
index 2a2b931..e4c27e3 100644
--- a/src/pages/Episode/Episode.js
+++ b/src/pages/Episode/Episode.js
@@ -36,8 +36,15 @@ class Episode extends Component {
       .get(`https://rickandmortyapi.com/api/episode/${episodeId}`)
       .then((apiEpisode) => {
         this.setState({
-          episode: apiEpisode.data.episode,
+          episode: {
+            id: apiEpisode.data.id,
+            name: apiEpisode.data.name,
+            episode: apiEpisode.data.episode,
+            air_date: apiEpisode.data.air_date,
+          },
         });
+        const { episode } = this.state;
+        console.log(episode);
 
         const characterUris = apiEpisode.data.characters;
 
@@ -58,18 +65,19 @@ class Episode extends Component {
 
   render() {
     const { episode, characters, hasLoaded } = this.state;
-    setTimeout(console.log(characters), 500);
-    // console.log(characters);
-    console.log(hasLoaded);
-    if (!hasLoaded) {
-      return <div />;
-    }
+
     return (
       <>
         <Layout>
           <section className="row">
             <div className="col col-12">
-              {characters.map((character) => (
+              <h3>{hasLoaded && episode.name}</h3>
+              <p>
+                {hasLoaded && episode.episode} | {hasLoaded && episode.air_date}
+              </p>
+            </div>
+            {hasLoaded &&
+              characters.map((character) => (
                 <CharacterCard
                   key={character.id}
                   id={character.id}
@@ -81,7 +89,6 @@ class Episode extends Component {
                   location={character.location}
                 />
               ))}
-            </div>
           </section>
         </Layout>
       </>

From 68b08daa5acd0f3ce7387c59ee0a9e50a2af1e05 Mon Sep 17 00:00:00 2001
From: AntonioCopete <antcopjim@gmail.com>
Date: Mon, 4 Oct 2021 15:36:00 +0200
Subject: [PATCH 05/11] catching errors in home

---
 src/App.js                   |  5 ++++
 src/constants/routes.js      |  1 +
 src/pages/Episode/Episode.js | 52 +++++++++++++++++++++++-------------
 src/pages/Home/Home.js       | 29 +++++++++++++-------
 src/utils/fetchApi.js        |  5 ++++
 5 files changed, 64 insertions(+), 28 deletions(-)
 create mode 100644 src/utils/fetchApi.js

diff --git a/src/App.js b/src/App.js
index 4b7105c..b79e2f6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,6 +13,11 @@ function App() {
           path="/episode/:episodeId"
           render={(routeProps) => <Episode {...routeProps} />}
         />
+        <Route
+          exact
+          path="/episode/:characterId"
+          render={(routeProps) => <Episode {...routeProps} />}
+        />
 
         <Route path="/">
           <Home />
diff --git a/src/constants/routes.js b/src/constants/routes.js
index 8c7af62..53c68b1 100644
--- a/src/constants/routes.js
+++ b/src/constants/routes.js
@@ -3,3 +3,4 @@ export const EPISODES = "/episodes";
 export const EPISODE = "/episode";
 export const LOCATION = "/location";
 export const CHARACTER = "/character";
+export const API = "https://rickandmortyapi.com/api";
diff --git a/src/pages/Episode/Episode.js b/src/pages/Episode/Episode.js
index e4c27e3..acc818a 100644
--- a/src/pages/Episode/Episode.js
+++ b/src/pages/Episode/Episode.js
@@ -3,6 +3,7 @@ import React, { Component } from "react";
 
 import Layout from "../../components/Layout";
 import CharacterCard from "../../components/CharacterCard";
+import { fetchApi } from "../../utils/fetchApi";
 
 class Episode extends Component {
   constructor(props) {
@@ -12,23 +13,15 @@ class Episode extends Component {
       episode: null,
       characters: [],
       hasLoaded: false,
+      hasError: false,
+      errorMessage: null,
     };
-    // ,
-    //
-    //
-    // hasError: false,
-    // errorMessage: null,
   }
 
   componentDidMount() {
     this.getCharacters();
   }
 
-  getOneCharacter(character) {
-    this.setState({ characters: character });
-    return axios.get(character);
-  }
-
   getCharacters() {
     const { match } = this.props;
     const { episodeId } = match.params;
@@ -43,38 +36,59 @@ class Episode extends Component {
             air_date: apiEpisode.data.air_date,
           },
         });
-        const { episode } = this.state;
-        console.log(episode);
 
         const characterUris = apiEpisode.data.characters;
+        console.log(characterUris);
 
         axios
           .all(
             characterUris.map((char) => {
-              return this.getOneCharacter(char);
+              return fetchApi(char);
             }),
           )
           .then((data) => {
             const charactersArr = data.map((characterData) => {
               return characterData.data;
             });
-            this.setState({ characters: charactersArr, hasLoaded: true });
+            this.setState({
+              characters: charactersArr,
+              hasLoaded: true,
+              hasError: false,
+            });
+          })
+          .catch((error) => {
+            console.log(error);
+            this.setState({
+              hasLoaded: false,
+              hasError: true,
+              errorMessage: "Error loading characters",
+            });
           });
       });
   }
 
   render() {
-    const { episode, characters, hasLoaded } = this.state;
+    const {
+      episode,
+      characters,
+      hasLoaded,
+      hasError,
+      errorMessage,
+    } = this.state;
 
     return (
       <>
         <Layout>
+          {hasError && <div>ERROR</div>}
           <section className="row">
             <div className="col col-12">
-              <h3>{hasLoaded && episode.name}</h3>
-              <p>
-                {hasLoaded && episode.episode} | {hasLoaded && episode.air_date}
-              </p>
+              {hasLoaded && <h3>{episode.name}</h3>}
+
+              {hasLoaded && (
+                <p>
+                  {episode.episode} | {episode.air_date}
+                </p>
+              )}
             </div>
             {hasLoaded &&
               characters.map((character) => (
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index 18eb21f..87ddb00 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -18,18 +18,29 @@ class Home extends Component {
     };
   }
 
-  async componentDidMount() {
+  componentDidMount() {
     this.loadEpisodes();
   }
 
-  async loadEpisodes() {
-    axios.get("https://rickandmortyapi.com/api/episode?page=1").then((data) => {
-      // this.setState({ episodes: data.data.results });
-      const newInfo = data.data.results;
-      this.setState((prevState) => ({
-        episodes: [...prevState.episodes, newInfo].flat(),
-      }));
-    });
+  loadEpisodes() {
+    const { page } = this.state;
+    axios
+      .get(`https://rickandmortyapi.com/ap/episode?page=${page}`)
+      .then((data) => {
+        const newInfo = data.data.results;
+        this.setState({
+          episodes: newInfo,
+          hasLoaded: true,
+          hasError: false,
+        });
+      })
+      .catch((error) => {
+        this.setState({
+          hasLoaded: false,
+          hasError: true,
+          errorMessage: error,
+        });
+      });
   }
 
   render() {
diff --git a/src/utils/fetchApi.js b/src/utils/fetchApi.js
new file mode 100644
index 0000000..7e4c1f2
--- /dev/null
+++ b/src/utils/fetchApi.js
@@ -0,0 +1,5 @@
+import axios from "axios";
+
+export function fetchApi(uri) {
+  return axios.get(uri);
+}

From 48ce279cc8c34b0fd4aa4f382ef14d83b0524f3b Mon Sep 17 00:00:00 2001
From: AntonioCopete <antcopjim@gmail.com>
Date: Tue, 5 Oct 2021 12:09:40 +0200
Subject: [PATCH 06/11] improving character page layout

---
 src/App.js                                    | 14 +--
 src/components/CharacterCard/CharacterCard.js |  4 +-
 src/pages/Character/Character.js              | 88 +++++++++++++++++++
 src/pages/Character/index.js                  |  1 +
 src/pages/Episode/Episode.js                  | 34 ++++---
 src/pages/Home/Home.js                        |  2 +-
 src/utils/fetchApi.js                         |  5 --
 7 files changed, 119 insertions(+), 29 deletions(-)
 create mode 100644 src/pages/Character/Character.js
 create mode 100644 src/pages/Character/index.js
 delete mode 100644 src/utils/fetchApi.js

diff --git a/src/App.js b/src/App.js
index b79e2f6..b25bf91 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,6 @@
 import React from "react";
 import { BrowserRouter, Switch, Route } from "react-router-dom";
+import Character from "./pages/Character";
 import Episode from "./pages/Episode";
 
 import Home from "./pages/Home";
@@ -8,16 +9,9 @@ function App() {
   return (
     <BrowserRouter>
       <Switch>
-        <Route
-          exact
-          path="/episode/:episodeId"
-          render={(routeProps) => <Episode {...routeProps} />}
-        />
-        <Route
-          exact
-          path="/episode/:characterId"
-          render={(routeProps) => <Episode {...routeProps} />}
-        />
+        <Route exact path="/episode/:episodeId" component={Episode} />
+        <Route exact path="/character/:characterId" component={Character} />
+        {/* <Route exact path="/location/:locationId" component={Location} /> */}
 
         <Route path="/">
           <Home />
diff --git a/src/components/CharacterCard/CharacterCard.js b/src/components/CharacterCard/CharacterCard.js
index 9e7e4ab..0c66a4b 100644
--- a/src/components/CharacterCard/CharacterCard.js
+++ b/src/components/CharacterCard/CharacterCard.js
@@ -6,6 +6,8 @@ import "./CharacterCard.scss";
 import * as routes from "../../constants/routes";
 
 function CharacterCard({ id, name, image, species, status, origin, location }) {
+  let locationId = location.url.split("/");
+  locationId = locationId[locationId.length - 1];
   return (
     <div className="col col-12 col-sm-6 col-xl-3 CharacterCard">
       <img className="CharacterCard__img" src={image} alt="" />
@@ -15,7 +17,7 @@ function CharacterCard({ id, name, image, species, status, origin, location }) {
       <div className="CharacterCard__meta">
         <Link
           className="CharacterCard__meta-item"
-          to={`${routes.LOCATION}/${id}`}
+          to={`${routes.LOCATION}/${locationId}`}
         >
           {origin.name}
         </Link>
diff --git a/src/pages/Character/Character.js b/src/pages/Character/Character.js
new file mode 100644
index 0000000..82e1edc
--- /dev/null
+++ b/src/pages/Character/Character.js
@@ -0,0 +1,88 @@
+import axios from "axios";
+import React, { Component } from "react";
+import EpisodeCard from "../../components/EpisodeCard";
+import Layout from "../../components/Layout";
+
+class Character extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoaded: false,
+      character: {},
+      episodes: [],
+    };
+  }
+
+  componentDidMount() {
+    // this.getCharacterById();
+    const { match } = this.props;
+    const characterId = match.params.characterId;
+    axios
+      .get(`https://rickandmortyapi.com/api/character/${characterId}`)
+      .then((data) => {
+        this.setState({ character: data.data });
+        const episodeUrls = data.data.episode;
+        console.log(episodeUrls);
+        axios
+          .all(episodeUrls.map((episodeUrl) => axios.get(episodeUrl)))
+          .then((dataCollection) => {
+            const episodes = dataCollection.map(
+              (collectionData) => collectionData.data,
+            );
+            this.setState({ episodes: episodes, isLoaded: true });
+          });
+      });
+  }
+
+  render() {
+    const { character, isLoaded, episodes } = this.state;
+    console.log(episodes);
+
+    return (
+      <>
+        <Layout>
+          {isLoaded && (
+            <div>
+              <div className="col col-12 col-sm-6 col-xl-3 CharacterCard">
+                <img
+                  className="CharacterCard__img"
+                  src={character.image}
+                  alt=""
+                />
+                <h3 className="CharacterCard__name h4">{character.name}</h3>
+                <div className="CharacterCard__meta">
+                  {character.origin.name}
+
+                  <p className="CharacterCard__meta-item">|</p>
+                  <p className="CharacterCard__meta-item">{character.status}</p>
+                </div>
+              </div>
+
+              <div className="row">
+                {episodes.map((episode) => (
+                  <EpisodeCard
+                    key={episode.id}
+                    id={episode.id}
+                    name={episode.name}
+                    airDate={episode.air_date}
+                    episode={episode.episode}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* <CharacterCard
+            name={character.name}
+            race
+            status
+            origin
+            location
+          /> */}
+        </Layout>
+      </>
+    );
+  }
+}
+
+export default Character;
diff --git a/src/pages/Character/index.js b/src/pages/Character/index.js
new file mode 100644
index 0000000..f267ceb
--- /dev/null
+++ b/src/pages/Character/index.js
@@ -0,0 +1 @@
+export { default } from "./Character";
diff --git a/src/pages/Episode/Episode.js b/src/pages/Episode/Episode.js
index acc818a..9985b29 100644
--- a/src/pages/Episode/Episode.js
+++ b/src/pages/Episode/Episode.js
@@ -3,7 +3,8 @@ import React, { Component } from "react";
 
 import Layout from "../../components/Layout";
 import CharacterCard from "../../components/CharacterCard";
-import { fetchApi } from "../../utils/fetchApi";
+import { API, EPISODE } from "../../constants/routes";
+import EpisodeCard from "../../components/EpisodeCard";
 
 class Episode extends Component {
   constructor(props) {
@@ -25,8 +26,9 @@ class Episode extends Component {
   getCharacters() {
     const { match } = this.props;
     const { episodeId } = match.params;
+    const charactersUrl = `${API}${EPISODE}/${episodeId}`;
     axios
-      .get(`https://rickandmortyapi.com/api/episode/${episodeId}`)
+      .get(charactersUrl)
       .then((apiEpisode) => {
         this.setState({
           episode: {
@@ -38,12 +40,11 @@ class Episode extends Component {
         });
 
         const characterUris = apiEpisode.data.characters;
-        console.log(characterUris);
 
         axios
           .all(
             characterUris.map((char) => {
-              return fetchApi(char);
+              return axios.get(char);
             }),
           )
           .then((data) => {
@@ -57,13 +58,19 @@ class Episode extends Component {
             });
           })
           .catch((error) => {
-            console.log(error);
             this.setState({
               hasLoaded: false,
               hasError: true,
-              errorMessage: "Error loading characters",
+              errorMessage: error,
             });
           });
+      })
+      .catch((error) => {
+        this.setState({
+          hasLoaded: false,
+          hasError: true,
+          errorMessage: error,
+        });
       });
   }
 
@@ -76,18 +83,21 @@ class Episode extends Component {
       errorMessage,
     } = this.state;
 
+    // console.log(characters);
+
     return (
       <>
         <Layout>
-          {hasError && <div>ERROR</div>}
+          {hasError && <div>{errorMessage}</div>}
           <section className="row">
             <div className="col col-12">
-              {hasLoaded && <h3>{episode.name}</h3>}
-
               {hasLoaded && (
-                <p>
-                  {episode.episode} | {episode.air_date}
-                </p>
+                <EpisodeCard
+                  id={episode.id}
+                  name={episode.name}
+                  episode={episode.episode}
+                  airDate={episode.air_date}
+                />
               )}
             </div>
             {hasLoaded &&
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index 87ddb00..1f68560 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -25,7 +25,7 @@ class Home extends Component {
   loadEpisodes() {
     const { page } = this.state;
     axios
-      .get(`https://rickandmortyapi.com/ap/episode?page=${page}`)
+      .get(`https://rickandmortyapi.com/api/episode?page=${page}`)
       .then((data) => {
         const newInfo = data.data.results;
         this.setState({
diff --git a/src/utils/fetchApi.js b/src/utils/fetchApi.js
deleted file mode 100644
index 7e4c1f2..0000000
--- a/src/utils/fetchApi.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import axios from "axios";
-
-export function fetchApi(uri) {
-  return axios.get(uri);
-}

From 4e76bde7dea24d290e3feac6a9f9d4925c1dde23 Mon Sep 17 00:00:00 2001
From: AntonioCopete <antcopjim@gmail.com>
Date: Tue, 5 Oct 2021 15:14:19 +0200
Subject: [PATCH 07/11] character page done

---
 src/pages/Character/Character.js | 47 ++++++++++++++++++++++++--------
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/src/pages/Character/Character.js b/src/pages/Character/Character.js
index 82e1edc..020c465 100644
--- a/src/pages/Character/Character.js
+++ b/src/pages/Character/Character.js
@@ -43,18 +43,41 @@ class Character extends Component {
         <Layout>
           {isLoaded && (
             <div>
-              <div className="col col-12 col-sm-6 col-xl-3 CharacterCard">
-                <img
-                  className="CharacterCard__img"
-                  src={character.image}
-                  alt=""
-                />
-                <h3 className="CharacterCard__name h4">{character.name}</h3>
-                <div className="CharacterCard__meta">
-                  {character.origin.name}
-
-                  <p className="CharacterCard__meta-item">|</p>
-                  <p className="CharacterCard__meta-item">{character.status}</p>
+              <div className="row">
+                <div className="col col-6 col-sm-6 col-xl-3 CharacterCard">
+                  <img
+                    className="CharacterCard__img"
+                    src={character.image}
+                    alt=""
+                  />
+                </div>
+                <div className="pl-5 col col-6 ">
+                  <h3 className="CharacterCard__name h4">{character.name}</h3>
+                  <hr />
+                  <h4 className="CharacterCard__name h6">CHARACTER</h4>
+                  <div className="CharacterCard__meta">
+                    <p className="CharacterCard__meta-item">
+                      {character.origin.name} | {character.status}
+                    </p>
+                  </div>
+                  <div className="row m-0">
+                    <div>
+                      <h4 className="CharacterCard__name h6">ORIGIN</h4>
+                      <div className="CharacterCard__meta">
+                        <p className="CharacterCard__meta-item">
+                          {character.origin.name} | {character.status}
+                        </p>
+                      </div>
+                    </div>
+                    <div>
+                      <h4 className="CharacterCard__name h6">LOCATION</h4>
+                      <div className="CharacterCard__meta">
+                        <p className="CharacterCard__meta-item">
+                          {character.location.name} | {character.status}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </div>
 

From 2dc26506faec0b7963f9a7868af499b2790ebd45 Mon Sep 17 00:00:00 2001
From: AntonioCopete <antcopjim@gmail.com>
Date: Tue, 5 Oct 2021 16:26:41 +0200
Subject: [PATCH 08/11] basics done

---
 src/App.js                       |   3 +-
 src/pages/Character/Character.js |   6 +-
 src/pages/Episode/Episode.js     |  28 ++++----
 src/pages/Location/Location.js   | 106 +++++++++++++++++++++++++++++++
 src/pages/Location/index.js      |   1 +
 5 files changed, 124 insertions(+), 20 deletions(-)
 create mode 100644 src/pages/Location/Location.js
 create mode 100644 src/pages/Location/index.js

diff --git a/src/App.js b/src/App.js
index b25bf91..48cac1d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,7 @@ import Character from "./pages/Character";
 import Episode from "./pages/Episode";
 
 import Home from "./pages/Home";
+import Location from "./pages/Location";
 
 function App() {
   return (
@@ -11,7 +12,7 @@ function App() {
       <Switch>
         <Route exact path="/episode/:episodeId" component={Episode} />
         <Route exact path="/character/:characterId" component={Character} />
-        {/* <Route exact path="/location/:locationId" component={Location} /> */}
+        <Route exact path="/location/:locationId" component={Location} />
 
         <Route path="/">
           <Home />
diff --git a/src/pages/Character/Character.js b/src/pages/Character/Character.js
index 020c465..c9dcdac 100644
--- a/src/pages/Character/Character.js
+++ b/src/pages/Character/Character.js
@@ -22,7 +22,6 @@ class Character extends Component {
       .then((data) => {
         this.setState({ character: data.data });
         const episodeUrls = data.data.episode;
-        console.log(episodeUrls);
         axios
           .all(episodeUrls.map((episodeUrl) => axios.get(episodeUrl)))
           .then((dataCollection) => {
@@ -36,7 +35,6 @@ class Character extends Component {
 
   render() {
     const { character, isLoaded, episodes } = this.state;
-    console.log(episodes);
 
     return (
       <>
@@ -65,7 +63,7 @@ class Character extends Component {
                       <h4 className="CharacterCard__name h6">ORIGIN</h4>
                       <div className="CharacterCard__meta">
                         <p className="CharacterCard__meta-item">
-                          {character.origin.name} | {character.status}
+                          {character.origin.name}
                         </p>
                       </div>
                     </div>
@@ -73,7 +71,7 @@ class Character extends Component {
                       <h4 className="CharacterCard__name h6">LOCATION</h4>
                       <div className="CharacterCard__meta">
                         <p className="CharacterCard__meta-item">
-                          {character.location.name} | {character.status}
+                          {character.location.name}
                         </p>
                       </div>
                     </div>
diff --git a/src/pages/Episode/Episode.js b/src/pages/Episode/Episode.js
index 9985b29..c7c1210 100644
--- a/src/pages/Episode/Episode.js
+++ b/src/pages/Episode/Episode.js
@@ -4,7 +4,6 @@ import React, { Component } from "react";
 import Layout from "../../components/Layout";
 import CharacterCard from "../../components/CharacterCard";
 import { API, EPISODE } from "../../constants/routes";
-import EpisodeCard from "../../components/EpisodeCard";
 
 class Episode extends Component {
   constructor(props) {
@@ -83,24 +82,23 @@ class Episode extends Component {
       errorMessage,
     } = this.state;
 
-    // console.log(characters);
-
     return (
       <>
         <Layout>
-          {hasError && <div>{errorMessage}</div>}
           <section className="row">
-            <div className="col col-12">
-              {hasLoaded && (
-                <EpisodeCard
-                  id={episode.id}
-                  name={episode.name}
-                  episode={episode.episode}
-                  airDate={episode.air_date}
-                />
-              )}
-            </div>
-            {hasLoaded &&
+            {hasError && <div>{errorMessage}</div>}
+            {hasLoaded && (
+                <div className="col col-12 p-0">
+                  <div className="col col-12 col-sm-6 col-xl-4 EpisodeCard">
+                    <h3 className="Episode__name h5">{episode.name}</h3>
+                    <div className="Episode__meta">
+                      <p className="Episode__meta-item">{episode.episode}</p>
+                      <p className="Episode__meta-item">|</p>
+                      <p className="Episode__meta-item">{episode.air_date}</p>
+                    </div>
+                  </div>
+                </div>
+              ) &&
               characters.map((character) => (
                 <CharacterCard
                   key={character.id}
diff --git a/src/pages/Location/Location.js b/src/pages/Location/Location.js
new file mode 100644
index 0000000..fc935b7
--- /dev/null
+++ b/src/pages/Location/Location.js
@@ -0,0 +1,106 @@
+import axios from "axios";
+import React, { Component } from "react";
+import CharacterCard from "../../components/CharacterCard";
+import Layout from "../../components/Layout";
+
+export default class Location extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      residents: [],
+      isLoaded: false,
+    };
+  }
+
+  componentDidMount() {
+    this.update();
+  }
+
+  update() {
+    const { match } = this.props;
+    const locationId = match.params.locationId;
+    console.log(locationId);
+    axios
+      .get(`https://rickandmortyapi.com/api/location/${locationId}`)
+      .then((location) => {
+        this.setState({ location: location.data });
+        const residentUrls = location.data.residents;
+        axios
+          .all(
+            residentUrls.map((residentUrl) => {
+              return axios.get(residentUrl);
+            }),
+          )
+          .then((res) => {
+            const residents = res.map((resident) => {
+              return resident.data;
+            });
+            this.setState({ residents: residents, isLoaded: true });
+          });
+      });
+  }
+
+  render() {
+    const { residents, isLoaded, location } = this.state;
+    console.log(location);
+    return (
+      <>
+        <Layout>
+          <section className="row">
+            {isLoaded && (
+              <div className="col col-12 p-0">
+                <div className="col col-12 col-sm-6 col-xl-4 EpisodeCard">
+                  <h3 className="Episode__name h5">{location.name}</h3>
+                  <div className="Episode__meta">
+                    <p className="Episode__meta-item">{location.type}</p>
+                    <p className="Episode__meta-item">|</p>
+                    <p className="Episode__meta-item">{location.dimension}</p>
+                  </div>
+                </div>
+              </div>
+            )}
+            {isLoaded &&
+              residents.map((resident) => (
+                <CharacterCard
+                  key={resident.id}
+                  id={resident.id}
+                  name={resident.name}
+                  image={resident.image}
+                  species={resident.species}
+                  status={resident.status}
+                  origin={resident.origin}
+                  location={resident.location}
+                />
+              ))}
+
+            {/* {isLoaded && (
+                <div className="col col-12 p-0">
+                  <div>HELLOOO</div>
+                  <div className="col col-12 col-sm-6 col-xl-4 EpisodeCard">
+                    <h3 className="Episode__name h5">{location.name}</h3>
+                    <div className="Episode__meta">
+                      <p className="Episode__meta-item">{location.type}</p>
+                      <p className="Episode__meta-item">|</p>
+                      <p className="Episode__meta-item">{location.dimension}</p>
+                    </div>
+                  </div>
+                </div>
+              ) &&
+              residents.map((resident) => (
+                <CharacterCard
+                  key={resident.id}
+                  id={resident.id}
+                  name={resident.name}
+                  image={resident.image}
+                  species={resident.species}
+                  status={resident.status}
+                  origin={resident.origin}
+                  location={resident.location}
+                />
+              ))} */}
+          </section>
+        </Layout>
+      </>
+    );
+  }
+}
diff --git a/src/pages/Location/index.js b/src/pages/Location/index.js
new file mode 100644
index 0000000..7625c87
--- /dev/null
+++ b/src/pages/Location/index.js
@@ -0,0 +1 @@
+export { default } from "./Location";

From f82dbc8fd135d640247961f2823db7e1dfa1b60b Mon Sep 17 00:00:00 2001
From: AntonioCopete <antcopjim@gmail.com>
Date: Tue, 5 Oct 2021 18:33:39 +0200
Subject: [PATCH 09/11] finished pagination

---
 src/components/CharacterCard/CharacterCard.js |  2 +-
 src/pages/Episode/Episode.js                  | 19 ++++++------
 src/pages/Home/Home.js                        | 30 ++++++++++++++++++-
 3 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/src/components/CharacterCard/CharacterCard.js b/src/components/CharacterCard/CharacterCard.js
index 0c66a4b..62a7aa1 100644
--- a/src/components/CharacterCard/CharacterCard.js
+++ b/src/components/CharacterCard/CharacterCard.js
@@ -6,7 +6,7 @@ import "./CharacterCard.scss";
 import * as routes from "../../constants/routes";
 
 function CharacterCard({ id, name, image, species, status, origin, location }) {
-  let locationId = location.url.split("/");
+  let locationId = origin.url.split("/");
   locationId = locationId[locationId.length - 1];
   return (
     <div className="col col-12 col-sm-6 col-xl-3 CharacterCard">
diff --git a/src/pages/Episode/Episode.js b/src/pages/Episode/Episode.js
index c7c1210..652bf67 100644
--- a/src/pages/Episode/Episode.js
+++ b/src/pages/Episode/Episode.js
@@ -88,17 +88,18 @@ class Episode extends Component {
           <section className="row">
             {hasError && <div>{errorMessage}</div>}
             {hasLoaded && (
-                <div className="col col-12 p-0">
-                  <div className="col col-12 col-sm-6 col-xl-4 EpisodeCard">
-                    <h3 className="Episode__name h5">{episode.name}</h3>
-                    <div className="Episode__meta">
-                      <p className="Episode__meta-item">{episode.episode}</p>
-                      <p className="Episode__meta-item">|</p>
-                      <p className="Episode__meta-item">{episode.air_date}</p>
-                    </div>
+              <div className="col col-12 p-0">
+                <div className="col col-12 col-sm-6 col-xl-4 EpisodeCard">
+                  <h3 className="Episode__name h5">{episode.name}</h3>
+                  <div className="Episode__meta">
+                    <p className="Episode__meta-item">{episode.episode}</p>
+                    <p className="Episode__meta-item">|</p>
+                    <p className="Episode__meta-item">{episode.air_date}</p>
                   </div>
                 </div>
-              ) &&
+              </div>
+            )}
+            {hasLoaded &&
               characters.map((character) => (
                 <CharacterCard
                   key={character.id}
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index 1f68560..f9c7995 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -10,7 +10,7 @@ class Home extends Component {
 
     this.state = {
       page: 1,
-      paginationInfo: null,
+      paginationInfo: { prev: null, next: null },
       episodes: [],
       hasLoaded: false,
       hasError: false,
@@ -22,6 +22,10 @@ class Home extends Component {
     this.loadEpisodes();
   }
 
+  componentDidUpdate() {
+    this.loadEpisodes();
+  }
+
   loadEpisodes() {
     const { page } = this.state;
     axios
@@ -32,6 +36,10 @@ class Home extends Component {
           episodes: newInfo,
           hasLoaded: true,
           hasError: false,
+          paginationInfo: {
+            next: data.data.info.next,
+            prev: data.data.info.prev,
+          },
         });
       })
       .catch((error) => {
@@ -53,6 +61,8 @@ class Home extends Component {
       errorMessage,
     } = this.state;
 
+    console.log(paginationInfo);
+
     return (
       <>
         <Layout>
@@ -77,6 +87,24 @@ class Home extends Component {
             <div className="col col-12">
               <hr />
             </div>
+            <div className="d-flex justify-content-between w-100">
+              <button
+                type="button"
+                className="btn btn-primary"
+                disabled={!paginationInfo.prev}
+                onClick={() => this.setState({ page: page - 1 })}
+              >
+                Load previous page
+              </button>
+              <button
+                type="button"
+                className="btn btn-primary"
+                disabled={!paginationInfo.next}
+                onClick={() => this.setState({ page: page + 1 })}
+              >
+                Load next page
+              </button>
+            </div>
           </section>
         </Layout>
       </>

From fb791e92b52a6391174090c5a6a434c6198f9d5c Mon Sep 17 00:00:00 2001
From: AntonioCopete <antcopjim@gmail.com>
Date: Thu, 7 Oct 2021 14:12:04 +0200
Subject: [PATCH 10/11] cleaning code

---
 package-lock.json                             | 112 +++++-------------
 src/components/CharacterCard/CharacterCard.js |  15 ++-
 src/pages/Character/Character.js              |  40 +++----
 src/pages/Episode/Episode.js                  |   4 +-
 src/pages/Home/Home.js                        |   5 +-
 src/pages/Location/Location.js                |  65 +++-------
 6 files changed, 79 insertions(+), 162 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 19f2b75..0cd9c3a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2795,11 +2795,6 @@
       "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
       "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ=="
     },
-    "async-limiter": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
-      "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
-    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -6321,11 +6316,11 @@
       }
     },
     "ext": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/ext/-/ext-1.4.0.tgz",
-      "integrity": "sha512-Key5NIsUxdqKg3vIsdw9dSuXpPCQ297y6wBjL30edxwPgt2E44WcWBZey/ZvUc6sERLTxKdyCu4gZFmUbk1Q7A==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.6.0.tgz",
+      "integrity": "sha512-sdBImtzkq2HpkdRLtlLWDa6w4DX22ijZLKx8BMPUuKe1c5lbN6xwQDQCxSfxBQnHZ13ls/FH0MQZx/q/gr6FQg==",
       "requires": {
-        "type": "^2.0.0"
+        "type": "^2.5.0"
       },
       "dependencies": {
         "type": {
@@ -10491,6 +10486,11 @@
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
+    "picocolors": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA=="
+    },
     "picomatch": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
@@ -10636,69 +10636,12 @@
       "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs="
     },
     "postcss": {
-      "version": "7.0.35",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-      "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+      "version": "7.0.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
       "requires": {
-        "chalk": "^2.4.2",
-        "source-map": "^0.6.1",
-        "supports-color": "^6.1.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          },
-          "dependencies": {
-            "supports-color": {
-              "version": "5.5.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-              "requires": {
-                "has-flag": "^3.0.0"
-              }
-            }
-          }
-        },
-        "color-convert": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-          "requires": {
-            "color-name": "1.1.3"
-          }
-        },
-        "color-name": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
-        },
-        "has-flag": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "picocolors": "^0.2.1",
+        "source-map": "^0.6.1"
       }
     },
     "postcss-attribute-case-insensitive": {
@@ -12669,9 +12612,9 @@
       "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo="
     },
     "resolve-url-loader": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-3.1.2.tgz",
-      "integrity": "sha512-QEb4A76c8Mi7I3xNKXlRKQSlLBwjUV/ULFMP+G7n3/7tJZ8MG5wsZ3ucxP1Jz8Vevn6fnJsxDx9cIls+utGzPQ==",
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-3.1.4.tgz",
+      "integrity": "sha512-D3sQ04o0eeQEySLrcz4DsX3saHfsr8/N6tfhblxgZKXxMT2Louargg12oGNfoTRLV09GXhVUe5/qgA5vdgNigg==",
       "requires": {
         "adjust-sourcemap-loader": "3.0.0",
         "camelcase": "5.3.1",
@@ -12679,7 +12622,7 @@
         "convert-source-map": "1.7.0",
         "es6-iterator": "2.0.3",
         "loader-utils": "1.2.3",
-        "postcss": "7.0.21",
+        "postcss": "7.0.36",
         "rework": "1.0.1",
         "rework-visit": "1.0.0",
         "source-map": "0.6.1"
@@ -12760,9 +12703,9 @@
           }
         },
         "postcss": {
-          "version": "7.0.21",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.21.tgz",
-          "integrity": "sha512-uIFtJElxJo29QC753JzhidoAhvp/e/Exezkdhfmt8AymWT6/5B7W1WmponYWkHk2eg6sONyTch0A3nkMPun3SQ==",
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -15944,11 +15887,18 @@
           }
         },
         "ws": {
-          "version": "6.2.1",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
-          "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
+          "version": "6.2.2",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
+          "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
           "requires": {
             "async-limiter": "~1.0.0"
+          },
+          "dependencies": {
+            "async-limiter": {
+              "version": "1.0.1",
+              "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
+              "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
+            }
           }
         },
         "yargs": {
diff --git a/src/components/CharacterCard/CharacterCard.js b/src/components/CharacterCard/CharacterCard.js
index 62a7aa1..a9f96ca 100644
--- a/src/components/CharacterCard/CharacterCard.js
+++ b/src/components/CharacterCard/CharacterCard.js
@@ -15,12 +15,15 @@ function CharacterCard({ id, name, image, species, status, origin, location }) {
         <h3 className="CharacterCard__name h4">{name}</h3>
       </Link>
       <div className="CharacterCard__meta">
-        <Link
-          className="CharacterCard__meta-item"
-          to={`${routes.LOCATION}/${locationId}`}
-        >
-          {origin.name}
-        </Link>
+        {locationId && (
+          <Link
+            className="CharacterCard__meta-item"
+            to={`${routes.LOCATION}/${locationId}`}
+          >
+            {origin.name}
+          </Link>
+        )}
+        {!locationId && <p>Unknown</p>}
         <p className="CharacterCard__meta-item">|</p>
         <p className="CharacterCard__meta-item">{status}</p>
       </div>
diff --git a/src/pages/Character/Character.js b/src/pages/Character/Character.js
index c9dcdac..f7bcff5 100644
--- a/src/pages/Character/Character.js
+++ b/src/pages/Character/Character.js
@@ -2,6 +2,7 @@ import axios from "axios";
 import React, { Component } from "react";
 import EpisodeCard from "../../components/EpisodeCard";
 import Layout from "../../components/Layout";
+import { API, CHARACTER } from "../../constants/routes";
 
 class Character extends Component {
   constructor(props) {
@@ -14,23 +15,24 @@ class Character extends Component {
   }
 
   componentDidMount() {
-    // this.getCharacterById();
+    this.loadCharacterEpisodes();
+  }
+
+  loadCharacterEpisodes() {
     const { match } = this.props;
     const characterId = match.params.characterId;
-    axios
-      .get(`https://rickandmortyapi.com/api/character/${characterId}`)
-      .then((data) => {
-        this.setState({ character: data.data });
-        const episodeUrls = data.data.episode;
-        axios
-          .all(episodeUrls.map((episodeUrl) => axios.get(episodeUrl)))
-          .then((dataCollection) => {
-            const episodes = dataCollection.map(
-              (collectionData) => collectionData.data,
-            );
-            this.setState({ episodes: episodes, isLoaded: true });
-          });
-      });
+    axios.get(`${API}${CHARACTER}/${characterId}`).then((data) => {
+      this.setState({ character: data.data });
+      const episodeUrls = data.data.episode;
+      axios
+        .all(episodeUrls.map((episodeUrl) => axios.get(episodeUrl)))
+        .then((dataCollection) => {
+          const episodes = dataCollection.map(
+            (collectionData) => collectionData.data,
+          );
+          this.setState({ episodes: episodes, isLoaded: true });
+        });
+    });
   }
 
   render() {
@@ -92,14 +94,6 @@ class Character extends Component {
               </div>
             </div>
           )}
-
-          {/* <CharacterCard
-            name={character.name}
-            race
-            status
-            origin
-            location
-          /> */}
         </Layout>
       </>
     );
diff --git a/src/pages/Episode/Episode.js b/src/pages/Episode/Episode.js
index 652bf67..d1f6bc0 100644
--- a/src/pages/Episode/Episode.js
+++ b/src/pages/Episode/Episode.js
@@ -19,10 +19,10 @@ class Episode extends Component {
   }
 
   componentDidMount() {
-    this.getCharacters();
+    this.loadCharacters();
   }
 
-  getCharacters() {
+  loadCharacters() {
     const { match } = this.props;
     const { episodeId } = match.params;
     const charactersUrl = `${API}${EPISODE}/${episodeId}`;
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index f9c7995..ec48173 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -3,6 +3,7 @@ import axios from "axios";
 
 import Layout from "../../components/Layout";
 import EpisodeCard from "../../components/EpisodeCard";
+import { API, EPISODE } from "../../constants/routes";
 
 class Home extends Component {
   constructor(props) {
@@ -29,7 +30,7 @@ class Home extends Component {
   loadEpisodes() {
     const { page } = this.state;
     axios
-      .get(`https://rickandmortyapi.com/api/episode?page=${page}`)
+      .get(`${API}${EPISODE}?page=${page}`)
       .then((data) => {
         const newInfo = data.data.results;
         this.setState({
@@ -61,8 +62,6 @@ class Home extends Component {
       errorMessage,
     } = this.state;
 
-    console.log(paginationInfo);
-
     return (
       <>
         <Layout>
diff --git a/src/pages/Location/Location.js b/src/pages/Location/Location.js
index fc935b7..0cba968 100644
--- a/src/pages/Location/Location.js
+++ b/src/pages/Location/Location.js
@@ -2,6 +2,7 @@ import axios from "axios";
 import React, { Component } from "react";
 import CharacterCard from "../../components/CharacterCard";
 import Layout from "../../components/Layout";
+import { API, LOCATION } from "../../constants/routes";
 
 export default class Location extends Component {
   constructor(props) {
@@ -13,36 +14,32 @@ export default class Location extends Component {
   }
 
   componentDidMount() {
-    this.update();
+    this.loadLocationResidents();
   }
 
-  update() {
+  loadLocationResidents() {
     const { match } = this.props;
     const locationId = match.params.locationId;
-    console.log(locationId);
-    axios
-      .get(`https://rickandmortyapi.com/api/location/${locationId}`)
-      .then((location) => {
-        this.setState({ location: location.data });
-        const residentUrls = location.data.residents;
-        axios
-          .all(
-            residentUrls.map((residentUrl) => {
-              return axios.get(residentUrl);
-            }),
-          )
-          .then((res) => {
-            const residents = res.map((resident) => {
-              return resident.data;
-            });
-            this.setState({ residents: residents, isLoaded: true });
+    axios.get(`${API}${LOCATION}/${locationId}`).then((location) => {
+      this.setState({ location: location.data });
+      const residentUrls = location.data.residents;
+      axios
+        .all(
+          residentUrls.map((residentUrl) => {
+            return axios.get(residentUrl);
+          }),
+        )
+        .then((res) => {
+          const residents = res.map((resident) => {
+            return resident.data;
           });
-      });
+          this.setState({ residents: residents, isLoaded: true });
+        });
+    });
   }
 
   render() {
     const { residents, isLoaded, location } = this.state;
-    console.log(location);
     return (
       <>
         <Layout>
@@ -72,32 +69,6 @@ export default class Location extends Component {
                   location={resident.location}
                 />
               ))}
-
-            {/* {isLoaded && (
-                <div className="col col-12 p-0">
-                  <div>HELLOOO</div>
-                  <div className="col col-12 col-sm-6 col-xl-4 EpisodeCard">
-                    <h3 className="Episode__name h5">{location.name}</h3>
-                    <div className="Episode__meta">
-                      <p className="Episode__meta-item">{location.type}</p>
-                      <p className="Episode__meta-item">|</p>
-                      <p className="Episode__meta-item">{location.dimension}</p>
-                    </div>
-                  </div>
-                </div>
-              ) &&
-              residents.map((resident) => (
-                <CharacterCard
-                  key={resident.id}
-                  id={resident.id}
-                  name={resident.name}
-                  image={resident.image}
-                  species={resident.species}
-                  status={resident.status}
-                  origin={resident.origin}
-                  location={resident.location}
-                />
-              ))} */}
           </section>
         </Layout>
       </>

From aa03b45fcc9278f19aa79b7230ccacf79f42da7a Mon Sep 17 00:00:00 2001
From: AntonioCopete <antcopjim@gmail.com>
Date: Thu, 7 Oct 2021 14:29:46 +0200
Subject: [PATCH 11/11] simplified code

---
 .eslintignore                |   1 +
 package-lock.json            | 320 ++++++++++++++++++++---------------
 package.json                 |   3 +-
 src/pages/Episode/Episode.js |  55 +++---
 src/pages/Home/Home.js       |   1 +
 5 files changed, 217 insertions(+), 163 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index d8b83df..074ab52 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1 +1,2 @@
 package-lock.json
+node_modules
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 0cd9c3a..ddc2895 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2580,9 +2580,9 @@
       "integrity": "sha1-gTWEAhliqenm/QOflA0S9WynhZ4="
     },
     "ansi-regex": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
     },
     "ansi-styles": {
       "version": "4.3.0",
@@ -2840,11 +2840,18 @@
       "integrity": "sha512-vwPpH4Aj4122EW38mxO/fxhGKtwWTMLDIJfZ1He0Edbtjcfna/R3YB67yVhezUMzqc3Jr3+Ii50KRntlENL4xQ=="
     },
     "axios": {
-      "version": "0.21.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
-      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
       "requires": {
-        "follow-redirects": "^1.10.0"
+        "follow-redirects": "^1.14.0"
+      },
+      "dependencies": {
+        "follow-redirects": {
+          "version": "1.14.4",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.4.tgz",
+          "integrity": "sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g=="
+        }
       }
     },
     "axobject-query": {
@@ -4562,12 +4569,12 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
     },
     "cssnano": {
-      "version": "4.1.10",
-      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.10.tgz",
-      "integrity": "sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.11.tgz",
+      "integrity": "sha512-6gZm2htn7xIPJOHY824ERgj8cNPgPxyCSnkXc4v7YvNW+TdVfzgngHcEhy/8D11kUWRUMbke+tC+AUcUsnMz2g==",
       "requires": {
         "cosmiconfig": "^5.0.0",
-        "cssnano-preset-default": "^4.0.7",
+        "cssnano-preset-default": "^4.0.8",
         "is-resolvable": "^1.0.0",
         "postcss": "^7.0.0"
       },
@@ -4583,6 +4590,43 @@
             "parse-json": "^4.0.0"
           }
         },
+        "cssnano-preset-default": {
+          "version": "4.0.8",
+          "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-4.0.8.tgz",
+          "integrity": "sha512-LdAyHuq+VRyeVREFmuxUZR1TXjQm8QQU/ktoo/x7bz+SdOge1YKc5eMN6pRW7YWBmyq59CqYba1dJ5cUukEjLQ==",
+          "requires": {
+            "css-declaration-sorter": "^4.0.1",
+            "cssnano-util-raw-cache": "^4.0.1",
+            "postcss": "^7.0.0",
+            "postcss-calc": "^7.0.1",
+            "postcss-colormin": "^4.0.3",
+            "postcss-convert-values": "^4.0.1",
+            "postcss-discard-comments": "^4.0.2",
+            "postcss-discard-duplicates": "^4.0.2",
+            "postcss-discard-empty": "^4.0.1",
+            "postcss-discard-overridden": "^4.0.1",
+            "postcss-merge-longhand": "^4.0.11",
+            "postcss-merge-rules": "^4.0.3",
+            "postcss-minify-font-values": "^4.0.2",
+            "postcss-minify-gradients": "^4.0.2",
+            "postcss-minify-params": "^4.0.2",
+            "postcss-minify-selectors": "^4.0.2",
+            "postcss-normalize-charset": "^4.0.1",
+            "postcss-normalize-display-values": "^4.0.2",
+            "postcss-normalize-positions": "^4.0.2",
+            "postcss-normalize-repeat-style": "^4.0.2",
+            "postcss-normalize-string": "^4.0.2",
+            "postcss-normalize-timing-functions": "^4.0.2",
+            "postcss-normalize-unicode": "^4.0.1",
+            "postcss-normalize-url": "^4.0.1",
+            "postcss-normalize-whitespace": "^4.0.2",
+            "postcss-ordered-values": "^4.1.2",
+            "postcss-reduce-initial": "^4.0.3",
+            "postcss-reduce-transforms": "^4.0.2",
+            "postcss-svgo": "^4.0.3",
+            "postcss-unique-selectors": "^4.0.1"
+          }
+        },
         "import-fresh": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
@@ -4601,6 +4645,21 @@
             "json-parse-better-errors": "^1.0.1"
           }
         },
+        "postcss-svgo": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-4.0.3.tgz",
+          "integrity": "sha512-NoRbrcMWTtUghzuKSoIm6XV+sJdvZ7GZSc3wdBN0W19FTtp2ko8NqLsgoh/m9CzNhU3KLPvQmjIwtaNFkaFTvw==",
+          "requires": {
+            "postcss": "^7.0.0",
+            "postcss-value-parser": "^3.0.0",
+            "svgo": "^1.0.0"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        },
         "resolve-from": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
@@ -4608,43 +4667,6 @@
         }
       }
     },
-    "cssnano-preset-default": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz",
-      "integrity": "sha512-x0YHHx2h6p0fCl1zY9L9roD7rnlltugGu7zXSKQx6k2rYw0Hi3IqxcoAGF7u9Q5w1nt7vK0ulxV8Lo+EvllGsA==",
-      "requires": {
-        "css-declaration-sorter": "^4.0.1",
-        "cssnano-util-raw-cache": "^4.0.1",
-        "postcss": "^7.0.0",
-        "postcss-calc": "^7.0.1",
-        "postcss-colormin": "^4.0.3",
-        "postcss-convert-values": "^4.0.1",
-        "postcss-discard-comments": "^4.0.2",
-        "postcss-discard-duplicates": "^4.0.2",
-        "postcss-discard-empty": "^4.0.1",
-        "postcss-discard-overridden": "^4.0.1",
-        "postcss-merge-longhand": "^4.0.11",
-        "postcss-merge-rules": "^4.0.3",
-        "postcss-minify-font-values": "^4.0.2",
-        "postcss-minify-gradients": "^4.0.2",
-        "postcss-minify-params": "^4.0.2",
-        "postcss-minify-selectors": "^4.0.2",
-        "postcss-normalize-charset": "^4.0.1",
-        "postcss-normalize-display-values": "^4.0.2",
-        "postcss-normalize-positions": "^4.0.2",
-        "postcss-normalize-repeat-style": "^4.0.2",
-        "postcss-normalize-string": "^4.0.2",
-        "postcss-normalize-timing-functions": "^4.0.2",
-        "postcss-normalize-unicode": "^4.0.1",
-        "postcss-normalize-url": "^4.0.1",
-        "postcss-normalize-whitespace": "^4.0.2",
-        "postcss-ordered-values": "^4.1.2",
-        "postcss-reduce-initial": "^4.0.3",
-        "postcss-reduce-transforms": "^4.0.2",
-        "postcss-svgo": "^4.0.2",
-        "postcss-unique-selectors": "^4.0.1"
-      }
-    },
     "cssnano-util-get-arguments": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0.tgz",
@@ -5082,14 +5104,6 @@
         }
       }
     },
-    "domhandler": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
-      "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
-      "requires": {
-        "domelementtype": "1"
-      }
-    },
     "domutils": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
@@ -7285,11 +7299,6 @@
       "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz",
       "integrity": "sha1-wc56MWjIxmFAM6S194d/OyJfnDg="
     },
-    "html-comment-regex": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.2.tgz",
-      "integrity": "sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ=="
-    },
     "html-encoding-sniffer": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
@@ -7367,26 +7376,6 @@
         }
       }
     },
-    "htmlparser2": {
-      "version": "3.10.1",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
-      "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
-      "requires": {
-        "domelementtype": "^1.3.1",
-        "domhandler": "^2.3.0",
-        "domutils": "^1.5.1",
-        "entities": "^1.1.1",
-        "inherits": "^2.0.1",
-        "readable-stream": "^3.1.1"
-      },
-      "dependencies": {
-        "entities": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
-          "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
-        }
-      }
-    },
     "http-deceiver": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
@@ -8022,14 +8011,6 @@
       "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.5.tgz",
       "integrity": "sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ=="
     },
-    "is-svg": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-3.0.0.tgz",
-      "integrity": "sha512-gi4iHK53LR2ujhLVVj+37Ykh9GLqYHX6JOVXbLAucaG/Cqw9xwdFOjDM2qeifLs1sF1npXXFvDu0r5HNgCMrzQ==",
-      "requires": {
-        "html-comment-regex": "^1.1.0"
-      }
-    },
     "is-symbol": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz",
@@ -11575,24 +11556,6 @@
         "util-deprecate": "^1.0.2"
       }
     },
-    "postcss-svgo": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-4.0.2.tgz",
-      "integrity": "sha512-C6wyjo3VwFm0QgBy+Fu7gCYOkCmgmClghO+pjcxvrcBKtiKt0uCF+hvbMO1fyv5BMImRK90SMb+dwUnfbGd+jw==",
-      "requires": {
-        "is-svg": "^3.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0",
-        "svgo": "^1.0.0"
-      },
-      "dependencies": {
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
-        }
-      }
-    },
     "postcss-unique-selectors": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-4.0.1.tgz",
@@ -12225,6 +12188,33 @@
             }
           }
         },
+        "@types/json-schema": {
+          "version": "7.0.9",
+          "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
+          "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ=="
+        },
+        "sass-loader": {
+          "version": "10.2.0",
+          "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.2.0.tgz",
+          "integrity": "sha512-kUceLzC1gIHz0zNJPpqRsJyisWatGYNFRmv2CKZK2/ngMJgLqxTbXwe/hJ85luyvZkgqU3VlJ33UVF2T/0g6mw==",
+          "requires": {
+            "klona": "^2.0.4",
+            "loader-utils": "^2.0.0",
+            "neo-async": "^2.6.2",
+            "schema-utils": "^3.0.0",
+            "semver": "^7.3.2"
+          }
+        },
+        "schema-utils": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+          "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        },
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -12444,15 +12434,15 @@
       "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8="
     },
     "renderkid": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.5.tgz",
-      "integrity": "sha512-ccqoLg+HLOHq1vdfYNm4TBeaCDIi1FLt3wGojTDSvdewUv65oTmI3cnT2E4hRjl1gzKZIPK+KZrXzlUYKnR+vQ==",
-      "requires": {
-        "css-select": "^2.0.2",
-        "dom-converter": "^0.2",
-        "htmlparser2": "^3.10.1",
-        "lodash": "^4.17.20",
-        "strip-ansi": "^3.0.0"
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.7.tgz",
+      "integrity": "sha512-oCcFyxaMrKsKcTY59qnCAtmDVSLfPbrv6A3tVbPdFMMrv5jaK10V6m40cKsoPNhAqN6rmHW9sswW4o3ruSrwUQ==",
+      "requires": {
+        "css-select": "^4.1.3",
+        "dom-converter": "^0.2.0",
+        "htmlparser2": "^6.1.0",
+        "lodash": "^4.17.21",
+        "strip-ansi": "^3.0.1"
       },
       "dependencies": {
         "ansi-regex": {
@@ -12460,6 +12450,75 @@
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
           "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
         },
+        "css-select": {
+          "version": "4.1.3",
+          "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz",
+          "integrity": "sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==",
+          "requires": {
+            "boolbase": "^1.0.0",
+            "css-what": "^5.0.0",
+            "domhandler": "^4.2.0",
+            "domutils": "^2.6.0",
+            "nth-check": "^2.0.0"
+          }
+        },
+        "css-what": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz",
+          "integrity": "sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg=="
+        },
+        "dom-serializer": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+          "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.2.0",
+            "entities": "^2.0.0"
+          }
+        },
+        "domelementtype": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
+        },
+        "domhandler": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.2.tgz",
+          "integrity": "sha512-PzE9aBMsdZO8TK4BnuJwH0QT41wgMbRzuZrHUcpYncEjmQazq8QEaBWgLG7ZyC/DAZKEgglpIA6j4Qn/HmxS3w==",
+          "requires": {
+            "domelementtype": "^2.2.0"
+          }
+        },
+        "domutils": {
+          "version": "2.8.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+          "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+          "requires": {
+            "dom-serializer": "^1.0.1",
+            "domelementtype": "^2.2.0",
+            "domhandler": "^4.2.0"
+          }
+        },
+        "htmlparser2": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+          "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.0.0",
+            "domutils": "^2.5.2",
+            "entities": "^2.0.0"
+          }
+        },
+        "nth-check": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
+          "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==",
+          "requires": {
+            "boolbase": "^1.0.0"
+          }
+        },
         "strip-ansi": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
@@ -13069,27 +13128,12 @@
       }
     },
     "sass-loader": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.1.1.tgz",
-      "integrity": "sha512-W6gVDXAd5hR/WHsPicvZdjAWHBcEJ44UahgxcIE196fW2ong0ZHMPO1kZuI5q0VlvMQZh32gpv69PLWQm70qrw==",
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.1.0.tgz",
+      "integrity": "sha512-FVJZ9kxVRYNZTIe2xhw93n3xJNYZADr+q69/s98l9nTCrWASo+DR2Ot0s5xTKQDDEosUkatsGeHxcH4QBp5bSg==",
       "requires": {
         "klona": "^2.0.4",
-        "loader-utils": "^2.0.0",
-        "neo-async": "^2.6.2",
-        "schema-utils": "^3.0.0",
-        "semver": "^7.3.2"
-      },
-      "dependencies": {
-        "schema-utils": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
-          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
-          "requires": {
-            "@types/json-schema": "^7.0.6",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
-          }
-        }
+        "neo-async": "^2.6.2"
       }
     },
     "sax": {
@@ -14352,9 +14396,9 @@
       "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
     },
     "tmpl": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
-      "integrity": "sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE="
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
+      "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw=="
     },
     "to-arraybuffer": {
       "version": "1.0.1",
diff --git a/package.json b/package.json
index 6e16512..635bfd1 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "axios": "^0.21.1",
+    "axios": "^0.21.4",
     "bootstrap": "^4.6.0",
     "clsx": "^1.1.1",
     "prop-types": "^15.7.2",
@@ -21,6 +21,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "sass": "^1.32.11",
+    "sass-loader": "^12.1.0",
     "web-vitals": "^1.0.1"
   },
   "devDependencies": {
diff --git a/src/pages/Episode/Episode.js b/src/pages/Episode/Episode.js
index d1f6bc0..c95a922 100644
--- a/src/pages/Episode/Episode.js
+++ b/src/pages/Episode/Episode.js
@@ -26,6 +26,10 @@ class Episode extends Component {
     const { match } = this.props;
     const { episodeId } = match.params;
     const charactersUrl = `${API}${EPISODE}/${episodeId}`;
+    this.fetchEpisodeCharacters(charactersUrl);
+  }
+
+  fetchEpisodeCharacters(charactersUrl) {
     axios
       .get(charactersUrl)
       .then((apiEpisode) => {
@@ -38,31 +42,34 @@ class Episode extends Component {
           },
         });
 
-        const characterUris = apiEpisode.data.characters;
+        const characterUrls = apiEpisode.data.characters;
+        this.fetchCharacters(characterUrls);
+      })
+      .catch((error) => {
+        this.setState({
+          hasLoaded: false,
+          hasError: true,
+          errorMessage: error,
+        });
+      });
+  }
 
-        axios
-          .all(
-            characterUris.map((char) => {
-              return axios.get(char);
-            }),
-          )
-          .then((data) => {
-            const charactersArr = data.map((characterData) => {
-              return characterData.data;
-            });
-            this.setState({
-              characters: charactersArr,
-              hasLoaded: true,
-              hasError: false,
-            });
-          })
-          .catch((error) => {
-            this.setState({
-              hasLoaded: false,
-              hasError: true,
-              errorMessage: error,
-            });
-          });
+  fetchCharacters(characterUrls) {
+    axios
+      .all(
+        characterUrls.map((char) => {
+          return axios.get(char);
+        }),
+      )
+      .then((data) => {
+        const charactersArr = data.map((characterData) => {
+          return characterData.data;
+        });
+        this.setState({
+          characters: charactersArr,
+          hasLoaded: true,
+          hasError: false,
+        });
       })
       .catch((error) => {
         this.setState({
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index ec48173..79df553 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -66,6 +66,7 @@ class Home extends Component {
       <>
         <Layout>
           <section className="row">
+            {hasError && !hasLoaded && <div>{errorMessage}</div>}
             {hasLoaded && !hasError && (
               <div className="col col-12">
                 <h1>Episodes loaded!</h1>