feat: generals statistics now working

vycdev · Jul 12, 2020 · eb052fb · eb052fb
1 parent c237a62
commit eb052fb
Show file tree

Hide file tree

Showing 2 changed files with 145 additions and 13 deletions.
diff --git a/packages/web/src/components/profilePage/profilePage.tsx b/packages/web/src/components/profilePage/profilePage.tsx
@@ -2,7 +2,17 @@ import React, { useEffect, useState } from "react";
 
 import { apiUrl } from "../../utils/constants";
 
-import { Wrapper, InsideWrapper, ProfileName, FlagImage } from "./style";
+import {
+    Wrapper,
+    InsideWrapper,
+    ProfileName,
+    FlagImage,
+    Name,
+    FlagNameGroup,
+    UnderName,
+    GeneralStatistics,
+    Statistics
+} from "./style";
 
 export const ProfilePage = () => {
     const [userId, setUserId] = useState(localStorage.getItem("userid"));
@@ -14,6 +24,12 @@ export const ProfilePage = () => {
     const [countryFlagUrl, setCountryFlagUrl] = useState(
         "https://restcountries.eu/data/usa.svg"
     );
+    const [level, setLevel] = useState(0);
+    const [bestScore, setBestScore] = useState(0);
+    const [gameGeneralStats, setGameGeneralStats] = useState({
+        averageAccuracy: 0,
+        averageWpm: 0
+    });
 
     useEffect(() => {
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -24,7 +40,13 @@ export const ProfilePage = () => {
         updateUserData();
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
         updateCountryFlagUrl();
-    }, [userData?.data?.country]);
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        updateLevel();
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        updateBestScore();
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        updateGeneralStats();
+    }, [userData?.data?.country, userData?.data?.xp]);
 
     const updateCountryList = async () => {
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -46,6 +68,69 @@ export const ProfilePage = () => {
         setCountryFlagUrl(await getCountryUrlFlag());
     };
 
+    const updateLevel = () => {
+        setLevel(Math.sqrt(userData?.data?.exp / 10));
+    };
+
+    const updateBestScore = async () => {
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        const userPBS = await getUserPBS(userId);
+
+        setBestScore(userPBS[userPBS.length - 1]?.wpm);
+    };
+
+    const updateGeneralStats = async () => {
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        const generalStats = await getUserGameStats(userId);
+
+        setGameGeneralStats({
+            averageAccuracy: generalStats?.averageAccuracy,
+            averageWpm: generalStats?.averageWPM
+        });
+    };
+
+    const getUserPBS = async (id: string) => {
+        const result = await (
+            await fetch(`${apiUrl}/users/userpbs/${id}`, {
+                method: "GET",
+                credentials: "include",
+                headers: {
+                    "Content-Type": "application/json"
+                }
+            })
+        ).json();
+
+        return await result;
+    };
+
+    const getUserGames = async (id: string) => {
+        const result = await (
+            await fetch(`${apiUrl}/users/usergames/${id}`, {
+                method: "GET",
+                credentials: "include",
+                headers: {
+                    "Content-Type": "application/json"
+                }
+            })
+        ).json();
+
+        return await result;
+    };
+
+    const getUserGameStats = async (id: string) => {
+        const result = await (
+            await fetch(`${apiUrl}/users/usergamestats/${id}`, {
+                method: "GET",
+                credentials: "include",
+                headers: {
+                    "Content-Type": "application/json"
+                }
+            })
+        ).json();
+
+        return await result;
+    };
+
     const getCountryUrlFlag = async () => {
         const data = await (
             await fetch(
@@ -107,8 +192,25 @@ export const ProfilePage = () => {
         <Wrapper>
             <InsideWrapper>
                 <ProfileName>
-                    <FlagImage src={countryFlagUrl}></FlagImage>
-                    {userData?.data?.name}
+                    <FlagNameGroup>
+                        <FlagImage src={countryFlagUrl}></FlagImage>
+                        <Name>{userData?.data?.name}</Name>
+                    </FlagNameGroup>
+
+                    <GeneralStatistics>
+                        <UnderName>
+                            {userData?.data?.role.charAt(0).toUpperCase() +
+                                userData?.data?.role.slice(1)}{" "}
+                            Level: {level}
+                        </UnderName>
+
+                        <Statistics>
+                            Best Score: {bestScore} Average WPM:{" "}
+                            {gameGeneralStats.averageWpm} Average Accuracy:{" "}
+                            {gameGeneralStats.averageAccuracy} Total Tests
+                            Taken: {userData?.data?.totaltests}
+                        </Statistics>
+                    </GeneralStatistics>
                 </ProfileName>
                 <button
                     onClick={async () => {
@@ -149,13 +251,6 @@ export const ProfilePage = () => {
                 >
                     UpdateCountry to {countryValue}
                 </button>
-                <button
-                    onClick={() => {
-                        console.log(getUrlUserId());
-                    }}
-                >
-                    Log user id from url
-                </button>
                 <select
                     name="countryCode"
                     onChange={e => {
@@ -164,7 +259,15 @@ export const ProfilePage = () => {
                 >
                     {countryList}
                 </select>
-                <img />
+                <button
+                    onClick={() => {
+                        console.log(getUrlUserId());
+                        console.log(userData);
+                        console.log(level);
+                    }}
+                >
+                    Test State
+                </button>
             </InsideWrapper>
         </Wrapper>
     );

diff --git a/packages/web/src/components/profilePage/style.tsx b/packages/web/src/components/profilePage/style.tsx
@@ -10,18 +10,47 @@ export const Wrapper = styled.div`
     min-height: 100vh;
     margin: auto;
 `;
+
 export const InsideWrapper = styled.div`
     padding: 30px;
 `;
 
 export const ProfileName = styled.div`
     color: ${theme.text.primary};
-    font-size: 48px;
     font-style: italic;
     font-family: "Verdana";
     padding-bottom: 20px;
 `;
+
 export const FlagImage = styled.img`
     max-height: 24px;
     margin-right: 10px;
 `;
+
+export const Name = styled.div`
+    font-size: 48px;
+    margin-top: -24px;
+`;
+
+export const UnderName = styled.div`
+    font-size: 15px;
+    white-space: nowrap;
+`;
+
+export const FlagNameGroup = styled.div`
+    display: inline-flex;
+    height: 48px;
+`;
+
+export const Statistics = styled.div`
+    text-align: right;
+    width: 100%;
+`;
+
+export const GeneralStatistics = styled.div`
+    font-size: 15px;
+    border-bottom: 1px dashed ${theme.background.secondary};
+    padding: 5px;
+    display: inline-flex;
+    width: 100%;
+`;