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 { User Profile ) : ( diff --git a/src/components/ProfileDropdown/ProfileDropdown.jsx b/src/components/ProfileDropdown/ProfileDropdown.jsx index 7f11ff8..7317428 100644 --- a/src/components/ProfileDropdown/ProfileDropdown.jsx +++ b/src/components/ProfileDropdown/ProfileDropdown.jsx @@ -35,11 +35,11 @@ function ProfileDropdown({ t }) {
profile-pic
diff --git a/src/components/SideBar/SideBar.jsx b/src/components/SideBar/SideBar.jsx index 57fd61d..f9c1e97 100644 --- a/src/components/SideBar/SideBar.jsx +++ b/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 (
{ )}
- 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/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() {
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);