[RSO] Start retrieving recent matches

Began implementation of how to fetch to Riot endpoint to retrieve array
of recent match ids of a player that logged in via RSO.

Author: luoh00

src/web/src/App.tsx

@@ -157,16 +157,12 @@ function App() {
         axios.get(`/rso/getUserInfo/${RSOAccessToken}`).then((res) => {
           setGameName(res.data.gameName);
           setTagLine(res.data.tagLine);
-          console.log("App.tsx ran getUserInfo correctly");
-          console.log("We set gameName to: ", gameName);
-          console.log("We set tagLine to: ", tagLine);
+          // Making this postBody object instead of directly passing into axios.post as second arg works
+          const postBody = {gameName: res.data.gameName, tagLine: res.data.tagLine};
+          axios.post('/rso/getPuuid', postBody).then((resp) => {
+            setPuuid(resp.data.puuid);
+          }).catch((error) => {return error; })
         }).catch((error) => { return error; }) // .get.then.catch avoids async and await
-
-        // 400 bad request by below code, but endpoint def works on postman? 
-        // Since the puuid from above isn't decryptable
-        axios.post('/rso/getPuuid', {gameName: gameName, tagline: tagLine}).then((res) => {
-          setPuuid(res.data.puuid);
-        }).catch((error) => {return error; })
       }
    }, [accessToken, refreshToken, RSOAccessToken, RSORefreshToken]);
 

src/web/src/Pages/user/RiotProfile.tsx

@@ -5,6 +5,22 @@ import { Layout } from '../../Components'
 const RiotProfile = () => {
   const Auth = useContext(AuthContext);
   const [loading, setLoading] = useState(true);
+  const [matchIds, setMatchIds] = useState<string[]>([]);
+
+  const fetchData = async () => {
+    const region = "na";
+    const res = await fetch(`https://${region}.api.riotgames.com/val/match/v1/matchlists/by-puuid/${Auth?.puuid}`, {
+      method: 'GET',
+      headers: {
+        // Use an API key that actually allows fetching to this endpoint
+        'X-Riot-Token': process.env.RIOT_DEVELOPER_API_KEY || ""
+      }
+    });
+    const resJson = await res.json();
+    const newArray = resJson.data.map((matchObj:any) => matchObj.matchId);
+    setMatchIds([...matchIds, ...newArray ])
+    // use /val/match/v1/matches/{matchId} to get more in depth details of each match
+  }
 
   useEffect(() => {
     // Check if signed in via RSO
@@ -14,6 +30,7 @@ const RiotProfile = () => {
     }
 
     setLoading(false);
+    fetchData();
   }, [Auth])
 
   if (loading)
@@ -27,8 +44,8 @@ const RiotProfile = () => {
         <div className={'flex flex-row m-2 space-x-4'}>
           <img className={'rounded-full w-16 h-16'}
                src={`https://ui-avatars.com/api/?background=random&color=fff&name=${Auth?.gameName}`}/>
-          <div>{'overview'}</div>
-          <div>{'matches'}</div>
+          <div>{'Overview'}</div>
+          <div>{'Recent matches'}</div>
           <div>{`info: ${Auth?.gameName}#${Auth?.tagLine} ${Auth?.puuid}`}</div>
         </div>
         <div className={'animate-pulse'}>