From 787907d52ecf50c1cf100c94f6833a4f7a06fd86 Mon Sep 17 00:00:00 2001
From: Hemanth kumar <rajva5727@gmail.com>
Date: Sun, 12 May 2024 11:40:11 +0530
Subject: [PATCH] Profile Image Not Displaying Upon Sign-in Fixed (#65)

* Profile fixed

* Profile fixed
---
 src/components/header/header.js | 12 ++++++++----
 src/pages/SignIn/index.js       |  2 ++
 src/pages/SignIn/style.css      |  4 ++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/header/header.js b/src/components/header/header.js
index 573a77f..f195f65 100644
--- 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
index 03fa0a7..6e27dd8 100644
--- 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
index 318cf9e..72d05a8 100644
--- 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;}