From 6305d59ac6bf0d6a06eef5ec48b6292e38d477fe Mon Sep 17 00:00:00 2001 From: Jens-Mikael Date: Sun, 13 Aug 2023 18:15:58 +0300 Subject: [PATCH] added global chat, started working on lastMessage feature --- app/page.js | 2 + components/actions/NewGroupAction.jsx | 9 ++- components/cards/ContactCard.jsx | 29 ++++++-- components/cards/DropdownCard.jsx | 56 ++++++++++----- components/cards/MessageCard.jsx | 35 +++++---- components/cards/UserCard.jsx | 6 +- components/navigations/ChatNav.jsx | 34 ++++++--- components/navigations/ContactNav.jsx | 4 ++ components/navigations/DropdownNav.jsx | 10 +-- components/sections/ChatSection.jsx | 1 + components/sections/ContactSection.jsx | 55 ++++++++++----- components/sections/DropdownSection.jsx | 48 ++----------- components/sections/MessageSection.jsx | 3 +- firebase/hooks/read.js | 26 +++++-- firebase/hooks/write.js | 54 +++++++++++--- functions/index.js | 94 ++++++++++++------------- public/icons/global.svg | 1 + redux/slices/chatsSlice.js | 20 ++++++ redux/store.js | 2 + 19 files changed, 313 insertions(+), 176 deletions(-) create mode 100644 public/icons/global.svg create mode 100644 redux/slices/chatsSlice.js diff --git a/app/page.js b/app/page.js index c01904b..4fe1ed8 100644 --- a/app/page.js +++ b/app/page.js @@ -5,6 +5,7 @@ import ContactSection from "@/components/sections/ContactSection"; import ChatSection from "@/components/sections/ChatSection"; import { useDispatch } from "react-redux"; import { setCurrentChat } from "@/redux/slices/currentChatSlice"; +import { setChats } from "@/redux/slices/chatsSlice"; export default function Home() { const { currentUser, logout, loading } = useAuth(); @@ -13,6 +14,7 @@ export default function Home() { const handleLogout = async () => { await logout(); dispatch(setCurrentChat(null)); + dispatch(setChats(null)); }; if (!loading && !currentUser) redirect("/auth"); diff --git a/components/actions/NewGroupAction.jsx b/components/actions/NewGroupAction.jsx index 2127a6c..1f72722 100644 --- a/components/actions/NewGroupAction.jsx +++ b/components/actions/NewGroupAction.jsx @@ -4,12 +4,15 @@ import Image from "next/image"; import FileResizer from "react-image-file-resizer"; import SVG from "react-inlinesvg"; import { useAuth } from "@/firebase/context/AuthContext"; -import { readUserContacts } from "@/firebase/hooks/read"; +import { readUserContacts, readUserChats } from "@/firebase/hooks/read"; import UserCard from "../cards/UserCard"; import { createGroup } from "@/firebase/hooks/write"; import { ClipLoader } from "react-spinners"; +import { useDispatch } from "react-redux"; +import { setChats } from "@/redux/slices/chatsSlice"; const NewGroupAction = ({ closeSection }) => { + const dispatch = useDispatch(); const { currentUser } = useAuth(); const [file, setFile] = useState(null); const [image, setImage] = useState(""); @@ -48,7 +51,7 @@ const NewGroupAction = ({ closeSection }) => { ); } }; - + const handleSubmit = async () => { setCreatingGroup(true); const res = await createGroup(currentUser, selectedUsers, { @@ -78,7 +81,7 @@ const NewGroupAction = ({ closeSection }) => { diff --git a/components/cards/ContactCard.jsx b/components/cards/ContactCard.jsx index 8ce5d57..69b63c5 100644 --- a/components/cards/ContactCard.jsx +++ b/components/cards/ContactCard.jsx @@ -1,7 +1,8 @@ "use client"; import { setCurrentChat } from "@/redux/slices/currentChatSlice"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; +import SVG from "react-inlinesvg"; const ContactCard = ({ displayData, @@ -24,6 +25,12 @@ const ContactCard = ({ ); }; + useEffect(() => { + if (isGroup) { + } + }); + console.log(lastMessage) + return (
- + {chatKey === "global" ? ( + <> + } + /> + + ) : ( + + )}
{displayData.name}
@@ -48,7 +65,7 @@ const ContactCard = ({ > {lastMessage && "data" in lastMessage && - `${lastMessage.sender === currentUid && "Me:"} ${ + `${lastMessage.sender.uid === currentUid && "Me:"} ${ lastMessage.data.text }`}
diff --git a/components/cards/DropdownCard.jsx b/components/cards/DropdownCard.jsx index e0db95a..dec6a8a 100644 --- a/components/cards/DropdownCard.jsx +++ b/components/cards/DropdownCard.jsx @@ -1,10 +1,31 @@ -//"use client" -import { acceptContactRequest } from "@/firebase/hooks/write"; +"use client"; +import { useAuth } from "@/firebase/context/AuthContext"; +import { + acceptContactRequest, + acceptGroupRequest, +} from "@/firebase/hooks/write"; +import { readUserChats } from "@/firebase/hooks/read"; +import { useDispatch } from "react-redux"; +import { setChats } from "@/redux/slices/chatsSlice"; + +const DropdownCard = ({ data, isGroup }) => { + const { uid } = useAuth(); + const dispatch = useDispatch(); -const DropdownCard = ({ data, requestType }) => { const handleAccept = async () => { - const res = await acceptContactRequest(currentUserUID, uid); - console.log(res); + if (isGroup) { + //handle the shit for the group + const res = await acceptGroupRequest(uid, data.chatKey); + console.log(res); + if (!res) { + console.log("Group req acc succeeded"); + const data = await readUserChats(uid); + dispatch(setChats(data)); + } + } else { + const res = await acceptContactRequest(currentUserUID, uid); + console.log(res); + } }; return ( @@ -13,29 +34,30 @@ const DropdownCard = ({ data, requestType }) => { >
- {requestType === "contact" ? ( + {isGroup ? ( <>
- New Contact request from + + {data.admin.displayName} + {" "} + invited you to the group{" "} + + "{data.displayData.title}" + + .
-
{data.name}
) : ( <>
- {data.admin.displayName}{" "} - invited you to the group {" "} - "{data.displayData.title}". + New Contact request from
+
{data.name}
)}
diff --git a/components/cards/MessageCard.jsx b/components/cards/MessageCard.jsx index 934cc44..5829a40 100644 --- a/components/cards/MessageCard.jsx +++ b/components/cards/MessageCard.jsx @@ -1,8 +1,7 @@ -import { useSelector } from "react-redux"; +import Image from "next/image"; -const MessageCard = ({ content, sender, timeStamp, currentUID }) => { +const MessageCard = ({ content, sender, timeStamp, isGroup, currentUID }) => { const isOwnMessage = sender.uid === currentUID; - const isGroup = useSelector((state) => state.currentChat.value.isGroup); const date = new Date(timeStamp); const hours = date.getHours().toString(); const minutes = date.getMinutes().toString(); @@ -10,16 +9,26 @@ const MessageCard = ({ content, sender, timeStamp, currentUID }) => { hours.length <= 1 ? (!hours ? "00" : "0" + hours) : hours }:${minutes.length <= 1 ? (!minutes ? "00" : "0" + minutes) : minutes}`; return ( -
- {content.text} -
- {dateString} +
+ {!isOwnMessage && isGroup && ( +
+ +
+ )} +
+ {content.text} +
+ {dateString} +
); diff --git a/components/cards/UserCard.jsx b/components/cards/UserCard.jsx index a9dd77c..426d7ad 100644 --- a/components/cards/UserCard.jsx +++ b/components/cards/UserCard.jsx @@ -23,7 +23,11 @@ const UserCard = ({ }, { uid: uid } ); - console.log(res); + if (res) { + console.log(res); + } else { + console.log("contact req was sent successfully"); + } }; const handleOnClick = () => { diff --git a/components/navigations/ChatNav.jsx b/components/navigations/ChatNav.jsx index f00c253..66b76c1 100644 --- a/components/navigations/ChatNav.jsx +++ b/components/navigations/ChatNav.jsx @@ -1,26 +1,40 @@ import SVG from "react-inlinesvg"; -const ChatNav = ({ displayData, isGroup }) => { +const ChatNav = ({ displayData, isGroup, chatKey }) => { return (
- + {chatKey === "global" ? ( + <> + } + /> + + ) : ( + + )} +
{displayData.name}
-
{isGroup ? ( <> ) : ( <> +
+
Online
)} diff --git a/components/navigations/ContactNav.jsx b/components/navigations/ContactNav.jsx index 85c4338..2b090bd 100644 --- a/components/navigations/ContactNav.jsx +++ b/components/navigations/ContactNav.jsx @@ -2,6 +2,7 @@ import SVG from "react-inlinesvg"; const ContactNav = ({ + requestNotification, isDropdownOpen, handleOpenDropdown, setIsDropdownOpen, @@ -45,6 +46,9 @@ const ContactNav = ({ className="h-7 fill-white" loader={
} /> + {requestNotification >= 1 && ( +
{requestNotification}
+ )}
diff --git a/components/navigations/DropdownNav.jsx b/components/navigations/DropdownNav.jsx index 781385e..4b92d84 100644 --- a/components/navigations/DropdownNav.jsx +++ b/components/navigations/DropdownNav.jsx @@ -1,9 +1,11 @@ import SVG from "react-inlinesvg"; -const DropdownNav = ({ isDropdownOpen}) => { +const DropdownNav = ({ isDropdownOpen, }) => { return (
-
+
Info
@@ -14,7 +16,7 @@ const DropdownNav = ({ isDropdownOpen}) => { />
-