Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hotfix #103

Merged
merged 2 commits into from
Nov 27, 2023
Merged

Hotfix #103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5534412
Merge pull request #102 from 202306-NEA-DZ-FEW/main
ismail-benlaredj Nov 25, 2023
dc99d43
fix(hotfix): pages
ismail-benlaredj Nov 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 12 additions & 5 deletions src/components/navbar/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { useAuth } from "@/context/AuthContext";

import AccountMenu from "./AccountMenu";
import LanguageMenu from "./LanguageMenu";
import Button from "../button/Button";

const navigation = [
{ name: "Home", href: "/", icon: AiOutlineHome },
Expand All @@ -38,7 +39,7 @@ function Navbar() {
<div className='flex items-center'>
<Image
className='w-auto h-14 sm:h-10'
src='./logo/hands.svg'
src='/logo/hands.svg'
alt='Logo'
width={300}
height={200}
Expand Down Expand Up @@ -74,12 +75,18 @@ function Navbar() {
<AccountMenu logout={logout} />
) : (
<div className='items-center justify-end hidden md:flex md:flex-1 lg:w-0'>
<button className='text-base font-medium text-blck whitespace-nowrap hover:text-lime-700'>
<Button
href='/auth/signin'
className='text-base bg-transparent font-medium text-lime-700 whitespace-nowrap hover:text-lime-700'
>
Sign in
</button>
<button className='inline-flex items-center justify-center px-4 py-2 ml-8 text-base font-medium text-white bg-lime-600 border border-transparent rounded-md shadow-sm whitespace-nowrap hover:opacity-75'>
</Button>
<Button
href='/auth/signup'
className=' bg-lime-600 hover:opacity-75'
>
Sign up
</button>
</Button>
</div>
)}
<LanguageMenu />
Expand Down
16 changes: 11 additions & 5 deletions src/components/profile/AvatarUploadImage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,17 @@ function AvatarUploadImage({ image, setFile, file }) {
<div className='absolute top-0 left-0 right-0 bottom-0 bg-black opacity-60 rounded-full'></div>
<AiFillCamera className='text-5xl text-white z-10' />
</div>
<img
src={file ? URL.createObjectURL(file) : image}
alt='avatar'
className='rounded-full object-cover w-full h-full'
/>
{!image && !file ? (
<div className='w-full h-full text-center rounded-full flex justify-center items-center bg-green text-white text-lg '>
Add image
</div>
) : (
<img
src={file ? URL.createObjectURL(file) : image}
alt='avatar'
className='rounded-full object-cover w-full h-full'
/>
)}
</div>
<p className='text-sm text-black -mt-4'>
Change your profile picture
Expand Down
130 changes: 52 additions & 78 deletions src/components/profile/Profile.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from "react";
/* eslint-disable @next/next/no-img-element */
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 @@ -10,111 +11,84 @@ 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(() => {
// Fetch user data when the component mounts
getUserData();
}, []);

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"],
}));

getDocData("users", currentUser.uid).then((data) => {
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);
};
});
}, []);

const { name, avatarUrl, bio, publicEmail, publicPhoneNumber, location } =
userData;
return (
<>
{editProfile && (
<EditProfile
setEditProfile={setEditProfile}
name={name}
avatarurl={avatarurl}
avatarUrl={avatarUrl}
bio={bio}
email={email}
publicEmail={publicEmail}
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 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'>
<div className='mt-20 mb-32 text-black h-fit'>
<h1 className='text-3xl font-semibold text-center'>
My account
</h1>
<div className='flex items-center w-full p-4 my-8 rounded-2xl justify-center gap-8 border border-gray '>
<div className='rounded-full w-36 h-36 '>
{!avatarUrl ? (
<div className='w-full h-full rounded-full flex justify-center items-center bg-green text-white text-4xl font-bold uppercase'>
{name && name[0]}
</div>
) : (
<img
src={avatarurl}
alt={hideAltTextBio ? "" : "profile"}
src={avatarUrl}
alt='profile'
className='rounded-full object-cover w-full h-full'
/>
</div>
)}
</div>
<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" : ""
}`}
>
{`${(bio && bio) || "Add Bio"}`}
</p>
<div className=' flex flex-col justify-between w-fit px-5 h-fit '>
<Button
onClick={() => setEditProfile(true)}
className='bg-black'
>
Edit profile
<AiOutlineEdit className='text-xl' />
</Button>
<div className='flex flex-col justify-center'>
<div className='mt-3 h-full flex flex-col justify-between'>
<h2 className='text-2xl font-semibold'>
{name}
</h2>
<p className=' opacity-75 py-5'>
{`${(bio && bio) || "Add Bio"}`}
</p>
</div>
</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 className='flex flex-col justify-between w--[60%] '>
<div className='flex gap-2 items-center font-semibold'>
<AiOutlineMail className='text-2xl text-green' />
{publicEmail}
</div>
<div className='flex gap-2 items-center font-semibold'>
<AiOutlinePhone className='text-2xl text-green' />

{publicPhoneNumber}
</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' />
{email}
</div>
<div className='flex gap-2 items-center'>
<AiOutlinePhone className='text-2xl text-green' />
{publicPhoneNumber}
</div>
<div className='flex gap-2 items-center'>
<GoLocation className='text-2xl text-green' />
{location}
</div>
<div className='flex gap-2 items-center font-semibold'>
<GoLocation className='text-2xl text-green' />
{location}
</div>
</div>
</div>
Expand Down
Loading
Loading