feat: new design for change flag setting

vycdev · Jul 12, 2020 · 3df9b27 · 3df9b27
1 parent 54e43e5
commit 3df9b27
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 32 deletions.
diff --git a/packages/web/src/components/profilePage/profilePage.tsx b/packages/web/src/components/profilePage/profilePage.tsx
@@ -15,7 +15,8 @@ import {
     LogoutSwitchThemeWrapper,
     LogoutSwitchButton,
     Description,
-    SubmitMessage
+    SubmitMessage,
+    Select
 } from "./style";
 
 export const ProfilePage = () => {
@@ -36,6 +37,7 @@ export const ProfilePage = () => {
     });
     const [editDescription, setEditDescription] = useState(false);
     const [descriptionEditorValue, setDescriptionEditorValue] = useState("");
+    const [changeFlagEditor, setchangeFlagEditor] = useState(false);
 
     const submitMessageRef = useRef(null);
 
@@ -57,7 +59,6 @@ export const ProfilePage = () => {
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
         getUserGames(userId);
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        setDefaultDescriptionEditorValue();
     }, [userData?.data?.country, userData?.data?.xp]);
 
     const updateCountryList = async () => {
@@ -101,10 +102,6 @@ export const ProfilePage = () => {
         });
     };
 
-    const setDefaultDescriptionEditorValue = () => {
-        setDescriptionEditorValue(userData?.data?.description);
-    };
-
     const getUserPBS = async (id: string) => {
         const result = await (
             await fetch(`${apiUrl}/users/userpbs/${id}`, {
@@ -248,6 +245,49 @@ export const ProfilePage = () => {
                     </GeneralStatistics>
                 </ProfileName>
                 <LogoutSwitchThemeWrapper>
+                    {changeFlagEditor ? (
+                        <Select
+                            name="countryCode"
+                            onChange={e => {
+                                setCountryValue(e.target.value);
+                            }}
+                        >
+                            {countryList}
+                        </Select>
+                    ) : (
+                        ""
+                    )}
+                    <LogoutSwitchButton
+                        onClick={async () => {
+                            if (!changeFlagEditor) {
+                                setchangeFlagEditor(true);
+                            } else {
+                                await (
+                                    await fetch(
+                                        `${apiUrl}/users/updateCountry`,
+                                        {
+                                            method: "POST",
+                                            credentials: "include",
+                                            headers: {
+                                                "Content-Type":
+                                                    "application/json"
+                                            },
+                                            body: JSON.stringify({
+                                                country: countryValue
+                                            })
+                                        }
+                                    )
+                                ).text();
+                                updateCountryFlagUrl();
+                                updateUserData();
+                                setchangeFlagEditor(false);
+                            }
+                        }}
+                    >
+                        {changeFlagEditor
+                            ? `Submit ${countryValue}`
+                            : "Change Flag"}
+                    </LogoutSwitchButton>
                     <LogoutSwitchButton
                         onClick={async () => {
                             await fetch(`${apiUrl}/auth/logout`, {
@@ -314,32 +354,6 @@ export const ProfilePage = () => {
                         </div>
                     )}
                 </Description>
-                <button
-                    onClick={async () => {
-                        await (
-                            await fetch(`${apiUrl}/users/updateCountry`, {
-                                method: "POST",
-                                credentials: "include",
-                                headers: {
-                                    "Content-Type": "application/json"
-                                },
-                                body: JSON.stringify({ country: countryValue })
-                            })
-                        ).text();
-                        updateCountryFlagUrl();
-                        updateUserData();
-                    }}
-                >
-                    UpdateCountry to {countryValue}
-                </button>
-                <select
-                    name="countryCode"
-                    onChange={e => {
-                        setCountryValue(e.target.value);
-                    }}
-                >
-                    {countryList}
-                </select>
                 <button
                     onClick={() => {
                         console.log(getUrlUserId());

diff --git a/packages/web/src/components/profilePage/style.tsx b/packages/web/src/components/profilePage/style.tsx
@@ -99,3 +99,7 @@ export const SubmitMessage = styled.div`
     color: ${theme.status.negative};
     font-size: 10px;
 `;
+
+export const Select = styled.select`
+    width: 200px;
+`;