Merge pull request #228 from So-Fan/SD-559-change-display-name-settin…

…gs-page change display
So-Fan · Sep 26, 2023 · ea063e0 · ea063e0
2 parents c48e66d + efa4ed8
commit ea063e0
Show file tree

Hide file tree

Showing 6 changed files with 258 additions and 20 deletions.
diff --git a/client/src/Components/Button/Button.css b/client/src/Components/Button/Button.css
@@ -20,6 +20,106 @@
 .button-active-props:active{
 transform: scale(0.8);
 }
+@keyframes lds-ripple {
+    0% {
+      top: 36px;
+      left: 36px;
+      width: 0;
+      height: 0;
+      opacity: 0;
+    }
+    4.9% {
+      top: 36px;
+      left: 36px;
+      width: 0;
+      height: 0;
+      opacity: 0;
+    }
+    5% {
+      top: 36px;
+      left: 36px;
+      width: 0;
+      height: 0;
+      opacity: 1;
+    }
+    100% {
+      top: 0px;
+      left: 0px;
+      width: 72px;
+      height: 72px;
+      opacity: 0;
+    }
+  }
+  .lds-ellipsis {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+  }
+  .lds-ellipsis div {
+    position: absolute;
+    top: 33px;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: white;
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+  }
+  .lds-ellipsis-settings-page {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+    z-index: 231;
+  }
+  .lds-ellipsis-settings-page div {
+    position: absolute;
+    top: 33px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+  }
+  .lds-ellipsis div:nth-child(1) {
+    left: 8px;
+    animation: lds-ellipsis1 0.6s infinite;
+  }
+  .lds-ellipsis div:nth-child(2) {
+    left: 8px;
+    animation: lds-ellipsis2 0.6s infinite;
+  }
+  .lds-ellipsis div:nth-child(3) {
+    left: 32px;
+    animation: lds-ellipsis2 0.6s infinite;
+  }
+  .lds-ellipsis div:nth-child(4) {
+    left: 56px;
+    animation: lds-ellipsis3 0.6s infinite;
+  }
+  @keyframes lds-ellipsis1 {
+    0% {
+      transform: scale(0);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+  @keyframes lds-ellipsis3 {
+    0% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(0);
+    }
+  }
+  @keyframes lds-ellipsis2 {
+    0% {
+      transform: translate(0, 0);
+    }
+    100% {
+      transform: translate(24px, 0);
+    }
+  }
 /* .button-component:hover{
     background-color: #f7c520 !important;
     transition-duration: 300ms !important;

diff --git a/client/src/Components/Button/Button.js b/client/src/Components/Button/Button.js
@@ -6,22 +6,25 @@ import "./Button.css";
 const Button = ({
   isLink,
   to,
- style,
- customMediaQueries,
+  style,
+  customMediaQueries,
   text,
   onClick,
   id,
   createPostButtonClass,
   hover,
-  active
+  active,
+  disabled,
+  loading,
+  settingsPage,
 }) => {
   return (
     <>
-    <style>
-    {`
+      <style>
+        {`
     ${customMediaQueries}
     `}
-  </style>
+      </style>
       {isLink ? (
         <Link
           className={`button-component ${createPostButtonClass} ${hover} ${active}`}
@@ -38,8 +41,24 @@ const Button = ({
           style={style}
           onClick={onClick}
           id={id}
+          disabled={disabled}
         >
-          {text}
+          {loading ? (
+            <div
+              className={
+                settingsPage
+                  ? "lds-ellipsis lds-ellipsis-settings-page"
+                  : "lds-ellipsis"
+              }
+            >
+              <div></div>
+              <div></div>
+              <div></div>
+              <div></div>
+            </div>
+          ) : (
+            text
+          )}
         </button>
       )}
     </>

diff --git a/client/src/Components/NftCard/NftCard.js b/client/src/Components/NftCard/NftCard.js
@@ -60,6 +60,7 @@ const NftCard = ({
         </>
       ) : (
         <>
+
           <div
             key={uuidv4()}
             ref={nftCardRef}

diff --git a/client/src/Components/PostsComponents/DropDownMenu/DropDownMenu.js b/client/src/Components/PostsComponents/DropDownMenu/DropDownMenu.js
@@ -32,7 +32,7 @@ function DropDownMenu({
 
       // Mettre à jour le champ 'status' en le mettant à false
       await updateDoc(commentRef, {
-        status: false,
+        stdiatus: false,
       });
 
       console.log("Le status a bien été passé à false");

diff --git a/client/src/Pages/SettingsPage/SettingsPage.css b/client/src/Pages/SettingsPage/SettingsPage.css
@@ -59,6 +59,12 @@
   font-weight: 900;
   margin-top: 5px;
 }
+.settings-page-error-display-name {
+  color: #85d87e;
+  font-size: 12px;
+  font-weight: 900;
+  margin-top: 5px;
+}
 .settings-page-display-name-input img {
   /* background-color: red; */
   margin-left: 15px;
@@ -207,7 +213,7 @@
   border: none;
   opacity: 0.5;
 }
-.PhoneInputCountryIcon{
+.PhoneInputCountryIcon {
   /* width: 25px ; */
   border: none;
   /* height: 25px ; */
@@ -228,4 +234,4 @@
   height: 35px;
   /* background-color: red; */
   border-left: none !important;
-}
+}
diff --git a/client/src/Pages/SettingsPage/SettingsPage.js b/client/src/Pages/SettingsPage/SettingsPage.js
@@ -1,9 +1,23 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import "./SettingsPage.css";
 import validationLogo from "../../Assets/Image/cross-validation-black.svg";
 import Button from "../../Components/Button/Button";
 import PhoneInput from "react-phone-number-input";
 import { isValidPhoneNumber } from "libphonenumber-js";
+import useUserCollection from "../../contexts/UserContext/useUserCollection";
+import { db } from "../../Configs/firebase";
+import {
+  collection,
+  query,
+  orderBy,
+  onSnapshot,
+  where,
+  limit,
+  getDocs,
+  getDoc,
+  doc,
+  updateDoc,
+} from "firebase/firestore";
 
 function SettingsPage() {
   const [isFocusDisplayName, setIsFocusDisplayName] = useState(false);
@@ -33,13 +47,65 @@ function SettingsPage() {
   const [showError, setShowError] = useState(false);
   const [phone, setPhone] = useState("");
   const [phoneRegexError, setPhoneRegexError] = useState(false);
+  const [displayName, setDisplayname] = useState();
+  const [isDisplayNameChangeLoading, setIsDisplayNameChangeLoading] =
+    useState();
+  const [isDisplayNameChangeError, setIsDisplayNameChangeError] = useState();
+  const [isDisplayNameChanged, setIsDisplayNameChanged] = useState();
+  const { loggedInUser } = useUserCollection();
+  const usersCollection = collection(db, "users");
+  console.log(loggedInUser?.id);
+  async function getDisplayName() {
+    try {
+      const q = query(
+        usersCollection,
+        where("id", "==", `${loggedInUser?.id}`)
+      );
+      const data = await getDocs(q);
+      // setDisplayname(
+      const displayNameObject = data.docs.map((doc) => {
+        const docData = doc.data();
+        return {
+          display_name: docData.display_name,
+        };
+      });
+      // )
+      setDisplayname(displayNameObject[0]?.display_name);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  async function handleChangeDisplayName() {
+    if (usernameRegexError === false && valueInputDisplayName !== displayName) {
+      setIsDisplayNameChangeLoading(true);
+      try {
+        const usersCollectionRef = doc(db, `users/${loggedInUser?.id}`);
+        await updateDoc(usersCollectionRef, {
+          display_name: valueInputDisplayName,
+        });
+        setIsDisplayNameChangeError(false);
+        setIsDisplayNameChangeLoading(false);
+        setIsDisplayNameChanged(true);
+        getDisplayName();
+        console.log("pseudo changé");
+      } catch (error) {
+        console.error(error);
+        setIsDisplayNameChangeLoading(false);
+        setIsDisplayNameChangeError(true);
+        setIsDisplayNameChanged(false);
+      }
+    }
+  }
+  useEffect(() => {
+    getDisplayName();
+    setValueInputDisplayName(displayName)
 
-  let displayName = "ramiabdou";
-
+  }, [loggedInUser, displayName]);
+  // let displayName = "ramiabdou";
   function handleFocusDisplayName() {
     setIsFocusDisplayName(true);
   }
-  function handleBlurDisplayName(e) {
+  function handleBlurDisplayName() {
     if (valueInputDisplayName === displayName) {
       setIsFocusDisplayName(false);
     }
@@ -129,6 +195,7 @@ function SettingsPage() {
     setPhone(value);
     setPhoneRegexError(value && !isValidPhoneNumber(value));
   }
+  console.log("valueInputDisplayName -> ",valueInputDisplayName,"displayName -> ",displayName)
   return (
     <div className="settings-page-container">
       <div className="setting-page-wrap">
@@ -147,7 +214,7 @@ function SettingsPage() {
                 onBlur={handleBlurDisplayName}
                 type="text"
                 // value={username}
-                defaultValue="ramiabdou"
+                defaultValue={displayName}
                 // onChange={handleUsernameChange}
               />
               {usernameRegexError && (
@@ -156,15 +223,60 @@ function SettingsPage() {
                   à 29 caractères alphanumérique.
                 </p>
               )}
+              {isDisplayNameChangeError && (
+                <p className="settings-page-error-display-name">
+                  Oops quelque chose s'est mal passé. Veuillez réessayer ou
+                  raffraîchir la page.
+                </p>
+              )}
+              {isDisplayNameChanged && (
+                <p className="settings-page-error-display-name">
+                  Votre pseudo a bien été changé !
+                </p>
+              )}
               {/* <img src={validationLogo} alt="" /> */}
             </div>
             {/* <button className="settings-page-validation-button">Changer pseudo</button> */}
             <div className="settings-page-validation-button-container">
-              <Button
-                text={"Changer nom d'affichage"}
-                hover="button-hover-props"
-                active="button-active-props"
-              />
+              {isDisplayNameChangeLoading ? (
+                <Button
+                  text={
+                    isDisplayNameChangeLoading
+                      ? "Chargement"
+                      : "Changer nom d'affichage"
+                  }
+                  style={
+                    valueInputDisplayName === displayName
+                      ? { opacity: "0.5" }
+                      : isDisplayNameChangeLoading
+                      ? {
+                          backgroundColor: "#f6d46349",
+                          border: "#f6d463 1px solid",
+                          pointerEvents: "none",
+                        }
+                      : { opacity: 1 }
+                  }
+                  hover="button-hover-props"
+                  active="button-active-props"
+                  onClick={handleChangeDisplayName}
+                  disabled={valueInputDisplayName === displayName}
+                  loading={true}
+                  settingsPage={true}
+                />
+              ) : (
+                <Button
+                  text={"Changer nom d'affichage"}
+                  style={
+                    valueInputDisplayName === displayName
+                      ? { opacity: 0.5 }
+                      : { opacity: 1 }
+                  }
+                  hover="button-hover-props"
+                  active="button-active-props"
+                  onClick={handleChangeDisplayName}
+                  disabled={ valueInputDisplayName === displayName}
+                />
+              )}
             </div>
           </div>
         </div>