From ff7c42f80c2a78b5a70ecab0f60e80726bf394d3 Mon Sep 17 00:00:00 2001 From: Kevin Lu <18564130+KevinLu@users.noreply.github.com> Date: Sat, 7 Nov 2020 21:43:25 -0500 Subject: [PATCH 01/20] Use encodeURI to generate urls --- backend/services/generateRiotAPIUrl.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/backend/services/generateRiotAPIUrl.js b/backend/services/generateRiotAPIUrl.js index c79bd48..6c13cdd 100644 --- a/backend/services/generateRiotAPIUrl.js +++ b/backend/services/generateRiotAPIUrl.js @@ -12,7 +12,7 @@ const generateRiotAPIUrl = (region, summonerName) => { regions.set('LAN', 'LA1'); regions.set('LAS', 'LA2'); - return `https://${regions.get(region)}.api.riotgames.com/lol/summoner/v4/summoners/by-name/${summonerName}?api_key=${key.riotAPI}`; + return encodeURI(`https://${regions.get(region)}.api.riotgames.com/lol/summoner/v4/summoners/by-name/${summonerName}?api_key=${key.riotAPI}`); } module.exports = generateRiotAPIUrl \ No newline at end of file From b69e5bf95ac0b4c1aa210671e708076feb89eaa5 Mon Sep 17 00:00:00 2001 From: Kevin Lu <18564130+KevinLu@users.noreply.github.com> Date: Sat, 7 Nov 2020 21:43:37 -0500 Subject: [PATCH 02/20] Implement summonerIcon --- frontend/package-lock.json | 144 ++++++------------------ frontend/package.json | 3 + frontend/src/components/SummonerCard.js | 16 ++- 3 files changed, 51 insertions(+), 112 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 4c4e585..7845241 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -2994,6 +2994,14 @@ "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz", "integrity": "sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA==" }, + "@types/http-proxy": { + "version": "1.17.4", + "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.4.tgz", + "integrity": "sha512-IrSHl2u6AWXduUaDLqYpt45tLVCtYv7o4Z0s1KghBCDgIIS9oW5K1H8mZG/A2CfeLdEa7rTd1ACOiHBc1EMT2Q==", + "requires": { + "@types/node": "*" + } + }, "@types/istanbul-lib-coverage": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz", @@ -3806,6 +3814,14 @@ "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.0.2.tgz", "integrity": "sha512-arU1h31OGFu+LPrOLGZ7nB45v940NMDMEJeNmbutu57P+UFDVnkZg3e+J1I2HJRZ9hT7gO8J91dn/PMrAiKakA==" }, + "axios": { + "version": "0.21.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz", + "integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==", + "requires": { + "follow-redirects": "^1.10.0" + } + }, "axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -8101,116 +8117,15 @@ } }, "http-proxy-middleware": { - "version": "0.19.1", - "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz", - "integrity": "sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==", + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-1.0.6.tgz", + "integrity": "sha512-NyL6ZB6cVni7pl+/IT2W0ni5ME00xR0sN27AQZZrpKn1b+qRh+mLbBxIq9Cq1oGfmTc7BUq4HB77mxwCaxAYNg==", "requires": { - "http-proxy": "^1.17.0", - "is-glob": "^4.0.0", - "lodash": "^4.17.11", - "micromatch": "^3.1.10" - }, - "dependencies": { - "braces": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz", - "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==", - "requires": { - "arr-flatten": "^1.1.0", - "array-unique": "^0.3.2", - "extend-shallow": "^2.0.1", - "fill-range": "^4.0.0", - "isobject": "^3.0.1", - "repeat-element": "^1.1.2", - "snapdragon": "^0.8.1", - "snapdragon-node": "^2.0.1", - "split-string": "^3.0.2", - "to-regex": "^3.0.1" - }, - "dependencies": { - "extend-shallow": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", - "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "requires": { - "is-extendable": "^0.1.0" - } - } - } - }, - "fill-range": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz", - "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=", - "requires": { - "extend-shallow": "^2.0.1", - "is-number": "^3.0.0", - "repeat-string": "^1.6.1", - "to-regex-range": "^2.1.0" - }, - "dependencies": { - "extend-shallow": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", - "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "requires": { - "is-extendable": "^0.1.0" - } - } - } - }, - "is-number": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz", - "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=", - "requires": { - "kind-of": "^3.0.2" - }, - "dependencies": { - "kind-of": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", - "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "requires": { - "is-buffer": "^1.1.5" - } - } - } - }, - "kind-of": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", - "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==" - }, - "micromatch": { - "version": "3.1.10", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz", - "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==", - "requires": { - "arr-diff": "^4.0.0", - "array-unique": "^0.3.2", - "braces": "^2.3.1", - "define-property": "^2.0.2", - "extend-shallow": "^3.0.2", - "extglob": "^2.0.4", - "fragment-cache": "^0.2.1", - "kind-of": "^6.0.2", - "nanomatch": "^1.2.9", - "object.pick": "^1.3.0", - "regex-not": "^1.0.0", - "snapdragon": "^0.8.1", - "to-regex": "^3.0.2" - } - }, - "to-regex-range": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz", - "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=", - "requires": { - "is-number": "^3.0.0", - "repeat-string": "^1.6.1" - } - } + "@types/http-proxy": "^1.17.4", + "http-proxy": "^1.18.1", + "is-glob": "^4.0.1", + "lodash": "^4.17.20", + "micromatch": "^4.0.2" } }, "http-signature": { @@ -16942,6 +16857,17 @@ } } }, + "http-proxy-middleware": { + "version": "0.19.1", + "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz", + "integrity": "sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==", + "requires": { + "http-proxy": "^1.17.0", + "is-glob": "^4.0.0", + "lodash": "^4.17.11", + "micromatch": "^3.1.10" + } + }, "import-local": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index abc19fa..e27f01d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -2,13 +2,16 @@ "name": "frontend", "version": "0.1.0", "private": true, + "proxy": "http://localhost:5000/", "dependencies": { "@chakra-ui/core": "next", "@chakra-ui/icons": "^1.0.0-next.3", "@testing-library/jest-dom": "^5.11.5", "@testing-library/react": "^11.1.1", "@testing-library/user-event": "^12.2.0", + "axios": "^0.21.0", "framer-motion": "^2.9.4", + "http-proxy-middleware": "^1.0.6", "react": "^17.0.1", "react-dom": "^17.0.1", "react-router-dom": "^5.2.0", diff --git a/frontend/src/components/SummonerCard.js b/frontend/src/components/SummonerCard.js index d73a501..c5e3aa6 100644 --- a/frontend/src/components/SummonerCard.js +++ b/frontend/src/components/SummonerCard.js @@ -2,13 +2,21 @@ import React, {useState} from 'react'; import {useColorMode} from "@chakra-ui/core"; import {Flex, Text, Input, Image} from "@chakra-ui/core"; import Default_icon from "../img/default_icon.jpg"; +import Axios from "axios"; function SummonerCard(props) { const {colorMode} = useColorMode(); + const [value, setValue] = React.useState(""); + const handleChange = (event) => setValue(event.target.value); const [Blurred, setBlurred] = useState(null); + const [SummonerIcon, setSummonerIcon] = useState(Default_icon); - if (Blurred) { - // TODO: call API to retrieve summoner icon + if (Blurred && value !== "") { + Axios.get(`/api/summonerIcon?region=NA&summonerName=${value}`) + .then((response) => { + console.log(response.data); + setSummonerIcon(response.data.data); + }); } return ( @@ -25,8 +33,10 @@ function SummonerCard(props) { alignItems="center"> {props.alt} {props.laneType} - Summoner icon + Summoner icon {setBlurred(false);}} onBlur={() => {setBlurred(true);}} fontWeight="600" From 0e22777dffff5afada797d9bdff893dc12b66d8e Mon Sep 17 00:00:00 2001 From: Kevin Lu <18564130+KevinLu@users.noreply.github.com> Date: Sat, 7 Nov 2020 22:13:48 -0500 Subject: [PATCH 03/20] Add toast and error state for summonerIcon --- backend/routes/api.js | 13 ++++++++----- frontend/src/components/SummonerCard.js | 21 +++++++++++++++++---- 2 files changed, 25 insertions(+), 9 deletions(-) diff --git a/backend/routes/api.js b/backend/routes/api.js index e49f154..cef1b92 100644 --- a/backend/routes/api.js +++ b/backend/routes/api.js @@ -22,11 +22,14 @@ router.get('/summonerIcon', async (req, res) => { const url = generateRiotAPIUrl(req.query.region, req.query.summonerName); console.log(url); - const response = await Axios.get(url); - const iconId = response.data.profileIconId; - const iconURL = "http://ddragon.leagueoflegends.com/cdn/10.22.1/img/profileicon/" + iconId + ".png"; - - return res.status(200).json({success: true, data: iconURL}); + try { + const response = await Axios.get(url); + const iconId = response.data.profileIconId; + const iconURL = "http://ddragon.leagueoflegends.com/cdn/10.22.1/img/profileicon/" + iconId + ".png"; + return res.status(200).json({success: true, data: iconURL}); + } catch (error) { + return res.status(200).json({success: false, data: "Summoner name does not exist."}); + } }); module.exports = router; \ No newline at end of file diff --git a/frontend/src/components/SummonerCard.js b/frontend/src/components/SummonerCard.js index c5e3aa6..1d08050 100644 --- a/frontend/src/components/SummonerCard.js +++ b/frontend/src/components/SummonerCard.js @@ -1,21 +1,34 @@ import React, {useState} from 'react'; import {useColorMode} from "@chakra-ui/core"; -import {Flex, Text, Input, Image} from "@chakra-ui/core"; +import {Flex, Text, Input, Image, useToast} from "@chakra-ui/core"; import Default_icon from "../img/default_icon.jpg"; import Axios from "axios"; function SummonerCard(props) { + const toast = useToast(); const {colorMode} = useColorMode(); const [value, setValue] = React.useState(""); + const [oldValue, setOldValue] = React.useState(""); const handleChange = (event) => setValue(event.target.value); const [Blurred, setBlurred] = useState(null); const [SummonerIcon, setSummonerIcon] = useState(Default_icon); - if (Blurred && value !== "") { + if (Blurred && value !== "" && value !== oldValue) { Axios.get(`/api/summonerIcon?region=NA&summonerName=${value}`) .then((response) => { console.log(response.data); - setSummonerIcon(response.data.data); + if (response.data.success) { + setSummonerIcon(response.data.data); + } else { + toast({ + title: "Summoner not found.", + description: "We can't find a summoner by that name.", + status: "error", + duration: 9000, + isClosable: true, + }); + setSummonerIcon(Default_icon); + } }); } @@ -37,7 +50,7 @@ function SummonerCard(props) { {setBlurred(false);}} + onFocus={() => {setBlurred(false); setOldValue(value);}} onBlur={() => {setBlurred(true);}} fontWeight="600" fontSize="1.25em" From de4eb5ef820950e02482ea0a6b628a5878159653 Mon Sep 17 00:00:00 2001 From: Kevin Lu <18564130+KevinLu@users.noreply.github.com> Date: Sun, 8 Nov 2020 11:09:45 -0500 Subject: [PATCH 04/20] Add region --- frontend/package-lock.json | 32 +++++ frontend/package.json | 1 + frontend/src/components/SummonerCard.js | 2 +- frontend/src/views/HomePage.js | 174 ++++++++++++++++-------- 4 files changed, 155 insertions(+), 54 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 7845241..4e04f63 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -7477,6 +7477,33 @@ "mime-types": "^2.1.12" } }, + "formik": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.3.tgz", + "integrity": "sha512-5zHCvxMvC/9AmzQgMi5kVmdOLCXz+PRWmzf82sqcA+dXI460G5QoykXuDdM84XfdHxmRQZ554VG2MOzEyoSo7g==", + "requires": { + "deepmerge": "^2.1.1", + "hoist-non-react-statics": "^3.3.0", + "lodash": "^4.17.14", + "lodash-es": "^4.17.14", + "react-fast-compare": "^2.0.1", + "scheduler": "^0.20.1", + "tiny-warning": "^1.0.2", + "tslib": "^1.10.0" + }, + "dependencies": { + "deepmerge": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz", + "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==" + }, + "react-fast-compare": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", + "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" + } + } + }, "forwarded": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", @@ -10508,6 +10535,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz", "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==" }, + "lodash-es": { + "version": "4.17.15", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz", + "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==" + }, "lodash._reinterpolate": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index e27f01d..82c065f 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -10,6 +10,7 @@ "@testing-library/react": "^11.1.1", "@testing-library/user-event": "^12.2.0", "axios": "^0.21.0", + "formik": "^2.2.3", "framer-motion": "^2.9.4", "http-proxy-middleware": "^1.0.6", "react": "^17.0.1", diff --git a/frontend/src/components/SummonerCard.js b/frontend/src/components/SummonerCard.js index 1d08050..e995880 100644 --- a/frontend/src/components/SummonerCard.js +++ b/frontend/src/components/SummonerCard.js @@ -14,7 +14,7 @@ function SummonerCard(props) { const [SummonerIcon, setSummonerIcon] = useState(Default_icon); if (Blurred && value !== "" && value !== oldValue) { - Axios.get(`/api/summonerIcon?region=NA&summonerName=${value}`) + Axios.get(`/api/summonerIcon?region=${props.region}&summonerName=${value}`) .then((response) => { console.log(response.data); if (response.data.success) { diff --git a/frontend/src/views/HomePage.js b/frontend/src/views/HomePage.js index f4176f5..439393c 100644 --- a/frontend/src/views/HomePage.js +++ b/frontend/src/views/HomePage.js @@ -1,5 +1,16 @@ -import React from 'react'; -import {Box, Button, Flex, Text, Select} from "@chakra-ui/core"; +import React, {useState} from 'react'; +import { + Box, + Button, + Flex, + Text, + Select, + FormControl, + FormLabel, + FormErrorMessage, + FormHelperText +} from "@chakra-ui/core"; +import {Formik, field} from 'formik'; import {ArrowForwardIcon} from '@chakra-ui/icons'; import Top_icon from "../img/Top_icon.webp"; import Middle_icon from "../img/Middle_icon.webp"; @@ -9,61 +20,118 @@ import Jungle_icon from "../img/Jungle_icon.webp"; import SummonerCard from "../components/SummonerCard"; function HomePage() { + const [selectedRegion, setSelectedRegion] = useState("NA"); + const handleRegionChange = (event) => setSelectedRegion(event.target.value); + const [topSummoner, setTopSummoner] = useState(null); + const [jungleSummoner, setJungleSummoner] = useState(null); + const [midSummoner, setMidSummoner] = useState(null); + const [botSummoner, setBotSummoner] = useState(null); + const [supportSummoner, setSupportSummoner] = useState(null); + const handleTopChange = (event) => setTopSummoner(event.target.value); + const handleJungleChange = (event) => setJungleSummoner(event.target.value); + const handleMidChange = (event) => setMidSummoner(event.target.value); + const handleBotChange = (event) => setBotSummoner(event.target.value); + const handleSupportChange = (event) => setSupportSummoner(event.target.value); + return ( - - - I want to play: - - + { + + }} + > + {(props) => ( + +
+ + + My region is: + + + + + I want to play: + + + + + I want to beat: + + - - I want to beat: - - + + + + + + + - - - - - - - + + + - - - - +
+ + )} + ); } From 4995258ebbbe68f25ea727c85ef8d48d4a37fbde Mon Sep 17 00:00:00 2001 From: Kevin Lu <18564130+KevinLu@users.noreply.github.com> Date: Sun, 8 Nov 2020 12:27:39 -0500 Subject: [PATCH 05/20] Remove summonericon feature --- backend/services/champIdToName.js | 1 - frontend/package-lock.json | 34 +++++++ frontend/package.json | 3 +- frontend/src/components/SummonerCard.js | 48 +++++---- frontend/src/views/HomePage.js | 125 +++++++++++++++--------- 5 files changed, 139 insertions(+), 72 deletions(-) diff --git a/backend/services/champIdToName.js b/backend/services/champIdToName.js index e254e5e..708185c 100644 --- a/backend/services/champIdToName.js +++ b/backend/services/champIdToName.js @@ -1,4 +1,3 @@ -const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; const Axios = require('axios'); const champIdToName = async (champId) => { diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 4e04f63..73a8320 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -7318,6 +7318,11 @@ } } }, + "fn-name": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/fn-name/-/fn-name-3.0.0.tgz", + "integrity": "sha512-eNMNr5exLoavuAMhIUVsOKF79SWd/zG104ef6sxBTSw+cZc6BXdQXDvYcGvp0VbxVVSp1XDUNoz7mg1xMtSznA==" + }, "focus-lock": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.7.0.tgz", @@ -12967,6 +12972,11 @@ "react-is": "^16.8.1" } }, + "property-expr": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.4.tgz", + "integrity": "sha512-sFPkHQjVKheDNnPvotjQmm3KD3uk1fWKUN7CrpdbwmUx3CrG3QiM8QpTSimvig5vTXmTvjz7+TDvXOI9+4rkcg==" + }, "proxy-addr": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz", @@ -15345,6 +15355,11 @@ "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==" }, + "synchronous-promise": { + "version": "2.0.15", + "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.15.tgz", + "integrity": "sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg==" + }, "table": { "version": "5.4.6", "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz", @@ -15679,6 +15694,11 @@ "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz", "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==" }, + "toposort": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz", + "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=" + }, "tough-cookie": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-3.0.1.tgz", @@ -17645,6 +17665,20 @@ "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==" } } + }, + "yup": { + "version": "0.29.3", + "resolved": "https://registry.npmjs.org/yup/-/yup-0.29.3.tgz", + "integrity": "sha512-RNUGiZ/sQ37CkhzKFoedkeMfJM0vNQyaz+wRZJzxdKE7VfDeVKH8bb4rr7XhRLbHJz5hSjoDNwMEIaKhuMZ8gQ==", + "requires": { + "@babel/runtime": "^7.10.5", + "fn-name": "~3.0.0", + "lodash": "^4.17.15", + "lodash-es": "^4.17.11", + "property-expr": "^2.0.2", + "synchronous-promise": "^2.0.13", + "toposort": "^2.0.2" + } } } } diff --git a/frontend/package.json b/frontend/package.json index 82c065f..4a4bf5f 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -17,7 +17,8 @@ "react-dom": "^17.0.1", "react-router-dom": "^5.2.0", "react-scripts": "4.0.0", - "web-vitals": "^0.2.4" + "web-vitals": "^0.2.4", + "yup": "^0.29.3" }, "scripts": { "start": "react-scripts start", diff --git a/frontend/src/components/SummonerCard.js b/frontend/src/components/SummonerCard.js index e995880..34e4194 100644 --- a/frontend/src/components/SummonerCard.js +++ b/frontend/src/components/SummonerCard.js @@ -7,30 +7,28 @@ import Axios from "axios"; function SummonerCard(props) { const toast = useToast(); const {colorMode} = useColorMode(); - const [value, setValue] = React.useState(""); - const [oldValue, setOldValue] = React.useState(""); - const handleChange = (event) => setValue(event.target.value); + const [oldValue, setOldValue] = useState(""); const [Blurred, setBlurred] = useState(null); const [SummonerIcon, setSummonerIcon] = useState(Default_icon); - if (Blurred && value !== "" && value !== oldValue) { - Axios.get(`/api/summonerIcon?region=${props.region}&summonerName=${value}`) - .then((response) => { - console.log(response.data); - if (response.data.success) { - setSummonerIcon(response.data.data); - } else { - toast({ - title: "Summoner not found.", - description: "We can't find a summoner by that name.", - status: "error", - duration: 9000, - isClosable: true, - }); - setSummonerIcon(Default_icon); - } - }); - } + // if (Blurred && props.value !== "" && props.value !== oldValue) { + // Axios.get(`/api/summonerIcon?region=${props.region}&summonerName=${props.value}`) + // .then((response) => { + // console.log(response.data); + // if (response.data.success) { + // setSummonerIcon(response.data.data); + // } else { + // toast({ + // title: "Summoner not found.", + // description: "We can't find a summoner by that name.", + // status: "error", + // duration: 9000, + // isClosable: true, + // }); + // setSummonerIcon(Default_icon); + // } + // }); + // } return ( {props.alt} {props.laneType} - Summoner icon + {/* Summoner icon */} {setBlurred(false); setOldValue(value);}} + value={props.value} + onChange={props.onChange} + onFocus={() => {setBlurred(false); setOldValue(props.value);}} onBlur={() => {setBlurred(true);}} fontWeight="600" fontSize="1.25em" diff --git a/frontend/src/views/HomePage.js b/frontend/src/views/HomePage.js index 439393c..510b8e6 100644 --- a/frontend/src/views/HomePage.js +++ b/frontend/src/views/HomePage.js @@ -10,7 +10,8 @@ import { FormErrorMessage, FormHelperText } from "@chakra-ui/core"; -import {Formik, field} from 'formik'; +import {Formik, Field} from 'formik'; +import * as Yup from 'yup'; import {ArrowForwardIcon} from '@chakra-ui/icons'; import Top_icon from "../img/Top_icon.webp"; import Middle_icon from "../img/Middle_icon.webp"; @@ -22,12 +23,12 @@ import SummonerCard from "../components/SummonerCard"; function HomePage() { const [selectedRegion, setSelectedRegion] = useState("NA"); const handleRegionChange = (event) => setSelectedRegion(event.target.value); - const [topSummoner, setTopSummoner] = useState(null); - const [jungleSummoner, setJungleSummoner] = useState(null); - const [midSummoner, setMidSummoner] = useState(null); - const [botSummoner, setBotSummoner] = useState(null); - const [supportSummoner, setSupportSummoner] = useState(null); - const handleTopChange = (event) => setTopSummoner(event.target.value); + const [topSummoner, setTopSummoner] = useState(""); + const [jungleSummoner, setJungleSummoner] = useState(""); + const [midSummoner, setMidSummoner] = useState(""); + const [botSummoner, setBotSummoner] = useState(""); + const [supportSummoner, setSupportSummoner] = useState(""); + const handleTopChange = (event) => {setTopSummoner(event.target.value);} const handleJungleChange = (event) => setJungleSummoner(event.target.value); const handleMidChange = (event) => setMidSummoner(event.target.value); const handleBotChange = (event) => setBotSummoner(event.target.value); @@ -35,55 +36,83 @@ function HomePage() { return ( { + initialValues={{ + region: "NA", + myPlaystyle: "", + topSummoner: "", + jungleSummoner: "", + midSummoner: "", + botSummoner: "", + supportSummoner: "" + }} + validationSchema={Yup.object().shape({ + region: Yup.string().required('Select a region'), + myPlaystyle: Yup.string().required('Select your playstyle') + })} + onSubmit={(values, {setSubmitting}) => { + setTimeout(() => { + const dataToSubmit = { + region: values.region, + myPlaystyle: values.myPlaystyle, + topSummoner: topSummoner, + jungleSummoner: jungleSummoner, + midSummoner: midSummoner, + botSummoner: botSummoner, + supportSummoner: supportSummoner + }; + console.log(dataToSubmit); + setSubmitting(false); + }, 100); }} > {(props) => ( -
- + My region is: - + + {({field, form}) => ( + + + {form.errors.region} + + )} + I want to play: - - - - - I want to beat: - + + {({field, form}) => ( + + + {form.errors.myPlaystyle} + + )} + @@ -95,24 +124,28 @@ function HomePage() { alt="Top Lane Icon" laneType="Top" /> + + + + + + + + + + + + + + + + + + + + + + + + +
)} From b55daefac90dbdbf369a485c0f078509934a1d57 Mon Sep 17 00:00:00 2001 From: Michael Le Date: Sun, 8 Nov 2020 12:57:37 -0500 Subject: [PATCH 07/20] batch championList --- backend/routes/api.js | 31 +++++++++++++++++++++++-------- backend/services/findChampions.js | 1 - 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/backend/routes/api.js b/backend/routes/api.js index b1d503e..f456a19 100644 --- a/backend/routes/api.js +++ b/backend/routes/api.js @@ -34,15 +34,30 @@ router.get('/testingChampName', async (req, res) => { return res.status(200).json({success: true, data: name}); }); -router.get('/championList', async (req, res) => { +router.post('/championList', async (req, res) => { try { - console.log(req.query.championType); - const summonerData = await getSummonerData(req.query.region, req.query.summonerName); - const accountId = summonerData.accountId; - const id = summonerData.id; - const data = await findChampions(req.query.region, id, accountId, req.query.matchHistoryWeight, req.query.masteryPointWeight, req.query.championType, req.query.playerRole); - console.log(data); - return res.status(200).json({success: true, data: data}); + const summoners = req.body.summoners; + let ret = []; + for (const summoner in summoners) { + const summonerData = await getSummonerData(req.body.region, summoners[summoner]); + const accountId = summonerData.accountId; + const id = summonerData.id; + let playerRole; + if (summoner == "topSummoner") { + playerRole = "Top"; + } else if (summoner == "jungleSummoner") { + playerRole = "Jungle"; + } else if (summoner == "midSummoner") { + playerRole = "Middle"; + } else if (summoner == "BottomSummoner") { + playerRole = "Bottom"; + } else { + playerRole = "Support"; + } + const data = await findChampions(req.body.region, id, accountId, 1, 1, req.body.myPlaystyle, playerRole); + ret.push(data); + } + return res.status(200).json({success: true, data: ret}); } catch (error) { return res.status(200).json({success: false, data: "error"}); } diff --git a/backend/services/findChampions.js b/backend/services/findChampions.js index 88ff663..dcf4474 100644 --- a/backend/services/findChampions.js +++ b/backend/services/findChampions.js @@ -99,7 +99,6 @@ const SPLITPUSH_CHAMPIONS = { const findChampions = async (region, id, accountId, matchHistoryWeight, masteryPointWeight, championType, playerRole) => { let data; - console.log(playerRole); if (championType == "ENGAGE") { data = ENGAGE_CHAMPIONS; } else if (championType == "DISENGAGE") { From 7a47cff375d8fa559ff3ef108e6d41b3c170aa28 Mon Sep 17 00:00:00 2001 From: Kevin Lu <18564130+KevinLu@users.noreply.github.com> Date: Sun, 8 Nov 2020 13:04:38 -0500 Subject: [PATCH 08/20] Only get summoner icon when you click find comps --- backend/routes/api.js | 5 +- frontend/src/components/SummonerCard.js | 52 ++-- frontend/src/views/HomePage.js | 323 +++++++++++------------- 3 files changed, 183 insertions(+), 197 deletions(-) diff --git a/backend/routes/api.js b/backend/routes/api.js index 73ab98e..292b236 100644 --- a/backend/routes/api.js +++ b/backend/routes/api.js @@ -53,11 +53,12 @@ router.get('/championIcon', async (req, res) => { const iconURL = "http://ddragon.leagueoflegends.com/cdn/10.22.1/img/champion/" + req.query.championName + ".png"; return res.status(200).json({success: true, data: iconURL}); } catch (error) { - return res.status(200).json({success: false, data: "Champion name does not exist."}); - }Summon + return res.status(200).json({success: false, data: "Summoner name does not exist."}); + } }); router.get('/summonerIcon', async (req, res) => { + const url = generateRiotAPIUrl(req.query.region, req.query.summonerName); try { const response = await Axios.get(url); const iconId = response.data.profileIconId; diff --git a/frontend/src/components/SummonerCard.js b/frontend/src/components/SummonerCard.js index 34e4194..7f45153 100644 --- a/frontend/src/components/SummonerCard.js +++ b/frontend/src/components/SummonerCard.js @@ -5,30 +5,31 @@ import Default_icon from "../img/default_icon.jpg"; import Axios from "axios"; function SummonerCard(props) { - const toast = useToast(); + //const toast = useToast(); const {colorMode} = useColorMode(); - const [oldValue, setOldValue] = useState(""); - const [Blurred, setBlurred] = useState(null); + //const [oldValue, setOldValue] = useState(""); + //const [Blurred, setBlurred] = useState(null); const [SummonerIcon, setSummonerIcon] = useState(Default_icon); - // if (Blurred && props.value !== "" && props.value !== oldValue) { - // Axios.get(`/api/summonerIcon?region=${props.region}&summonerName=${props.value}`) - // .then((response) => { - // console.log(response.data); - // if (response.data.success) { - // setSummonerIcon(response.data.data); - // } else { - // toast({ - // title: "Summoner not found.", - // description: "We can't find a summoner by that name.", - // status: "error", - // duration: 9000, - // isClosable: true, - // }); - // setSummonerIcon(Default_icon); - // } - // }); - // } + if (props.submitted) { + console.log(props.value); + Axios.get(`/api/summonerIcon?region=${props.region}&summonerName=${props.value}`) + .then((response) => { + console.log(response.data); + if (response.data.success) { + setSummonerIcon(response.data.data); + } else { + // toast({ + // title: "Summoner not found.", + // description: "We can't find a summoner by that name.", + // status: "error", + // duration: 9000, + // isClosable: true, + // }); + setSummonerIcon(Default_icon); + } + }); + } return ( {props.alt} {props.laneType} - {/* Summoner icon */} + Summoner icon {setBlurred(false); setOldValue(props.value);}} - onBlur={() => {setBlurred(true);}} + // onFocus={() => {setBlurred(false); oldValue = props.value;}} + // onBlur={() => {setBlurred(true);}} fontWeight="600" fontSize="1.25em" width="120px" textAlign="center" - variant="flushed" + variant={props.submitted ? "filled" : "flushed"} placeholder="Summoner" /> ); diff --git a/frontend/src/views/HomePage.js b/frontend/src/views/HomePage.js index 1cc056d..d923d61 100644 --- a/frontend/src/views/HomePage.js +++ b/frontend/src/views/HomePage.js @@ -5,10 +5,7 @@ import { Flex, Text, Select, - FormControl, - FormLabel, - FormErrorMessage, - FormHelperText + FormControl } from "@chakra-ui/core"; import {Formik, Field} from 'formik'; import * as Yup from 'yup'; @@ -34,180 +31,166 @@ function HomePage() { const handleMidChange = (event) => setMidSummoner(event.target.value); const handleBotChange = (event) => setBotSummoner(event.target.value); const handleSupportChange = (event) => setSupportSummoner(event.target.value); + const [CompsFound, setCompsFound] = useState(false); return ( - { - setTimeout(() => { - const dataToSubmit = { - region: values.region, - myPlaystyle: values.myPlaystyle, - topSummoner: topSummoner, - jungleSummoner: jungleSummoner, - midSummoner: midSummoner, - botSummoner: botSummoner, - supportSummoner: supportSummoner - }; - console.log(dataToSubmit); - setSubmitting(false); - }, 100); + + { + setTimeout(() => { + const dataToSubmit = { + region: values.region, + myPlaystyle: values.myPlaystyle, + summoners: { + topSummoner: topSummoner, + jungleSummoner: jungleSummoner, + midSummoner: midSummoner, + botSummoner: botSummoner, + supportSummoner: supportSummoner + } + }; + console.log(dataToSubmit); + setCompsFound(true); + setSubmitting(false); + }, 100); + }} + > + {(props) => ( + +
+ + My region is: + + {({field, form}) => ( + + + {form.errors.region} + + )} + + - }} - > - {(props) => ( - - - - My region is: - - {({field, form}) => ( - - - {form.errors.region} - - )} - - + + I want to play: + + {({field, form}) => ( + + + {form.errors.myPlaystyle} + + )} + + - - I want to play: - - {({field, form}) => ( - - - {form.errors.myPlaystyle} - - )} - - + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + )} +
- - - - - - - - + {CompsFound ? + + + + + + + + : <> + } - - - )} - + ); } From 2c239ea7a26fa4267d15bdcd5f1479aab2897379 Mon Sep 17 00:00:00 2001 From: Michael Le Date: Sun, 8 Nov 2020 13:37:27 -0500 Subject: [PATCH 09/20] Update api.js --- backend/routes/api.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/backend/routes/api.js b/backend/routes/api.js index f456a19..cf5063d 100644 --- a/backend/routes/api.js +++ b/backend/routes/api.js @@ -10,6 +10,7 @@ const rankMatchHistory = require('../services/rankMatchHistory'); const championRankings = require('../services/championRankings'); const champIdToName = require('../services/champIdToName'); const findChampions = require('../services/findChampions'); +const { json } = require('express'); router.get('/', (req, res) => { return res.status(200).json({success: true, msg: "NICE"}); @@ -49,15 +50,26 @@ router.post('/championList', async (req, res) => { playerRole = "Jungle"; } else if (summoner == "midSummoner") { playerRole = "Middle"; - } else if (summoner == "BottomSummoner") { + } else if (summoner == "botSummoner") { playerRole = "Bottom"; } else { playerRole = "Support"; } + console.log(playerRole); const data = await findChampions(req.body.region, id, accountId, 1, 1, req.body.myPlaystyle, playerRole); ret.push(data); } - return res.status(200).json({success: true, data: ret}); + + let real = []; + for (let i = 0; i < 3; i++) { + let item = []; + for (let j = 0; j < 5; j++) { + item.push(ret[j][i]); + } + real.push(item); + } + + return res.status(200).json({success: true, data: real, old: ret}); } catch (error) { return res.status(200).json({success: false, data: "error"}); } From e3d0348e2611c097ca23b544345de30e0f288fda Mon Sep 17 00:00:00 2001 From: Kevin Lu <18564130+KevinLu@users.noreply.github.com> Date: Sun, 8 Nov 2020 13:49:20 -0500 Subject: [PATCH 10/20] It works --- frontend/src/components/ChampionCard.js | 6 +- frontend/src/components/Header.js | 2 +- frontend/src/components/SummonerCard.js | 4 +- frontend/src/views/HomePage.js | 244 +++++++++++++----------- 4 files changed, 139 insertions(+), 117 deletions(-) diff --git a/frontend/src/components/ChampionCard.js b/frontend/src/components/ChampionCard.js index 35804c7..5d50ed0 100644 --- a/frontend/src/components/ChampionCard.js +++ b/frontend/src/components/ChampionCard.js @@ -9,7 +9,8 @@ function ChampionCard(props) { const {colorMode} = useColorMode(); const [ChampionIcon, setChampionIcon] = useState(Default_icon); - Axios.get(`/api/championIcon?championName=${props.championName}`) + if (props.championName !== null) { + Axios.get(`/api/championIcon?championName=${props.championName}`) .then((response) => { console.log(response.data); if (response.data.success) { @@ -25,6 +26,9 @@ function ChampionCard(props) { setChampionIcon(Default_icon); } }); + } else { + + } return ( Logo - Clash Team Builder + COMP.GG diff --git a/frontend/src/components/SummonerCard.js b/frontend/src/components/SummonerCard.js index 7f45153..fb02f82 100644 --- a/frontend/src/components/SummonerCard.js +++ b/frontend/src/components/SummonerCard.js @@ -17,7 +17,9 @@ function SummonerCard(props) { .then((response) => { console.log(response.data); if (response.data.success) { - setSummonerIcon(response.data.data); + if (SummonerIcon !== Default_icon) { + setSummonerIcon(response.data.data); + } } else { // toast({ // title: "Summoner not found.", diff --git a/frontend/src/views/HomePage.js b/frontend/src/views/HomePage.js index d923d61..1bb9e7d 100644 --- a/frontend/src/views/HomePage.js +++ b/frontend/src/views/HomePage.js @@ -5,7 +5,8 @@ import { Flex, Text, Select, - FormControl + FormControl, + Divider } from "@chakra-ui/core"; import {Formik, Field} from 'formik'; import * as Yup from 'yup'; @@ -17,6 +18,7 @@ import Support_icon from "../img/Support_icon.webp"; import Jungle_icon from "../img/Jungle_icon.webp"; import SummonerCard from "../components/SummonerCard"; import ChampionCard from "../components/ChampionCard"; +import Axios from 'axios'; function HomePage() { const [selectedRegion, setSelectedRegion] = useState("NA"); @@ -32,6 +34,7 @@ function HomePage() { const handleBotChange = (event) => setBotSummoner(event.target.value); const handleSupportChange = (event) => setSupportSummoner(event.target.value); const [CompsFound, setCompsFound] = useState(false); + const [Comps, setComps] = useState([]); return ( @@ -63,134 +66,147 @@ function HomePage() { } }; console.log(dataToSubmit); - setCompsFound(true); + Axios.post('/api/championList', dataToSubmit) + .then((response) => { + if (response.data.success) { + console.log(response.data.data); + setCompsFound(true); + setComps(response.data.data); + } else { + console.log(response.data); + } + }); setSubmitting(false); }, 100); }} > {(props) => ( - -
- - My region is: - - {({field, form}) => ( - - - {form.errors.region} - - )} - - - - I want to play: - - {({field, form}) => ( - - - {form.errors.myPlaystyle} - - )} - - + + + My region is: + + {({field, form}) => ( + + + {form.errors.region} + + )} + + - - - - - - - + + I want to play: + + {({field, form}) => ( + + + {form.errors.myPlaystyle} + + )} + + + + + + + + + + - - - -
+ + )} {CompsFound ? - - - - - - - - : <> + (Comps.map((lane, index) => { + return ( + + + {lane.map((champion, i) => { + return ( + + ); + })} + + + + ); + })) + + : <> } - + ); } From 028b67806a32dc49667f55de12acf09544d87476 Mon Sep 17 00:00:00 2001 From: zalsaigh <60819371+zalsaigh@users.noreply.github.com> Date: Sun, 8 Nov 2020 14:29:00 -0500 Subject: [PATCH 11/20] Made some bugfixes + Implemented MonkeyKing Workaround --- backend/config/dev_keys.js | 2 +- backend/routes/api.js | 5 ++++- backend/services/findChampions.js | 18 +++++++++--------- frontend/src/components/SummonerCard.js | 4 ++-- 4 files changed, 16 insertions(+), 13 deletions(-) diff --git a/backend/config/dev_keys.js b/backend/config/dev_keys.js index de1678d..fd0a0b7 100644 --- a/backend/config/dev_keys.js +++ b/backend/config/dev_keys.js @@ -1,3 +1,3 @@ module.exports = { - riotAPI: 'RGAPI-ffdec1d6-9142-44e1-a371-2ec5b86d7bf5', + riotAPI: 'RGAPI-5f2bbb87-a39e-4105-9611-b375dfa0bcb0', }; diff --git a/backend/routes/api.js b/backend/routes/api.js index a079c72..8534b2a 100644 --- a/backend/routes/api.js +++ b/backend/routes/api.js @@ -77,7 +77,10 @@ router.post('/championList', async (req, res) => { router.get('/championIcon', async (req, res) => { try { - const iconURL = "http://ddragon.leagueoflegends.com/cdn/10.22.1/img/champion/" + req.query.championName + ".png"; + let iconURL = "http://ddragon.leagueoflegends.com/cdn/10.22.1/img/champion/" + req.query.championName + ".png"; + if (req.query.championName === "Wukong") { + iconURL = "http://ddragon.leagueoflegends.com/cdn/10.22.1/img/champion/MonkeyKing.png" + } return res.status(200).json({success: true, data: iconURL}); } catch (error) { return res.status(200).json({success: false, data: "Summoner name does not exist."}); diff --git a/backend/services/findChampions.js b/backend/services/findChampions.js index 731c48f..b98dda3 100644 --- a/backend/services/findChampions.js +++ b/backend/services/findChampions.js @@ -21,15 +21,15 @@ const ENGAGE_CHAMPIONS = { } const DISENGAGE_CHAMPIONS = { -"Top": ["Singed","Karma","Malphite","Maokai","Rumble","Poppy","Shen","Lulu","Ornn"], -"Jungle": ["Nunu","Amumu","Rammus","Trundle","JarvanIV","Skarner","Poppy","Gragas","Shen","Volibear","Sejuani","Zac", - "Ivern","Sett"], -"Middle": ["Kayle","Ryze","Karthus","Chogath","Anivia","Corki","Veigar","Orianna","Cassiopeia","Heimerdinger","Malzahar", - "Viktor","Ziggs","Azir","Galio","TwistedFate","Morgana","Zilean","Karma","Malphite","Lux","Xerath","Ahri", - "Lulu","Lissandra","Syndra","AurelionSol","Velkoz","Neeko"], -"Bottom": ["Ashe","Veigar","Swain","Heimerdinger","Ezreal","Varus","Syndra","Senna","Tristana","Draven","Kaisa", - "Jinx","Lucian","Kalista","Xayah"], -"Support": ["Soraka","Morgana","Zilean","Sona","Janna","Karma","Taric","Lux","Lulu","Nami","Yuumi","Bard","Rakan"] + 'Top': ["Singed","Karma","Malphite","Maokai","Rumble","Poppy","Shen","Lulu","Ornn"], + 'Jungle': ["Nunu","Amumu","Rammus","Trundle","JarvanIV","Skarner","Poppy","Gragas","Shen","Volibear","Sejuani","Zac", + "Ivern","Sett"], + 'Middle': ["Kayle","Ryze","Karthus","Chogath","Anivia","Corki","Veigar","Orianna","Cassiopeia","Heimerdinger","Malzahar", + "Viktor","Ziggs","Azir","Galio","TwistedFate","Morgana","Zilean","Karma","Malphite","Lux","Xerath","Ahri", + "Lulu","Lissandra","Syndra","AurelionSol","Velkoz","Neeko"], + 'Bottom': ["Ashe","Veigar","Swain","Heimerdinger","Ezreal","Varus","Syndra","Senna","Tristana","Draven","Kaisa", + "Jinx","Lucian","Kalista","Xayah"], + 'Support': ["Soraka","Morgana","Zilean","Sona","Janna","Karma","Taric","Lux","Lulu","Nami","Yuumi","Bard","Rakan"] } const POKE_AND_SIEGE_CHAMPIONS = { diff --git a/frontend/src/components/SummonerCard.js b/frontend/src/components/SummonerCard.js index fb02f82..ad1ea63 100644 --- a/frontend/src/components/SummonerCard.js +++ b/frontend/src/components/SummonerCard.js @@ -17,7 +17,7 @@ function SummonerCard(props) { .then((response) => { console.log(response.data); if (response.data.success) { - if (SummonerIcon !== Default_icon) { + if (SummonerIcon === Default_icon) { setSummonerIcon(response.data.data); } } else { @@ -28,7 +28,7 @@ function SummonerCard(props) { // duration: 9000, // isClosable: true, // }); - setSummonerIcon(Default_icon); + // setSummonerIcon(Default_icon); } }); } From f45c45bd2877d8eddeca293dfa1e528cd33249da Mon Sep 17 00:00:00 2001 From: Kevin Lu <18564130+KevinLu@users.noreply.github.com> Date: Sun, 8 Nov 2020 14:56:25 -0500 Subject: [PATCH 12/20] Final push --- frontend/src/components/ChampionCard.js | 4 ++-- frontend/src/components/Header.js | 2 +- frontend/src/views/HomePage.js | 14 ++++++++++---- 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/ChampionCard.js b/frontend/src/components/ChampionCard.js index 5d50ed0..e660ca1 100644 --- a/frontend/src/components/ChampionCard.js +++ b/frontend/src/components/ChampionCard.js @@ -27,7 +27,7 @@ function ChampionCard(props) { } }); } else { - + } return ( @@ -44,7 +44,7 @@ function ChampionCard(props) { alignItems="center"> Champion Icon - {props.championName} + {props.championName ? props.championName : `Play more games to calculate.`} ); diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js index 7fdbd89..c63e74e 100644 --- a/frontend/src/components/Header.js +++ b/frontend/src/components/Header.js @@ -6,7 +6,7 @@ import {MoonIcon, SunIcon} from '@chakra-ui/icons' import Clash_Crest_icon from '../img/Clash_Crest_icon.webp'; const headerStyle = { - padding: '2% 5%', + padding: '1% 5%', }; function Header() { diff --git a/frontend/src/views/HomePage.js b/frontend/src/views/HomePage.js index 1bb9e7d..25aed8d 100644 --- a/frontend/src/views/HomePage.js +++ b/frontend/src/views/HomePage.js @@ -6,7 +6,8 @@ import { Text, Select, FormControl, - Divider + Divider, + Progress } from "@chakra-ui/core"; import {Formik, Field} from 'formik'; import * as Yup from 'yup'; @@ -35,9 +36,10 @@ function HomePage() { const handleSupportChange = (event) => setSupportSummoner(event.target.value); const [CompsFound, setCompsFound] = useState(false); const [Comps, setComps] = useState([]); + const [Loading, setLoading] = useState(false); return ( - + { + setLoading(true); setTimeout(() => { const dataToSubmit = { region: values.region, @@ -72,11 +75,12 @@ function HomePage() { console.log(response.data.data); setCompsFound(true); setComps(response.data.data); + setSubmitting(false); + setLoading(false); } else { console.log(response.data); } }); - setSubmitting(false); }, 100); }} > @@ -118,7 +122,7 @@ function HomePage() { {setBlurred(false); oldValue = props.value;}} - // onBlur={() => {setBlurred(true);}} - fontWeight="600" - fontSize="1.25em" - width="120px" - textAlign="center" - variant={props.submitted ? "filled" : "flushed"} - placeholder="Summoner" /> + {props.submitted || props.isSubmitting ? + {props.value} : updateSummonerIcon(props.value)} + fontWeight="600" + fontSize="1.25em" + width="120px" + textAlign="center" + variant={props.submitted ? "filled" : "flushed"} + placeholder="Summoner" /> + } ); } diff --git a/frontend/src/views/HomePage.js b/frontend/src/views/HomePage.js index 25aed8d..a9e4851 100644 --- a/frontend/src/views/HomePage.js +++ b/frontend/src/views/HomePage.js @@ -3,6 +3,7 @@ import { Box, Button, Flex, + SimpleGrid, Text, Select, FormControl, @@ -36,7 +37,6 @@ function HomePage() { const handleSupportChange = (event) => setSupportSummoner(event.target.value); const [CompsFound, setCompsFound] = useState(false); const [Comps, setComps] = useState([]); - const [Loading, setLoading] = useState(false); return ( @@ -55,7 +55,6 @@ function HomePage() { myPlaystyle: Yup.string().required('Select your playstyle') })} onSubmit={(values, {setSubmitting}) => { - setLoading(true); setTimeout(() => { const dataToSubmit = { region: values.region, @@ -76,7 +75,6 @@ function HomePage() { setCompsFound(true); setComps(response.data.data); setSubmitting(false); - setLoading(false); } else { console.log(response.data); } @@ -133,8 +131,9 @@ function HomePage() { - + - +