+
+ )
+};
+
+export default Chat;
\ No newline at end of file
diff --git a/src/components/chatComp/chatApp_detail/Detail.css b/src/components/chatComp/chatApp_detail/Detail.css
new file mode 100644
index 0000000..0c281f8
--- /dev/null
+++ b/src/components/chatComp/chatApp_detail/Detail.css
@@ -0,0 +1,111 @@
+.detail {
+ flex: 1;
+
+ .user {
+ padding: 30px 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 15px;
+ border-bottom: 1px solid #07060635;
+
+ img {
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ object-fit: cover;
+ }
+
+ h2 {
+ padding: 0;
+ margin: 0;
+ font-size: 28px;
+ }
+
+ p {
+ padding: 0;
+ margin: 0;
+ font-size: 14px;
+ }
+ }
+
+ .info {
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 25px;
+
+ .option {
+
+ .setting {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ img {
+ width: 30px;
+ height: 30px;
+ background-color: #09021735;
+ padding: 10px;
+ border-radius: 50%;
+ cursor: pointer;
+ }
+ }
+
+ .photos {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ margin-top: 20px;
+
+ .photoItem {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .photoDetail {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+
+ img {
+ width: 40px;
+ height: 40px;
+ border-radius: 5px;
+ object-fit: cover;
+ }
+
+ span {
+ font-size: 14px;
+ color: rgba(255, 255, 255, 0.837);
+ font-weight: 300;
+ }
+ }
+
+ .icon {
+ width: 30px;
+ height: 30px;
+ background-color: #09021735;
+ padding: 10px;
+ border-radius: 50%;
+ cursor: pointer;
+ }
+ }
+ }
+ }
+
+ button {
+ padding: 16px 20px;
+ background-color: rgba(189, 6, 6, 0.432);
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 200ms ease-in-out;
+
+ &:hover {
+ background-color: rgba(189, 6, 6, 0.653);
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/chatComp/chatApp_detail/Detail.jsx b/src/components/chatComp/chatApp_detail/Detail.jsx
new file mode 100644
index 0000000..83583a5
--- /dev/null
+++ b/src/components/chatComp/chatApp_detail/Detail.jsx
@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from 'react';
+import { arrayRemove, arrayUnion, doc, updateDoc, collection, query, where, onSnapshot } from 'firebase/firestore';
+import { useChatStore } from '../../../lib/chatStore';
+import { useUserStore } from '../../../lib/userStore';
+import { db } from '../../../lib/firebaseConfig';
+import './Detail.css';
+
+const Detail = () => {
+ const { chatId, user, isCurrentUserBlocked, isReceiverBlocked, changeBlock } = useChatStore();
+ const { currentUser } = useUserStore();
+ const [photos, setPhotos] = useState([]);
+ const [showPhotos, setShowPhotos] = useState(false);
+ const [icon, setIcon] = useState("/src/assets/chat-icons/arrowDown.png");
+
+ useEffect(() => {
+ if (!chatId) return;
+
+ const photosRef = collection(db, 'photos');
+ const q = query(photosRef, where('chatId', '==', chatId));
+
+ const unsubscribe = onSnapshot(q, (querySnapshot) => {
+ const photosData = [];
+ querySnapshot.forEach((doc) => {
+ photosData.push({ id: doc.id, ...doc.data() });
+ });
+ setPhotos(photosData);
+ });
+
+ return () => unsubscribe();
+ }, [chatId]);
+
+ const handleBlock = async () => {
+ if (!user) return;
+
+ const userDocRef = doc(db, "Users", currentUser.id);
+
+ try {
+ await updateDoc(userDocRef, {
+ blocked: isReceiverBlocked ? arrayRemove(user.id) : arrayUnion(user.id),
+ });
+ changeBlock();
+ } catch (err) {
+ console.log(err);
+ }
+ }
+
+ const toggleShowPhotos = () => {
+ setShowPhotos(!showPhotos);
+ setIcon(showPhotos ? "/src/assets/chat-icons/arrowDown.png" : "/src/assets/chat-icons/arrowUp.png");
+ };
+
+ return (
+
+
+
+ 
+
+
+ {user?.username}
+
+
+
+
+ {chat?.messages?.map((message) => {
+ const parsedDate = new Date(message.createdAt);
+ return (
+
+
+
+ );
+ })}
+ {img.url &&
+ {message.img && 
}
+
+ {message.text}
+ {isValid(parsedDate) ? formatDistanceToNow(parsedDate, { addSuffix: true }) : "Invalid date"} +
+
}
+
+
+ 
+
+
+
+
+
+
+
+ setText(e.target.value)}
+ disabled={isCurrentUserBlocked || isReceiverBlocked} />
+
+ 
!isCurrentUserBlocked && !isReceiverBlocked && setOpen((prev) => !prev)}
+ className={(isCurrentUserBlocked || isReceiverBlocked) ? 'disabled' : ''}
+ />
+
+
+ !isCurrentUserBlocked && !isReceiverBlocked && setOpen((prev) => !prev)}
+ className={(isCurrentUserBlocked || isReceiverBlocked) ? 'disabled' : ''}
+ />
+
+
+
+
+ )
+};
+
+export default Detail;
diff --git a/src/components/chatComp/chatApp_list/List.css b/src/components/chatComp/chatApp_list/List.css
new file mode 100644
index 0000000..21b150b
--- /dev/null
+++ b/src/components/chatComp/chatApp_list/List.css
@@ -0,0 +1,5 @@
+.list {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+}
\ No newline at end of file
diff --git a/src/components/chatComp/chatApp_list/List.jsx b/src/components/chatComp/chatApp_list/List.jsx
new file mode 100644
index 0000000..cc9efa7
--- /dev/null
+++ b/src/components/chatComp/chatApp_list/List.jsx
@@ -0,0 +1,14 @@
+import './List.css';
+import UserInfo from './userInfo/UserInfo';
+import ChatList from './chatList/ChatList';
+
+const List = () => {
+ return (
+
+
+
+ {user?.username}
+
+
+
+
+
+
+
+ Shared Photos
+
+
+ {showPhotos && (
+
+ {photos.map((photo) => (
+
+ )}
+
+ 
+
+
+ ))}
+
+ 
+ {photo.id}
+
+
+
+
+
+
+ )
+};
+
+export default List;
\ No newline at end of file
diff --git a/src/components/chatComp/chatApp_list/addUser/addUser.css b/src/components/chatComp/chatApp_list/addUser/addUser.css
new file mode 100644
index 0000000..dbeae0d
--- /dev/null
+++ b/src/components/chatComp/chatApp_list/addUser/addUser.css
@@ -0,0 +1,72 @@
+.addUser {
+ width: max-content;
+ height: max-content;
+ padding: 30px;
+ background-color: rgba(9, 11, 13, 0.696);
+ border-radius: 10px;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin: auto;
+
+ form {
+ display: flex;
+ gap: 20px;
+
+ input {
+ padding: 20px;
+ border-radius: 10px;
+ border: none;
+ outline: none;
+ }
+
+ button {
+ padding: 20px;
+ border-radius: 10px;
+ background-color: #879DE6;
+ color: white;
+ border: none;
+ cursor: pointer;
+ }
+ }
+
+ .user {
+ margin-top: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .detail {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+
+ img {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ object-fit: cover;
+ }
+ }
+
+ button {
+ padding: 10px;
+ border-radius: 10px;
+ background-color: #879DE6;
+ color: white;
+ border: none;
+ cursor: pointer;
+ }
+ }
+
+ .error {
+ margin-top: 50px;
+ padding: 16px;
+ border-radius: 10px;
+ color: white;
+ text-align: center;
+ font-size: 15px;
+ }
+}
\ No newline at end of file
diff --git a/src/components/chatComp/chatApp_list/addUser/addUser.jsx b/src/components/chatComp/chatApp_list/addUser/addUser.jsx
new file mode 100644
index 0000000..dc2fb1c
--- /dev/null
+++ b/src/components/chatComp/chatApp_list/addUser/addUser.jsx
@@ -0,0 +1,96 @@
+import { arrayUnion, collection, doc, getDocs, query, serverTimestamp, setDoc, updateDoc, where } from "firebase/firestore";
+import "./addUser.css"
+import { db } from "../../../../lib/firebaseConfig";
+import { useState } from "react";
+import { useUserStore } from "../../../../lib/userStore";
+
+const addUser = () => {
+ const [user, setUser] = useState(null);
+ const [error, setError] = useState("");
+ const { currentUser } = useUserStore();
+
+ const handleSearch = async e => {
+ e.preventDefault();
+ const formData = new FormData(e.target);
+ const username = formData.get("username");
+
+ try {
+ const userRef = collection(db, "Users");
+ const q = query(userRef, where("username", "==", username));
+ const querySnapShot = await getDocs(q);
+
+ if (!querySnapShot.empty) {
+ setUser(querySnapShot.docs[0].data());
+ setError("");
+ } else {
+ setUser(null);
+ setError("User not found.");
+ }
+ } catch (err) {
+ 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);
+
+ await setDoc(newChatRef, {
+ createdAt: serverTimestamp(),
+ messages:[],
+ });
+
+ 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(),
+ }),
+ });
+
+ } catch (err) {
+ console.log(err);
+ }
+ }
+
+ return (
+
+
+ {user ? (
+
+ );
+};
+
+export default addUser;
\ No newline at end of file
diff --git a/src/components/chatComp/chatApp_list/chatList/ChatList.css b/src/components/chatComp/chatApp_list/chatList/ChatList.css
new file mode 100644
index 0000000..afb546f
--- /dev/null
+++ b/src/components/chatComp/chatApp_list/chatList/ChatList.css
@@ -0,0 +1,80 @@
+.chatList {
+ flex: 1;
+ overflow: auto;
+
+ .search {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ padding: 20px;
+
+ .searchBar {
+ flex: 1;
+ background-color: #aeadad74;
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ border-radius: 10px;
+ padding: 10px;
+
+ input {
+ background-color: transparent;
+ border: none;
+ outline: none;
+ color: white;
+ flex: 1;
+ }
+
+ img {
+ width: 20px;
+ height: 20px;
+ }
+ }
+
+ .add {
+ width: 36px;
+ height: 36px;
+ background-color: #aeadad74;
+ padding: 10px;
+ border-radius: 10px;
+ cursor: pointer;
+ }
+ }
+
+ .item {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ padding: 15px;
+ cursor: pointer;
+ border-bottom: 1px solid #07060635;
+
+ img {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ object-fit: cover;
+ }
+
+ .texts {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+
+ span {
+ font-weight: 500;
+ font-size: 16px;
+ }
+
+ p {
+ font-weight: 300;
+ font-size: 14px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 200px;
+ margin: 0;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/chatComp/chatApp_list/chatList/ChatList.jsx b/src/components/chatComp/chatApp_list/chatList/ChatList.jsx
new file mode 100644
index 0000000..e8150df
--- /dev/null
+++ b/src/components/chatComp/chatApp_list/chatList/ChatList.jsx
@@ -0,0 +1,114 @@
+import { useState, useEffect } from 'react';
+import './ChatList.css';
+import AddUser from '/src/components/chatComp/chatApp_list/addUser/addUser.jsx';
+import { useUserStore } from '../../../../lib/userStore';
+import { doc, onSnapshot, getDoc, updateDoc } from 'firebase/firestore';
+import { db } from '../../../../lib/firebaseConfig';
+import { useChatStore } from '../../../../lib/chatStore';
+
+const ChatList = () => {
+ const [chats, setChats] = useState([]);
+ const [addMode, setAddMode] = useState(false);
+ const [input, setInput] = useState("");
+
+ const { currentUser } = useUserStore();
+ const { changeChat } = useChatStore();
+
+ useEffect(() => {
+ if (!currentUser || !currentUser.id) {
+ console.error("Current user is not defined");
+ return;
+ }
+
+ const unSub = onSnapshot(doc(db, "UserChats", currentUser.id), async (res) => {
+ try {
+ const items = res.data()?.chats || [];
+
+ const promises = items.map(async (item) => {
+ const userDocRef = doc(db, "Users", item.receiverId);
+ const userDocSnap = await getDoc(userDocRef);
+
+ const user = userDocSnap.data();
+
+ return { ...item, user };
+ });
+
+ const chatData = await Promise.all(promises);
+
+ setChats(chatData.sort((a, b) => b.updatedAt - a.updatedAt));
+ } catch (error) {
+ console.error("Error fetching chat data:", error);
+ }
+ });
+
+ return () => {
+ unSub();
+ };
+ }, [currentUser]);
+
+ const handleSelect = async (chat) => {
+
+ const userChats = chats.map((item) => {
+ const { user, ...rest } = item;
+ return rest;
+ });
+
+ const chatIndex = userChats.findIndex(item => item.chatId === chat.chatId);
+ userChats[chatIndex].isSeen = true;
+
+ const userChatsRef = doc(db, "UserChats", currentUser.id);
+
+ try {
+ await updateDoc(userChatsRef, {
+ chats: userChats,
+ })
+ changeChat(chat.chatId, chat.user);
+
+ } catch (err) {
+ console.log(err);
+ }
+ };
+
+ const filteredChats = chats.filter((c) =>
+ c.user.username.toLowerCase().includes(input.toLowerCase())
+ );
+
+ return (
+
+
+ ) : (
+ error &&
+
+ 
+ {user.username}
+
+
+
+ {error}
+
+ )}
+
+
+ );
+};
+
+export default ChatList;
diff --git a/src/components/chatComp/chatApp_list/userInfo/UserInfo.css b/src/components/chatComp/chatApp_list/userInfo/UserInfo.css
new file mode 100644
index 0000000..d39371b
--- /dev/null
+++ b/src/components/chatComp/chatApp_list/userInfo/UserInfo.css
@@ -0,0 +1,40 @@
+.userInfo {
+ padding: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .user {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ flex-grow: 1;
+
+ h2 {
+ font-size: 18px;
+ margin: 0;
+ white-space: nowrap;
+ overflow: hidden;
+ flex-grow: 1;
+ padding-right: 20px;
+ }
+
+ img{
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ object-fit: cover;
+ }
+ }
+
+ .icons {
+ display: flex;
+ gap: 20px;
+
+ img {
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/chatComp/chatApp_list/userInfo/UserInfo.jsx b/src/components/chatComp/chatApp_list/userInfo/UserInfo.jsx
new file mode 100644
index 0000000..cbf53c0
--- /dev/null
+++ b/src/components/chatComp/chatApp_list/userInfo/UserInfo.jsx
@@ -0,0 +1,19 @@
+import { useUserStore } from '../../../../lib/userStore';
+import './UserInfo.css';
+
+const UserInfo = () => {
+ const {currentUser } = useUserStore();
+
+ return (
+
+ 
setAddMode((prev) => !prev)} />
+
+ {filteredChats.map((chat) => (
+
+ 
+ setInput(e.target.value)}/>
+
+
+ setInput(e.target.value)}/>
+ handleSelect(chat)}
+ style= {{
+ backgroundColor: chat?.isSeen ? "transparent" : "#5083FE",
+ }}>
+ )
+
+ ))}
+
+ {addMode &&
+ {chat.user.blocked.includes(currentUser.id)
+ ? "User"
+ : chat.user.username}
+
+
+ {chat.lastMessage}
+
+
+ )
+};
+
+export default UserInfo;
\ No newline at end of file
diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
index e5d1b24..ec5748d 100644
--- a/src/components/header/Header.jsx
+++ b/src/components/header/Header.jsx
@@ -4,7 +4,7 @@ import { Link, useNavigate } from 'react-router-dom';
import { useLikes } from './likecounter/LikeCounter';
import { FaComment, FaHeart, FaUserAlt, FaBell } from 'react-icons/fa';
import { query, collection, where, getDocs } from 'firebase/firestore';
-import { db } from '../../firebase/firebaseConfig';
+import { db } from '../../lib/firebaseConfig';
import SearchBar from '../searchbar/Searchbar';
import MechHub_Logo from "../../assets/Logo/MechHub_logo.png";
@@ -54,7 +54,7 @@ function Header() {
};
const handleChats = () => {
- navigate(`/`);
+ window.location.href = `/chat/${currentUser.uid}`;
};
const handleNotifs = () => {
diff --git a/src/components/header/likecounter/LikeCounter.jsx b/src/components/header/likecounter/LikeCounter.jsx
index d5fe89f..5639564 100644
--- a/src/components/header/likecounter/LikeCounter.jsx
+++ b/src/components/header/likecounter/LikeCounter.jsx
@@ -1,5 +1,5 @@
import React, { createContext, useContext, useState, useEffect } from 'react';
-import { db } from '../../../firebase/firebaseConfig';
+import { db } from '../../../lib/firebaseConfig';
import { doc, getDoc, setDoc, onSnapshot, collection } from 'firebase/firestore';
import { useAuth } from '../../../Auth';
diff --git a/src/components/product cards/FeaturedProduct.css b/src/components/product cards/FeaturedProduct.css
new file mode 100644
index 0000000..c1e2dfc
--- /dev/null
+++ b/src/components/product cards/FeaturedProduct.css
@@ -0,0 +1,60 @@
+.product {
+ display: grid;
+ margin: 0 40px 40px 40px;
+ border: 1px solid #eee;
+ padding: 20px;
+ width: 250px;
+ border-radius: 15px;
+ overflow: hidden;
+ box-shadow: 5px 5px 10px #ddd;
+ transition: 0.5s all ease-out;
+}
+
+.product p {
+ margin-top: 10px;
+}
+
+.product:hover {
+ transform: translateY(-5px);
+ }
+
+.product img {
+ height: 200px;
+ justify-self: center;
+}
+
+.product h4 {
+ margin: 20px 0 0 0;
+}
+
+.product h5 {
+ margin: 10px 0 0 0;
+ font-weight: 500;
+}
+
+
+h2 {
+ text-align: center;
+ color: rgb(232, 139, 45);
+ margin: 20px 40px;
+ position: relative;
+ line-height: 60px;
+}
+
+h2::after {
+ content: " ";
+ background: #d55200;
+ width: 80px;
+ height: 5px;
+ border-radius: 5px;
+ position: absolute;
+ left: 50%;
+ transform: translate(-50%);
+}
+
+.products-list {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ justify-content: center;
+}
\ No newline at end of file
diff --git a/src/components/productcards/ProductCards.jsx b/src/components/productcards/ProductCards.jsx
index 08a8393..14a78e1 100644
--- a/src/components/productcards/ProductCards.jsx
+++ b/src/components/productcards/ProductCards.jsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
import { FaRegHeart, FaHeart } from "react-icons/fa";
import { useNavigate } from 'react-router-dom';
import { addDoc, collection, doc, getDoc, setDoc, deleteDoc, query, where, getDocs, updateDoc } from 'firebase/firestore';
-import { db } from '../../firebase/firebaseConfig';
+import { db } from '../../lib/firebaseConfig';
import { useAuth } from '../../Auth';
import { useLikes } from '../header/likecounter/LikeCounter';
diff --git a/src/lib/chatStore.js b/src/lib/chatStore.js
new file mode 100644
index 0000000..378e8c8
--- /dev/null
+++ b/src/lib/chatStore.js
@@ -0,0 +1,57 @@
+import { create } from 'zustand';
+import { useUserStore } from './userStore';
+
+export const useChatStore = create((set) => ({
+ chatId: null,
+ user: null,
+ isCurrentUserBlocked: false,
+ isReceiverBlocked: false,
+ changeChat: (chatId, user) => {
+ const currentUser = useUserStore.getState().currentUser;
+ console.log('Current User:', currentUser);
+ console.log('Selected User:', user);
+
+ // Check if currentUser and user are defined and have the blocked property
+ if (!currentUser || !Array.isArray(currentUser.blocked)) {
+ console.error('Current user is undefined or does not have a blocked property');
+ return;
+ }
+
+ if (!user || !Array.isArray(user.blocked)) {
+ console.error('User is undefined or does not have a blocked property');
+ return;
+ }
+
+
+ // Check if current user is blocked
+ if (user.blocked.includes(currentUser.id)) {
+ return set({
+ chatId,
+ user: null,
+ isCurrentUserBlocked: true,
+ isReceiverBlocked: false,
+ });
+ }
+ // Check if receiver is blocked
+ else if (currentUser.blocked.includes(user.id)) {
+ return set({
+ chatId,
+ user: user,
+ isCurrentUserBlocked: false,
+ isReceiverBlocked: true,
+ });
+ } else {
+ return set({
+ chatId,
+ user,
+ isCurrentUserBlocked: false,
+ isReceiverBlocked: false,
+ });
+ }
+ },
+
+ changeBlock: () => {
+ set(state => ({...state, isReceiverBlocked: !state.isReceiverBlocked}))
+ },
+
+}));
\ No newline at end of file
diff --git a/src/firebase/firebaseConfig.jsx b/src/lib/firebaseConfig.js
similarity index 65%
rename from src/firebase/firebaseConfig.jsx
rename to src/lib/firebaseConfig.js
index f646e7d..0325caf 100644
--- a/src/firebase/firebaseConfig.jsx
+++ b/src/lib/firebaseConfig.js
@@ -1,11 +1,8 @@
-// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
-// import { getAnalytics } from "firebase/analytics";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
+import { getStorage } from "firebase/storage";
-// Your web app's Firebase configuration
-// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyDHGTNVbJZlm3XADrOrVc2Yyuo1mve39XU",
authDomain: "orbital-mechhub.firebaseapp.com",
@@ -16,11 +13,10 @@ const firebaseConfig = {
measurementId: "G-ZNS909ZKGD"
};
-// Initialize Firebase
const app = initializeApp(firebaseConfig);
-// const analytics = getAnalytics(app);
const auth = getAuth(app);
const db = getFirestore(app);
+const storage = getStorage(app);
-export { auth, db };
\ No newline at end of file
+export { auth, db, storage };
\ No newline at end of file
diff --git a/src/lib/upload.js b/src/lib/upload.js
new file mode 100644
index 0000000..536039b
--- /dev/null
+++ b/src/lib/upload.js
@@ -0,0 +1,34 @@
+import { getDownloadURL, uploadBytesResumable, ref } from 'firebase/storage';
+import { doc, setDoc } from 'firebase/firestore';
+import { storage, db } from './firebaseConfig';
+
+const upload = async (file, chatId) => {
+ const date = new Date().toISOString();
+ const storageRef = ref(storage, `images/${date}-${file.name}`);
+ const uploadTask = uploadBytesResumable(storageRef, file);
+
+ return new Promise((resolve, reject) => {
+ uploadTask.on(
+ 'state_changed',
+ (snapshot) => {
+ const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
+ console.log('Upload is ' + progress + '% done');
+ },
+ (error) => {
+ reject("Something went wrong! " + error.code);
+ },
+ async () => {
+ const downloadURL = await getDownloadURL(uploadTask.snapshot.ref);
+ const photoDocRef = doc(db, 'photos', `${date}-${file.name}`);
+ await setDoc(photoDocRef, {
+ url: downloadURL,
+ chatId: chatId,
+ uploadedAt: date
+ });
+ resolve(downloadURL);
+ }
+ );
+ });
+};
+
+export default upload;
diff --git a/src/lib/userStore.js b/src/lib/userStore.js
new file mode 100644
index 0000000..ba82520
--- /dev/null
+++ b/src/lib/userStore.js
@@ -0,0 +1,27 @@
+import { create } from 'zustand'
+import { db } from './firebaseConfig';
+import { doc, getDoc } from 'firebase/firestore';
+
+ export const useUserStore = create((set) => ({
+ currentUser: null,
+ isLoading: true,
+
+ fetchUserInfo: async (uid) => {
+ if (!uid) return set({currentUser:null, isLoading:false});
+
+ try {
+ const docRef = doc(db, "Users", uid);
+ const docSnap = await getDoc(docRef);
+
+ if (docSnap.exists()) {
+ set({currentUser: docSnap.data(), isLoading: false});
+ } else {
+ set({currentUser: null, isLoading: false});
+ }
+ } catch (err) {
+ console.log(err);
+ return set({currentUser:null, isLoading:false});
+ }
+
+ },
+}));
\ No newline at end of file
diff --git a/src/pages/chatapp/ChatApp.css b/src/pages/chatapp/ChatApp.css
new file mode 100644
index 0000000..3e8e689
--- /dev/null
+++ b/src/pages/chatapp/ChatApp.css
@@ -0,0 +1,53 @@
+.chat-page {
+ display:flex;
+ flex-direction: column;
+ flex: 1;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ color: white;
+ background-color: #FFF;
+ margin: 0;
+ padding: 0;
+ height: 100%;
+}
+
+.chat-header {
+ position: fixed;
+ width: 100%;
+ top: 0;
+}
+
+.chat-container {
+ padding: 0;
+ display: flex;
+ flex: 1;
+ margin-top: 64px;
+ box-sizing: border-box;
+ font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
+ "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+}
+
+
+.inner-container {
+ width: 80vw;
+ height: 90vh;
+ background-color: #aeadad74;
+ backdrop-filter: blur(19px) saturate(180%);
+ border-radius: 12px;
+ border: 1px solid rgba(255, 255, 255, 0.076);
+ display: flex;
+}
+
+.loading {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 50px;
+ font-size: 36px;
+ border-radius: 10px;
+ background-color: rgba(9, 11, 13, 0.696);
+}
diff --git a/src/pages/chatapp/ChatApp.jsx b/src/pages/chatapp/ChatApp.jsx
new file mode 100644
index 0000000..df58161
--- /dev/null
+++ b/src/pages/chatapp/ChatApp.jsx
@@ -0,0 +1,61 @@
+import './ChatApp.css';
+import { useEffect } from 'react';
+import { onAuthStateChanged } from 'firebase/auth';
+import { auth } from "/src/lib/firebaseConfig";
+import { useUserStore } from '../../lib/userStore.js';
+
+import Chat from "../../components/chatComp/chatApp_chat/Chat.jsx";
+import Detail from "../../components/chatComp/chatApp_detail/Detail.jsx";
+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';
+
+const ChatApp = () => {
+ const { currentUser, isLoading, fetchUserInfo } = useUserStore();
+ const { chatId } = useChatStore();
+
+ useEffect(() => {
+ const unSub = onAuthStateChanged(auth, (user) => {
+ if (user) {
+ fetchUserInfo(user.uid);
+ } else {
+ fetchUserInfo(null);
+ }
+ });
+
+ return () => {
+ unSub();
+ };
+ }, [fetchUserInfo]);
+
+ console.log(currentUser);
+
+ if (isLoading) {
+ // return
+ 
+
+ {currentUser.username}
+
+
+ Loading...
+ }
+
+ return (
+ <>
+
+ {currentUser ? (
+ <>
+
+
+ );``
+};
+
+export default ChatApp;
diff --git a/src/pages/landing/LandingPage.jsx b/src/pages/landing/LandingPage.jsx
index f865f27..e09504a 100644
--- a/src/pages/landing/LandingPage.jsx
+++ b/src/pages/landing/LandingPage.jsx
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
import { collection, getDocs, query, where, getDoc, doc } from "firebase/firestore";
-import { db } from "../../firebase/firebaseConfig";
+import { db } from "../../lib/firebaseConfig";
import { useAuth } from '../../Auth';
import Header from '../../components/header/Header';
diff --git a/src/pages/likes/Likes.jsx b/src/pages/likes/Likes.jsx
index 2b6fcb5..d0a1f0b 100644
--- a/src/pages/likes/Likes.jsx
+++ b/src/pages/likes/Likes.jsx
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
-import { db } from '../../firebase/firebaseConfig';
+import { db } from '../../lib/firebaseConfig';
import { collection, getDocs, query, where, doc, getDoc } from 'firebase/firestore';
import { useAuth } from '../../Auth';
diff --git a/src/pages/listing/Listing.jsx b/src/pages/listing/Listing.jsx
index 29b5e65..7ceaafe 100644
--- a/src/pages/listing/Listing.jsx
+++ b/src/pages/listing/Listing.jsx
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
-import { db } from '../../firebase/firebaseConfig';
+import { db } from '../../lib/firebaseConfig';
import { collection, addDoc, doc, getDoc, updateDoc, getDocs, query } from 'firebase/firestore';
import { useAuth } from '../../Auth';
import { useNavigate, useParams } from 'react-router-dom';
diff --git a/src/pages/notificaiton/Notificaitons.jsx b/src/pages/notificaiton/Notificaitons.jsx
index d2613b2..9c67667 100644
--- a/src/pages/notificaiton/Notificaitons.jsx
+++ b/src/pages/notificaiton/Notificaitons.jsx
@@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
import { collection, query, where, getDocs, updateDoc, doc, getDoc, deleteDoc } from 'firebase/firestore';
-import { db } from '../../firebase/firebaseConfig';
+import { db } from '../../lib/firebaseConfig';
import { useAuth } from '../../Auth';
import Header from '../../components/header/Header';
diff --git a/src/pages/registration/GoogleAuth.jsx b/src/pages/registration/GoogleAuth.jsx
index 843ca05..3edcdad 100644
--- a/src/pages/registration/GoogleAuth.jsx
+++ b/src/pages/registration/GoogleAuth.jsx
@@ -1,5 +1,5 @@
import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
-import { auth, db } from "../../firebase/firebaseConfig";
+import { auth, db } from "../../lib/firebaseConfig";
import { doc, setDoc, getDoc } from "firebase/firestore";
import { toast } from 'react-hot-toast';
diff --git a/src/pages/registration/LoginSignupForm.css b/src/pages/registration/LoginSignupForm.css
index 36ff031..46ed72b 100644
--- a/src/pages/registration/LoginSignupForm.css
+++ b/src/pages/registration/LoginSignupForm.css
@@ -1,8 +1,10 @@
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
+
* {
box-sizing: border-box;
}
+
body {
background: #f6f5f7;
display: flex;
@@ -10,15 +12,19 @@ body {
align-items: center;
flex-direction: column;
font-family: 'Montserrat', sans-serif;
- height: 100vh;
- margin: -20px 0 50px;
+}
+
+.login-signup-page * {
+ box-sizing: border-box;
}
.login-signup-container {
+ padding-top: 150px;
h1 {
font-weight: bold;
margin: 0;
+ color: black;
}
h2 {
diff --git a/src/pages/registration/LoginSignupForm.jsx b/src/pages/registration/LoginSignupForm.jsx
index 4c70107..662d452 100644
--- a/src/pages/registration/LoginSignupForm.jsx
+++ b/src/pages/registration/LoginSignupForm.jsx
@@ -3,15 +3,14 @@ import GoogleLogo from '../../assets/google-logo.png';
import defaultProfile from '../../assets/defaultProfile.jpg';
import { useNavigate } from 'react-router-dom';
import { toast } from 'react-hot-toast';
-
-import './LoginSignupForm.css';
-import Header from '../../components/header/Header';
-
-import { auth, db } from "../../firebase/firebaseConfig";
+import { auth, db } from "../../lib/firebaseConfig";
import { signInWithEmailAndPassword, createUserWithEmailAndPassword } from "firebase/auth";
import { query, collection, where, getDocs, doc, setDoc } from "firebase/firestore";
import { signInWithGoogle } from './GoogleAuth';
+import './LoginSignupForm.css';
+import Header from '../../components/header/Header';
+
function LoginSignUpForm() {
const [rightPanelActive, setRightPanelActive] = useState(false);
const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
@@ -63,9 +62,17 @@ function LoginSignUpForm() {
await setDoc(userDocRef, {
username: username,
email: user.email,
+ id : user.uid,
profilePic: defaultProfile,
+ blocked: [],
signUpDate: new Date().toISOString(),
});
+
+ const userChatDoc = doc(db, "UserChats", user.uid);
+ await setDoc(userChatDoc, {
+ chats: [],
+ });
+
console.log("User ID:", user.uid);
toast.success("Account created successfully.");
navigate(`/profile/${user.uid}`);
diff --git a/src/pages/review/Review.jsx b/src/pages/review/Review.jsx
index d218151..150e5bd 100644
--- a/src/pages/review/Review.jsx
+++ b/src/pages/review/Review.jsx
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
-import { db } from '../../firebase/firebaseConfig';
+import { db } from '../../lib/firebaseConfig';
import { useParams, useNavigate } from 'react-router-dom';
import { collection, doc, getDoc, addDoc } from 'firebase/firestore';
import { useAuth } from '../../Auth';
diff --git a/src/pages/search/SearchPage.jsx b/src/pages/search/SearchPage.jsx
index 612df8a..6363021 100644
--- a/src/pages/search/SearchPage.jsx
+++ b/src/pages/search/SearchPage.jsx
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
import { collection, getDocs, query, where, getDoc, doc } from 'firebase/firestore';
-import { db } from '../../firebase/firebaseConfig';
+import { db } from '../../lib/firebaseConfig';
import { useAuth } from '../../Auth';
import { useLocation } from 'react-router-dom';
diff --git a/src/pages/userprofile/UserProfile.css b/src/pages/userprofile/UserProfile.css
index d5e24fc..ca59ad6 100644
--- a/src/pages/userprofile/UserProfile.css
+++ b/src/pages/userprofile/UserProfile.css
@@ -204,4 +204,4 @@
}
}
}
-}
+}
\ No newline at end of file
diff --git a/src/pages/userprofile/UserProfile.jsx b/src/pages/userprofile/UserProfile.jsx
index 4ddf41b..5fcdf10 100644
--- a/src/pages/userprofile/UserProfile.jsx
+++ b/src/pages/userprofile/UserProfile.jsx
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
-import { auth, db } from '../../firebase/firebaseConfig';
+import { auth, db } from '/src/lib/firebaseConfig';
import { useParams, useNavigate } from 'react-router-dom';
import { doc, getDoc, collection, getDocs, query, addDoc, where, setDoc, deleteDoc, updateDoc } from 'firebase/firestore';
import { useAuth } from '../../Auth';
@@ -15,6 +15,8 @@ import ListingButton from '../../components/listingpopup/Button';
import ProductList from '../../components/productcards/ProductList';
import './UserProfile.css';
+const defaultProfilePic = "/src/assets/defaultProfile.jpg";
+
function UserProfile() {
const { userID } = useParams();
const navigate = useNavigate();
@@ -228,7 +230,7 @@ function UserProfile() {
+
+
+ ) : (
+
+
+
-
+
@{userInfo.username}
diff --git a/src/pages/userprofile/editUser/EditPopup.jsx b/src/pages/userprofile/editUser/EditPopup.jsx
index a27530a..54cbe91 100644
--- a/src/pages/userprofile/editUser/EditPopup.jsx
+++ b/src/pages/userprofile/editUser/EditPopup.jsx
@@ -1,7 +1,8 @@
import React, { useEffect, useState } from "react";
-import { auth, db } from "../../../firebase/firebaseConfig";
+import { auth, db, storage } from "../../../lib/firebaseConfig";
import { doc, getDoc, updateDoc, collection, query, where, getDocs, writeBatch } from "firebase/firestore";
import { toast } from 'react-hot-toast';
+import { ref, uploadBytes, getDownloadURL } from "firebase/storage";
import './EditPopup.css';
@@ -12,9 +13,12 @@ function EditPopup({ onClose, onSubmit }) {
email: ""
});
+ const [imageFile, setImageFile] = useState(null);
+
const uploadImage = (e) => {
const file = e.target.files[0];
if (file && file.type.includes('image')) {
+ setImageFile(file);
const fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = (fileReaderEvent) => {
@@ -34,8 +38,16 @@ function EditPopup({ onClose, onSubmit }) {
const userDocRef = doc(db, 'Users', user.uid);
try {
+ let profilePicUrl = formData.image;
+
+ if (imageFile) {
+ const storageRef = ref(storage, `profilePics/${user.uid}/${imageFile.name}`);
+ await uploadBytes(storageRef, imageFile);
+ profilePicUrl = await getDownloadURL(storageRef);
+ }
+
await updateDoc(userDocRef, {
- profilePic: formData.image,
+ profilePic: profilePicUrl,
username: formData.username,
email: formData.email
});
@@ -101,7 +113,7 @@ function EditPopup({ onClose, onSubmit }) {
name="image"
onChange={uploadImage} />
-
+
diff --git a/src/pages/userprofile/userReviews/UserReviews.jsx b/src/pages/userprofile/userReviews/UserReviews.jsx
index b87d152..6445be4 100644
--- a/src/pages/userprofile/userReviews/UserReviews.jsx
+++ b/src/pages/userprofile/userReviews/UserReviews.jsx
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { doc, getDoc } from 'firebase/firestore';
-import { db } from '../../../firebase/firebaseConfig';
+import { db } from '../../../lib/firebaseConfig';
import { FaStar } from 'react-icons/fa';
import './UserReviews.css';
diff --git a/src/pages/viewproduct/ViewProduct.jsx b/src/pages/viewproduct/ViewProduct.jsx
index cb690c2..644ad34 100644
--- a/src/pages/viewproduct/ViewProduct.jsx
+++ b/src/pages/viewproduct/ViewProduct.jsx
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { doc, getDoc, addDoc, collection, deleteDoc, query, where, getDocs, updateDoc } from 'firebase/firestore';
-import { db } from '../../firebase/firebaseConfig';
+import { db } from '../../lib/firebaseConfig';
import { useAuth } from '../../Auth';
import { FaRegHeart, FaHeart, FaStar, FaStarHalf } from "react-icons/fa";
import { FaEllipsisVertical } from 'react-icons/fa6';
diff --git a/src/pages/viewproduct/offerPopup/offerPopup.jsx b/src/pages/viewproduct/offerPopup/offerPopup.jsx
index 7aee2c0..9c675c4 100644
--- a/src/pages/viewproduct/offerPopup/offerPopup.jsx
+++ b/src/pages/viewproduct/offerPopup/offerPopup.jsx
@@ -1,5 +1,5 @@
import React, { useState } from "react";
-import { auth, db } from "../../../firebase/firebaseConfig";
+import { auth, db } from "../../../lib/firebaseConfig";
import { doc, addDoc, collection } from "firebase/firestore";
import { toast } from 'react-hot-toast';
diff --git a/src/pages/viewproduct/viewOffers/viewOffers.jsx b/src/pages/viewproduct/viewOffers/viewOffers.jsx
index 7a76fb9..43dbeaa 100644
--- a/src/pages/viewproduct/viewOffers/viewOffers.jsx
+++ b/src/pages/viewproduct/viewOffers/viewOffers.jsx
@@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
import { doc, updateDoc, collection, deleteDoc, addDoc, getDoc } from 'firebase/firestore';
-import { db } from '../../../firebase/firebaseConfig';
+import { db } from '../../../lib/firebaseConfig';
import { useNavigate } from 'react-router-dom';
import { toast } from 'react-hot-toast';
import { useAuth } from '../../../Auth';