From 94ab030629f6073ae10ad0f9ea5afecdc3823805 Mon Sep 17 00:00:00 2001 From: Sumanu Rawat Date: Fri, 31 May 2024 05:09:41 -0400 Subject: [PATCH] add create binder button to profile --- .gitignore | 1 + src/App.js | 2 +- src/components/Header/Header.js | 2 +- src/components/Profile.js | 81 ----------------- src/components/Profile/Profile.css | 32 +++++++ src/components/Profile/Profile.js | 135 +++++++++++++++++++++++++++++ 6 files changed, 170 insertions(+), 83 deletions(-) delete mode 100644 src/components/Profile.js create mode 100644 src/components/Profile/Profile.css create mode 100644 src/components/Profile/Profile.js diff --git a/.gitignore b/.gitignore index 9e775ce..6446790 100644 --- a/.gitignore +++ b/.gitignore @@ -34,3 +34,4 @@ jest/ .env .idea/ +.DS_Store diff --git a/src/App.js b/src/App.js index 4d843cd..0a1acfa 100644 --- a/src/App.js +++ b/src/App.js @@ -5,7 +5,7 @@ import { Routes, Route } from 'react-router-dom'; import LandingPage from 'components/LandingPage'; import Login from 'components/Login'; import Signup from 'components/Signup'; -import Profile from 'components/Profile'; +import Profile from 'components/Profile/Profile'; import HomePage from 'components/HomePage'; import Header from 'components/Header/Header'; import UpdateProfile from 'components/UpdateProfile/UpdateProfile'; diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index cd96436..c917168 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -1,7 +1,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; import { useAuth } from 'hooks/useAuth'; -import './Header.css'; // Import the CSS file +import 'components/Header/Header.css'; // Import the CSS file function Header() { const { currentUser } = useAuth(); // This hook checks if a user is logged in diff --git a/src/components/Profile.js b/src/components/Profile.js deleted file mode 100644 index 8bf1fc5..0000000 --- a/src/components/Profile.js +++ /dev/null @@ -1,81 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { useNavigate } from 'react-router-dom'; -import { auth, db } from 'firebase-config'; // Adjust the import path as necessary -import { signOut, onAuthStateChanged } from 'firebase/auth'; -import { doc, getDoc, collection, query, where, getDocs, deleteDoc } from 'firebase/firestore'; -import UserArticlesList from 'components/UserArticlesList/UserArticlesList'; // Import the new component - - -function Profile() { - const navigate = useNavigate(); - const [profileData, setProfileData] = useState(null); - const [userArticles, setUserArticles] = useState([]); - - useEffect(() => { - - const fetchUserProfile = async (userId) => { - // Fetch user profile - const userRef = doc(db, "users", userId); - const userProfile = await getDoc(userRef); - if (userProfile.exists()) { - setProfileData(userProfile.data()); - } else { - navigate('/update-profile'); - } - - // Fetch user's articles - const articlesRef = collection(db, "articles"); - const q = query(articlesRef, where("userId", "==", userId)); - const querySnapshot = await getDocs(q); - const articles = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })); - setUserArticles(articles); - }; - - const unsubscribe = onAuthStateChanged(auth, (user) => { - if (user) { - fetchUserProfile(user.uid); - } else { - // If no user is logged in, navigate to login or another appropriate page - navigate('/login'); - } - }); - - // Clean up the subscription - return () => unsubscribe(); - }, [navigate]); - - - - const handleLogout = async () => { - await signOut(auth).catch((error) => { - console.error('Logout failed', error); - }); - navigate('/'); - }; - - const handleDelete = async (articleId) => { - const articleRef = doc(db, "articles", articleId); - await deleteDoc(articleRef); - // Update the UI by removing the deleted article - setUserArticles(userArticles.filter(article => article.id !== articleId)); - }; - - return ( -
-

Welcome to your profile

- {profileData && ( - <> -

Email: {auth.currentUser?.email}

-

Name: {profileData.name}

-

Date of Birth: {profileData.dateOfBirth}

-

Location: {profileData.location}

- - - - )} - -
- ); -} - -export default Profile; diff --git a/src/components/Profile/Profile.css b/src/components/Profile/Profile.css new file mode 100644 index 0000000..e79f191 --- /dev/null +++ b/src/components/Profile/Profile.css @@ -0,0 +1,32 @@ +/* Profile.css */ +.create-binder-container { + display: flex; + justify-content: center; /* Center horizontally */ + margin-top: 20px; + } + + .create-binder-button { + background-color: #f0c040; /* Example cartoon-ish color */ + color: white; + padding: 20px 40px; + font-size: 1.5rem; + border: none; + border-radius: 10px; /* Rounded corners */ + cursor: pointer; + transition: background-color 0.3s ease; /* Smooth transition on hover */ + } + + .create-binder-button:hover { + background-color: #e6b030; /* Slightly darker color on hover */ + } + + .binder-form-popup { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: white; + padding: 20px; + border-radius: 5px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); + } diff --git a/src/components/Profile/Profile.js b/src/components/Profile/Profile.js new file mode 100644 index 0000000..4817a98 --- /dev/null +++ b/src/components/Profile/Profile.js @@ -0,0 +1,135 @@ +// Profile.js +import React, { useState, useEffect } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { auth, db } from 'firebase-config'; +import { signOut, onAuthStateChanged } from 'firebase/auth'; +import { doc, getDoc, collection, query, where, getDocs, deleteDoc, addDoc, serverTimestamp } from 'firebase/firestore'; +import UserArticlesList from 'components/UserArticlesList/UserArticlesList'; +import 'components/Profile/Profile.css'; // Import CSS for styling + +function Profile() { + const navigate = useNavigate(); + const [profileData, setProfileData] = useState(null); + const [userArticles, setUserArticles] = useState([]); + const [showBinderForm, setShowBinderForm] = useState(false); + const [newBinderTitle, setNewBinderTitle] = useState(''); + + useEffect(() => { + const fetchUserProfile = async (userId) => { + const userRef = doc(db, "users", userId); + const userProfile = await getDoc(userRef); + if (userProfile.exists()) { + setProfileData(userProfile.data()); + } else { + navigate('/update-profile'); + } + + const articlesRef = collection(db, "articles"); + const q = query(articlesRef, where("userId", "==", userId)); + const querySnapshot = await getDocs(q); + const articles = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })); + setUserArticles(articles); + }; + + const unsubscribe = onAuthStateChanged(auth, (user) => { + if (user) { + fetchUserProfile(user.uid); + } else { + navigate('/login'); + } + }); + + return () => unsubscribe(); + }, [navigate]); + + const handleLogout = async () => { + await signOut(auth).catch((error) => { + console.error('Logout failed', error); + }); + navigate('/'); + }; + + const handleDelete = async (articleId) => { + const articleRef = doc(db, "articles", articleId); + await deleteDoc(articleRef); + setUserArticles(userArticles.filter(article => article.id !== articleId)); + }; + + const handleCreateBinderClick = () => { + setShowBinderForm(true); + }; + + const handleBinderTitleChange = (e) => { + setNewBinderTitle(e.target.value); + }; + + const handleCreateNewBinder = async () => { + try { + const binderData = { + title: newBinderTitle, + description: '', // You can add a default description if needed + }; + + // Call a Firestore function to create a new binder document + const newBinderRef = await addDoc(collection(db, 'binders'), { + ...binderData, + userId: auth.currentUser.uid, // Assuming you want to associate the binder with the current user + createdAt: serverTimestamp(), + sources: [], + }); + + console.log("Created binder with ID:", newBinderRef.id); + + // Optionally, navigate to the new binder's view + // navigate(`/binder/${newBinderRef.id}`); + + } catch (error) { + console.error("Error creating binder:", error); + } + + setShowBinderForm(false); + setNewBinderTitle(''); + }; + + return ( +
+

Welcome to your profile

+ {profileData && ( + <> +

Email: {auth.currentUser?.email}

+

Name: {profileData.name}

+

Date of Birth: {profileData.dateOfBirth}

+

Location: {profileData.location}

+ + + + )} + + +
+ +
+ + {showBinderForm && ( +
+ + + +
+ )} + +
+ ); +} + +export default Profile;