added global chat, started working on lastMessage feature

Jens-Mikael · Aug 13, 2023 · 6305d59 · 6305d59
1 parent 4c1848b
commit 6305d59
Show file tree

Hide file tree

Showing 19 changed files with 313 additions and 176 deletions.
diff --git 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
@@ -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 }) => {
         </div>
         <button
           onClick={closeSection}
-          className="py-1 px-3 text-lg rounded-full hover:bg-white/10 bg-white/5 w-min transition cursor-pointer"
+          className="py-1 px-4 text-lg rounded-full hover:bg-white/10 bg-white/5 w-min transition cursor-pointer"
         >
           Close
         </button>

diff --git 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 (
     <div
       onClick={handleClick}
@@ -34,10 +41,20 @@ const ContactCard = ({
       }`}
     >
       <div>
-        <img
-          src={displayData.photoURL}
-          className="h-14 min-w-[56px] rounded-full"
-        />
+        {chatKey === "global" ? (
+          <>
+            <SVG
+              className="fill-white h-14 w-14"
+              src="icons/global.svg"
+              loader={<div className="h-14 w-14" />}
+            />
+          </>
+        ) : (
+          <img
+            src={displayData.photoURL}
+            className="h-14 w-14 min-w-[56px] rounded-full fill-white"
+          />
+        )}
       </div>
       <div className="w-full max-w-[252px]">
         <div className="font-light text-lg truncate">{displayData.name}</div>
@@ -48,7 +65,7 @@ const ContactCard = ({
         >
           {lastMessage &&
             "data" in lastMessage &&
-            `${lastMessage.sender === currentUid && "Me:"} ${
+            `${lastMessage.sender.uid === currentUid && "Me:"} ${
               lastMessage.data.text
             }`}
         </div>

diff --git 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 }) => {
     >
       <div>
         <img
-          src={
-            requestType === "contact"
-              ? data.photoURL
-              : data.displayData.photoURL
-          }
-          className="h-14 min-w-[56px] rounded-full"
+          src={data.displayData.photoURL}
+          className="h-14 w-14 min-w-[56px] rounded-full"
         />
       </div>
       <div className="w-full max-w-[200px] flex flex-col">
-        {requestType === "contact" ? (
+        {isGroup ? (
           <>
             <div className="text-xs font-light text-[#aaaaaa]">
-              New Contact request from
+              <span className="font-medium text-sm">
+                {data.admin.displayName}
+              </span>{" "}
+              invited you to the group{" "}
+              <span className="font-medium text-sm">
+                "{data.displayData.title}"
+              </span>
+              .
             </div>
-            <div className="font-medium text-base truncate">{data.name}</div>
           </>
         ) : (
           <>
             <div className="text-xs font-light text-[#aaaaaa]">
-              <span className="font-medium text-sm">{data.admin.displayName}</span>{" "}
-              invited you to the group {" "}
-              <span className="font-medium text-sm">"{data.displayData.title}"</span>.
+              New Contact request from
             </div>
+            <div className="font-medium text-base truncate">{data.name}</div>
           </>
         )}
       </div>

diff --git a/components/cards/MessageCard.jsx b/components/cards/MessageCard.jsx
@@ -1,25 +1,34 @@
-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();
   const dateString = `${
     hours.length <= 1 ? (!hours ? "00" : "0" + hours) : hours
   }:${minutes.length <= 1 ? (!minutes ? "00" : "0" + minutes) : minutes}`;
   return (
-    <div
-      className={`p-2 rounded-2xl pr-16 relative max-w-2xl ${
-        isOwnMessage
-          ? "bg-cyan-500 rounded-tr-sm self-end"
-          : "bg-white bg-opacity-20 rounded-tl-sm self-start"
-      }`}
-    >
-      {content.text}
-      <div className="absolute bottom-1 right-3 text-xs font-light">
-        {dateString}
+    <div className={`flex gap-2 ${isOwnMessage ? "self-end" : "self-start"}`}>
+      {!isOwnMessage && isGroup && (
+        <div>
+          <img
+            src={sender.photoURL}
+            className="rounded-full h-9 w-9"
+          />
+        </div>
+      )}
+      <div
+        className={`p-2 rounded-2xl pr-16 relative max-w-2xl ${
+          isOwnMessage
+            ? "bg-cyan-500 rounded-tr-sm"
+            : "bg-white bg-opacity-20 rounded-tl-sm"
+        }`}
+      >
+        {content.text}
+        <div className="absolute bottom-1 right-3 text-xs font-light">
+          {dateString}
+        </div>
       </div>
     </div>
   );

diff --git 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
@@ -1,26 +1,40 @@
 import SVG from "react-inlinesvg";
 
-const ChatNav = ({ displayData, isGroup }) => {
+const ChatNav = ({ displayData, isGroup, chatKey }) => {
   return (
     <div className="sticky top-0 w-full z-10">
       <div className="flex justify-between items-center bg-[#001d29] py-3 px-5">
         <div className="flex gap-5 items-center">
-          <img
-            src={displayData.photoURL}
-            className="h-14 min-w-[56px] rounded-full border-cyan-400 border-2 shadow-glow shadow-cyan-400"
-          />
+          {chatKey === "global" ? (
+            <>
+              <SVG
+                className="fill-white h-14 w-14 rounded-full border-cyan-400 border-2 shadow-glow shadow-cyan-400"
+                src="icons/global.svg"
+                loader={<div className="h-14 w-14" />}
+              />
+            </>
+          ) : (
+            <img
+              src={displayData.photoURL}
+              className="h-14 w-14 min-w-[56px] rounded-full border-cyan-400 border-2 shadow-glow shadow-cyan-400"
+            />
+          )}
+
           <div>
             <div className="text-xl">{displayData.name}</div>
             <div className="flex gap-1.5 items-center">
-              <div
-                className={`${
-                  true ? "bg-green-400 bg-opacity-90" : "bg-white bg-opacity-30"
-                } h-1.5 w-1.5 rounded-full`}
-              />
               {isGroup ? (
                 <></>
               ) : (
                 <>
+                  <div
+                    className={`${
+                      true
+                        ? "bg-green-400 bg-opacity-90"
+                        : "bg-white bg-opacity-30"
+                    } h-1.5 w-1.5 rounded-full`}
+                  />
+
                   <div className="font-light text-sm">Online</div>
                 </>
               )}

diff --git 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={<div className="h-7 w-7" />}
               />
+              {requestNotification >= 1 && (
+                <div className="absolute top-1 right-0.5 text-xs rounded-full bg-sky-400 w-4 h-4">{requestNotification}</div>
+              )}
             </button>
           </div>
         </div>

diff --git 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 (
     <div className="sticky top-0 z-20">
-      <div className={`flex justify-between items-center  bg-[#001d29] z-10 py-3 px-5 transition-[height] `}>
+      <div
+        className={`flex justify-between items-center  bg-[#001d29] z-10 py-3 px-5 transition-[height] `}
+      >
         <div className=" text-3xl font-medium">Info</div>
         <div className="flex gap-2">
           <div className="cursor-pointer p-2 hover:bg-opacity-10 transition rounded-full bg-white bg-opacity-0">
@@ -14,7 +16,7 @@ const DropdownNav = ({ isDropdownOpen}) => {
             />
           </div>
           <div className="relative group">
-             <button
+            <button
               className={`cursor-pointer p-2 bg-opacity-0 hover:bg-opacity-10 transition rounded-full bg-white `}
             >
               <SVG
@@ -37,4 +39,4 @@ const DropdownNav = ({ isDropdownOpen}) => {
 
 export default DropdownNav;
 
-//${!isDropdownOpen && "h-0 overflow-hidden"}
+//${!isDropdownOpen && "h-0 overflow-hidden"}
diff --git a/components/sections/ChatSection.jsx b/components/sections/ChatSection.jsx
@@ -27,6 +27,7 @@ const ChatSection = () => {
           <ChatNav
             displayData={currentChat.displayData}
             isGroup={currentChat.isGroup}
+            chatKey={currentChat.chatKey}
           />
           <MessageSection
             chatKey={currentChat.chatKey}