From efc3cf755c5ed572d40e5206a3311346f0a34ad1 Mon Sep 17 00:00:00 2001 From: linga66 Date: Tue, 20 Jun 2023 09:42:32 +0530 Subject: [PATCH 1/6] Updated viewing our own profile --- src/App.jsx | 20 ++++---- src/components/Notifications.jsx | 65 ++++++++++++++++++++++++++ src/components/SideBar/index.jsx | 7 ++- src/pages/Profile/index.jsx | 78 ++++++++++++++++++++++++++------ 4 files changed, 146 insertions(+), 24 deletions(-) create mode 100644 src/components/Notifications.jsx diff --git a/src/App.jsx b/src/App.jsx index 8ccfd1076..e28e41547 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -18,6 +18,7 @@ import SideBar from "./components/SideBar"; import SignupScreen from "./pages/Signup"; import { makeStyles } from "@mui/styles"; import { useSnackbar } from "notistack"; +import Notifications from "./components/Notifications"; export function getModalStyle() { const top = 50; @@ -271,21 +272,20 @@ function App() { !loadingPosts ? {} : { - width: "100%", - minHeight: "100vh", - display: "flex", - justifyContent: "center", - alignItems: "center", - } + width: "100%", + minHeight: "100vh", + display: "flex", + justifyContent: "center", + alignItems: "center", + } } > {loadingPosts ? ( ) : (
{posts.map(({ id, post }) => ( } /> + } /> + { + const fetchNotifications = async () => { + const snapshot = await db + .collection("notifications") + .orderBy("timestamp", "desc") + .get(); + + const fetchedNotifications = snapshot.docs.map((doc) => ({ + id: doc.id, + ...doc.data(), + })); + + setNotifications(fetchedNotifications); + }; + + fetchNotifications(); + }, []); + + return ( +
+ + + +
+ {notifications.length ? ( + <> +

Notifications

+ {notifications.map((notification) => ( +
+

{notification.message}

+
+ ))} + + ) : ( + <>No notifications + )} +
+ +
+ ); +} + +export default Notifications; diff --git a/src/components/SideBar/index.jsx b/src/components/SideBar/index.jsx index 4f201b7ae..2fdd2e745 100644 --- a/src/components/SideBar/index.jsx +++ b/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) { Favourites
+
  • navigate("/dummygram/notifications")}> +
    + Notifications +
    +
  • navigate("/dummygram/profile", { diff --git a/src/pages/Profile/index.jsx b/src/pages/Profile/index.jsx index c325112f1..d7c19e14b 100644 --- a/src/pages/Profile/index.jsx +++ b/src/pages/Profile/index.jsx @@ -1,5 +1,6 @@ import "./index.css"; +import { useState, useEffect } from "react"; import { Avatar, Box, @@ -8,13 +9,11 @@ import { Typography, useMediaQuery, } from "@mui/material"; -import { auth, storage } from "../../lib/firebase"; +import { db, auth, storage } from "../../lib/firebase"; 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; @@ -22,28 +21,48 @@ function Profile() { 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 checkFriendRequestSent = async () => { + const currentUser = auth.currentUser; + const currentUserUid = currentUser.uid; + const targetUserUid = currentUserUid; // Assuming the friend request is sent to the current user itself + + 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,7 +84,30 @@ function Profile() { }); } ); - setVisibile(false); + setVisible(false); + }; + + 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", + }); + }); }; return ( @@ -108,7 +150,7 @@ function Profile() { )} - {name == auth.currentUser.displayName ? ( + {name === auth.currentUser.displayName && ( - ) : ( - "" )} {visible && ( + )}