added share post feature

tomyRomero · Dec 11, 2023 · a679515 · a679515
1 parent 45f7b93
commit a679515
Show file tree

Hide file tree

Showing 15 changed files with 353 additions and 20 deletions.
diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
@@ -20,7 +20,7 @@ async function Home({
 
   const result: any = await fetchPosts(
     searchParams.page ? + searchParams.page : 1,
-     10, 
+     2, 
   )  
 
   updateOnlineStatus(user.id, true);

diff --git a/app/(root)/search/page.tsx b/app/(root)/search/page.tsx
@@ -28,7 +28,6 @@ async function Page({
     pageSize: 15,
   });
 
-  console.log("USER RESULTS: ", result.users)
 
   return (
     <section>
@@ -48,6 +47,9 @@ async function Page({
                 name={person.name}
                 username={person.username}
                 imgUrl={person.image}
+                type="search"
+                postId={null}
+                sender = {null}
               />
             ))}
           </>

diff --git a/app/globals.css b/app/globals.css
@@ -89,6 +89,11 @@
   .user-card_btn {
     @apply h-auto min-w-[74px] rounded-lg bg-primary-500 text-[12px] text-light-1  hover:bg-white hover:text-black !important;
   }
+
+  .user-card_share {
+    @apply h-auto min-w-[74px] rounded-lg bg-primary-500 text-[12px] text-light-1  hover:bg-cyan-500 !important;
+  }
+
   .searchbar {
     @apply flex gap-1 rounded-lg bg-dark-3 px-4 py-2;
   }
@@ -243,6 +248,8 @@
   /* Add any other styles you want for the scroll indicator */
 }
 
+/* Online styles for Chat */
+
 .online-dot {
   width: 12px;
   height: 12px;
@@ -257,3 +264,14 @@
 .offline {
   background-color: #ff0000; /* Red color for inactive status */
 }
+
+  /* MODAL */
+  .dialog-container {
+    @apply fixed inset-0 z-10 overflow-y-auto bg-black bg-opacity-60;
+  }
+
+  .dialog-content {
+    @apply p-6  bg-white inline-block w-full max-w-md my-8 overflow-hidden text-left align-middle transition-all transform  shadow-xl rounded-2xl;
+  }
+
+
diff --git a/components/cards/ChatLogs.tsx b/components/cards/ChatLogs.tsx
@@ -165,12 +165,10 @@ const ChatLogs = ({ chatRead, senderID, receiverID, chatMessages, receiverPictur
       )}  
 
       {isHome && (
-      <div className={`ml-auto text-black ${!read && !isMe ? 'font-bold' : ''}`}>
-        <div>
+      <div className={`ml-auto text-black text-right ${!read && !isMe ? 'font-bold' : ''}`}>
           {/* Time */}
           {getLastTime().split(' ')[1]}{' '}
           {getLastTime().split(' ')[2]} {/* AM/PM */}
-        </div>
       </div>
     )}
 

diff --git a/components/cards/Post.tsx b/components/cards/Post.tsx
@@ -8,6 +8,7 @@ import { addLikeToPost, removeLikeFromPost } from "@/lib/actions/post.actions";
 import DeletePost from "../forms/DeletePost";
 import { fetchUser } from "@/lib/actions/user.actions";
 import { useAppContext } from "@/lib/AppContext";
+import Modal from "../shared/Modal";
 
 interface Props {
   id: string;
@@ -327,13 +328,15 @@ function Post({
                     className='cursor-pointer object-contain'
                   />
                 </Link>
-                <Image
+
+                <Modal postId={id} user={currentUserId} />
+                {/* <Image
                   src='/assets/share.svg'
                   alt='share'
                   width={24}
                   height={24}
                   className='cursor-pointer object-contain'
-                />
+                /> */}
                   {/* Title */}
                 <div className={`${title !=="Regular" && title !== "Comment" ? '' : 'hidden'} `}>
                     <h1 className="text-base-semibold teal_gradient cursor-pointer hover:text-light-1 ml-2  max-sm:hidden">{title}</h1>

diff --git a/components/cards/UserCard.tsx b/components/cards/UserCard.tsx
@@ -5,19 +5,26 @@ import { useRouter } from "next/navigation";
 import { getImageData } from "@/lib/s3";
 import { Button } from "../ui/button";
 import { useEffect, useState } from "react";
+import { getChatBySenderAndReceiver, sendMessage } from "@/lib/actions/chat.actions";
+import { getDateTime } from "@/lib/utils";
 
 interface Props {
   id: string;
   name: string;
   username: string;
   imgUrl: string;
+  type: string;
+  postId: string | null
+  sender: string | null
 }
 
 
 
-function UserCard({ id, name, username, imgUrl}: Props) {
+function UserCard({ id, name, username, imgUrl, type, postId, sender}: Props) {
   const [img, setImg] = useState("/assets/imgloader.svg")
   const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [send, setSend] = useState(false);
 
   useEffect(()=> {
     const loadProfile = async ()=> {
@@ -36,6 +43,50 @@ function UserCard({ id, name, username, imgUrl}: Props) {
 
   }, [])
 
+  //Function that shares post with a User
+  const sharePost = async () => {
+    setLoading(true)
+
+    if(send)
+    {
+      alert("Post was already shared!")
+      return
+    }
+
+    if(sender)
+    {
+
+      const getChat = await getChatBySenderAndReceiver(sender, id);
+
+      const timestamp = getDateTime();
+
+      let chatMessages = []
+
+      if(getChat)
+      {
+         chatMessages = getChat.messages
+      }
+
+      const shareText = `Check Out This Post! https://sparkify.vercel.app/post/${postId}`
+
+      const newMessages = [
+        ...chatMessages,
+        { text: shareText, sender: sender, receiver: id, timestamp: timestamp },
+      ]
+
+      const didSend = await sendMessage(shareText, id, timestamp, sender, newMessages, "/");
+
+      if(didSend)
+      {
+        setSend(true)
+        setLoading(false)
+      }
+    }else{
+      setLoading(false)
+      alert("Error Sharing Post Please Try Again")
+    }
+
+  }
 
   return (
     <article className='user-card'>
@@ -50,20 +101,55 @@ function UserCard({ id, name, username, imgUrl}: Props) {
         </div>
 
         <div className='flex-1 text-ellipsis'>
-          <h4 className='text-base-semibold text-light-1'>{name}</h4>
+          <h4 className={`text-base-semibold text-primary-500`}>{name}</h4>
           <p className='text-small-medium text-gray-1'>@{username}</p>
         </div>
       </div>
 
-      <Button
+      {type === "search" && (<Button
         className='user-card_btn'
         onClick={() => {
             router.push(`/profile/${id}`);
 
         }}
       >
         View
-      </Button>
+      </Button>)}
+
+      { type === "share" && (
+        <Button
+        className='user-card_share'
+        onClick={sharePost}
+      >
+        {!loading && !send &&(
+          <p className="mx-auto">Share</p>
+        )}
+
+        {loading && (
+          <Image
+            src={"/assets/postloader.svg"}
+            alt="loading share"
+            width={24}
+            height={24}
+            className="object-contain mx-auto"
+          />
+        )}
+
+        {!loading && send && (
+          <Image 
+            src={"/assets/checkmark.svg"}
+            alt="checkmark"
+            width={24}
+            height={24}
+            className="object-contain mx-auto"
+          />
+        )
+        }
+
+
+      </Button>)
+      }
+
     </article>
   );
 }

diff --git a/components/forms/Chat.tsx b/components/forms/Chat.tsx
@@ -63,9 +63,8 @@ const Chat = ({chatPicture, chatName, chatMessages, userID, receiver , isRead}:
       channel.bind('updateOnlineStatus', (data: any) => {
         // Handle updating the online status of the user
         // Use the data to update the online status in UI
-        console.log('Received updateOnlineStatus event:', data);
 
-        if(receiver === data.userId)
+        if(data.userId === receiver)
         {
           setActive(true);
         }
@@ -85,7 +84,7 @@ const Chat = ({chatPicture, chatName, chatMessages, userID, receiver , isRead}:
 
           setMessages((prevMessages) => [...prevMessages, data]);
           const newArr = [...messages, data]
-          console.log("New Message", newArr) 
+
         }
 
       });
@@ -94,7 +93,6 @@ const Chat = ({chatPicture, chatName, chatMessages, userID, receiver , isRead}:
     channel.bind('updateReadStatus', (data: any) => {
       // Handle updating the read status of the messages
       // Filter and update the messages based on the data received
-      console.log('Received updateReadStatus event:', data);
 
       // Check if the current user is the sender of the message
       if(data.sender === userID && data.receiver === receiver)
@@ -108,7 +106,6 @@ const Chat = ({chatPicture, chatName, chatMessages, userID, receiver , isRead}:
       return () => {
         channel.unbind('message');
         channel.unbind('updateReadStatus');
-        channel.unbind('updateOnlineStatus');
       };
 
     } catch (error) {

diff --git a/components/shared/BottomBar.tsx b/components/shared/BottomBar.tsx
@@ -6,16 +6,34 @@ import Image from "next/image";
 import { usePathname, useRouter } from 'next/navigation'
 import { useState, useEffect } from "react";
 import { useAppContext } from "@/lib/AppContext";
-import { doesPostBelongToUser } from "@/lib/actions/user.actions";
+import { doesPostBelongToUser, fetchLikesAndCommentsByUser } from "@/lib/actions/user.actions";
 
 function Bottombar({user} : any)
 {
     const pathname = usePathname();
     const [activity, setActivity] = useState(false)
 
-    const { globalMessages, setGlobalMessages, readMessages, setReadMessages, pusherChannel, newComment, setNewComment, newLike, setNewLike} = useAppContext();
+    const { pusherChannel, newComment, setNewComment, newLike, setNewLike, setReadActivity, readActivity} = useAppContext();
     const channel =  pusherChannel
 
+    const getAcivityAtStartUp = async () => {
+      const activity = await fetchLikesAndCommentsByUser(user.id, 5);
+
+      // Check if any Activity has read_status === 1
+      const hasUnreadPost = activity.some(activity => activity.read_status === 1);
+
+      if(hasUnreadPost)
+      {
+        setActivity(true)
+      }else{
+        setActivity(false)
+      }
+    }
+
+    useEffect(()=> {
+      getAcivityAtStartUp();
+    }, [readActivity, setReadActivity])
+
     useEffect( ()=> {
         try {
           //Look for realtime events on new notifactions from activity

diff --git a/components/shared/LeftBar.tsx b/components/shared/LeftBar.tsx
@@ -73,8 +73,6 @@ function LeftSidebar({user} : any)
     const getAcivityAtStartUp = async () => {
       const activity = await fetchLikesAndCommentsByUser(user.id, 5);
 
-      console.log("Left Bar Activity: ", activity)
-
       // Check if any Activity has read_status === 1
       const hasUnreadPost = activity.some(activity => activity.read_status === 1);
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,7 +20,7 @@ async function Home({ @@
       const result: any = await fetchPosts(
         searchParams.page ? + searchParams.page : 1,
-,
+,
       )
       updateOnlineStatus(user.id, true);
@@ Expand Down @@