From 36f347097ccf59e053e8602910e3257d3b58b788 Mon Sep 17 00:00:00 2001 From: hocine1212 Date: Mon, 27 Nov 2023 17:05:00 +0100 Subject: [PATCH 1/4] fix(splash page): change the speed of text typing animation in the splash page --- src/pages/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 2bf2018..9fdaffe 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -53,7 +53,7 @@ export default function splashpage() {
From f3a6112674f9619fa86337b776e56050de292bec Mon Sep 17 00:00:00 2001 From: hocine1212 Date: Mon, 27 Nov 2023 19:25:50 +0100 Subject: [PATCH 2/4] fix(sidebar.jsx): fix the SideBar profile pic changing issue --- src/components/Profile/Profile.jsx | 35 ++++++----- .../ProfileDropdown/ProfileDropdown.jsx | 4 +- src/components/SideBar/SideBar.jsx | 63 ++++++++++++++++--- src/pages/donations/index.jsx | 2 - src/util/firebase.js | 2 +- 5 files changed, 75 insertions(+), 31 deletions(-) diff --git a/src/components/Profile/Profile.jsx b/src/components/Profile/Profile.jsx index f17bec1..1836eaa 100644 --- a/src/components/Profile/Profile.jsx +++ b/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"; { ) : ( diff --git a/src/components/ProfileDropdown/ProfileDropdown.jsx b/src/components/ProfileDropdown/ProfileDropdown.jsx index 7f11ff8..b0ebf52 100644 --- a/src/components/ProfileDropdown/ProfileDropdown.jsx +++ b/src/components/ProfileDropdown/ProfileDropdown.jsx @@ -38,8 +38,8 @@ function ProfileDropdown({ t }) { currentUser.photoURL || "/images/profile.jpg" } - width={20} - height={20} + width={220} + height={220} alt='profile-pic' />
diff --git a/src/components/SideBar/SideBar.jsx b/src/components/SideBar/SideBar.jsx index 57fd61d..198a0bd 100644 --- a/src/components/SideBar/SideBar.jsx +++ b/src/components/SideBar/SideBar.jsx @@ -1,4 +1,6 @@ -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"; @@ -16,7 +18,7 @@ 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); @@ -79,6 +81,40 @@ const Sidebar = ({ t }) => { }; }, []); + const handleImageChange = async (e) => { + const file = e.target.files[0]; + console.log(file); + + if (file) { + try { + // 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); + } + } + }; + + console.log(currentUser?.photoURL); + return (
{ )}
- profile-pic + {!collapsed && userInfo && (

{`${userInfo?.name} ${userInfo?.surname}`}

diff --git a/src/pages/donations/index.jsx b/src/pages/donations/index.jsx index ed78019..97134f3 100644 --- a/src/pages/donations/index.jsx +++ b/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} />
-
); } diff --git a/src/util/firebase.js b/src/util/firebase.js index 521f574..700f29c 100644 --- a/src/util/firebase.js +++ b/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); From 2d0d404ad1f51411590195458ad58831f91bad1f Mon Sep 17 00:00:00 2001 From: hocine1212 Date: Mon, 27 Nov 2023 20:03:40 +0100 Subject: [PATCH 3/4] fix(sidebar.jsx): fix the SideBar's profile image responsiveness when sidebar collapse --- src/components/SideBar/SideBar.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/SideBar/SideBar.jsx b/src/components/SideBar/SideBar.jsx index 198a0bd..8d8b023 100644 --- a/src/components/SideBar/SideBar.jsx +++ b/src/components/SideBar/SideBar.jsx @@ -146,7 +146,9 @@ const Sidebar = ({ t }) => { alt='profile-pic' width={220} height={220} - className='w-24 object-cover h-24 rounded-full mb-2 cursor-pointer' + className={`w-24 object-cover transition-all duration-500 ease-in-out ${ + collapsed ? "w-12 h-12" : "w-24 h-24" + } rounded-full mb-2 cursor-pointer'`} /> Date: Mon, 27 Nov 2023 22:49:42 +0100 Subject: [PATCH 4/4] fix(sidebar.jsx): fix the Profile picture behavior when change in it --- src/components/OurTeam/OurTeam.jsx | 5 +-- .../__snapshots__/OurTeam.test.js.snap | 6 ++++ .../ProfileDropdown/ProfileDropdown.jsx | 2 +- src/components/SideBar/SideBar.jsx | 33 ++++++++++++++++--- 4 files changed, 38 insertions(+), 8 deletions(-) diff --git a/src/components/OurTeam/OurTeam.jsx b/src/components/OurTeam/OurTeam.jsx index 3c47672..8106cbc 100644 --- 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' />

{t(`${name}`)}

diff --git a/src/components/OurTeam/__test__/__snapshots__/OurTeam.test.js.snap b/src/components/OurTeam/__test__/__snapshots__/OurTeam.test.js.snap index 8819e6c..59ff85a 100644 --- 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" > profile picture profile picture profile picture profile picture profile picture profile picture { 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 (
{ )}
-