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

update #102

Merged
merged 8 commits into from
Nov 25, 2023
Merged

update #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7b5cd1c
feat(index.jsx): add a notification if the user is not on the database
Hadj-Said-Bouras Nov 22, 2023
c0156f0
feat(index.jsx): protect router
Hadj-Said-Bouras Nov 22, 2023
4eef52d
feat(profile.jsx): add responsive mode to profile page
Hadj-Said-Bouras Nov 22, 2023
e527c7f
feat(index.jsx): add states and craeted city fields
Hadj-Said-Bouras Nov 23, 2023
38aadfe
feat(index.jsx): add price field
Hadj-Said-Bouras Nov 23, 2023
054e162
feat(index.jsx): add state
Hadj-Said-Bouras Nov 23, 2023
a9629b7
Merge pull request #99 from 202306-NEA-DZ-FEW/Login-Edits
ismail-benlaredj Nov 25, 2023
42079dd
Merge branch 'dev' into main
ismail-benlaredj Nov 25, 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
32 changes: 31 additions & 1 deletion src/components/loginform/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { useAuth } from "@/context/AuthContext";
export default function LoginForm() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [notification, setNotification] = useState(null); // State for notification message
const { login, currentUser } = useAuth();
const router = useRouter();

Expand All @@ -17,12 +18,41 @@ export default function LoginForm() {
.then(() => {
router.push("/account");
})
.catch((error) => {});
.catch((error) => {
// Update the notification state with the error message
setNotification("Email or password is incorrect.");
});
}

return (
<div className='flex justify-center items-center h-screen'>
<div className='w-full max-w-md'>
{/* Notification */}
{notification && (
<div
className='bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4'
role='alert'
>
<strong className='font-bold'>Error! </strong>
<span className='block sm:inline'>{notification}</span>
<span className='absolute top-0 bottom-0 right-0 px-4 py-3'>
<svg
className='fill-current h-6 w-6 text-red-500'
role='button'
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 20 20'
>
<title>Close</title>
<path
d='M14.348 5.652a.5.5 0 01.707.707L10.707 10l4.348 4.348a.5.5 0 11-.707.707L10 10.707l-4.348 4.348a.5.5 0 01-.707-.707L9.293 10 4.945 5.652a.5.5 0 01.707-.707L10 9.293l4.348-4.348z'
clipRule='evenodd'
fillRule='evenodd'
/>
</svg>
</span>
</div>
)}

<h1 className='text-3xl font-semibold text-center mb-4'>
Log in
</h1>
Expand Down
115 changes: 70 additions & 45 deletions src/components/profile/Profile.jsx
View file
Open in desktop
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
15 changes: 11 additions & 4 deletions src/pages/account/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,32 @@
import Link from "next/link";
import { useEffect, useState } from "react";
import { AiOutlineDelete, AiOutlineEdit } from "react-icons/ai";

import { useRouter } from "next/router"; // Import useRouter
import { getItemsByUser } from "@/lib/firebase/firestoreFunctions";

import DeleteWarning from "@/components/delete-warning";
import ItemCard from "@/components/itemcard/ItemCard";
import Profile from "@/components/profile/Profile";

import { useAuth } from "@/context/AuthContext";

export default function MyAccount() {
const { currentUser } = useAuth();
const [items, setItems] = useState([]);
const [deleteWarningItem, setDeleteWarningItem] = useState();
const router = useRouter(); // Initialize useRouter

useEffect(() => {
// Check if the user is not logged in and redirect to 404 page
if (!currentUser) {
router.push("/");
return; // Stop further execution of the useEffect
}

// Fetch items only if the user is logged in
getItemsByUser(currentUser.uid).then((data) => {
setItems(data);
});
}, [currentUser]);
}, [currentUser, router]);

return (
<>
{deleteWarningItem && (
Expand Down
Loading
Loading