Profile Image Not Displaying Upon Sign-in Fixed (#65)

* Profile fixed * Profile fixed
MAVRICK-1 · May 12, 2024 · 787907d · 787907d
1 parent 80a2c40
commit 787907d
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/src/components/header/header.js b/src/components/header/header.js
@@ -41,6 +41,7 @@ const Header = (props) => {
   const {cartCount, setCartCount} = useContext(MyContext);
   const headerRef = useRef();
   const searchInput = useRef();
+  const [profile,setProfile] = useState("")
 
   const context = useContext(MyContext);
   const history = useNavigate();
@@ -66,6 +67,9 @@ const Header = (props) => {
     getCountry("https://countriesnow.space/api/v0.1/countries/");
   }, []);
 
+  useEffect(()=>{
+    setProfile(localStorage.getItem("userImage"))
+  },[context.isLogin])
   const getCountry = async (url) => {
     try {
       await axios.get(url).then((res) => {
@@ -97,6 +101,7 @@ const Header = (props) => {
 
   const signOut = () => {
     context.signOut();
+    localStorage.setItem("userImage","")
     history("/");
   };
 
@@ -155,10 +160,9 @@ const Header = (props) => {
                     </div>
                     {context.isLogin === "true" && (
                       <div
-                        className="myAccDrop"
                         onClick={() => setisOpenAccDropDown(!isOpenAccDropDown)}
                       >
-                        <PersonOutlineOutlinedIcon />
+                        {profile!=""?<img src={profile} alt="" style={{width:"65%", height:"65%", borderRadius:"50%",marginLeft:"15%"}} />:<img src="https://cdn-icons-png.flaticon.com/512/5323/5323352.png" alt="" style={{width:"50px", height:"50px", borderRadius:"50%",marginLeft:"13%"}} />}
                       </div>
                     )}
                   </div>
@@ -253,8 +257,8 @@ const Header = (props) => {
                           <span
                             onClick={() => setisOpenDropDown(!isOpenDropDown)}
                           >
-                            <img src={IconUser} />
-                            Account
+
+                            {profile!=""?<img src={profile} alt="" style={{width:"65%", height:"65%", borderRadius:"50%",marginLeft:"18%"}} />:<img src="https://cdn-icons-png.flaticon.com/512/5323/5323352.png" alt="" style={{width:"50px", height:"50px", borderRadius:"50%",marginLeft:"18%"}} />}
                           </span>
 
                           {isOpenDropDown !== false && (

diff --git a/src/pages/SignIn/index.js b/src/pages/SignIn/index.js
@@ -108,6 +108,7 @@ const SignIn = () => {
         dispatch(logIn({email:user.email}))
         setLoggedInUseEmail(user.email);
         localStorage.setItem("uid", userCredential.user.uid);
+        localStorage.setItem("userImage","")
         //console.log(loggedInUserEmail);
         history("/");
       })
@@ -129,6 +130,7 @@ const SignIn = () => {
         localStorage.setItem("uid", result.user.uid);
         context.signIn();
         setLoggedInUseEmail(udata);
+        localStorage.setItem("userImage",result.user.photoURL)
         //console.log(loggedInUserEmail);
         history("/");
       })

diff --git a/src/pages/SignIn/style.css b/src/pages/SignIn/style.css
@@ -1,5 +1,5 @@
-.loginWrapper{padding: 75px 0px; background: #f1f1f1;}
-.loginWrapper .card{width: 650px; margin: auto; padding: 40px; border: 0px !important;}
+.loginWrapper{padding: 75px 0px; background: #f1f1f1; height: auto;}
+.loginWrapper .card{width: 650px; margin: auto; padding: 40px; border: 0px !important;height: auto;}
 .loginWrapper .card h3{font-weight: 500; font-size: 35px;}
 .loginWrapper .card input{height: 40px !important; font-size: 18px !important; color: #000 !important;}
 .loginWrapper .card fieldset{border-radius: 10px !important;}