Skip to content

Commit

Permalink
Merge pull request #99 from 202306-NEA-DZ-FEW/Login-Edits
Browse files Browse the repository at this point in the history 
feat(index.jsx): add a notification if the user is not on the database
  • Loading branch information
@ismail-benlaredj
ismail-benlaredj authored Nov 25, 2023
2 parents be8d3e6 + 054e162 commit a9629b7
Show file tree
Hide file tree
Showing 4 changed files with 209 additions and 83 deletions.
32 changes: 31 additions & 1 deletion src/components/loginform/index.jsx
View file
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
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
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

1 comment on commit a9629b7

@vercel
Copy link

@vercel vercel bot commented on a9629b7 Nov 25, 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-iota.vercel.app
letshare-team-f-8322dad9.vercel.app
letshare-git-main-team-f-8322dad9.vercel.app

Please sign in to comment.