fix(sidebar.jsx): fix the Profile picture behavior when change in it

202306-NEA-DZ-FEW · Nov 27, 2023 · 1c8d9fa · 1c8d9fa
1 parent 2d0d404
commit 1c8d9fa
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 8 deletions.
diff --git a/src/components/OurTeam/OurTeam.jsx b/src/components/OurTeam/OurTeam.jsx
@@ -1,7 +1,7 @@
-import React from "react";
+import Image from "next/image";
 import Link from "next/link";
+import React from "react";
 import { FaGithub, FaLinkedin } from "react-icons/fa";
-import Image from "next/image";
 export default function OurTeam({ t }) {
     const data = [
         {
@@ -85,6 +85,7 @@ export default function OurTeam({ t }) {
                                     width={100}
                                     height={100}
                                     className='w-32 h-32 border-[#575885] image border-2 rounded-full'
+                                    alt='profile picture'
                                 />
                             </div>
                             <h1 className='font-bold'>{t(`${name}`)}</h1>

diff --git a/src/components/OurTeam/__test__/__snapshots__/OurTeam.test.js.snap b/src/components/OurTeam/__test__/__snapshots__/OurTeam.test.js.snap
@@ -28,6 +28,7 @@ exports[`renders correctly 1`] = `
         className="flex justify-center items-center"
       >
         <img
+          alt="profile picture"
           className="w-32 h-32 border-[#575885] image border-2 rounded-full"
           data-nimg="1"
           decoding="async"
@@ -121,6 +122,7 @@ exports[`renders correctly 1`] = `
         className="flex justify-center items-center"
       >
         <img
+          alt="profile picture"
           className="w-32 h-32 border-[#575885] image border-2 rounded-full"
           data-nimg="1"
           decoding="async"
@@ -214,6 +216,7 @@ exports[`renders correctly 1`] = `
         className="flex justify-center items-center"
       >
         <img
+          alt="profile picture"
           className="w-32 h-32 border-[#575885] image border-2 rounded-full"
           data-nimg="1"
           decoding="async"
@@ -307,6 +310,7 @@ exports[`renders correctly 1`] = `
         className="flex justify-center items-center"
       >
         <img
+          alt="profile picture"
           className="w-32 h-32 border-[#575885] image border-2 rounded-full"
           data-nimg="1"
           decoding="async"
@@ -400,6 +404,7 @@ exports[`renders correctly 1`] = `
         className="flex justify-center items-center"
       >
         <img
+          alt="profile picture"
           className="w-32 h-32 border-[#575885] image border-2 rounded-full"
           data-nimg="1"
           decoding="async"
@@ -493,6 +498,7 @@ exports[`renders correctly 1`] = `
         className="flex justify-center items-center"
       >
         <img
+          alt="profile picture"
           className="w-32 h-32 border-[#575885] image border-2 rounded-full"
           data-nimg="1"
           decoding="async"

diff --git a/src/components/ProfileDropdown/ProfileDropdown.jsx b/src/components/ProfileDropdown/ProfileDropdown.jsx
@@ -35,7 +35,7 @@ function ProfileDropdown({ t }) {
                         <div className='w-8 rounded-full'>
                             <Image
                                 src={
-                                    currentUser.photoURL ||
+                                    currentUser?.photoURL ||
                                     "/images/profile.jpg"
                                 }
                                 width={220}

diff --git a/src/components/SideBar/SideBar.jsx b/src/components/SideBar/SideBar.jsx
@@ -7,6 +7,7 @@ import { useRouter } from "next/router.js";
 import React, { useEffect, useState } from "react";
 import { BiLogOut } from "react-icons/bi";
 import { BsClipboard2Fill, BsFillBoxSeamFill } from "react-icons/bs";
+import { FaEdit } from "react-icons/fa";
 import { FiEdit3 } from "react-icons/fi";
 import {
     MdOutlineKeyboardDoubleArrowLeft,
@@ -25,6 +26,7 @@ const Sidebar = ({ t }) => {
     const [userInfo, setUserInfo] = useState(null);
     const [collapsed, setCollapsed] = useState(false);
     const { currentUser, logout } = useAuth();
+    const [loading, setLoading] = useState(false);
     const route = useRouter();
 
     useEffect(() => {
@@ -87,6 +89,7 @@ const Sidebar = ({ t }) => {
 
         if (file) {
             try {
+                setLoading(true);
                 // Create a reference to the storage location
                 const storageRef = ref(
                     storage,
@@ -109,12 +112,13 @@ const Sidebar = ({ t }) => {
                 setUserInfo({ ...userInfo, photoURL: imageUrl });
             } catch (error) {
                 console.error("Error updating profile image:", error);
+            } finally {
+                // Set loading back to false when the image upload is complete
+                setLoading(false);
             }
         }
     };
 
-    console.log(currentUser?.photoURL);
-
     return (
         <div
             className={`bg-gray-200 min-h-screen p-4 text-[#585785] flex flex-col ${
@@ -140,24 +144,43 @@ const Sidebar = ({ t }) => {
             )}
 
             <div className='flex flex-col items-center mt-10 mb-4 space-y-4'>
-                <label htmlFor='profileImageInput' className='cursor-pointer'>
+                <label
+                    htmlFor='profileImageInput'
+                    className={`relative cursor-pointer transition-all duration-500 ease-in-out ring ring-[#90eee1] hover:ring-[#54fce5] border  border-[#585785] hover:border-[#90eee1] ${
+                        collapsed ? "w-12 h-12" : "w-24 h-24"
+                    } rounded-full`}
+                >
                     <Image
                         src={currentUser?.photoURL || "/images/profile.jpg"}
                         alt='profile-pic'
                         width={220}
                         height={220}
-                        className={`w-24 object-cover transition-all duration-500 ease-in-out ${
+                        className={`object-cover transition-all duration-500 ease-in-out ${
                             collapsed ? "w-12 h-12" : "w-24 h-24"
-                        } rounded-full mb-2 cursor-pointer'`}
+                        } rounded-full mb-2 cursor-pointer  `}
                     />
+                    {loading && (
+                        <div
+                            className={`absolute inset-0  border  border-[#585785]  flex items-center justify-center bg-gray-500  rounded-full ${
+                                collapsed ? "w-12 h-12" : "w-24 h-24"
+                            }`}
+                        >
+                            <span className='loading loading-spinner loading-lg'></span>
+                        </div>
+                    )}
                     <input
                         type='file'
                         accept='image/*'
                         id='profileImageInput'
                         className='hidden'
                         onChange={handleImageChange}
                     />
+
+                    <span className='absolute -bottom-3 left-1/2 transform hover:text-[#24524b]  -translate-x-1/2  text-[#585785]'>
+                        <FaEdit className='inline' size={collapsed ? 12 : 24} />
+                    </span>
                 </label>
+
                 {!collapsed && userInfo && (
                     <div className='text-center'>
                         <h2 className='text-xl text-[#585785] font-bold mb-1'>{`${userInfo?.name} ${userInfo?.surname}`}</h2>