From f099ad771fdf504c9de38839c200d499c0efdab6 Mon Sep 17 00:00:00 2001 From: tamtran Date: Mon, 4 Oct 2021 00:11:16 +0200 Subject: [PATCH 01/11] edit Home page --- README.md | 2 + package-lock.json | 336 +++++++++++++++-------------------------- package.json | 2 +- src/pages/Home/Home.js | 46 +++--- 4 files changed, 149 insertions(+), 237 deletions(-) diff --git a/README.md b/README.md index eedc843..0a5a758 100644 --- a/README.md +++ b/README.md @@ -147,3 +147,5 @@ Thanks goes to these wonderful people This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! + +- https://rickandmortyapi.com/api/episode?page=1 diff --git a/package-lock.json b/package-lock.json index 993b456..9be81d4 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", @@ -16451,15 +16359,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", diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js index f86e93c..f5207b9 100644 --- a/src/pages/Home/Home.js +++ b/src/pages/Home/Home.js @@ -1,30 +1,38 @@ +import axios from "axios"; import React, { Component } from "react"; import Layout from "../../components/Layout"; -// import EpisodeCard from "../../components/EpisodeCard"; +import EpisodeCard from "../../components/EpisodeCard"; +// eslint-disable-next-line compat/compat +const url = "https://rickandmortyapi.com/api/episode?page=1"; 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() { + axios.get(url).then((res) => { + const episodes = res.data.results; + this.setState({ episodes }); + }); console.log(this); } render() { + const { episodes } = this.state; return (
@@ -36,15 +44,15 @@ class Home extends Component {
- {/* {episodes.map((episode) => ( - - ))} */} + {episodes.map((episode) => ( + + ))}
From 08b589a3635442a49d12618d5a1a3d47e367a7b9 Mon Sep 17 00:00:00 2001 From: tamtran Date: Mon, 4 Oct 2021 09:34:45 +0200 Subject: [PATCH 02/11] add try and catch error --- src/pages/Home/Home.js | 38 +++++++++++++++++++++++++++----------- 1 file changed, 27 insertions(+), 11 deletions(-) diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js index f5207b9..43302ff 100644 --- a/src/pages/Home/Home.js +++ b/src/pages/Home/Home.js @@ -13,9 +13,9 @@ class Home extends Component { // page: 1, // paginationInfo: null, episodes: [], - // hasLoaded: false, - // hasError: false, - // errorMessage: null, + hasLoaded: false, + hasError: false, + errorMessage: null, }; } @@ -24,23 +24,39 @@ class Home extends Component { } async loadEpisodes() { - axios.get(url).then((res) => { - const episodes = res.data.results; - this.setState({ episodes }); - }); - console.log(this); + try { + await axios.get(url).then((res) => { + const episodes = res.data.results; + this.setState({ + episodes: episodes, + hasLoaded: true, + }); + }); + } catch (err) { + this.setState({ + hasLoaded: true, + hasError: true, + errorMessage: err.message, + }); + } + // console.log(this); } render() { - const { episodes } = this.state; + const { episodes, hasLoaded, hasError, errorMessage } = this.state; return (
- {/* {hasLoaded && !hasError && ( + {hasLoaded && !hasError && (

Episodes loaded!

- )} */} + )} + {hasError && ( +
+

{errorMessage}

+
+ )}
From ce8e6802438f3bc69f61f0dea4017d4602a92c9e Mon Sep 17 00:00:00 2001 From: tamtran Date: Mon, 4 Oct 2021 21:31:49 +0200 Subject: [PATCH 03/11] add page Location and Character --- src/components/CharacterCard/CharacterCard.js | 12 ++- src/components/EpisodeCard/EpisodeCard.js | 12 ++- src/components/Router/Router.js | 21 ++++ src/constants/api.js | 5 + src/index.js | 9 +- src/pages/Character/Character.js | 98 +++++++++++++++++++ src/pages/Character/index.js | 1 + src/pages/Episode/Episode.js | 88 +++++++++++++---- src/pages/Location/Location.js | 96 ++++++++++++++++++ src/pages/Location/index.js | 1 + 10 files changed, 317 insertions(+), 26 deletions(-) create mode 100644 src/components/Router/Router.js create mode 100644 src/constants/api.js create mode 100644 src/pages/Character/Character.js create mode 100644 src/pages/Character/index.js create mode 100644 src/pages/Location/Location.js create mode 100644 src/pages/Location/index.js diff --git a/src/components/CharacterCard/CharacterCard.js b/src/components/CharacterCard/CharacterCard.js index 9e7e4ab..e07e3d1 100644 --- a/src/components/CharacterCard/CharacterCard.js +++ b/src/components/CharacterCard/CharacterCard.js @@ -9,13 +9,21 @@ function CharacterCard({ id, name, image, species, status, origin, location }) { return (
- +

{name}

{origin.name} diff --git a/src/components/EpisodeCard/EpisodeCard.js b/src/components/EpisodeCard/EpisodeCard.js index 13cb5cf..f9c23a1 100644 --- a/src/components/EpisodeCard/EpisodeCard.js +++ b/src/components/EpisodeCard/EpisodeCard.js @@ -8,8 +8,16 @@ import * as routes from "../../constants/routes"; function EpisodeCard({ id, name, airDate, episode }) { return (
- -

{name}

+ +

+ {/* {name.length < 20 ? `${name}` : `${name.substring(0, 25)} ...`} */} + {name} +

{airDate}

diff --git a/src/components/Router/Router.js b/src/components/Router/Router.js new file mode 100644 index 0000000..c44374c --- /dev/null +++ b/src/components/Router/Router.js @@ -0,0 +1,21 @@ +import React from "react"; +import { BrowserRouter, Switch, Route } from "react-router-dom"; + +import App from "../../App"; +import Episode from "../../pages/Episode/Episode"; +import Character from "../../pages/Character/Character"; +import Location from "../../pages/Location/Location"; +import * as routes from "../../constants/routes"; + +const Router = () => ( + + + + + + + + +); + +export default Router; diff --git a/src/constants/api.js b/src/constants/api.js new file mode 100644 index 0000000..8c7af62 --- /dev/null +++ b/src/constants/api.js @@ -0,0 +1,5 @@ +export const HOME = "/"; +export const EPISODES = "/episodes"; +export const EPISODE = "/episode"; +export const LOCATION = "/location"; +export const CHARACTER = "/character"; diff --git a/src/index.js b/src/index.js index c4f7c38..3e87593 100644 --- a/src/index.js +++ b/src/index.js @@ -1,17 +1,16 @@ import React from "react"; import ReactDOM from "react-dom"; -import { BrowserRouter } from "react-router-dom"; +// import { BrowserRouter } from "react-router-dom"; import "bootstrap/dist/css/bootstrap.min.css"; +import Router from "./components/Router/Router"; -import App from "./App"; +// import App from "./App"; import reportWebVitals from "./reportWebVitals"; ReactDOM.render( - - - + , document.getElementById("root"), ); diff --git a/src/pages/Character/Character.js b/src/pages/Character/Character.js new file mode 100644 index 0000000..b09cfaf --- /dev/null +++ b/src/pages/Character/Character.js @@ -0,0 +1,98 @@ +import axios from "axios"; +import React, { Component } from "react"; + +import Layout from "../../components/Layout"; +import EpisodeCard from "../../components/EpisodeCard"; + +const url = "https://rickandmortyapi.com/api/character"; + +class Character extends Component { + constructor(props) { + super(props); + this.state = { + character: null, + episode: [], + hasLoaded: false, + hasError: false, + errorMessage: null, + }; + } + + async componentDidMount() { + const { match } = this.props; + const { id } = match.params; + this.loadCharacter(id); + } + + async loadCharacter(id) { + const response = await axios.get(`${url}/${id}`); + const characterResponse = response.data; + const episodeUrls = response.data.episode; + const requests = episodeUrls.map((episodeUrl) => + axios.get(episodeUrl).catch((err) => null), + ); + try { + const episodes = await axios.all(requests); + this.setState({ + episode: episodes, + character: characterResponse, + hasLoaded: true, + }); + } catch (err) { + this.setState({ + hasLoaded: true, + hasError: true, + errorMessage: err.message, + }); + } + // console.log(this); + } + + render() { + // console.log(this.props); + const { + episode, + character, + hasLoaded, + hasError, + errorMessage, + } = this.state; + return ( + +

Character page

+
+ {hasLoaded && !hasError && ( +
+

Character loaded!

+

{character.name}

+

{character.status}

+

{character.species}

+
+ )} + {hasError && ( +
+

{errorMessage}

+
+ )} +
+
+
+ {episode.map((ele) => ( + + ))} +
+
+
+
+ + ); + } +} + +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 8255df5..2519add 100644 --- a/src/pages/Episode/Episode.js +++ b/src/pages/Episode/Episode.js @@ -1,37 +1,91 @@ +import axios from "axios"; import React, { Component } from "react"; import Layout from "../../components/Layout"; -// import CharacterCard from "../../components/CharacterCard"; +import CharacterCard from "../../components/CharacterCard"; + +const url = "https://rickandmortyapi.com/api/episode"; class Episode extends Component { constructor(props) { super(props); - this.state = {}; - // episode: null, - // characters: [], - // hasLoaded: false, - // hasError: false, - // errorMessage: null, + this.state = { + episode: null, + characters: [], + hasLoaded: false, + hasError: false, + errorMessage: null, + }; + } + + async componentDidMount() { + const { match } = this.props; + const { id } = match.params; + this.loadCharacters(id); + } + + async loadCharacters(id) { + const response = await axios.get(`${url}/${id}`); + const episodeResponse = response.data; + const characterUrls = response.data.characters; + const requests = characterUrls.map((characterUrl) => + axios.get(characterUrl).catch((err) => null), + ); + try { + const characters = await axios.all(requests); + this.setState({ + episode: episodeResponse, + characters: characters, + hasLoaded: true, + }); + } catch (err) { + this.setState({ + hasLoaded: true, + hasError: true, + errorMessage: err.message, + }); + } + // console.log(this); } render() { + // console.log(this.props); + const { + episode, + characters, + hasLoaded, + hasError, + errorMessage, + } = this.state; return (
+ {hasLoaded && !hasError && ( +
+

{episode.name}

+
{episode.air_date}
+
{episode.episode}
+
+ )} + {hasError && ( +
+

{errorMessage}

+
+ )}
- {/* {characters.map((character) => ( + {characters.map((character) => ( - ))} */} + ))}
diff --git a/src/pages/Location/Location.js b/src/pages/Location/Location.js new file mode 100644 index 0000000..f8272ab --- /dev/null +++ b/src/pages/Location/Location.js @@ -0,0 +1,96 @@ +import axios from "axios"; +import React, { Component } from "react"; + +import Layout from "../../components/Layout"; +import CharacterCard from "../../components/CharacterCard"; + +const url = "https://rickandmortyapi.com/api/location"; + +class Location extends Component { + constructor(props) { + super(props); + + this.state = { + location: null, + residents: [], + hasLoaded: false, + hasError: false, + errorMessage: null, + }; + } + + async componentDidMount() { + const { match } = this.props; + const { id } = match.params; + this.loadLocation(id); + } + + async loadLocation(id) { + const response = await axios.get(`${url}/${id}`); + const locationResponse = response.data; + const residentUrls = response.data.residents; + const requests = residentUrls.map((residentUrl) => + axios.get(residentUrl).catch((err) => null), + ); + try { + const residents = await axios.all(requests); + this.setState({ + location: locationResponse, + residents: residents, + hasLoaded: true, + }); + } catch (err) { + this.setState({ + hasLoaded: true, + hasError: true, + errorMessage: err.message, + }); + } + // console.log(this); + } + + render() { + // console.log(this.props); + const { + location, + residents, + hasLoaded, + hasError, + errorMessage, + } = this.state; + return ( + +
+ {hasLoaded && !hasError && ( +
+

{location.name}

+
{location.type}
+
{location.dimension}
+
+ )} + {hasError && ( +
+

{errorMessage}

+
+ )} +
+ {residents.map((resident) => ( + + ))} +
+
+ + ); + } +} + +export default Location; 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 83388bbe05538659add58b9ccb64211746408241 Mon Sep 17 00:00:00 2001 From: tamtran Date: Mon, 4 Oct 2021 22:39:45 +0200 Subject: [PATCH 04/11] add file api.js --- src/constants/api.js | 9 ++++----- src/pages/Character/Character.js | 5 ++--- src/pages/Episode/Episode.js | 5 ++--- src/pages/Home/Home.js | 5 ++--- src/pages/Location/Location.js | 5 ++--- 5 files changed, 12 insertions(+), 17 deletions(-) diff --git a/src/constants/api.js b/src/constants/api.js index 8c7af62..b87e604 100644 --- a/src/constants/api.js +++ b/src/constants/api.js @@ -1,5 +1,4 @@ -export const HOME = "/"; -export const EPISODES = "/episodes"; -export const EPISODE = "/episode"; -export const LOCATION = "/location"; -export const CHARACTER = "/character"; +export const BASE_URL = "https://rickandmortyapi.com/api/episode?page=1"; +export const EPISODE_URL = "https://rickandmortyapi.com/api/episode"; +export const CHARACTER_URL = "https://rickandmortyapi.com/api/character"; +export const LOCATION_URL = "https://rickandmortyapi.com/api/location"; diff --git a/src/pages/Character/Character.js b/src/pages/Character/Character.js index b09cfaf..46a7a43 100644 --- a/src/pages/Character/Character.js +++ b/src/pages/Character/Character.js @@ -3,8 +3,7 @@ import React, { Component } from "react"; import Layout from "../../components/Layout"; import EpisodeCard from "../../components/EpisodeCard"; - -const url = "https://rickandmortyapi.com/api/character"; +import * as api from "../../constants/api"; class Character extends Component { constructor(props) { @@ -25,7 +24,7 @@ class Character extends Component { } async loadCharacter(id) { - const response = await axios.get(`${url}/${id}`); + const response = await axios.get(`${api.CHARACTER_URL}/${id}`); const characterResponse = response.data; const episodeUrls = response.data.episode; const requests = episodeUrls.map((episodeUrl) => diff --git a/src/pages/Episode/Episode.js b/src/pages/Episode/Episode.js index 2519add..96be592 100644 --- a/src/pages/Episode/Episode.js +++ b/src/pages/Episode/Episode.js @@ -3,8 +3,7 @@ import React, { Component } from "react"; import Layout from "../../components/Layout"; import CharacterCard from "../../components/CharacterCard"; - -const url = "https://rickandmortyapi.com/api/episode"; +import * as api from "../../constants/api"; class Episode extends Component { constructor(props) { @@ -26,7 +25,7 @@ class Episode extends Component { } async loadCharacters(id) { - const response = await axios.get(`${url}/${id}`); + const response = await axios.get(`${api.EPISODE_URL}/${id}`); const episodeResponse = response.data; const characterUrls = response.data.characters; const requests = characterUrls.map((characterUrl) => diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js index 43302ff..4828fc1 100644 --- a/src/pages/Home/Home.js +++ b/src/pages/Home/Home.js @@ -3,9 +3,8 @@ import React, { Component } from "react"; import Layout from "../../components/Layout"; import EpisodeCard from "../../components/EpisodeCard"; +import * as api from "../../constants/api"; -// eslint-disable-next-line compat/compat -const url = "https://rickandmortyapi.com/api/episode?page=1"; class Home extends Component { constructor(props) { super(props); @@ -25,7 +24,7 @@ class Home extends Component { async loadEpisodes() { try { - await axios.get(url).then((res) => { + await axios.get(`${api.BASE_URL}`).then((res) => { const episodes = res.data.results; this.setState({ episodes: episodes, diff --git a/src/pages/Location/Location.js b/src/pages/Location/Location.js index f8272ab..990f7e3 100644 --- a/src/pages/Location/Location.js +++ b/src/pages/Location/Location.js @@ -3,8 +3,7 @@ import React, { Component } from "react"; import Layout from "../../components/Layout"; import CharacterCard from "../../components/CharacterCard"; - -const url = "https://rickandmortyapi.com/api/location"; +import * as api from "../../constants/api"; class Location extends Component { constructor(props) { @@ -26,7 +25,7 @@ class Location extends Component { } async loadLocation(id) { - const response = await axios.get(`${url}/${id}`); + const response = await axios.get(`${api.LOCATION_URL}/${id}`); const locationResponse = response.data; const residentUrls = response.data.residents; const requests = residentUrls.map((residentUrl) => From 8a10e43ed40c7961719236e6047f89e688ca79ae Mon Sep 17 00:00:00 2001 From: tamtran Date: Tue, 5 Oct 2021 11:49:20 +0200 Subject: [PATCH 05/11] add style --- src/pages/Character/Character.js | 86 ++++++++++++++++++++++---------- src/pages/Episode/Episode.js | 52 +++++++++++-------- src/pages/Home/Home.js | 19 +++---- src/pages/Location/Location.js | 51 +++++++++++-------- 4 files changed, 132 insertions(+), 76 deletions(-) diff --git a/src/pages/Character/Character.js b/src/pages/Character/Character.js index 46a7a43..db3d69e 100644 --- a/src/pages/Character/Character.js +++ b/src/pages/Character/Character.js @@ -58,37 +58,73 @@ class Character extends Component { } = this.state; return ( -

Character page

-
- {hasLoaded && !hasError && ( + {hasLoaded && !hasError && ( +
+
+ +
+
+
+
+

{character.name}

+
+
+
+
+
+
+

CHARACTER

+
+

{character.species}

+

|

+

{character.status}

+
+
+
+
+
+
+

ORIGINAL

+

{character.origin.name}

+
+
+

LOCATION

+

{character.location.name}

+
+
+
+
+
-

Character loaded!

-

{character.name}

-

{character.status}

-

{character.species}

+
- )} - {hasError && (
-

{errorMessage}

+

Episodes

- )} -
-
-
- {episode.map((ele) => ( - - ))} +
+
+
+ {episode.length > 0 && + episode.map((ele) => ( + + ))} +
+ )} + {hasError && (
-
+

{errorMessage}

-
+ )} ); } diff --git a/src/pages/Episode/Episode.js b/src/pages/Episode/Episode.js index 96be592..3d2cf79 100644 --- a/src/pages/Episode/Episode.js +++ b/src/pages/Episode/Episode.js @@ -59,34 +59,44 @@ class Episode extends Component { } = this.state; return ( -
- {hasLoaded && !hasError && ( + {hasLoaded && !hasError && ( +

{episode.name}

-
{episode.air_date}
-
{episode.episode}
- )} - {hasError && (
-

{errorMessage}

+
- )} +
+

+

{episode.air_date}
+

+

|

+

{episode.episode}

+
+
+
+
+ {characters.length > 0 && + characters.map((character) => ( + + ))} +
+ )} + {hasError && (
- {characters.map((character) => ( - - ))} +

{errorMessage}

-
+ )} ); } diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js index 4828fc1..2d2fa7e 100644 --- a/src/pages/Home/Home.js +++ b/src/pages/Home/Home.js @@ -59,15 +59,16 @@ class Home extends Component {
- {episodes.map((episode) => ( - - ))} + {episodes.length > 0 && + episodes.map((episode) => ( + + ))}
diff --git a/src/pages/Location/Location.js b/src/pages/Location/Location.js index 990f7e3..4bc76a6 100644 --- a/src/pages/Location/Location.js +++ b/src/pages/Location/Location.js @@ -59,34 +59,43 @@ class Location extends Component { } = this.state; return ( -
- {hasLoaded && !hasError && ( + {hasLoaded && !hasError && ( +

{location.name}

-
{location.type}
-
{location.dimension}
- )} - {hasError && (
-

{errorMessage}

+
- )} +
+

{location.type}

+
+
+

{location.dimension}

+
+
+
+
+ {residents.length > 0 && + residents.map((resident) => ( + + ))} +
+ )} + {hasError && (
- {residents.map((resident) => ( - - ))} +

{errorMessage}

-
+ )} ); } From af0c2cc0c4c1364925d1e88c1693882f609252d2 Mon Sep 17 00:00:00 2001 From: tamtran Date: Tue, 5 Oct 2021 11:59:47 +0200 Subject: [PATCH 06/11] add styles --- src/pages/Episode/Episode.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Episode/Episode.js b/src/pages/Episode/Episode.js index 3d2cf79..9c9e1c9 100644 --- a/src/pages/Episode/Episode.js +++ b/src/pages/Episode/Episode.js @@ -67,7 +67,7 @@ class Episode extends Component {
-
+

{episode.air_date}

From cb0e33b254b16cfbc32d38f63bfbd2817dbe3b01 Mon Sep 17 00:00:00 2001 From: tamtran Date: Wed, 6 Oct 2021 19:44:37 +0200 Subject: [PATCH 07/11] add pagination --- README.md | 1 + Rick & Morty.postman_collection.json | 45 +++++++++++++++++++ src/components/Pagination/Pagination.js | 34 +++++++++++++++ src/components/Pagination/index.js | 1 + src/pages/Home/Home.js | 57 ++++++++++++++++++++++--- 5 files changed, 132 insertions(+), 6 deletions(-) create mode 100644 Rick & Morty.postman_collection.json create mode 100644 src/components/Pagination/Pagination.js create mode 100644 src/components/Pagination/index.js diff --git a/README.md b/README.md index 0a5a758..7b4d3b3 100644 --- a/README.md +++ b/README.md @@ -149,3 +149,4 @@ This project follows the specification. Contributions of any kind welcome! - https://rickandmortyapi.com/api/episode?page=1 +- https://www.youtube.com/watch?v=BTJtTkoyprc diff --git a/Rick & Morty.postman_collection.json b/Rick & Morty.postman_collection.json new file mode 100644 index 0000000..d27655c --- /dev/null +++ b/Rick & Morty.postman_collection.json @@ -0,0 +1,45 @@ +{ + "info": { + "_postman_id": "d4676976-cd6b-4b9e-9a3b-31c77b924a3f", + "name": "Rick & Morty", + "schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json" + }, + "item": [ + { + "name": "Get episodes", + "request": { + "method": "GET", + "header": [], + "url": null + }, + "response": [] + }, + { + "name": "Get episode details", + "request": { + "method": "GET", + "header": [], + "url": null + }, + "response": [] + }, + { + "name": "Get character", + "request": { + "method": "GET", + "header": [], + "url": null + }, + "response": [] + }, + { + "name": "Get location", + "request": { + "method": "GET", + "header": [], + "url": null + }, + "response": [] + } + ] +} \ No newline at end of file diff --git a/src/components/Pagination/Pagination.js b/src/components/Pagination/Pagination.js new file mode 100644 index 0000000..215278f --- /dev/null +++ b/src/components/Pagination/Pagination.js @@ -0,0 +1,34 @@ +import React from "react"; + +const Pagination = ({ onPrevious, onNext, paginationInfo }) => { + const handlePrev = () => { + console.log("click"); + }; + + const handleNext = () => { + console.log("click"); + }; + + return ( + + ); +}; + +export default Pagination; diff --git a/src/components/Pagination/index.js b/src/components/Pagination/index.js new file mode 100644 index 0000000..34fcdf4 --- /dev/null +++ b/src/components/Pagination/index.js @@ -0,0 +1 @@ +export { default } from "./Pagination"; diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js index 2d2fa7e..95f9493 100644 --- a/src/pages/Home/Home.js +++ b/src/pages/Home/Home.js @@ -10,25 +10,32 @@ class Home extends Component { super(props); this.state = { // page: 1, - // paginationInfo: null, + paginationInfo: null, episodes: [], hasLoaded: false, hasError: false, errorMessage: null, }; + + this.loadEpisodes = this.loadEpisodes.bind(this); + this.nextPage = this.nextPage.bind(this); + this.prevPage = this.prevPage.bind(this); } async componentDidMount() { - this.loadEpisodes(); + const url = api.BASE_URL; + this.loadEpisodes(url); } - async loadEpisodes() { + async loadEpisodes(url) { try { - await axios.get(`${api.BASE_URL}`).then((res) => { + await axios.get(url).then((res) => { const episodes = res.data.results; + const pageInfo = res.data.info; this.setState({ episodes: episodes, hasLoaded: true, + paginationInfo: pageInfo, }); }); } catch (err) { @@ -41,8 +48,22 @@ class Home extends Component { // console.log(this); } + nextPage(nextUrl) { + this.loadEpisodes(nextUrl); + } + + prevPage(prevUrl) { + this.loadEpisodes(prevUrl); + } + render() { - const { episodes, hasLoaded, hasError, errorMessage } = this.state; + const { + episodes, + hasLoaded, + hasError, + errorMessage, + paginationInfo, + } = this.state; return (
@@ -69,9 +90,33 @@ class Home extends Component { episode={episode.episode} /> ))} -
+
+
+ +
); From 5954036b2d40feac3897e1dca24503896a4b40c5 Mon Sep 17 00:00:00 2001 From: tamtran Date: Thu, 7 Oct 2021 16:33:48 +0200 Subject: [PATCH 08/11] fix pagination --- README.md | 3 - Rick & Morty.postman_collection.json | 45 ------------ Rick And Morty.postman_collection.json | 98 +++++++++++++++++++++++++ src/components/Pagination/Pagination.js | 28 +++---- src/pages/Home/Home.js | 42 ++++++----- 5 files changed, 134 insertions(+), 82 deletions(-) delete mode 100644 Rick & Morty.postman_collection.json create mode 100644 Rick And Morty.postman_collection.json diff --git a/README.md b/README.md index 7b4d3b3..eedc843 100644 --- a/README.md +++ b/README.md @@ -147,6 +147,3 @@ Thanks goes to these wonderful people This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! - -- https://rickandmortyapi.com/api/episode?page=1 -- https://www.youtube.com/watch?v=BTJtTkoyprc diff --git a/Rick & Morty.postman_collection.json b/Rick & Morty.postman_collection.json deleted file mode 100644 index d27655c..0000000 --- a/Rick & Morty.postman_collection.json +++ /dev/null @@ -1,45 +0,0 @@ -{ - "info": { - "_postman_id": "d4676976-cd6b-4b9e-9a3b-31c77b924a3f", - "name": "Rick & Morty", - "schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json" - }, - "item": [ - { - "name": "Get episodes", - "request": { - "method": "GET", - "header": [], - "url": null - }, - "response": [] - }, - { - "name": "Get episode details", - "request": { - "method": "GET", - "header": [], - "url": null - }, - "response": [] - }, - { - "name": "Get character", - "request": { - "method": "GET", - "header": [], - "url": null - }, - "response": [] - }, - { - "name": "Get location", - "request": { - "method": "GET", - "header": [], - "url": null - }, - "response": [] - } - ] -} \ No newline at end of file diff --git a/Rick And Morty.postman_collection.json b/Rick And Morty.postman_collection.json new file mode 100644 index 0000000..6b296e2 --- /dev/null +++ b/Rick And Morty.postman_collection.json @@ -0,0 +1,98 @@ +{ + "info": { + "_postman_id": "d25a2ace-ba4f-43a4-80d3-7d16caddf291", + "name": "Rick And Morty", + "schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json" + }, + "item": [ + { + "name": "Get Episodes", + "request": { + "method": "GET", + "header": [], + "url": { + "raw": "https://rickandmortyapi.com/api/episode?page=1", + "protocol": "https", + "host": [ + "rickandmortyapi", + "com" + ], + "path": [ + "api", + "episode" + ], + "query": [ + { + "key": "page", + "value": "1" + } + ] + } + }, + "response": [] + }, + { + "name": "Get episode", + "request": { + "method": "GET", + "header": [], + "url": { + "raw": "https://rickandmortyapi.com/api/episode/1", + "protocol": "https", + "host": [ + "rickandmortyapi", + "com" + ], + "path": [ + "api", + "episode", + "1" + ] + } + }, + "response": [] + }, + { + "name": "Get character", + "request": { + "method": "GET", + "header": [], + "url": { + "raw": "https://rickandmortyapi.com/api/character/1", + "protocol": "https", + "host": [ + "rickandmortyapi", + "com" + ], + "path": [ + "api", + "character", + "1" + ] + } + }, + "response": [] + }, + { + "name": "Get location", + "request": { + "method": "GET", + "header": [], + "url": { + "raw": "https://rickandmortyapi.com/api/location/20", + "protocol": "https", + "host": [ + "rickandmortyapi", + "com" + ], + "path": [ + "api", + "location", + "20" + ] + } + }, + "response": [] + } + ] +} \ No newline at end of file diff --git a/src/components/Pagination/Pagination.js b/src/components/Pagination/Pagination.js index 215278f..13137c2 100644 --- a/src/components/Pagination/Pagination.js +++ b/src/components/Pagination/Pagination.js @@ -1,31 +1,31 @@ import React from "react"; -const Pagination = ({ onPrevious, onNext, paginationInfo }) => { - const handlePrev = () => { - console.log("click"); - }; - - const handleNext = () => { - console.log("click"); - }; - +const Pagination = ({ paginationInfo, nextPage, prevPage }) => { return ( ); diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js index 95f9493..3386b89 100644 --- a/src/pages/Home/Home.js +++ b/src/pages/Home/Home.js @@ -18,8 +18,6 @@ class Home extends Component { }; this.loadEpisodes = this.loadEpisodes.bind(this); - this.nextPage = this.nextPage.bind(this); - this.prevPage = this.prevPage.bind(this); } async componentDidMount() { @@ -96,24 +94,28 @@ class Home extends Component {
From 69e45924edd789e050275a2138a90497cc6383ef Mon Sep 17 00:00:00 2001 From: tamtran Date: Thu, 7 Oct 2021 19:10:23 +0200 Subject: [PATCH 09/11] add bind handler --- src/components/Pagination/Pagination.js | 34 ------------------------- src/components/Pagination/index.js | 1 - src/pages/Character/Character.js | 2 ++ src/pages/Episode/Episode.js | 2 ++ src/pages/Location/Location.js | 2 ++ 5 files changed, 6 insertions(+), 35 deletions(-) delete mode 100644 src/components/Pagination/Pagination.js delete mode 100644 src/components/Pagination/index.js diff --git a/src/components/Pagination/Pagination.js b/src/components/Pagination/Pagination.js deleted file mode 100644 index 13137c2..0000000 --- a/src/components/Pagination/Pagination.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from "react"; - -const Pagination = ({ paginationInfo, nextPage, prevPage }) => { - return ( - - ); -}; - -export default Pagination; diff --git a/src/components/Pagination/index.js b/src/components/Pagination/index.js deleted file mode 100644 index 34fcdf4..0000000 --- a/src/components/Pagination/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./Pagination"; diff --git a/src/pages/Character/Character.js b/src/pages/Character/Character.js index db3d69e..5d046dc 100644 --- a/src/pages/Character/Character.js +++ b/src/pages/Character/Character.js @@ -15,6 +15,8 @@ class Character extends Component { hasError: false, errorMessage: null, }; + + this.loadCharacter = this.loadCharacter.bind(this); } async componentDidMount() { diff --git a/src/pages/Episode/Episode.js b/src/pages/Episode/Episode.js index 9c9e1c9..f84733e 100644 --- a/src/pages/Episode/Episode.js +++ b/src/pages/Episode/Episode.js @@ -16,6 +16,8 @@ class Episode extends Component { hasError: false, errorMessage: null, }; + + this.loadCharacters = this.loadCharacters.bind(this); } async componentDidMount() { diff --git a/src/pages/Location/Location.js b/src/pages/Location/Location.js index 4bc76a6..aecf445 100644 --- a/src/pages/Location/Location.js +++ b/src/pages/Location/Location.js @@ -16,6 +16,8 @@ class Location extends Component { hasError: false, errorMessage: null, }; + + this.loadLocation = this.loadLocation.bind(this); } async componentDidMount() { From 59c07945267b30983b6ea70f6169820f88bba2b6 Mon Sep 17 00:00:00 2001 From: tamtran Date: Thu, 7 Oct 2021 20:41:04 +0200 Subject: [PATCH 10/11] add style --- src/pages/Character/Character.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/pages/Character/Character.js b/src/pages/Character/Character.js index 5d046dc..b693df2 100644 --- a/src/pages/Character/Character.js +++ b/src/pages/Character/Character.js @@ -79,8 +79,10 @@ class Character extends Component {
-

CHARACTER

-
+

+ CHARACTER +

+

{character.species}

|

{character.status}

@@ -88,16 +90,20 @@ class Character extends Component {
-
+
-

ORIGINAL

+

+ ORIGIN +

{character.origin.name}

-

LOCATION

+

+ LOCATION +

{character.location.name}

-
+
From d203944d0aa4e0a6fbee3799b364e99d4c38245a Mon Sep 17 00:00:00 2001 From: tamtran Date: Fri, 8 Oct 2021 09:16:59 +0200 Subject: [PATCH 11/11] add react memo --- src/components/CharacterCard/CharacterCard.js | 2 +- src/components/EpisodeCard/EpisodeCard.js | 2 +- src/pages/Character/Character.js | 1 - src/pages/Episode/Episode.js | 1 - src/pages/Location/Location.js | 1 - 5 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/CharacterCard/CharacterCard.js b/src/components/CharacterCard/CharacterCard.js index e07e3d1..ae02e92 100644 --- a/src/components/CharacterCard/CharacterCard.js +++ b/src/components/CharacterCard/CharacterCard.js @@ -34,4 +34,4 @@ function CharacterCard({ id, name, image, species, status, origin, location }) { ); } -export default CharacterCard; +export default React.memo(CharacterCard); diff --git a/src/components/EpisodeCard/EpisodeCard.js b/src/components/EpisodeCard/EpisodeCard.js index f9c23a1..99a1bf0 100644 --- a/src/components/EpisodeCard/EpisodeCard.js +++ b/src/components/EpisodeCard/EpisodeCard.js @@ -28,4 +28,4 @@ function EpisodeCard({ id, name, airDate, episode }) { ); } -export default EpisodeCard; +export default React.memo(EpisodeCard); diff --git a/src/pages/Character/Character.js b/src/pages/Character/Character.js index b693df2..5709cfd 100644 --- a/src/pages/Character/Character.js +++ b/src/pages/Character/Character.js @@ -50,7 +50,6 @@ class Character extends Component { } render() { - // console.log(this.props); const { episode, character, diff --git a/src/pages/Episode/Episode.js b/src/pages/Episode/Episode.js index f84733e..e324802 100644 --- a/src/pages/Episode/Episode.js +++ b/src/pages/Episode/Episode.js @@ -51,7 +51,6 @@ class Episode extends Component { } render() { - // console.log(this.props); const { episode, characters, diff --git a/src/pages/Location/Location.js b/src/pages/Location/Location.js index aecf445..56a330b 100644 --- a/src/pages/Location/Location.js +++ b/src/pages/Location/Location.js @@ -51,7 +51,6 @@ class Location extends Component { } render() { - // console.log(this.props); const { location, residents,