Merge pull request lugnitdgp#23 from skndash96/forward-msg

Added Forward message feature

Author: Ankit-Roy-CSE

chatopia/app/api/conversations/route.ts

@@ -1,6 +1,18 @@
 import getCurrentUser from "@/app/actions/getCurrentUser";
 import { NextResponse } from "next/server";
 import prisma from "@/app/libs/prismadb";
+import getConversations from "@/app/actions/getConversations";
+
+export async function GET(request: Request) {
+    try {
+        const conversations = await getConversations();
+
+        return NextResponse.json(conversations, { status: 200 });
+    } catch (e) {
+        console.log(e, "ERROR_CONVERSATIONS_GET");
+        return new NextResponse("Internal Error", { status: 500});
+    }
+}
 
 export async function POST(request : Request){
     try{

chatopia/app/api/messages/route.ts

@@ -12,7 +12,8 @@ export async function POST(
       message,
       file,
       fileType,
-      conversationId
+      conversationId,
+      isForwarded
     } = body;
 
     // If user is not logged in, return unauthorized
@@ -26,6 +27,7 @@ export async function POST(
         body: message,
         file: file,
         fileType,
+        isForwarded: !!isForwarded,
         conversation: {
           connect: { id: conversationId }
         },

chatopia/app/components/inputs/Select.tsx

@@ -9,10 +9,11 @@ interface SelectProps {
   onChange: (value: Record<string, any>) => void;
   options: Record<string, any>[];
   disabled?: boolean;
+  isMulti?: boolean;
 }
 
 const Select: React.FC<SelectProps> = ({
-    label,value,onChange,options,disabled
+    label,value,onChange,options,disabled,isMulti
 }) => {
   return ( 
   <div className={styles.wrapper}>
@@ -26,7 +27,7 @@ const Select: React.FC<SelectProps> = ({
         isDisabled={disabled}
         value={value}
         onChange={onChange}
-        isMulti
+        isMulti={isMulti || true}
         options={options}
         menuPortalTarget={document.body}
         styles={{

chatopia/app/conversations/[conversationId]/components/Form.tsx

@@ -17,8 +17,6 @@ import React, { useState , useRef, useEffect } from "react";
 import Modal from "@/app/components/Modal";
 import {socket} from "@/socket";
 
-import { FileUpload } from 'primereact/fileupload';
-
 const Form = () => {
     const { conversationId } = useConversation();
     const [isEmojiVisible, setIsEmojiVisible] = useState(false);
@@ -35,7 +33,7 @@ const Form = () => {
       } = useForm<FieldValues>({
         defaultValues: {
           message: '',
-          image: ''
+          file: ''
         }
       });
 

chatopia/app/conversations/[conversationId]/components/ForwardModal.tsx

@@ -0,0 +1,120 @@
+import Button from "@/app/components/Button";
+import Select from "@/app/components/inputs/Select";
+import Modal from "@/app/components/Modal";
+import { FullConversationType, FullMessageType } from "@/app/types";
+import { socket } from "@/socket";
+import { Conversation } from "@prisma/client";
+import axios from "axios";
+import { useSession } from "next-auth/react";
+import { useEffect, useState } from "react";
+import toast from "react-hot-toast";
+
+interface ForwardModalProps {
+    data: FullMessageType,
+    isOpen: boolean,
+    setIsOpen: (status: boolean) => void
+};
+
+const ForwardModal: React.FC<ForwardModalProps> = ({
+    data: { file, fileType, body, id }, isOpen, setIsOpen
+}) => {
+    const { data: session, status } = useSession();
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [to, setTo] = useState<string[]>([]);
+    const [conversations, setConversations] = useState<Conversation[]>([]);
+
+    const handleForward = async () => {
+        if (to.length === 0) {
+            toast.error("Please select atleast one conversation");
+            return;
+        }
+
+        setIsLoading(true);
+
+        await Promise.all(to.map(conversationId => {
+            return new Promise(resolve => {
+                axios.post("/api/messages", {
+                    message: body,
+                    conversationId,
+                    isForwarded: true,
+                    file,
+                    fileType
+                })
+                .then(response => {
+                    socket.emit('send_message', response.data);
+                    socket.emit('update_conversation', response.data);
+                })
+                .catch(error => {
+                    console.error(error);
+                    toast.error("Failed to forward");
+                })
+                .finally((() => resolve(1)));
+            });
+        }));
+
+        toast.success("Forwarded");
+        setIsLoading(false);
+        setTo([]);
+        setIsOpen(false);
+    };
+    
+    useEffect(() => {
+        if (!session?.user) {
+            setConversations([]);
+            return;
+        }
+        
+        axios.get("/api/conversations")
+            .then(res => {
+                const conversations = res.data;
+                
+                const mapped = conversations.map((c: FullConversationType) => {
+                    if (c.isGroup) {
+                        return {
+                            label: c.name,
+                            value: c.id
+                        };
+                    } else {
+                        const otherUserConversation = c.userConversations.find((uc:any) => uc.user.email !== session?.user?.email);
+
+                        if (!otherUserConversation) return {
+                            label: c.userConversations[0]?.user?.name || c.id,
+                            value: c.id
+                        };
+
+                        return {
+                            label: otherUserConversation.user.name,
+                            value: c.id
+                        };
+                    }
+                });
+
+                setConversations(mapped);
+            })
+            .catch(error => {
+                console.error(error);
+                toast.error("Something went wrong");
+            });
+    }, [session]);
+
+    return (
+        <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+            <p>
+                {body?.slice(0,50)}
+                {file?.split("/").pop()}
+            </p>
+            <br/>
+            <Select
+                options={conversations}
+                label="Forward to"
+                onChange={(records: any) => setTo(records.map((r: any) => r.value))}
+            />
+            <br/>
+            <Button onClick={handleForward} disabled={!to.length || isLoading}>
+                Forward
+            </Button>
+        </Modal>
+    );
+};
+
+export default ForwardModal;

chatopia/app/conversations/[conversationId]/components/MessageBox.module.css

@@ -43,7 +43,7 @@
 }
 
 .msg{
-    overflow: hidden; 
+    position: relative;
     width: fit-content; 
     font-size: 0.875rem;
     line-height: 1.25rem;
@@ -98,6 +98,35 @@
     border-radius: 9999px; 
 }
 
+.fwdBox{
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    transform: translateY(100%);
+    display: none;
+    z-index: 2;
+}
+
+.msg:hover .fwdBox, .fwdBox:hover {
+    display: block;
+}
+
+.fwdBtn{
+    border: none;
+    outline: none;
+    padding: .5rem;
+    cursor: pointer;
+    background: #000;
+    color: #fff;
+    border-radius: 0.375rem;
+}
+
+.fwdMsg{
+    margin-top: -.1rem;
+    opacity: .7;
+    font-size: .75rem;
+}
+
 .seenStatus{
     font-size: 0.75rem;
     line-height: 1rem; 

chatopia/app/conversations/[conversationId]/components/MessageBox.tsx

@@ -5,12 +5,12 @@ import { FullMessageType } from "@/app/types";
 import { useSession } from "next-auth/react";
 import { format } from "date-fns";
 import { useState } from "react";
-import Image from "next/image";
 import ImageModal from "./ImageModal";
 import clsx from "clsx";
 import styles from "./MessageBox.module.css"
 import { IoDocument, IoImage } from "react-icons/io5";
 import Link from "next/link";
+import ForwardModal from "./ForwardModal";
 
 interface MessageBoxProps {
     data: FullMessageType;
@@ -19,7 +19,7 @@ interface MessageBoxProps {
 
 const MessageBox: React.FC<MessageBoxProps> = ({ data, isLast }) => {
     const session = useSession();
-    const [imageModalOpen, setImageModalOpen] = useState(false);
+    const [fwdModalOpen, setFwdModalOpen] = useState<boolean>(false);
     const [imageOpen, setImageOpen] = useState<boolean>(false);
 
     const isOwn = session?.data?.user?.email === data?.sender?.email;
@@ -79,7 +79,21 @@ const MessageBox: React.FC<MessageBoxProps> = ({ data, isLast }) => {
                             </Link>
                         )
                     )}
+                    
+                     <div className={clsx(styles.fwdBox)}>
+                        <button className={clsx(styles.fwdBtn)} onClick={() => setFwdModalOpen(true)}>
+                            Forward
+                        </button>
+
+                        <ForwardModal setIsOpen={setFwdModalOpen} isOpen={fwdModalOpen} data={data} />
+                     </div>
                 </div>
+
+                {data.isForwarded && (
+                    <div className={clsx(styles.fwdMsg)}>
+                        <span>forwarded</span>
+                    </div>
+                )}
                 {isLast && isOwn && seenList.length > 0 && (
                     <div className={styles.seenStaus}>
                         {`Seen by ${seenList}`}

chatopia/app/conversations/components/ConversationBox.tsx

@@ -72,21 +72,10 @@ const ConversationBox: React.FC<ConversationBoxProps> = ({
       }, [userEmail, lastMessage]);
 
       const lastMessageText = useMemo(() => {
-        // If last message of conversation is an image
-        if (lastMessage?.image) {
-          return 'Sent an image';
-        }
-        
-        // If last message of conversation is a text message
-        if (lastMessage?.body) {
-          return lastMessage.body;
-        }
-        
-        // If no last message exists
-        return "Started a conversation";
+        return (lastMessage?.body) || (lastMessage?.file ? "Sent a file" : "Started a conversation");
       }, [lastMessage]);
 
-      console.log("active list:" , activeList);
+      console.log("active list:", activeList);
       // const activeEmails = activeList.map((activeUser)=>activeUser.email );
       // console.log("active emails:" , activeEmails);
       const isActive = activeList.includes(otherUser.email!);

chatopia/app/conversations/components/ConversationList.tsx

@@ -85,6 +85,10 @@ const ConversationList: React.FC<ConversationListProps> = ({
         // To update the conversation list when a new conversation is created
         const newConversationHandler = (conversation: FullConversationType) => {
             // Check if the conversation to be added already exists in the conversation list
+            if (!conversation.userConversations.find(uc => uc.user.email === userEmail)) {
+                return;
+            }
+
             setItems((current) => {
                 if (find(current, { id: conversation.id })) {
                   return current;

chatopia/app/conversations/components/GroupChatModal.tsx

@@ -13,6 +13,7 @@ import { toast } from "react-hot-toast";
 import styles from "./GroupChatModal.module.css";
 import Image from "next/image";
 import { CldUploadButton } from "next-cloudinary";
+import { socket } from "@/socket";
 
 interface GroupChatModalProps {
   isOpen?: boolean;
@@ -52,7 +53,12 @@ const GroupChatModal: React.FC<GroupChatModalProps> = ({
       ...data,
       isGroup: true
     })
-    .then(() => {
+    .then(response => {
+      if (response.data.isGroup) { 
+        alert(response.data.id);
+        socket.emit('new_conversation', response.data);
+      }
+
       router.refresh();
       onClose();
     })

chatopia/prisma/schema.prisma

@@ -73,6 +73,7 @@ model Message {
   body String?
   file String?
   fileType String?
+  isForwarded Boolean?
   createdAt DateTime @default(now())
 
   conversationId String @db.Uuid