Skip to content

Commit

Permalink
feat(profile.jsx): add responsive mode to profile page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hadj-Said-Bouras
Hadj-Said-Bouras committed Nov 22, 2023
1 parent c0156f0 commit 4eef52d
Showing 1 changed file with 70 additions and 45 deletions.
115 changes: 70 additions & 45 deletions src/components/profile/Profile.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
/* eslint-disable @next/next/no-img-element */
import React from "react";
import { useEffect, useState } from "react";
import { AiOutlineEdit, AiOutlineMail, AiOutlinePhone } from "react-icons/ai";
import { BsBasketFill } from "react-icons/bs";
import { GoLocation } from "react-icons/go";

import { getDocData } from "@/lib/firebase/firestoreFunctions";
Expand All @@ -11,83 +10,109 @@ import Button from "@/components/button/Button";
import { useAuth } from "@/context/AuthContext";

import EditProfile from "./EditProfile";
import { collection, getDocs } from "firebase/firestore";
import { db } from "@/lib/firebase/firebase";

const Profile = () => {
const { currentUser } = useAuth();

const [editProfile, setEditProfile] = useState(false);
const [userData, setUserData] = useState({});
const [hideAltTextBio, setHideAltTextBio] = useState(false);

useEffect(() => {
getDocData("users", currentUser.uid).then((data) => {
setUserData(data);
});
// Fetch user data when the component mounts
getUserData();
}, []);

const { name, avatarUrl, bio, publicEmail, publicPhoneNumber, location } =
userData;
useEffect(() => {
console.log(userData);
}, [userData]);

async function getUserData() {
try {
const userdata = collection(db, "users");
const response = await getDocs(userdata);

const data = response.docs.map((doc) => ({
data: doc.data(),
publicPhoneNumber: doc.data()["phone number"],
}));

setUserData(data);
} catch (error) {
console.error("Error fetching user data:", error);
// Handle the error here (e.g., show an error message to the user)
}
}

const { name, avatarurl, bio, email, location } = userData[0]?.data || {};
const { publicPhoneNumber } = userData[0] || {};

const handleIconClick = () => {
setHideAltTextBio(true);
};

return (
<>
{editProfile && (
<EditProfile
setEditProfile={setEditProfile}
name={name}
avatarUrl={avatarUrl}
avatarurl={avatarurl}
bio={bio}
publicEmail={publicEmail}
email={email}
publicPhoneNumber={publicPhoneNumber}
location={location}
setUserData={setUserData}
/>
)}
<div className='mt-10 mb-32 text-black h-fit'>
<h1 className='text-3xl font-semibold'>My account</h1>
<div className='flex items-center w-full p-4 my-5 h-40 rounded-lg bg-gray'>
<div className='relative w-[13rem] h-full'>
<div className='rounded-full w-36 h-36 absolute top-1/4 left-8'>
<div className='flex flex-col md:flex-row items-center w-full p-4 my-5 rounded-lg bg-gray'>
<div className='relative mb-5 md:mb-0 md:mr-5 w-full md:w-[13rem] h-36'>
<div className='rounded-full w-36 h-36 md:absolute md:top-1/4 md:left-8'>
<img
src={avatarUrl}
alt='profile'
src={avatarurl}
alt={hideAltTextBio ? "" : "profile"}
className='rounded-full object-cover w-full h-full'
/>
</div>
</div>
<div className=' flex justify-between w-full px-5 h-full'>
<div className='flex flex-col justify-center'>
<div className='mt-3 h-full flex flex-col justify-between'>
<p className=' opacity-75 w-3/4'>
{`${(bio && bio) || "Add Bio"}`}
</p>
<h2 className='text-2xl font-semibold'>
{name}
</h2>
</div>
</div>
<div className='flex flex-col justify-between items-end w--[60%]'>
<Button
onClick={() => setEditProfile(true)}
className='bg-black'
<div className='flex flex-col w-full md:w-[100%]'>
<div className='mt-3 h-full flex flex-col justify-between'>
<h2 className='text-2xl font-semibold mb-2'>
{name}
</h2>
<p
className={`opacity-75 w-full md:w-3/4 ${
hideAltTextBio ? "hidden" : ""
}`}
>
Edit profile
<AiOutlineEdit className='text-xl' />
</Button>
<div className='flex gap-6 flex-row-reverse'>
{/* <div className='flex gap-2 text-white py-1 px-4 items-center font-semibold justify-start text-lg h-fit w-fit bg-slate-500 rounded-full'>
<BsBasketFill />
{5 + " "}
items
</div> */}
<div className='flex gap-2 items-center font-semibold'>
{`${(bio && bio) || "Add Bio"}`}
</p>
</div>
<div className='flex flex-col md:flex-row justify-between items-end w-full'>
<div className='md:order-2'>
<Button
onClick={() => setEditProfile(true)}
className='bg-black mb-2 md:mb-0'
>
Edit profile
<AiOutlineEdit className='text-xl' />
</Button>
</div>
<div className='flex flex-col md:flex-row gap-2 items-center md:order-1'>
<div className='flex gap-2 items-center'>
<AiOutlineMail className='text-2xl text-green' />
{publicEmail}
{email}
</div>
<div className='flex gap-2 items-center font-semibold'>
<AiOutlinePhone className='text-2xl text-green' />

<div className='flex gap-2 items-center'>
<AiOutlinePhone className='text-2xl text-green' />
{publicPhoneNumber}
</div>
<div className='flex gap-2 items-center font-semibold'>
<GoLocation className='text-2xl text-green' />
<div className='flex gap-2 items-center'>
<GoLocation className='text-2xl text-green' />
{location}
</div>
</div>
Expand Down

0 comments on commit 4eef52d

Please sign in to comment.