Skip to content

Commit

Permalink
Merge pull request #103 from 202306-NEA-DZ-FEW/hotfix
Browse files Browse the repository at this point in the history 
Hotfix
  • Loading branch information
@ismail-benlaredj
ismail-benlaredj authored Nov 27, 2023
2 parents 42079dd + dc99d43 commit cee2174
Show file tree
Hide file tree
Showing 15 changed files with 401 additions and 643 deletions.
17 changes: 12 additions & 5 deletions src/components/navbar/Navbar.jsx
View file
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
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
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

1 comment on commit cee2174

@vercel
Copy link

@vercel vercel bot commented on cee2174 Nov 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

letshare – ./

letshare-git-main-team-f-8322dad9.vercel.app
letshare-iota.vercel.app
letshare-team-f-8322dad9.vercel.app

Please sign in to comment.