From 5630455e0482b31e234fe5b85983cd0685585a8b Mon Sep 17 00:00:00 2001 From: andarbech Date: Mon, 4 Oct 2021 12:46:57 +0200 Subject: [PATCH 1/5] first page complete --- .eslintrc.js | 4 +- package-lock.json | 464 +++++++++----------------- package.json | 17 +- src/App.js | 22 +- src/components/AppHeader/AppHeader.js | 6 + src/pages/Home/Home.js | 68 +++- src/utils/axios.js | 12 + 7 files changed, 251 insertions(+), 342 deletions(-) create mode 100644 src/utils/axios.js diff --git a/.eslintrc.js b/.eslintrc.js index 3480d73..3ff7b3c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,4 +1,4 @@ -module.exports = { +/* module.exports = { env: { browser: true, es2021: true, @@ -60,4 +60,4 @@ module.exports = { "react/forbid-prop-types": "off", "react/prop-types": "off", }, -}; +}; */ diff --git a/package-lock.json b/package-lock.json index 993b456..ab4e920 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", @@ -2780,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", @@ -3292,12 +3302,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 +3582,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 +3991,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 +5004,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 +5895,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": { @@ -6302,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": { @@ -7222,9 +7236,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 +8043,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 +9417,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 +9427,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 +9514,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 +9783,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 +10369,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 +10455,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", @@ -10606,69 +10631,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.38", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.38.tgz", + "integrity": "sha512-wNrSHWjHDQJR/IZL5IKGxRtFgrYNaAA/UrkW2WqbtZO6uxSLMxMN+s2iqUMwnAWm3fMROlDYZB41dr0Mt7vBwQ==", "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" - } - } + "nanocolors": "^0.2.2", + "source-map": "^0.6.1" } }, "postcss-attribute-case-insensitive": { @@ -11555,13 +11523,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==" + } } } } @@ -12099,11 +12074,11 @@ "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==" }, "react-router": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", - "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz", + "integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==", "requires": { - "@babel/runtime": "^7.1.2", + "@babel/runtime": "^7.12.13", "history": "^4.9.0", "hoist-non-react-statics": "^3.1.0", "loose-envify": "^1.3.1", @@ -12136,15 +12111,15 @@ } }, "react-router-dom": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz", - "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.0.tgz", + "integrity": "sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==", "requires": { - "@babel/runtime": "^7.1.2", + "@babel/runtime": "^7.12.13", "history": "^4.9.0", "loose-envify": "^1.3.1", "prop-types": "^15.6.2", - "react-router": "5.2.0", + "react-router": "5.2.1", "tiny-invariant": "^1.0.2", "tiny-warning": "^1.0.0" } @@ -12458,29 +12433,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 +12475,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", @@ -12661,9 +12607,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", @@ -12671,7 +12617,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" @@ -12752,9 +12698,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", @@ -13606,6 +13552,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 +13700,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 +14109,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 +14428,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 +14552,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 +14576,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 +14621,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 +14743,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 +14859,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 +15369,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" } @@ -16037,11 +15882,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": { @@ -16451,15 +16303,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..a8c8d8e 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "prop-types": "^15.7.2", "react": "^17.0.1", "react-dom": "^17.0.1", - "react-router-dom": "^5.2.0", + "react-router-dom": "^5.3.0", "react-scripts": "4.0.3", "sass": "^1.32.11", "web-vitals": "^1.0.1" @@ -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", @@ -60,18 +60,7 @@ "eject": "react-scripts eject", "test:watch": "react-scripts test --watchAll", "test:ci:all": "cross-env CI=true react-scripts test --all --env=jsdom", - "test:related": "cross-env CI=true react-scripts test --bail --findRelatedTests --env=jsdom", - "lint:js": "eslint . --ext .js", - "lint:js:fix": "npm run lint:js -- --fix", - "lint:format": "prettier --write .", - "lint:format:check": "prettier --check .", - "pre:push": "npm run lint:js && npm run lint:format:check && npm run test:ci:all" - }, - "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] + "test:related": "cross-env CI=true react-scripts test --bail --findRelatedTests --env=jsdom" }, "browserslist": { "production": [ diff --git a/src/App.js b/src/App.js index 3a49c0e..379a544 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,27 @@ import React from "react"; - +import { Route, Switch } from "react-router-dom"; +import { + CHARACTER, + EPISODE, + EPISODES, + HOME, + LOCATION, +} from "./constants/routes"; import Home from "./pages/Home"; +import Episode from "./pages/Episode/Episode"; function App() { - return ; + return ( + <> + + + {/* */} + + {/* + */} + + + ); } export default App; diff --git a/src/components/AppHeader/AppHeader.js b/src/components/AppHeader/AppHeader.js index dfec840..0bfb46c 100644 --- a/src/components/AppHeader/AppHeader.js +++ b/src/components/AppHeader/AppHeader.js @@ -18,6 +18,12 @@ function AppHeader({ ...props }) { > Home + Episode + diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js index f86e93c..2ef371b 100644 --- a/src/pages/Home/Home.js +++ b/src/pages/Home/Home.js @@ -1,42 +1,76 @@ import React, { Component } from "react"; import Layout from "../../components/Layout"; -// import EpisodeCard from "../../components/EpisodeCard"; +import EpisodeCard from "../../components/EpisodeCard"; +import { getEpisodes } from "../../utils/axios"; 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, + currentPagesLoader:1 + }; + this.loadNextPage = this.loadNextPage.bind(this); + this.loadEpisodes = this.loadEpisodes.bind(this); } async componentDidMount() { - // this.loadEpisodes(); + const { page } = this.state; + this.loadEpisodes(page); } - async loadEpisodes() { - console.log(this); + async loadEpisodes(page){ + try { + const response = await getEpisodes(page); + this.setState({ + paginationInfo: response.info, + episodes: response.data.results, + hasLoaded: true, + page:page, + currentPagesLoader:page + }); + } catch (error) { + this.setState({ + errorMessage: error.message, + hasLoaded: false, + hasError: true, + }); + } + } + componentDidUpdate(){ + if(this.state.page!==this.state.currentPagesLoader){ + this.loadEpisodes(this.state.page) + } + } + async loadNextPage() { + const { page}=this.state + this.setState({ + page: this.state.page+1 + }); } render() { + const { hasLoaded, hasError, episodes } = this.state; return (
- {/* {hasLoaded && !hasError && ( + {hasLoaded && !hasError && (

Episodes loaded!

- )} */} + )}
- {/* {episodes.map((episode) => ( + {episodes && + episodes.map((episode) => ( - ))} */} + ))}
+
diff --git a/src/utils/axios.js b/src/utils/axios.js new file mode 100644 index 0000000..85ff86e --- /dev/null +++ b/src/utils/axios.js @@ -0,0 +1,12 @@ +import axios from "axios"; + +export async function getEpisodes(page){ + try{ + const result=await axios.get(`https://rickandmortyapi.com/api/episode?page=${page}`) + return result + } + catch(error){ + return[] + } +} + From abf5ce50985bd7ffb18b30b13a208aed9f09e26a Mon Sep 17 00:00:00 2001 From: andarbech Date: Wed, 6 Oct 2021 11:33:36 +0200 Subject: [PATCH 2/5] finish caracter --- src/App.js | 11 +- src/components/AppHeader/AppHeader.js | 6 - src/components/CharacterCard/CharacterCard.js | 4 +- src/pages/CharacterPage/Character.js | 144 ++++++++++++++++++ src/pages/CharacterPage/index.js | 1 + src/pages/Episode/Episode.js | 117 +++++++++++--- src/pages/Home/Home.js | 26 ++-- src/pages/Location/Location.js | 74 +++++++++ src/pages/Location/index.js | 1 + src/utils/axios.js | 26 +++- 10 files changed, 360 insertions(+), 50 deletions(-) create mode 100644 src/pages/CharacterPage/Character.js create mode 100644 src/pages/CharacterPage/index.js 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 379a544..6efe01a 100644 --- a/src/App.js +++ b/src/App.js @@ -9,16 +9,19 @@ import { } from "./constants/routes"; import Home from "./pages/Home"; import Episode from "./pages/Episode/Episode"; +import Character from "./pages/CharacterPage/Character"; function App() { return ( <> - {/* */} - - {/* - */} + } + /> + } + /> ); diff --git a/src/components/AppHeader/AppHeader.js b/src/components/AppHeader/AppHeader.js index 0bfb46c..dfec840 100644 --- a/src/components/AppHeader/AppHeader.js +++ b/src/components/AppHeader/AppHeader.js @@ -18,12 +18,6 @@ function AppHeader({ ...props }) { > Home - Episode - diff --git a/src/components/CharacterCard/CharacterCard.js b/src/components/CharacterCard/CharacterCard.js index 9e7e4ab..8d18670 100644 --- a/src/components/CharacterCard/CharacterCard.js +++ b/src/components/CharacterCard/CharacterCard.js @@ -13,12 +13,12 @@ function CharacterCard({ id, name, image, species, status, origin, location }) {

{name}

- {origin.name} - + */}

|

{status}

diff --git a/src/pages/CharacterPage/Character.js b/src/pages/CharacterPage/Character.js new file mode 100644 index 0000000..f9b53f6 --- /dev/null +++ b/src/pages/CharacterPage/Character.js @@ -0,0 +1,144 @@ +import React, { Component } from "react"; +import { getCharacter, getEpisode } from "../../utils/axios"; +import Layout from "../../components/Layout"; +import EpisodeCard from "../../components/EpisodeCard"; +import axios from "axios"; +class Character extends Component { + constructor(props) { + super(props); + this.state = { + character: {}, + episode: [], + hasLoaded: false, + hasError: false, + errorMessage: null, + }; + } + async componentDidMount() { + const { + match: { params }, + } = this.props; + + this.loadCharacter(params.characterId); + } + async loadCharacter(characterId) { + try { + const response = await getCharacter(characterId); + console.log(response); + const res = await axios.all( + response.data.episode.map(async (cUrl) => { + const response = await axios(cUrl); + return response.data; + }), + ); + this.setState({ + character: { + id: response.data.id, + name: response.data.name, + image: response.data.image, + species: response.data.species, + status: response.data.status, + origin: response.data.origin, + location: response.data.location, + }, + episode: res, + hasLoaded: true, + }); + } catch (error) { + this.setState({ + errorMessage: error.message, + hasLoaded: false, + hasError: false, + }); + } + } + render() { + const { character, episode, hasLoaded, hasError, errorMessage } = this.state; + return ( + <> + + {hasLoaded && !hasError && ( +
+
+ +
+
+
+
+

{character.name}

+
+
+
+
+
+
+

+ Character +

+
+

{character.species}

+

|

+

{character.status}

+
+
+
+
+
+
+

+ Origin +

+

{character.origin.name}

+
+
+

+ Location +

+

{character.location.name}

+
+
+
+
+
+
+
+
+
+

Episodes

+
+
+
+
+ {episode.length > 0 && + episode.map((episode) => ( + + ))} +
+ )} + {!hasLoaded && ( +
+
+

Loading data...

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

Something went wrong...

+

{errorMessage}

+
+
+ )} + + + ); + } +} +export default Character; diff --git a/src/pages/CharacterPage/index.js b/src/pages/CharacterPage/index.js new file mode 100644 index 0000000..220c56c --- /dev/null +++ b/src/pages/CharacterPage/index.js @@ -0,0 +1 @@ +export { default } from "./Episode"; \ No newline at end of file diff --git a/src/pages/Episode/Episode.js b/src/pages/Episode/Episode.js index 8255df5..789c472 100644 --- a/src/pages/Episode/Episode.js +++ b/src/pages/Episode/Episode.js @@ -1,39 +1,108 @@ import React, { Component } from "react"; import Layout from "../../components/Layout"; -// import CharacterCard from "../../components/CharacterCard"; - +import CharacterCard from "../../components/CharacterCard"; +import { getEpisode } from "../../utils/axios"; +import axios from "axios"; 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: { params }, + } = this.props; + this.loadEpisode(params.episodeId); } + async loadEpisode(episodeId) { + try { + const response = await getEpisode(episodeId); + this.setState({ + episode: response.data, + hasLoaded: true, + }); + + const { episode } = this.state; + const res = await axios.all( + episode.characters.map(async (cUrl) => { + const response = await axios(cUrl) + return response.data + })) + this.setState({ + characters:res + }) + } + catch (error) { + this.setState({ + errorMessage: error.message, + hasLoaded:false, + hasError: true, + }); + } + } render() { + const { characters, episode,hasError,hasLoaded} = this.state; return ( -
-
- {/* {characters.map((character) => ( - - ))} */} -
-
+ {hasLoaded && !hasError && ( +
+
+

{episode.name}

+
+
+
+
+
+
+

{episode.episode}

+

|

+

{episode.air_date}

+
+
+
+
+
+ {characters.length > 0 && + characters.map((character) => ( + + ))} +
+ )} + + {!hasLoaded && ( +
+
+

Loading data...

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

Something went wrong...

+

{errorMessage}

+
+
+ )} ); } diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js index 2ef371b..85e1460 100644 --- a/src/pages/Home/Home.js +++ b/src/pages/Home/Home.js @@ -15,7 +15,7 @@ class Home extends Component { hasLoaded: false, hasError: false, errorMessage: null, - currentPagesLoader:1 + currentPagesLoader: 1, }; this.loadNextPage = this.loadNextPage.bind(this); this.loadEpisodes = this.loadEpisodes.bind(this); @@ -26,15 +26,16 @@ class Home extends Component { this.loadEpisodes(page); } - async loadEpisodes(page){ + async loadEpisodes(page) { + try { - const response = await getEpisodes(page); - this.setState({ - paginationInfo: response.info, + const response = await getEpisodes(page); + this.setState({ + paginationInfo: response.data.info, episodes: response.data.results, hasLoaded: true, - page:page, - currentPagesLoader:page + page: page, + currentPagesLoader: page, }); } catch (error) { this.setState({ @@ -44,15 +45,15 @@ class Home extends Component { }); } } - componentDidUpdate(){ - if(this.state.page!==this.state.currentPagesLoader){ - this.loadEpisodes(this.state.page) + componentDidUpdate() { + if (this.state.page !== this.state.currentPagesLoader) { + this.loadEpisodes(this.state.page); } } async loadNextPage() { - const { page}=this.state + const { page } = this.state; this.setState({ - page: this.state.page+1 + page: this.state.page + 1, }); } @@ -82,7 +83,6 @@ class Home extends Component {
diff --git a/src/pages/Location/Location.js b/src/pages/Location/Location.js new file mode 100644 index 0000000..89433eb --- /dev/null +++ b/src/pages/Location/Location.js @@ -0,0 +1,74 @@ +import React, { Component } from "react"; + +class Location extends Component { + constructor(props) { + super(props); + this.state = { + location: null, + hasLoaded: false, + hasError: false, + errorMessage: null, + } + } + + async componentDidMount() { + try { + // const { match } = this.props; + // const { locationId } = match.params; + const response = await getLocation(locationId); + this.setState({ + location: response.data, + hasLoaded: true, + }); + } catch (error) { + this.setState({ + errorMessage: error.message, + hasLoaded: true, + hasError: true, + }); + } + } + render() { + const { location, hasLoaded, hasError, errorMessage } = this.state; + return ( + <> + + {hasLoaded && !hasError && ( +
+
+

+ Location:{" "} + {location.name} +

+
+
+
+
+
+ 
+                                    {JSON.stringify(location, null, 2)}
+
+
+
+ )} + + {!hasLoaded && ( +
+
+

Loading data...

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

Something went wrong...

+

{errorMessage}

+
+
+ )} + + + ) + } +} \ No newline at end of file diff --git a/src/pages/Location/index.js b/src/pages/Location/index.js new file mode 100644 index 0000000..0d20c9f --- /dev/null +++ b/src/pages/Location/index.js @@ -0,0 +1 @@ +export {default} from './Location' \ No newline at end of file diff --git a/src/utils/axios.js b/src/utils/axios.js index 85ff86e..8a8518c 100644 --- a/src/utils/axios.js +++ b/src/utils/axios.js @@ -2,11 +2,35 @@ import axios from "axios"; export async function getEpisodes(page){ try{ - const result=await axios.get(`https://rickandmortyapi.com/api/episode?page=${page}`) + const result= await axios.get(`https://rickandmortyapi.com/api/episode?page=${page}`) return result } catch(error){ return[] } + } +export async function getEpisode(episodeId) { + + const result= await axios.get(`https://rickandmortyapi.com/api/episode/${episodeId}`) + return result + +} + + +export async function getCharacter(characterId){ + try{ + const result=await axios.get(`https://rickandmortyapi.com/api/character/${characterId}`) + return result + } + catch{(error) + return []} } +// export async function getLocation(locationId){ +// try{ +// const result=await axios.get(`https://rickandmortyapi.com/api/character/${locationId}`) +// return result +// } +// catch{(error) +// return []} +// } \ No newline at end of file From e415a0d4166343474a95b7c9db94a8d4d73bf7c9 Mon Sep 17 00:00:00 2001 From: andarbech Date: Wed, 6 Oct 2021 14:06:20 +0200 Subject: [PATCH 3/5] finish proyect --- src/App.js | 6 +- src/components/CharacterCard/CharacterCard.js | 4 +- src/pages/CharacterPage/Character.js | 1 - src/pages/Location/Location.js | 60 ++++++++++++++----- src/utils/axios.js | 16 ++--- 5 files changed, 61 insertions(+), 26 deletions(-) diff --git a/src/App.js b/src/App.js index 6efe01a..35ee0ef 100644 --- a/src/App.js +++ b/src/App.js @@ -3,13 +3,13 @@ import { Route, Switch } from "react-router-dom"; import { CHARACTER, EPISODE, - EPISODES, HOME, LOCATION, } from "./constants/routes"; import Home from "./pages/Home"; import Episode from "./pages/Episode/Episode"; import Character from "./pages/CharacterPage/Character"; +import Location from "./pages/Location/Location"; function App() { return ( @@ -22,6 +22,10 @@ function App() { } /> + } + /> ); diff --git a/src/components/CharacterCard/CharacterCard.js b/src/components/CharacterCard/CharacterCard.js index 8d18670..9e7e4ab 100644 --- a/src/components/CharacterCard/CharacterCard.js +++ b/src/components/CharacterCard/CharacterCard.js @@ -13,12 +13,12 @@ function CharacterCard({ id, name, image, species, status, origin, location }) {

{name}

-{/* {origin.name} - */} +

|

{status}

diff --git a/src/pages/CharacterPage/Character.js b/src/pages/CharacterPage/Character.js index f9b53f6..67166ff 100644 --- a/src/pages/CharacterPage/Character.js +++ b/src/pages/CharacterPage/Character.js @@ -24,7 +24,6 @@ class Character extends Component { async loadCharacter(characterId) { try { const response = await getCharacter(characterId); - console.log(response); const res = await axios.all( response.data.episode.map(async (cUrl) => { const response = await axios(cUrl); diff --git a/src/pages/Location/Location.js b/src/pages/Location/Location.js index 89433eb..3335294 100644 --- a/src/pages/Location/Location.js +++ b/src/pages/Location/Location.js @@ -1,24 +1,35 @@ import React, { Component } from "react"; - +import Layout from "../../components/Layout"; +import { getLocation } from "../../utils/axios"; +import axios from "axios"; +import CharacterCard from "../../components/CharacterCard"; class Location extends Component { constructor(props) { super(props); this.state = { location: null, hasLoaded: false, + residents: {}, hasError: false, errorMessage: null, - } + }; } - async componentDidMount() { try { - // const { match } = this.props; - // const { locationId } = match.params; - const response = await getLocation(locationId); + const { match } = this.props; + const { locationId } = match.params; + const responseLocation = await getLocation(locationId); + const res = await axios.all( + responseLocation.data.residents.map(async (cUrl) => { + const response = await axios(cUrl); + return response.data; + }), + ); + const item = res.forEach(el => console.log(el.name)) this.setState({ - location: response.data, + location: responseLocation.data, hasLoaded: true, + residents: res, }); } catch (error) { this.setState({ @@ -29,7 +40,13 @@ class Location extends Component { } } render() { - const { location, hasLoaded, hasError, errorMessage } = this.state; + const { + location, + hasLoaded, + hasError, + errorMessage, + residents, + } = this.state; return ( <> @@ -45,13 +62,27 @@ class Location extends Component {
- 
-                                    {JSON.stringify(location, null, 2)}
-
+

{location.dimension}

+ {residents.length > 0 && + residents.map((character) => ( + + ))} +
+
+
+
)} - {!hasLoaded && (
@@ -69,6 +100,7 @@ class Location extends Component { )} - ) + ); } -} \ No newline at end of file +} +export default Location; diff --git a/src/utils/axios.js b/src/utils/axios.js index 8a8518c..4e88243 100644 --- a/src/utils/axios.js +++ b/src/utils/axios.js @@ -26,11 +26,11 @@ export async function getCharacter(characterId){ return []} } -// export async function getLocation(locationId){ -// try{ -// const result=await axios.get(`https://rickandmortyapi.com/api/character/${locationId}`) -// return result -// } -// catch{(error) -// return []} -// } \ No newline at end of file +export async function getLocation(locationId){ + try{ + const result=await axios.get(`https://rickandmortyapi.com/api/location/${locationId}`) + return result + } + catch{(error) + return []} +} \ No newline at end of file From b41851d6a7e32950d5908667c98aedcf430d627f Mon Sep 17 00:00:00 2001 From: andarbech Date: Fri, 8 Oct 2021 11:31:47 +0200 Subject: [PATCH 4/5] finish and fix bugs --- src/pages/Home/Home.js | 37 ++++++++++++++++++++++++---------- src/pages/Location/Location.js | 7 ++++--- 2 files changed, 30 insertions(+), 14 deletions(-) diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js index 85e1460..f52fdc8 100644 --- a/src/pages/Home/Home.js +++ b/src/pages/Home/Home.js @@ -17,7 +17,9 @@ class Home extends Component { errorMessage: null, currentPagesLoader: 1, }; + this.loadNextPage = this.loadNextPage.bind(this); + this.loadPrevPage = this.loadPrevPage.bind(this); this.loadEpisodes = this.loadEpisodes.bind(this); } @@ -27,10 +29,10 @@ class Home extends Component { } async loadEpisodes(page) { - + try { const response = await getEpisodes(page); - this.setState({ + this.setState({ paginationInfo: response.data.info, episodes: response.data.results, hasLoaded: true, @@ -50,15 +52,23 @@ class Home extends Component { this.loadEpisodes(this.state.page); } } - async loadNextPage() { - const { page } = this.state; - this.setState({ - page: this.state.page + 1, - }); + + loadNextPage() { + this.setState(prevState => ({ + ...prevState, + page: prevState.page + 1, + })); + } + + loadPrevPage() { + this.setState(prevState => ({ + ...prevState, + page: prevState.page - 1, + })); } render() { - const { hasLoaded, hasError, episodes } = this.state; + const { hasLoaded, hasError, episodes, page, paginationInfo } = this.state; return (
@@ -73,6 +83,7 @@ class Home extends Component { {episodes && episodes.map((episode) => (
- + {hasLoaded && !hasError && ( + <> + {paginationInfo.prev && } + {paginationInfo.next && } + + )} +
diff --git a/src/pages/Location/Location.js b/src/pages/Location/Location.js index 3335294..ee5f5f6 100644 --- a/src/pages/Location/Location.js +++ b/src/pages/Location/Location.js @@ -61,8 +61,9 @@ class Location extends Component {
-
-

{location.dimension}

+
+

{location.dimension}

+
{residents.length > 0 && residents.map((character) => ( ))} -
+
From c7ed20d769118a8521c83d5d0dd7d41db4326662 Mon Sep 17 00:00:00 2001 From: andarbech Date: Wed, 13 Oct 2021 13:13:06 +0200 Subject: [PATCH 5/5] Home HOC --- react-shopping-cart-hoc | 1 + src/pages/Home/Home.js | 269 ++++++++++++++++++++++----------- src/pages/Location/Location.js | 1 + 3 files changed, 183 insertions(+), 88 deletions(-) create mode 160000 react-shopping-cart-hoc diff --git a/react-shopping-cart-hoc b/react-shopping-cart-hoc new file mode 160000 index 0000000..44846a0 --- /dev/null +++ b/react-shopping-cart-hoc @@ -0,0 +1 @@ +Subproject commit 44846a0b7eb32193b7d5c989dcdaab91c8e67ab5 diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js index f52fdc8..7f110d8 100644 --- a/src/pages/Home/Home.js +++ b/src/pages/Home/Home.js @@ -1,110 +1,203 @@ -import React, { Component } from "react"; +import React, { Component, useState, useRef, useEffect } from "react"; import Layout from "../../components/Layout"; import EpisodeCard from "../../components/EpisodeCard"; import { getEpisodes } from "../../utils/axios"; -class Home extends Component { - constructor(props) { - super(props); - - this.state = { - page: 1, - paginationInfo: null, - episodes: [], - hasLoaded: false, - hasError: false, - errorMessage: null, - currentPagesLoader: 1, - }; - - this.loadNextPage = this.loadNextPage.bind(this); - this.loadPrevPage = this.loadPrevPage.bind(this); - this.loadEpisodes = this.loadEpisodes.bind(this); - } - async componentDidMount() { - const { page } = this.state; - this.loadEpisodes(page); - } +function Home() { + const [page, setPage] = useState(1); + const [paginationInfo, setPaginationInfo] = useState(null); + const [episodes, setEpisodes] = useState([]); + const [hasLoaded, setHasLoaded] = useState(false); + const [errorMessage, setErrorMessage] = useState(null); + const [currentPagesLoader, setCurrentPagesLoader] = useState(1); + const [hasError, setHasError] = useState(false); + hasError - async loadEpisodes(page) { + useEffect(async () => { + await loadEpisodes(page) + }, [page]); + async function loadEpisodes(page){ try { const response = await getEpisodes(page); - this.setState({ - paginationInfo: response.data.info, - episodes: response.data.results, - hasLoaded: true, - page: page, - currentPagesLoader: page, - }); + + setPaginationInfo(response.data.info); + setEpisodes(response.data.results); + setHasLoaded(true); + setPage(page) + setCurrentPagesLoader(page) } catch (error) { - this.setState({ - errorMessage: error.message, - hasLoaded: false, - hasError: true, - }); + setErrorMessage(error.message); + setHasLoaded(false); + setHasError(true); } } - componentDidUpdate() { - if (this.state.page !== this.state.currentPagesLoader) { - this.loadEpisodes(this.state.page); + useEffect(()=>{ + if(setPage!=setCurrentPagesLoader){ + loadEpisodes(page) } - } + },[page]) - loadNextPage() { - this.setState(prevState => ({ - ...prevState, - page: prevState.page + 1, - })); - } - loadPrevPage() { - this.setState(prevState => ({ - ...prevState, - page: prevState.page - 1, - })); + function loadNextPage() { + setPage(page+1) + } + function loadPrevPage() { + setPage(page-1) } - render() { - const { hasLoaded, hasError, episodes, page, paginationInfo } = this.state; - return ( - -
- {hasLoaded && !hasError && ( -
-

Episodes loaded!

-
- )} + + return ( + +
+ {hasLoaded && !hasError && (
-
+

Episodes loaded!

- {episodes && - episodes.map((episode) => ( - - ))} -
-
- {hasLoaded && !hasError && ( - <> - {paginationInfo.prev && } - {paginationInfo.next && } - - )} + )} +
+
+
+ {episodes && + episodes.map((episode) => ( + + ))} +
+
+ {hasLoaded && !hasError && ( + <> + {paginationInfo.prev && } + {paginationInfo.next && } + + )} +
+
+ + ); +} export default Home - -
- - ); - } -} -export default Home; + + + + + + + + + + + + +// class Home extends Component { +// constructor(props) { +// super(props); + +// this.state = { +// page: 1, +// paginationInfo: null, +// episodes: [], +// hasLoaded: false, +// hasError: false, +// errorMessage: null, +// currentPagesLoader: 1, +// }; + +// this.loadNextPage = this.loadNextPage.bind(this); +// this.loadPrevPage = this.loadPrevPage.bind(this); +// this.loadEpisodes = this.loadEpisodes.bind(this); +// } + +// async componentDidMount() { +// const { page } = this.state; +// this.loadEpisodes(page); +// } + +// async loadEpisodes(page) { +// try { +// const response = await getEpisodes(page); +// this.setState({ +// paginationInfo: response.data.info, +// episodes: response.data.results, +// hasLoaded: true, +// page: page, +// currentPagesLoader: page, +// }); +// } catch (error) { +// this.setState({ +// errorMessage: error.message, +// hasLoaded: false, +// hasError: true, +// }); +// } +// } +// componentDidUpdate() { +// if (this.state.page !== this.state.currentPagesLoader) { +// this.loadEpisodes(this.state.page); +// } +// } + +// loadNextPage() { +// this.setState(prevState => ({ +// ...prevState, +// page: prevState.page + 1, +// })); +// } + +// loadPrevPage() { +// this.setState(prevState => ({ +// ...prevState, +// page: prevState.page - 1, +// })); +// } + +// render() { +// const { hasLoaded, hasError, episodes, page, paginationInfo } = this.state; +// return ( +// +//
+// {hasLoaded && !hasError && ( +//
+//

Episodes loaded!

+//
+// )} +//
+//
+//
+// {episodes && +// episodes.map((episode) => ( +// +// ))} +//
+//
+// {hasLoaded && !hasError && ( +// <> +// {paginationInfo.prev && } +// {paginationInfo.next && } +// +// )} + +//
+//
+// +// ); +// } +// } + +// export default Home; diff --git a/src/pages/Location/Location.js b/src/pages/Location/Location.js index ee5f5f6..ebb4845 100644 --- a/src/pages/Location/Location.js +++ b/src/pages/Location/Location.js @@ -3,6 +3,7 @@ import Layout from "../../components/Layout"; import { getLocation } from "../../utils/axios"; import axios from "axios"; import CharacterCard from "../../components/CharacterCard"; + class Location extends Component { constructor(props) { super(props);