Updated Add friend request button and notification button

src/App.jsx

@@ -10,6 +10,7 @@ import LoginScreen from "./pages/Login";
 import Modal from "@mui/material/Modal";
 import Navbar from "./components/Navbar";
 import NotFoundPage from "./components/NotFound";
+import Notifications from "./components/Notifications";
 import Post from "./components/Post";
 import PostView from "./pages/PostView";
 import Profile from "./pages/Profile";
@@ -315,6 +316,8 @@ function App() {
 
         <Route path="/dummygram/signup" element={<SignupScreen />} />
 
+        <Route path="/dummygram/notifications" element={<Notifications />} />
+
         <Route
           path="/dummygram/posts/:id"
           element={

src/components/Notifications.jsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from "react";
+import { auth, db } from "../lib/firebase";
+
+import { Box } from "@mui/material";
+import Post from "./Post";
+import ShareModal from "./ShareModal";
+import SideBar from "./SideBar";
+
+function Notifications() {
+  const [openShareModal, setOpenShareModal] = useState(false);
+  const [currentPostLink, setCurrentPostLink] = useState("");
+  const [postText, setPostText] = useState("");
+  const [notifications, setNotifications] = useState([]);
+
+  useEffect(() => {
+    const unsubscribe = db
+      .collection("notifications")
+      .orderBy("timestamp", "desc")
+      .onSnapshot((snapshot) => {
+        const fetchedNotifications = snapshot.docs.map((doc) => ({
+          id: doc.id,
+          ...doc.data(),
+        }));
+        setNotifications(fetchedNotifications);
+      });
+
+    return () => unsubscribe(); 
+  }, []);
+
+  return (
+    <div>
+      <SideBar />
+      <ShareModal
+        openShareModal={openShareModal}
+        setOpenShareModal={setOpenShareModal}
+        currentPostLink={currentPostLink}
+        postText={postText}
+      />
+      <Box>
+        <div
+          className="profile__favourites"
+          style={{ marginTop: "5.5rem", marginBottom: "1.5rem" }}
+          align="center"
+        >
+          {notifications.length ? (
+            <>
+              <h1>Notifications</h1>
+              {notifications.map((notification) => (
+                <div key={notification.id}>
+                  <p>{notification.message}</p>
+                </div>
+              ))}
+            </>
+          ) : (
+            <>No notifications</>
+          )}
+        </div>
+      </Box>
+    </div>
+  );
+}
+
+export default Notifications;

src/components/SideBar/index.jsx

@@ -1,4 +1,3 @@
-// custom css import
 import "./index.css";
 
 import { Link, useNavigate } from "react-router-dom";
@@ -10,6 +9,7 @@ import { Dialog } from "@mui/material";
 import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
 import HomeIcon from "@mui/icons-material/Home";
 import ImgUpload from "../ImgUpload";
+import NotificationsIcon from "@mui/icons-material/Notifications";
 import React from "react";
 import { auth } from "../../lib/firebase";
 import { useState } from "react";
@@ -37,6 +37,11 @@ function SideBar(props) {
             <FavoriteBorderIcon className="icon" /> <span>Favourites</span>
           </div>
         </li>
+        <li onClick={() => navigate("/dummygram/notifications")}>
+          <div className="sidebar_align">
+            <NotificationsIcon className="icon" /> <span>Notifications</span>
+          </div>
+        </li>
         <li
           onClick={() =>
             navigate("/dummygram/profile", {

src/pages/Profile/index.jsx

@@ -8,42 +8,89 @@ import {
   Typography,
   useMediaQuery,
 } from "@mui/material";
-import { auth, storage } from "../../lib/firebase";
+import { auth, db, storage } from "../../lib/firebase";
+import { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 
 import { FaUserCircle } from "react-icons/fa";
 import SideBar from "../../components/SideBar";
 import { useSnackbar } from "notistack";
-import { useState } from "react";
 
 function Profile() {
   const { name, email, avatar } = useLocation().state;
   const isNonMobile = useMediaQuery("(min-width: 768px)");
   const { enqueueSnackbar } = useSnackbar();
   const [image, setImage] = useState("");
   const [profilepic, setProfilePic] = useState(avatar);
-  const [visible, setVisibile] = useState(false);
+  const [visible, setVisible] = useState(false);
   const navigate = useNavigate();
+  const [friendRequestSent, setFriendRequestSent] = useState(false);
+
+  useEffect(() => {
+    const handleSendFriendRequest = () => {
+      const currentUser = auth.currentUser;
+      const currentUserUid = currentUser.uid;
+      const targetUserUid = currentUserUid;
+      const friendRequestData = {
+        sender: currentUserUid,
+        recipient: targetUserUid,
+        timestamp: firebase.firestore.FieldValue.serverTimestamp(),
+      };
+      db.collection("friendRequests")
+        .add(friendRequestData)
+        .then(() => {
+          setFriendRequestSent(true);
+          enqueueSnackbar("Friend request sent!", {
+            variant: "success",
+          });
+          const notificationData = { 
+            recipient: targetUserUid,
+            message: "You have received a friend request.",
+            timestamp: firebase.firestore.FieldValue.serverTimestamp(),
+          };
+          db.collection("notifications").add(notificationData);
+        })
+        .catch((error) => {
+          enqueueSnackbar(error.message, {
+            variant: "error",
+          });
+        });
+    };
+
+    const checkFriendRequestSent = async () => {
+      const currentUser = auth.currentUser;
+      const currentUserUid = currentUser.uid;
+      const targetUserUid = currentUserUid;
+      const friendRequestsRef = db.collection("friendRequests");
+      const query = friendRequestsRef
+        .where("sender", "==", currentUserUid)
+        .where("recipient", "==", targetUserUid)
+        .limit(1);
+      const snapshot = await query.get();
+      if (!snapshot.empty) {
+        setFriendRequestSent(true);
+      }
+    };
+    checkFriendRequestSent();
+  }, []);
 
   const handleBack = () => {
-    navigate("/dummygram"); // Use navigate function to change the URL
+    navigate("/dummygram");
   };
 
   const handleChange = (e) => {
     if (e.target.files[0]) {
       setProfilePic(URL.createObjectURL(e.target.files[0]));
       setImage(e.target.files[0]);
-      setVisibile(true);
+      setVisible(true);
     }
   };
+
   const handleSave = async () => {
     const uploadTask = storage.ref(`images/${image?.name}`).put(image);
     await uploadTask.on(
       "state_changed",
-      () => {
-        // // progress function ...
-        // setProgress(Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100));
-      },
+      () => { },
       (error) => {
         enqueueSnackbar(error.message, {
           variant: "error",
@@ -65,9 +112,35 @@ function Profile() {
           });
       }
     );
-    setVisibile(false);
+    setVisible(false);
+  };
+
+<<<<<<< HEAD
+=======
+  const handleSendFriendRequest = () => {
+    const currentUser = auth.currentUser;
+    const currentUserUid = currentUser.uid;
+    const targetUserUid = currentUserUid;
+    db.collection("friendRequests")
+      .add({
+        sender: currentUserUid,
+        recipient: targetUserUid,
+        timestamp: firebase.firestore.FieldValue.serverTimestamp(),
+      })
+      .then(() => {
+        setFriendRequestSent(true);
+        enqueueSnackbar("Friend request sent!", {
+          variant: "success",
+        });
+      })
+      .catch((error) => {
+        enqueueSnackbar(error.message, {
+          variant: "error",
+        });
+      });
   };
 
+>>>>>>> 7f4b99c1f5b1a5f2d72f950522421c807e28f26f
   return (
     <>
       <SideBar />
@@ -108,7 +181,7 @@ function Profile() {
               <FaUserCircle style={{ width: "23vh", height: "23vh" }} />
             )}
           </Box>
-          {name == auth.currentUser.displayName ? (
+          {name === auth.currentUser.displayName && (
             <Box>
               <input
                 type="file"
@@ -126,8 +199,6 @@ function Profile() {
                 </div>
               </label>
             </Box>
-          ) : (
-            ""
           )}
           {visible && (
             <Button
@@ -146,6 +217,16 @@ function Profile() {
           <Typography fontSize="1.5rem" fontWeight="600" fontFamily="Poppins">
             {email && email}
           </Typography>
+          {!friendRequestSent && name !== auth.currentUser.displayName && (
+            <Button
+              onClick={handleSendFriendRequest}
+              variant="contained"
+              color="primary"
+              sx={{ marginTop: "1rem" }}
+            >
+              Add Friend
+            </Button>
+          )}
           <Button
             onClick={handleBack}
             variant="contained"