feat: added working name and flag to profile + some working settings

vycdev · Jul 12, 2020 · 14c057d · 14c057d
1 parent 9bb5d49
commit 14c057d
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 11 deletions.
diff --git a/packages/web/src/components/common/navbar/navBar.tsx b/packages/web/src/components/common/navbar/navBar.tsx
@@ -46,7 +46,11 @@ export const Navbar = () => {
                         onClick={async () => {
                             isLoggedFunc();
                         }}
-                        to={isLogged ? "/profile" : "/loginregister/login"}
+                        to={
+                            isLogged
+                                ? `/profile/${localStorage.getItem("userid")}`
+                                : "/loginregister/login"
+                        }
                     >
                         {isLogged ? "Profile" : "Login"}
                     </Link>

diff --git a/packages/web/src/components/loginPage/loginPage.tsx b/packages/web/src/components/loginPage/loginPage.tsx
@@ -105,7 +105,7 @@ const RegiserForm = () => {
             statusDiv.current.innerHTML =
                 "Geolocation is not supported by this browser.";
         }
-        return "";
+        return "us";
     };
 
     const checkRegisterFields = (): boolean => {

diff --git a/packages/web/src/components/profilePage/profilePage.tsx b/packages/web/src/components/profilePage/profilePage.tsx
@@ -1,10 +1,91 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 
 import { apiUrl } from "../../utils/constants";
 
-import { Wrapper, InsideWrapper } from "./style";
+import { Wrapper, InsideWrapper, ProfileName, FlagImage } from "./style";
 
 export const ProfilePage = () => {
+    const [userId, setUserId] = useState(localStorage.getItem("userid"));
+    const [countryList, setCountryList] = useState(
+        <option key={"default"}>Loading...</option>
+    );
+    const [countryValue, setCountryValue] = useState("AF");
+    const [userData, setUserData] = useState({});
+    const [countryFlagUrl, setCountryFlagUrl] = useState(
+        "https://restcountries.eu/data/usa.svg"
+    );
+
+    useEffect(() => {
+        updateCountryList();
+        updateUserId();
+        updateUserData();
+        updateCountryFlagUrl();
+    }, [userData?.data?.country]);
+
+    const updateCountryList = async () => {
+        setCountryList(await generateCountryOptions());
+    };
+
+    const updateUserData = async () => {
+        setUserData(await getUserData(userId));
+    };
+
+    const updateUserId = async () => {
+        setUserId(localStorage.getItem("userid"));
+    };
+
+    const updateCountryFlagUrl = async () => {
+        setCountryFlagUrl(await getCountryUrlFlag());
+    };
+
+    const getCountryUrlFlag = async () => {
+        const data = await (
+            await fetch(
+                `https://restcountries.eu/rest/v2/alpha/${userData?.data?.country}`,
+                {
+                    method: "GET"
+                }
+            )
+        ).json();
+
+        return data.flag;
+    };
+
+    const getUserData = async (id: string) => {
+        const userData = await fetch(`${apiUrl}/users/userData/${id}`, {
+            method: "GET",
+            credentials: "include",
+            headers: {
+                "Content-Type": "application/json"
+            }
+        });
+
+        return await userData.json();
+    };
+
+    const generateCountryOptions = async () => {
+        const data = await (
+            await fetch("https://restcountries.eu/rest/v2", {
+                method: "GET"
+            })
+        ).json();
+
+        const generated = data.map((value, index) => {
+            return (
+                <option key={index + value.alpha2Code} value={value.alpha2Code}>
+                    {value.name}
+                </option>
+            );
+        });
+
+        return generated;
+    };
+
+    const getUrlUserId = () => {
+        return location.hash.split("/")[location.hash.split("/").length - 1];
+    };
+
     const switchTheme = () => {
         const currentTheme = localStorage.getItem("theme");
         if (currentTheme === "light") {
@@ -18,6 +99,10 @@ export const ProfilePage = () => {
     return (
         <Wrapper>
             <InsideWrapper>
+                <ProfileName>
+                    <FlagImage src={countryFlagUrl}></FlagImage>
+                    {userData?.data?.name}
+                </ProfileName>
                 <button
                     onClick={async () => {
                         await fetch(`${apiUrl}/auth/logout`, {
@@ -41,22 +126,38 @@ export const ProfilePage = () => {
                 </button>
                 <button
                     onClick={async () => {
-                        const updateCountry = await (
+                        await (
                             await fetch(`${apiUrl}/users/updateCountry`, {
                                 method: "POST",
                                 credentials: "include",
                                 headers: {
                                     "Content-Type": "application/json"
                                 },
-                                body: JSON.stringify({ country: "Ly" })
+                                body: JSON.stringify({ country: countryValue })
                             })
                         ).text();
-
-                        console.log(updateCountry);
+                        updateCountryFlagUrl();
+                        updateUserData();
+                    }}
+                >
+                    UpdateCountry to {countryValue}
+                </button>
+                <button
+                    onClick={() => {
+                        console.log(getUrlUserId());
                     }}
                 >
-                    UpdateCountry to Ro
+                    Log user id from url
                 </button>
+                <select
+                    name="countryCode"
+                    onChange={e => {
+                        setCountryValue(e.target.value);
+                    }}
+                >
+                    {countryList}
+                </select>
+                <img />
             </InsideWrapper>
         </Wrapper>
     );

diff --git a/packages/web/src/components/profilePage/style.tsx b/packages/web/src/components/profilePage/style.tsx
@@ -7,9 +7,21 @@ export const Wrapper = styled.div`
     border-left: 1px solid ${theme.background.secondary};
     border-right: 1px solid ${theme.background.secondary};
     width: 80%;
-    height: 100%;
+    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;
+`;
diff --git a/packages/web/src/index.tsx b/packages/web/src/index.tsx
@@ -35,7 +35,7 @@ const App = () => {
                             <Route exact path="/stats">
                                 <StatisticsPage />
                             </Route>
-                            <Route exact path="/profile">
+                            <Route exact path="/profile/:id">
                                 <ProfilePage />
                             </Route>
                             <Route path="/loginregister">