Merge pull request #31 from feliciahmq/Issues

Fix: Add user
feliciahmq · Jul 7, 2024 · f553f22 · f553f22
2 parents 5e89aaf + f729cb2
commit f553f22
Show file tree

Hide file tree

Showing 16 changed files with 468 additions and 274 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.jsx b/src/App.jsx
@@ -35,6 +35,7 @@ return (
 		<Route path="/notifications/:userID" element={<NotificationsPage />} />
 		<Route path="/chat" element={<Chat />} />
 		<Route path="/chat/:userID" element={<Chat />} />
+		<Route path="/chat/:userID/:chatID" element={<Chat />} />
 		</Routes>
 	</Router>
 	</LikeCountProvider>

diff --git a/src/components/chatComp/chatApp_chat/Chat.css b/src/components/chatComp/chatApp_chat/Chat.css
@@ -17,6 +17,7 @@
             display: flex;
             align-items: center;
             gap: 20px;
+            cursor: pointer;
 
             img {
                 width: 60px;

diff --git a/src/components/chatComp/chatApp_chat/Chat.jsx b/src/components/chatComp/chatApp_chat/Chat.jsx
@@ -7,6 +7,7 @@ import { useChatStore } from '../../../lib/chatStore';
 import { useUserStore } from '../../../lib/userStore';
 import upload from '../../../lib/upload';
 import { formatDistanceToNow, isValid } from 'date-fns';
+import { useNavigate } from 'react-router-dom';
 
 const Chat = () => {
     const [chat, setChat] = useState();
@@ -21,6 +22,7 @@ const Chat = () => {
 
     const { currentUser } = useUserStore();
     const { chatId, user, isCurrentUserBlocked, isReceiverBlocked } = useChatStore();
+    const navigate = useNavigate();
 
     const endRef = useRef(null);
 
@@ -147,10 +149,14 @@ const Chat = () => {
         setShowImg(false); 
     };
 
+    const handleProfileClick = () => {
+        navigate(`/profile/${user?.id}`);
+    }
+
     return (
         <div className='chat'>
             <div className="top">
-                <div className="user">
+                <div className="user" onClick={handleProfileClick}>
                     <img src={user?.profilePic || "/chat-icons/avatar.png"} alt="" />
                     <div className="texts">
                         <span>{user?.username}</span>
@@ -188,6 +194,11 @@ const Chat = () => {
                     placeholder={(isCurrentUserBlocked || isReceiverBlocked) ? "You cannot send a message" : "Type a message"}
                     value={text} 
                     onChange={e=>setText(e.target.value)} 
+                    onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                            handleSendText();
+                        }
+                    }}
                     disabled={isCurrentUserBlocked || isReceiverBlocked} 
                 />
                 <div className="emoji">
@@ -213,6 +224,11 @@ const Chat = () => {
                         <input
                             placeholder="Add a message to this image."
                             value={imgMsg}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter') {
+                                    handleSendImg();
+                                }
+                            }}
                             onChange={(e) => setImgMsg(e.target.value)}
                         />
                         <button onClick={handleSendImg}>Send Image</button>

diff --git a/src/components/chatComp/chatApp_detail/Detail.css b/src/components/chatComp/chatApp_detail/Detail.css
@@ -8,6 +8,7 @@
         align-items: center;
         gap: 15px;
         border-bottom: 1px solid #07060635;
+        cursor: pointer;
 
         img {
             width: 80px;

diff --git a/src/components/chatComp/chatApp_detail/Detail.jsx b/src/components/chatComp/chatApp_detail/Detail.jsx
@@ -4,6 +4,7 @@ import { useChatStore } from '../../../lib/chatStore';
 import { useUserStore } from '../../../lib/userStore';
 import { db } from '../../../lib/firebaseConfig';
 import './Detail.css';
+import { useNavigate } from 'react-router-dom';
 
 const Detail = () => {
     const { chatId, user, isCurrentUserBlocked, isReceiverBlocked, changeBlock } = useChatStore();
@@ -12,6 +13,8 @@ const Detail = () => {
     const [showPhotos, setShowPhotos] = useState(false);
     const [icon, setIcon] = useState("/chat-icons/arrowDown.png");
 
+    const navigate = useNavigate();
+
     useEffect(() => {
         if (!chatId) return;
 
@@ -49,9 +52,13 @@ const Detail = () => {
         setIcon(showPhotos ? "/chat-icons/arrowDown.png" : "/chat-icons/arrowUp.png");
     };
 
+    const handleProfileClick = () => {
+        navigate(`/profile/${user?.id}`);
+    }
+
     return (
         <div className='detail'>
-        <div className="user">
+        <div className="user" onClick={handleProfileClick}>
             <img src={user?.profilePic || "/chat-icons/avatar.png"} alt="" />
             <h2>{user?.username}</h2>
         </div>

diff --git a/src/components/chatComp/chatApp_list/addUser/addUser.jsx b/src/components/chatComp/chatApp_list/addUser/addUser.jsx
@@ -1,13 +1,16 @@
-import { arrayUnion, collection, doc, getDocs, query, setDoc, updateDoc, where } from "firebase/firestore";
+import { addDoc, arrayUnion, collection, doc, getDoc, getDocs, query, updateDoc, where } from "firebase/firestore";
 import "./addUser.css"
 import { db } from "../../../../lib/firebaseConfig";
 import { useState } from "react";
 import { useUserStore } from "../../../../lib/userStore";
+import toast from "react-hot-toast";
+import { useNavigate } from "react-router-dom";
 
 const addUser = ({ closePopup }) => {
 	const [user, setUser] = useState(null);
 	const [error, setError] = useState("");
 	const { currentUser } = useUserStore();
+	const navigate = useNavigate();
 
 	const handleSearch = async e => {
 		e.preventDefault();
@@ -27,48 +30,61 @@ const addUser = ({ closePopup }) => {
 			setError("User not found.");
 		}
 		} catch (err) {
-		console.log(err);
-		setUser(null); 
-		setError("User not found.");
+			console.log(err);
+			setUser(null); 
+			setError("User not found.");
 		}
 	};
 
 	const handleAdd = async () => {
-
 		const chatRef = collection(db, "Chats");
 		const userChatsRef = collection(db, "UserChats");
 
 		try {
-		const newChatRef = doc(chatRef);
+			const currentUserChatsDoc = await getDoc(doc(userChatsRef, currentUser.id)); 
+			const existingChats = currentUserChatsDoc.exists() && currentUserChatsDoc.data().chats ? currentUserChatsDoc.data().chats : [];
+			const existingChat = existingChats.find( chat => chat.receiverId === user.id ); 
+
+			if (existingChat) { 
+				toast.error("A chat with this user already exists.");
+				navigate(`/chat/${currentUser.id}/${existingChat.id}`);
+				return; 
+      		} 
 
-		await setDoc(newChatRef, {
-			createdAt: new Date(),
-			messages:[],
-		});
+			const newChatRef = await addDoc(chatRef, {
+				createdAt: new Date(),
+				messages: [],
+			});
+
+			if (!newChatRef.id) {
+                throw new Error("Failed to create new chat");
+            }
 
-		await updateDoc(doc(userChatsRef, user.id), {
-			chats: arrayUnion({
-			chatId: newChatRef.id,
-			lastMessage: "",
-			receiverId: currentUser.id,
-			updatedAt: Date.now(),
-			}),
-		});
+			await updateDoc(doc(userChatsRef, user.id), {
+				chats: arrayUnion({
+					chatId: newChatRef.id,
+					lastMessage: "",
+					receiverId: currentUser.id,
+					updatedAt: Date.now(),
+				}),
+			});
 
-		await updateDoc(doc(userChatsRef, currentUser.id), {
-			chats: arrayUnion({
-			chatId: newChatRef.id,
-			lastMessage: "",
-			receiverId: user.id,
-			updatedAt: Date.now(),
-			}),
-		});
+			await updateDoc(doc(userChatsRef, currentUser.id), {
+				chats: arrayUnion({
+					chatId: newChatRef.id,
+					lastMessage: "",
+					receiverId: user.id,
+					updatedAt: Date.now(),
+				}),
+			});
+
+    		closePopup();
+			navigate(`/chat/${currentUser.id}/${newChatRef.id}`);
 
-    closePopup();
 		} catch (err) {
-		console.log(err);
+		  console.log(err);
 		}
-	}
+	};
 
 	return (
 		<div className="addUser">
@@ -90,7 +106,7 @@ const addUser = ({ closePopup }) => {
 		) : (
 			error && 
 			<div className="error">
-			{error}
+			  {error}
 			</div>
 		)}
 		</div>

diff --git a/src/components/chatComp/chatApp_list/chatList/ChatList.jsx b/src/components/chatComp/chatApp_list/chatList/ChatList.jsx
@@ -5,6 +5,7 @@ import { useUserStore } from '../../../../lib/userStore';
 import { doc, onSnapshot, getDoc, updateDoc } from 'firebase/firestore';
 import { db } from '../../../../lib/firebaseConfig';
 import { useChatStore } from '../../../../lib/chatStore';
+import { useNavigate } from 'react-router-dom';
 
 const ChatList = () => {
     const [chats, setChats] = useState([]);
@@ -14,6 +15,8 @@ const ChatList = () => {
     const { currentUser } = useUserStore();
     const { changeChat } = useChatStore();
 
+    const navigate = useNavigate();
+
     useEffect(() => {
         if (!currentUser || !currentUser.id) {
             console.error("Current user is not defined");
@@ -63,6 +66,7 @@ const ChatList = () => {
                 chats: userChats,
             })
             changeChat(chat.chatId, chat.user);
+            navigate(`/chat/${currentUser.id}/${chat.chatId}`);
 
         } catch (err) {
             console.log(err);

diff --git a/src/components/chatComp/chatApp_list/userInfo/UserInfo.css b/src/components/chatComp/chatApp_list/userInfo/UserInfo.css
@@ -9,6 +9,7 @@
         align-items: center;
         gap: 20px;
         flex-grow: 1;
+        cursor: pointer;
 
         h2 {
             font-size: 18px; 

diff --git a/src/components/chatComp/chatApp_list/userInfo/UserInfo.jsx b/src/components/chatComp/chatApp_list/userInfo/UserInfo.jsx
@@ -1,12 +1,18 @@
+import { useNavigate } from 'react-router-dom';
 import { useUserStore } from '../../../../lib/userStore';
 import './UserInfo.css';
 
 const UserInfo = () => {
     const {currentUser } = useUserStore();
+    const navigate = useNavigate();
+
+    const handleProfileClick = () => {
+        navigate(`/profile/${currentUser.id}`);
+    }
 
     return (
         <div className='userInfo'>
-            <div className='user'>
+            <div className='user' onClick={handleProfileClick}>
                 <img src={currentUser.profilePic || '/chat-icons/avatar.png'} alt='' />
                 <h2>{currentUser.username}</h2>
             </div>

diff --git a/src/lib/chatStore.js b/src/lib/chatStore.js
@@ -3,6 +3,7 @@ import { useUserStore } from './userStore';
 
 export const useChatStore = create((set) => ({
     chatId: null,
+    setChatId: (id) => set({ chatId: id }),
     user: null,
     isCurrentUserBlocked: false,
     isReceiverBlocked: false,

diff --git a/src/pages/chatapp/ChatApp.jsx b/src/pages/chatapp/ChatApp.jsx
@@ -10,10 +10,12 @@ import List from "../../components/chatComp/chatApp_list/List.jsx";
 import Header from "../../components/header/Header";
 import LoginSignupForm from "../../pages/registration/LoginSignupForm.jsx";
 import { useChatStore } from '../../lib/chatStore.js';
+import { useParams } from 'react-router-dom';
 
 const ChatApp = () => {
+	const { userID, chatID } = useParams();
 	const { currentUser, isLoading, fetchUserInfo } = useUserStore();
-	const { chatId } = useChatStore();
+	const { chatId, setChatId } = useChatStore();
 
 	useEffect(() => {
 		const unSub = onAuthStateChanged(auth, (user) => {
@@ -29,7 +31,11 @@ const ChatApp = () => {
 		};
 	}, [fetchUserInfo]);
 
-	console.log(currentUser);
+	useEffect(() => {
+        if (userID && chatID) {
+            setChatId(chatID);
+        }
+    }, [userID, chatID, setChatId]);
 
 	if (isLoading) {
 		// return <LoadingPage />;

diff --git a/src/pages/registration/LoginSignupForm.css b/src/pages/registration/LoginSignupForm.css
@@ -96,6 +96,21 @@ body {
 		width: 100%;
 	}
 
+	.password {
+		display: flex;
+		align-items: center;
+		position: relative;
+		width: 100%;
+	}
+
+	.password p {
+		position: absolute;
+		right: 0;
+		cursor: pointer;
+		padding-top: 14px;
+		padding-right: 10px;
+	}
+
 	.container {
 		background-color: #fff;
 		border-radius: 10px;