Merge pull request #183 from 202306-NEA-DZ-FEW/180-improve-the-animat…

…ion-and-fix-bugs

Fix Profile picture changing bug in the SideBar component

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>

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"

src/components/Profile/Profile.jsx

@@ -1,26 +1,27 @@
-import React, { useContext, useState, useEffect } from "react";
-import { useAuth } from "@/context/AuthContext";
 import {
+    ArrowNarrowRightIcon,
+    CheckCircleIcon,
+    ShoppingCartIcon,
+    SwitchHorizontalIcon,
+    TruckIcon,
+} from "@heroicons/react/solid";
+import {
+    collection,
     doc,
     getDoc,
-    updateDoc,
-    collection,
-    query,
-    limit,
     getDocs,
+    limit,
+    query,
+    updateDoc,
 } from "firebase/firestore";
+import Image from "next/image";
 import Link from "next/link";
-import { db } from "@/util/firebase";
+import React, { useContext, useEffect, useState } from "react";
+
+import { useAuth } from "@/context/AuthContext";
 import { CartContext } from "@/context/CartContext";
 import { UserListingsContext } from "@/context/UserListingsContext";
-import Image from "next/image";
-import {
-    ShoppingCartIcon,
-    CheckCircleIcon,
-    TruckIcon,
-    SwitchHorizontalIcon,
-    ArrowNarrowRightIcon,
-} from "@heroicons/react/solid";
+import { db } from "@/util/firebase";
 
 <svg
     xmlns='http://www.w3.org/2000/svg'
@@ -248,8 +249,8 @@ const ProfileComponent = () => {
                                     <Image
                                         src={userData?.photo}
                                         alt='User Profile'
-                                        height={52}
-                                        width={52}
+                                        height={300}
+                                        width={300}
                                         className='h-52 w-52 rounded object-cover border border-gray-200'
                                     />
                                 ) : (

src/components/ProfileDropdown/ProfileDropdown.jsx

@@ -35,11 +35,11 @@ function ProfileDropdown({ t }) {
                         <div className='w-8 rounded-full'>
                             <Image
                                 src={
-                                    currentUser.photoURL ||
+                                    currentUser?.photoURL ||
                                     "/images/profile.jpg"
                                 }
-                                width={20}
-                                height={20}
+                                width={220}
+                                height={220}
                                 alt='profile-pic'
                             />
                         </div>

src/components/SideBar/SideBar.jsx

@@ -1,10 +1,13 @@
-import { doc, getDoc } from "firebase/firestore";
+import { updateProfile } from "firebase/auth";
+import { doc, getDoc, updateDoc } from "firebase/firestore";
+import { getDownloadURL, ref, uploadBytes } from "firebase/storage";
 import Image from "next/image.js";
 import Link from "next/link";
 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,
@@ -16,13 +19,14 @@ import "react-toastify/dist/ReactToastify.css";
 
 import { useAuth } from "@/context/AuthContext.js";
 
-import { db } from "../../util/firebase.js";
+import { db, storage } from "../../util/firebase.js";
 
 const Sidebar = ({ t }) => {
     const [selectedLink, setSelectedLink] = useState(null);
     const [userInfo, setUserInfo] = useState(null);
     const [collapsed, setCollapsed] = useState(false);
     const { currentUser, logout } = useAuth();
+    const [loading, setLoading] = useState(false);
     const route = useRouter();
 
     useEffect(() => {
@@ -79,6 +83,42 @@ const Sidebar = ({ t }) => {
         };
     }, []);
 
+    const handleImageChange = async (e) => {
+        const file = e.target.files[0];
+        console.log(file);
+
+        if (file) {
+            try {
+                setLoading(true);
+                // Create a reference to the storage location
+                const storageRef = ref(
+                    storage,
+                    `profile-images/${currentUser.uid}/${file.name}`
+                );
+                const snapshot = await uploadBytes(storageRef, file);
+
+                // Get the URL of the uploaded image
+                const imageUrl = await getDownloadURL(snapshot.ref);
+
+                // Update the user's profile with the new image URL
+                await updateProfile(currentUser, {
+                    photoURL: imageUrl,
+                });
+                // Update the user's profile in Firestore
+                const userDocRef = doc(db, "userinfo", currentUser.uid);
+                await updateDoc(userDocRef, { photo: imageUrl });
+
+                // Force a re-render to reflect the updated user information
+                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);
+            }
+        }
+    };
+
     return (
         <div
             className={`bg-gray-200 min-h-screen p-4 text-[#585785] flex flex-col ${
@@ -104,13 +144,43 @@ const Sidebar = ({ t }) => {
             )}
 
             <div className='flex flex-col items-center mt-10 mb-4 space-y-4'>
-                <Image
-                    src={currentUser?.photoURL || "/images/profile.jpg"}
-                    alt='profile-pic'
-                    width={80}
-                    height={80}
-                    className='w-25 h-25 rounded-full mb-2'
-                />
+                <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={`object-cover transition-all duration-500 ease-in-out ${
+                            collapsed ? "w-12 h-12" : "w-24 h-24"
+                        } 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>

src/pages/donations/index.jsx

@@ -1,6 +1,5 @@
 import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
-import { ToastContainer } from "react-toastify";
 
 import "react-toastify/dist/ReactToastify.css";
 
@@ -58,7 +57,6 @@ function DonationsPage() {
                     isRTL={isRTL}
                 />
             </div>
-            <ToastContainer />
         </div>
     );
 }

src/pages/index.jsx

@@ -53,7 +53,7 @@ export default function splashpage() {
                     <div className='w-full lg:min-w-[488px]'>
                         <TypingText
                             text='Empowering Futures, Connecting Students'
-                            speed={100}
+                            speed={50}
                         />
                     </div>
                     <div className='container mx-auto py-4 '>

src/util/firebase.js

@@ -17,5 +17,5 @@ export const app = initializeApp(firebaseConfig);
 export const db = getFirestore(app);
 export const imgDB = getStorage(app);
 // Initialize Firebase Authentication and get a reference to the service
-
+export const storage = getStorage(app);
 export const auth = getAuth(app);