From f86c9729f2d4b873c8f3c8b90cc61ac344646e78 Mon Sep 17 00:00:00 2001 From: jpacsai Date: Wed, 9 Oct 2019 16:14:57 +0200 Subject: [PATCH] add series page and refactor --- package-lock.json | 374 +++++++++++++++++++----------- package.json | 3 +- public/index.html | 19 -- src/App.css | 9 +- src/App.js | 214 ++++------------- src/components/CharactersPage.css | 18 ++ src/components/CharactersPage.js | 90 +++++++ src/components/DisplayCard.js | 28 +++ src/components/SeriesPage.css | 18 ++ src/components/SeriesPage.js | 90 +++++++ src/config.js | 2 + src/index.js | 1 + src/utils/getCharacters.js | 20 ++ src/utils/getSeries.js | 23 ++ 14 files changed, 579 insertions(+), 330 deletions(-) create mode 100644 src/components/CharactersPage.css create mode 100644 src/components/CharactersPage.js create mode 100644 src/components/DisplayCard.js create mode 100644 src/components/SeriesPage.css create mode 100644 src/components/SeriesPage.js create mode 100644 src/config.js create mode 100644 src/utils/getCharacters.js create mode 100644 src/utils/getSeries.js diff --git a/package-lock.json b/package-lock.json index 12bf21f..624b222 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1162,38 +1162,15 @@ "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz", "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==" }, - "@react-bootstrap/react-popper": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@react-bootstrap/react-popper/-/react-popper-1.2.1.tgz", - "integrity": "sha512-4l3q7LcZEhrSkI4d3Ie3g4CdrXqqTexXX4PFT45CB0z5z2JUbaxgRwKNq7r5j2bLdVpZm+uvUGqxJw8d9vgbJQ==", - "requires": { - "babel-runtime": "6.x.x", - "create-react-context": "^0.2.1", - "popper.js": "^1.14.4", - "prop-types": "^15.6.1", - "typed-styles": "^0.0.5", - "warning": "^3.0.0" - }, - "dependencies": { - "warning": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", - "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", - "requires": { - "loose-envify": "^1.0.0" - } - } - } - }, "@restart/context": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz", "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==" }, "@restart/hooks": { - "version": "0.2.13", - "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.2.13.tgz", - "integrity": "sha512-riuYub4Xx/Pk+YUPRHZPwJd2+rAJSsRd4Pqkqvhzu+AbkDdNi4y+kYEQicnAofbfTA5apRPm3cK9sWc6Gj5DNg==" + "version": "0.3.14", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.14.tgz", + "integrity": "sha512-k57+iyGr6o1XHeWWsGe5aMHKYcw7fukL6mCE+ZrPjtt1gXei5wCUxj71yQYfFbNjg0z5xxX8Els/UmyJiEn4nw==" }, "@svgr/babel-plugin-add-jsx-attribute": { "version": "4.2.0", @@ -1370,11 +1347,25 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-12.0.2.tgz", "integrity": "sha512-5tabW/i+9mhrfEOUcLDu2xBPsHJ+X5Orqy9FKpale3SjDA17j5AEpYq5vfy3oAeAHGcvANRCO3NV3d2D6q3NiA==" }, + "@types/prop-types": { + "version": "15.7.3", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", + "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==" + }, "@types/q": { "version": "1.5.2", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz", "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==" }, + "@types/react": { + "version": "16.9.5", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.5.tgz", + "integrity": "sha512-jQ12VMiFOWYlp+j66dghOWcmDDwhca0bnlcTxS4Qz/fh5gi6wpaZDthPEu/Gc/YlAuO87vbiUXL8qKstFvuOaA==", + "requires": { + "@types/prop-types": "*", + "csstype": "^2.2.0" + } + }, "@types/stack-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", @@ -2787,7 +2778,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -2805,11 +2797,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2822,15 +2816,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -2933,7 +2930,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -2943,6 +2941,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2955,17 +2954,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -2982,6 +2984,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3054,7 +3057,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3064,6 +3068,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3139,7 +3144,8 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3169,6 +3175,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3186,6 +3193,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3224,11 +3232,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.0.3", - "bundled": true + "bundled": true, + "optional": true } } }, @@ -3636,12 +3646,12 @@ } }, "create-react-context": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz", - "integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==", + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.3.0.tgz", + "integrity": "sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==", "requires": { - "fbjs": "^0.8.0", - "gud": "^1.0.0" + "gud": "^1.0.0", + "warning": "^4.0.3" } }, "cross-spawn": { @@ -3915,6 +3925,11 @@ "cssom": "0.3.x" } }, + "csstype": { + "version": "2.6.7", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.7.tgz", + "integrity": "sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ==" + }, "cyclist": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz", @@ -4335,14 +4350,6 @@ "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" }, - "encoding": { - "version": "0.1.12", - "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", - "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", - "requires": { - "iconv-lite": "~0.4.13" - } - }, "end-of-stream": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz", @@ -5183,35 +5190,6 @@ "bser": "^2.0.0" } }, - "fbjs": { - "version": "0.8.17", - "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz", - "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=", - "requires": { - "core-js": "^1.0.0", - "isomorphic-fetch": "^2.1.1", - "loose-envify": "^1.0.0", - "object-assign": "^4.1.0", - "promise": "^7.1.1", - "setimmediate": "^1.0.5", - "ua-parser-js": "^0.7.18" - }, - "dependencies": { - "core-js": { - "version": "1.2.7", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", - "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" - }, - "promise": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", - "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", - "requires": { - "asap": "~2.0.3" - } - } - } - }, "figgy-pudding": { "version": "3.5.1", "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz", @@ -5794,6 +5772,19 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -5804,6 +5795,14 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoist-non-react-statics": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz", + "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==", + "requires": { + "react-is": "^16.7.0" + } + }, "hosted-git-info": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz", @@ -6400,15 +6399,6 @@ "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=" }, - "isomorphic-fetch": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", - "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", - "requires": { - "node-fetch": "^1.0.1", - "whatwg-fetch": ">=0.10.0" - } - }, "isstream": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", @@ -6737,11 +6727,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6758,7 +6750,8 @@ }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", @@ -6887,6 +6880,7 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -8085,6 +8079,16 @@ "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz", "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==" }, + "mini-create-react-context": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz", + "integrity": "sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==", + "requires": { + "@babel/runtime": "^7.4.0", + "gud": "^1.0.0", + "tiny-warning": "^1.0.2" + } + }, "mini-css-extract-plugin": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz", @@ -8281,15 +8285,6 @@ "lower-case": "^1.1.1" } }, - "node-fetch": { - "version": "1.7.3", - "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", - "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", - "requires": { - "encoding": "^0.1.11", - "is-stream": "^1.0.1" - } - }, "node-forge": { "version": "0.7.5", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz", @@ -10071,6 +10066,8 @@ }, "react": { "version": "16.8.6", + "resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz", + "integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -10092,14 +10089,14 @@ } }, "react-bootstrap": { - "version": "1.0.0-beta.8", - "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.0-beta.8.tgz", - "integrity": "sha512-rdCJbjBMIVzjeKrploQJMpmpVkndsPDFH+NBGM5npefL+oA5WBEzURgllWLbKdb3mmuuJamilt4j7+Dg7yTxBQ==", + "version": "1.0.0-beta.14", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.0-beta.14.tgz", + "integrity": "sha512-UGK5f78FE8wAei1YL/oSwFlJZLqxJ/h4S8DCwHyY8hQjFCrjEW5PoEBTOOhQ6PQL6WOsZe1jkiOJG7L5TZWu+w==", "requires": { "@babel/runtime": "^7.4.2", - "@react-bootstrap/react-popper": "1.2.1", "@restart/context": "^2.1.4", - "@restart/hooks": "^0.2.3", + "@restart/hooks": "^0.3.11", + "@types/react": "^16.8.23", "classnames": "^2.2.6", "dom-helpers": "^3.4.0", "invariant": "^2.2.4", @@ -10108,8 +10105,8 @@ "prop-types": "^15.7.2", "prop-types-extra": "^1.1.0", "react-overlays": "^1.2.0", - "react-transition-group": "^2.7.1", - "uncontrollable": "^6.1.0", + "react-transition-group": "^4.0.0", + "uncontrollable": "^7.0.0", "warning": "^4.0.3" } }, @@ -10197,6 +10194,8 @@ }, "react-dom": { "version": "16.8.6", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz", + "integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -10232,39 +10231,90 @@ "react-popper": "^1.3.2", "uncontrollable": "^6.0.0", "warning": "^4.0.2" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.6.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.3.tgz", + "integrity": "sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + }, + "uncontrollable": { + "version": "6.2.3", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-6.2.3.tgz", + "integrity": "sha512-VgOAoBU2ptCL2bfTG2Mra0I8i1u6Aq84AFonD5tmCAYSfs3hWvr2Rlw0q2ntoxXTHjcQOmZOh3FKaN+UZVyREQ==", + "requires": { + "@babel/runtime": "^7.4.5", + "invariant": "^2.2.4" + } + } } }, "react-popper": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.3.tgz", - "integrity": "sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w==", + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.4.tgz", + "integrity": "sha512-9AcQB29V+WrBKk6X7p0eojd1f25/oJajVdMZkywIoAV6Ag7hzE1Mhyeup2Q1QnvFRtGQFQvtqfhlEoDAPfKAVA==", "requires": { "@babel/runtime": "^7.1.2", - "create-react-context": "<=0.2.2", + "create-react-context": "^0.3.0", "popper.js": "^1.14.4", "prop-types": "^15.6.1", "typed-styles": "^0.0.7", "warning": "^4.0.2" + } + }, + "react-router": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz", + "integrity": "sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.3.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" }, "dependencies": { - "create-react-context": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz", - "integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==", + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "path-to-regexp": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz", + "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=", "requires": { - "fbjs": "^0.8.0", - "gud": "^1.0.0" + "isarray": "0.0.1" } - }, - "typed-styles": { - "version": "0.0.7", - "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz", - "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==" } } }, + "react-router-dom": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.1.2.tgz", + "integrity": "sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.1.2", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + } + }, "react-scripts": { "version": "3.0.1", + "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.0.1.tgz", + "integrity": "sha512-LKEjBhVpEB+c312NeJhzF+NATxF7JkHNr5GhtwMeRS1cMeLElMeIu8Ye7WGHtDP7iz7ra4ryy48Zpo6G/cwWUw==", "requires": { "@babel/core": "7.4.3", "@svgr/webpack": "4.1.0", @@ -10322,14 +10372,33 @@ } }, "react-transition-group": { - "version": "2.9.0", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", - "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz", + "integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==", "requires": { - "dom-helpers": "^3.4.0", + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", "loose-envify": "^1.4.0", - "prop-types": "^15.6.2", - "react-lifecycles-compat": "^3.0.4" + "prop-types": "^15.6.2" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.6.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.3.tgz", + "integrity": "sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + }, + "dom-helpers": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.0.tgz", + "integrity": "sha512-zRRYDhpiKuAJHasOqCm7lBnsd22nrM4+OYI4ASWCxen+ocTMl7BIAKgGag97TlLiTl6rrau5aPe1VGUm9jQBng==", + "requires": { + "@babel/runtime": "^7.5.5", + "csstype": "^2.6.6" + } + } } }, "read-pkg": { @@ -10658,6 +10727,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=" }, + "resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -11763,6 +11837,16 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-invariant": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.6.tgz", + "integrity": "sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==" + }, + "tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -11900,20 +11984,15 @@ } }, "typed-styles": { - "version": "0.0.5", - "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.5.tgz", - "integrity": "sha512-ht+rEe5UsdEBAa3gr64+QjUOqjOLJfWLvl5HZR5Ev9uo/OnD3p43wPeFSB1hNFc13GXQF/JU1Bn0YHLUqBRIlw==" + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz", + "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==" }, "typedarray": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, - "ua-parser-js": { - "version": "0.7.19", - "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz", - "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ==" - }, "uglify-js": { "version": "3.4.10", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz", @@ -11936,11 +12015,23 @@ } }, "uncontrollable": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-6.1.0.tgz", - "integrity": "sha512-2TzEm0pLKauMBZfAZXsgQvLpZHEp95891frCZdGDrSG7dWYaIQhedwLAzi0X8pR8KHNqlmuYEb2cEgbQzr050A==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.0.2.tgz", + "integrity": "sha512-7fa8OBQ5+X4VAcp0os6BD74bCeUPQSHmr4Rqy75Me98NnlD5kNShCqqx4xWo4OmlAMiT2/YSMklLFC4FCuoGYg==", "requires": { - "invariant": "^2.2.4" + "@babel/runtime": "^7.4.5", + "invariant": "^2.2.4", + "react-lifecycles-compat": "^3.0.4" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.6.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.3.tgz", + "integrity": "sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + } } }, "unicode-canonical-property-names-ecmascript": { @@ -12218,6 +12309,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/package.json b/package.json index 6d5fef2..b91a1ec 100644 --- a/package.json +++ b/package.json @@ -5,8 +5,9 @@ "dependencies": { "bootstrap": "^4.3.1", "react": "^16.8.6", - "react-bootstrap": "^1.0.0-beta.8", + "react-bootstrap": "^1.0.0-beta.14", "react-dom": "^16.8.6", + "react-router-dom": "^5.1.2", "react-scripts": "3.0.1" }, "scripts": { diff --git a/public/index.html b/public/index.html index 35a37fa..7f1c7db 100644 --- a/public/index.html +++ b/public/index.html @@ -10,12 +10,6 @@ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ --> - - diff --git a/src/App.css b/src/App.css index a4705f4..c4282a4 100644 --- a/src/App.css +++ b/src/App.css @@ -2,6 +2,10 @@ text-align: center; } +.nav { + background-color: #fff; +} + .App-logo { animation: App-logo-spin infinite 20s linear; height: 40vmin; @@ -70,11 +74,6 @@ .Scrollable::-webkit-scrollbar { display: none; } -.searchBar{ - margin-top: 20px; - width:100%; - text-align: center; -} .Loader{ width:300px; diff --git a/src/App.js b/src/App.js index 4abc909..3fbda97 100644 --- a/src/App.js +++ b/src/App.js @@ -1,175 +1,57 @@ -import React, { Component} from 'react'; -import { Button, Card, Col, Row, Container, InputGroup, FormControl } from 'react-bootstrap'; -import './App.css'; - - -class App extends Component{ - - state = { - marvelapikey : "3a6bbe839d07c15e01996061acd6a121", - marvelapihash : "ac4ce3232a11197ececb965dcc3799d1", - timestamp : 1, - marvelCharacters : [], - loading : true, - searchValue: "", - list: [] - } - - - componentDidMount(){ - let list = [] - - fetch(`https://gateway.marvel.com/v1/public/characters?ts=${this.state.timestamp}&apikey=${this.state.marvelapikey}&hash=${this.state.marvelapihash}&limit=100`) - .then(response => response.json()) - .then(res => { - //console.log(res.data.results) - list = [...res.data.results] - console.log(this.state.marvelCharacters) - }); - fetch(`https://gateway.marvel.com/v1/public/characters?ts=${this.state.timestamp}&apikey=${this.state.marvelapikey}&hash=${this.state.marvelapihash}&limit=100&offset=200`) - .then(response => response.json()) - .then(res => { - //console.log(res.data.results) - list = list.concat(res.data.results) - console.log(this.state.marvelCharacters) - }); - fetch(`https://gateway.marvel.com/v1/public/characters?ts=${this.state.timestamp}&apikey=${this.state.marvelapikey}&hash=${this.state.marvelapihash}&limit=100&offset=300`) - .then(response => response.json()) - .then(res => { - //console.log(res.data.results) - list = list.concat(res.data.results) - console.log(this.state.marvelCharacters) - }); - fetch(`https://gateway.marvel.com/v1/public/characters?ts=${this.state.timestamp}&apikey=${this.state.marvelapikey}&hash=${this.state.marvelapihash}&limit=100&offset=400`) - .then(response => response.json()) - .then(res => { - //console.log(res.data.results) - list = list.concat(res.data.results) - console.log(this.state.marvelCharacters) - }); - fetch(`https://gateway.marvel.com/v1/public/characters?ts=${this.state.timestamp}&apikey=${this.state.marvelapikey}&hash=${this.state.marvelapihash}&limit=100&offset=500`) - .then(response => response.json()) - .then(res => { - //console.log(res.data.results) - list = list.concat(res.data.results) - console.log(this.state.marvelCharacters) - }); - fetch(`https://gateway.marvel.com/v1/public/characters?ts=${this.state.timestamp}&apikey=${this.state.marvelapikey}&hash=${this.state.marvelapihash}&limit=100&offset=600`) - .then(response => response.json()) - .then(res => { - //console.log(res.data.results) - list = list.concat(res.data.results) - console.log(this.state.marvelCharacters) - }); - fetch(`https://gateway.marvel.com/v1/public/characters?ts=${this.state.timestamp}&apikey=${this.state.marvelapikey}&hash=${this.state.marvelapihash}&limit=100&offset=700`) - .then(response => response.json()) - .then(res => { - //console.log(res.data.results) - list = list.concat(res.data.results) - console.log(this.state.marvelCharacters) - }); - fetch(`https://gateway.marvel.com/v1/public/characters?ts=${this.state.timestamp}&apikey=${this.state.marvelapikey}&hash=${this.state.marvelapihash}&limit=100&offset=800`) - .then(response => response.json()) - .then(res => { - //console.log(res.data.results) - list = list.concat(res.data.results) - console.log(this.state.marvelCharacters) - }); - fetch(`https://gateway.marvel.com/v1/public/characters?ts=${this.state.timestamp}&apikey=${this.state.marvelapikey}&hash=${this.state.marvelapihash}&limit=100&offset=900`) - .then(response => response.json()) - .then(res => { - //console.log(res.data.results) - list = list.concat(res.data.results) - console.log(this.state.marvelCharacters) - }); - fetch(`https://gateway.marvel.com/v1/public/characters?ts=${this.state.timestamp}&apikey=${this.state.marvelapikey}&hash=${this.state.marvelapihash}&limit=100&offset=1000`) - .then(response => response.json()) - .then(res => { - //console.log(res.data.results) - list = list.concat(res.data.results) - console.log(this.state.marvelCharacters) - }); - fetch(`https://gateway.marvel.com/v1/public/characters?ts=${this.state.timestamp}&apikey=${this.state.marvelapikey}&hash=${this.state.marvelapihash}&limit=100&offset=1100`) - .then(response => response.json()) - .then(res => { - //console.log(res.data.results) - list = list.concat(res.data.results) - console.log("LIST>>>",list) - this.setState({ - marvelCharacters : list, - list : list , - loading : false - }) - console.log(this.state.marvelCharacters) - }); - } - - searchNameHandler = (e) => { - if(e.value < 1) - return - let searchString = e.target.value - let list = this.state.marvelCharacters.filter((ch)=>ch.name.includes(searchString)) +import React, { Component } from 'react'; +import { Navbar, Nav, NavItem, Container } from 'react-bootstrap'; +import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'; +import CharactersPage from './components/CharactersPage'; +import SeriesPage from './components/SeriesPage'; +import './App.css'; - this.setState({ - searchValue: e.target.value, - list : list - }) - - } - - render(){ - let content = []; - if(this.state.loading){ - content =
- }else if(this.state.list.length > 0){ - content = this.state.list.map((character)=>{ - return ( - - - - {character.name} - - - - - - ) - }) - } - - return( -
- - -
- - - Search - - this.searchNameHandler(e)} - value={this.state.searchValue} - placeholder="Search Your Fav Character" - aria-describedby="inputGroup-sizing-sm" /> - -
- - - {content} - -
-

Made with ♥

+class App extends Component { + state = {}; + + componentDidMount() {} + + render() { + return ( +
+ + + + + Marvel Universe + + + + + +

Welcome to Marvel Universe!

+ + + + + + + + +
+

Made with ♥

 +
- ) + ); } - - - - - } export default App; diff --git a/src/components/CharactersPage.css b/src/components/CharactersPage.css new file mode 100644 index 0000000..37e41ea --- /dev/null +++ b/src/components/CharactersPage.css @@ -0,0 +1,18 @@ +.searchBar { + margin-top: 20px; + width: 100%; + text-align: center; +} + +.Scrollable { + max-height: 80vh !important; + text-align: center; + overflow-y: auto; +} +.Scrollable { + -ms-overflow-style: none; + scrollbar-width: none; +} +.Scrollable::-webkit-scrollbar { + display: none; +} diff --git a/src/components/CharactersPage.js b/src/components/CharactersPage.js new file mode 100644 index 0000000..9fc5bd7 --- /dev/null +++ b/src/components/CharactersPage.js @@ -0,0 +1,90 @@ +import React, { Component, Fragment } from 'react'; +import { Row, InputGroup, FormControl } from 'react-bootstrap'; + +import getCharacters from '../utils/getCharacters'; +import DisplayCard from './DisplayCard'; +import './CharactersPage.css'; + +class CharactersPage extends Component { + state = { + marvelCharacters: [], + loading: true, + searchValue: '' + }; + + async componentDidMount() { + this.toggleLoader(true); + await this.fetchInit(); + this.toggleLoader(false); + } + + toggleLoader = active => { + this.setState({ loading: active }); + }; + + fetchInit = async () => { + this.toggleLoader(true); + const characterList = await getCharacters(); + this.toggleLoader(false); + this.setState({ marvelCharacters: characterList }); + }; + + handleSearchValueChange = e => { + this.setState({ searchValue: e.target.value }); + }; + + filter = () => { + const { marvelCharacters, searchValue } = this.state; + return searchValue.length === 0 + ? marvelCharacters + : marvelCharacters.filter(char => char && char.name && char.name.toLowerCase().includes(this.state.searchValue.toLowerCase())); + }; + + renderCards() { + const { marvelCharacters } = this.state; + if (marvelCharacters.length === 0) return []; + const filteredList = this.filter(); + return filteredList.map((character, i) => { + return ; + }); + } + + renderLoader() { + const { loading } = this.state; + if (!loading) return null; + return ( +
+
+
+ ); + } + + render() { + return ( + + +
+ + + Search + + this.handleSearchValueChange(e)} + value={this.state.searchValue} + placeholder="Search Your Fav Character" + aria-describedby="inputGroup-sizing-sm" + /> + +
+ + + {this.renderLoader()} + {this.state.marvelCharacters.length > 0 && this.renderCards()} + + + ); + } +} + +export default CharactersPage; diff --git a/src/components/DisplayCard.js b/src/components/DisplayCard.js new file mode 100644 index 0000000..e857a81 --- /dev/null +++ b/src/components/DisplayCard.js @@ -0,0 +1,28 @@ +import React, { Component } from 'react'; +import { Card } from 'react-bootstrap'; + +class DisplayCard extends Component { + render() { + const { item } = this.props; + if (!item) return null; + + const { thumbnail, name} = this.props.item; + if (!thumbnail) return null; + + return ( + + + + {name} + + + + ); + } +} + +export default DisplayCard; diff --git a/src/components/SeriesPage.css b/src/components/SeriesPage.css new file mode 100644 index 0000000..37e41ea --- /dev/null +++ b/src/components/SeriesPage.css @@ -0,0 +1,18 @@ +.searchBar { + margin-top: 20px; + width: 100%; + text-align: center; +} + +.Scrollable { + max-height: 80vh !important; + text-align: center; + overflow-y: auto; +} +.Scrollable { + -ms-overflow-style: none; + scrollbar-width: none; +} +.Scrollable::-webkit-scrollbar { + display: none; +} diff --git a/src/components/SeriesPage.js b/src/components/SeriesPage.js new file mode 100644 index 0000000..eb3120a --- /dev/null +++ b/src/components/SeriesPage.js @@ -0,0 +1,90 @@ +import React, { Component, Fragment } from 'react'; +import { Row, InputGroup, FormControl } from 'react-bootstrap'; + +import getSeries from '../utils/getSeries'; +import DisplayCard from './DisplayCard'; +import './SeriesPage.css'; + +class SeriesPage extends Component { + state = { + marvelSeries: [], + loading: true, + searchValue: '' + }; + + async componentDidMount() { + this.toggleLoader(true); + await this.fetchInit(); + this.toggleLoader(false); + } + + toggleLoader = active => { + this.setState({ loading: active }); + }; + + fetchInit = async () => { + this.toggleLoader(true); + const seriesList = await getSeries(); + this.toggleLoader(false); + this.setState({ marvelSeries: seriesList }); + }; + + handleSearchValueChange = e => { + this.setState({ searchValue: e.target.value }); + }; + + filter = () => { + const { marvelSeries, searchValue } = this.state; + return searchValue.length === 0 + ? marvelSeries + : marvelSeries.filter(char => char && char.name && char.name.toLowerCase().includes(this.state.searchValue.toLowerCase())); + }; + + renderCards() { + const { marvelSeries } = this.state; + if (marvelSeries.length === 0) return []; + const filteredList = this.filter(); + return filteredList.map((character, i) => { + return ; + }); + } + + renderLoader() { + const { loading } = this.state; + if (!loading) return null; + return ( +
+
+
+ ); + } + + render() { + return ( + + +
+ + + Search + + this.handleSearchValueChange(e)} + value={this.state.searchValue} + placeholder="Search Your Fav Series" + aria-describedby="inputGroup-sizing-sm" + /> + +
+ + + {this.renderLoader()} + {this.state.marvelSeries.length > 0 && this.renderCards()} + + + ); + } +} + +export default SeriesPage; diff --git a/src/config.js b/src/config.js new file mode 100644 index 0000000..cc360eb --- /dev/null +++ b/src/config.js @@ -0,0 +1,2 @@ +export const marvelapikey = "3a6bbe839d07c15e01996061acd6a121"; +export const marvelapihash = "ac4ce3232a11197ececb965dcc3799d1"; \ No newline at end of file diff --git a/src/index.js b/src/index.js index 87d1be5..ec986d0 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; +import 'bootstrap/dist/css/bootstrap.min.css'; ReactDOM.render(, document.getElementById('root')); diff --git a/src/utils/getCharacters.js b/src/utils/getCharacters.js new file mode 100644 index 0000000..1bb055e --- /dev/null +++ b/src/utils/getCharacters.js @@ -0,0 +1,20 @@ +import { + marvelapikey, + marvelapihash +} from '../config'; + +export default async () => { + let list = [] + // for (let i = 0; i <= 1100; i += 100) { + for (let i = 0; i <= 0; i += 100) { + const characterList = await fetchCharacters(i); + list = [list, ...characterList]; + } + return list; +} + +const fetchCharacters = async (offset) => { + const response = await fetch(`https://gateway.marvel.com/v1/public/characters?ts=1&apikey=${marvelapikey}&hash=${marvelapihash}&limit=100${offset ? `&offset=${offset}`: ''}`); + const { data } = await response.json(); + return data.results; +} \ No newline at end of file diff --git a/src/utils/getSeries.js b/src/utils/getSeries.js new file mode 100644 index 0000000..70e1c06 --- /dev/null +++ b/src/utils/getSeries.js @@ -0,0 +1,23 @@ +import { + marvelapikey, + marvelapihash +} from '../config'; + +export default async () => { + let list = [] + // for (let i = 0; i <= 1100; i += 100) { + for (let i = 0; i <= 0; i += 100) { + const seriesList = await fetchSeries(i); + list = [list, ...seriesList]; + } + console.log(list); + return list; +} + +const fetchSeries = async (offset) => { + const response = await fetch(`https://gateway.marvel.com/v1/public/series?ts=1&apikey=${marvelapikey}&hash=${marvelapihash}&limit=100${offset ? `&offset=${offset}`: ''}`); + const { data } = await response.json(); + return data.results; +} + +// https://gateway.marvel.com/v1/public/characters?ts=1&apikey=3a6bbe839d07c15e01996061acd6a121&hash=ac4ce3232a11197ececb965dcc3799d1&limit=100 \ No newline at end of file