Chat box resposive issue solved

Md-Rubel-Ahmed-Rana · Jul 8, 2024 · c571201 · c571201
1 parent d9763e6
commit c571201
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 83 deletions.
diff --git a/frontend/src/components/pages/teams/collaborations/announcements/Announcement.tsx b/frontend/src/components/pages/teams/collaborations/announcements/Announcement.tsx
@@ -2,20 +2,21 @@ import React, { useState } from "react";
 import ShowMessages from "../common/ShowMessages";
 import MessageForm from "../common/MessageForm";
 import { useGetMessagesByTypeQuery } from "@/features/message";
+import { ITeam } from "@/interfaces/team.interface";
 
 type Props = {
-  teamId: string;
+  team: ITeam;
 };
 
-const Announcement = ({ teamId }: Props) => {
+const Announcement = ({ team }: Props) => {
   const { data: messageData } = useGetMessagesByTypeQuery({
     type: "announcement",
-    conversationId: teamId,
+    conversationId: team?.id,
   });
   return (
     <div>
-      <ShowMessages messages={messageData?.data} />
-      <MessageForm teamId={teamId} type={"announcement"} />
+      <ShowMessages team={team} messages={messageData?.data} />
+      <MessageForm teamId={team?.id} type={"announcement"} />
     </div>
   );
 };

diff --git a/frontend/src/components/pages/teams/collaborations/common/MessageForm.tsx b/frontend/src/components/pages/teams/collaborations/common/MessageForm.tsx
@@ -147,7 +147,7 @@ const MessageForm = ({ teamId, type }: Props) => {
   };
 
   return (
-    <div className="mx-auto bg-gray-200 dark:bg-gray-700 shadow-md px-6 py-2 rounded-md mt-8">
+    <div className="mx-auto bg-gray-200 dark:bg-gray-700 shadow-md lg:px-6 p-2 lg:py-2 rounded-md mt-8 mb-40 lg:mb-0">
       {/* Image Preview Section */}
       {imagePreview.length > 0 && (
         <div className="flex flex-wrap gap-2 mb-4">
@@ -209,14 +209,17 @@ const MessageForm = ({ teamId, type }: Props) => {
 
       <form
         onSubmit={handleSubmit(handleSendMessage)}
-        className="flex  gap-3 items-center"
+        className="flex  lg:gap-3 gap-2 items-center"
       >
-        <label className="cursor-pointer" onClick={openLinkModal}>
+        <label
+          className="hidden lg:block cursor-pointer"
+          onClick={openLinkModal}
+        >
           <FaLink className="text-blue-500 hover:underline" />
           <input type="text" {...register("links")} className="hidden" />
         </label>
 
-        <label htmlFor="images" className="cursor-pointer">
+        <label htmlFor="images" className="hidden lg:block cursor-pointer">
           <FaImage className="text-blue-500 hover:underline" />
           <input
             type="file"
@@ -229,7 +232,7 @@ const MessageForm = ({ teamId, type }: Props) => {
           />
         </label>
 
-        <label htmlFor="files" className="cursor-pointer">
+        <label htmlFor="files" className="hidden lg:block cursor-pointer">
           <FaFile
             title="Only pdf and video file supported"
             className="text-blue-500 hover:underline"

diff --git a/frontend/src/components/pages/teams/collaborations/common/ShowMessages.tsx b/frontend/src/components/pages/teams/collaborations/common/ShowMessages.tsx
@@ -13,12 +13,14 @@ import toast from "react-hot-toast";
 import { FaRegTrashAlt, FaPencilAlt } from "react-icons/fa";
 import moment from "moment";
 import { formattedDate } from "@/utils/formattedDate";
+import { ITeam } from "@/interfaces/team.interface";
 
 interface Props {
   messages: IMessage[];
+  team: ITeam;
 }
 
-const ShowMessages = ({ messages }: Props) => {
+const ShowMessages = ({ messages, team }: Props) => {
   const { socket, realTimeMessages, setRealTimeMessages }: any =
     useContext(SocketContext);
   const messagesContainerRef = useRef<HTMLDivElement | null>(null);
@@ -94,61 +96,66 @@ const ShowMessages = ({ messages }: Props) => {
   return (
     <div
       ref={messagesContainerRef}
-      className="mx-auto mt-8 h-60  overflow-hidden hover:overflow-auto  scrollbar scrollbar-w-[4px] scrollbar-thumb-blue-600 scrollbar-thin-rounded-md scrollbar-track-slate-100"
+      className="mx-auto mt-8 h-screen  overflow-hidden hover:overflow-auto  scrollbar scrollbar-w-[4px] scrollbar-thumb-blue-600 scrollbar-thin-rounded-md scrollbar-track-slate-100"
     >
       {realTimeMessages?.map((post: IMessage, index: number) => (
         <div
           key={post?.id}
-          className="mx-auto shadow-lg rounded-md p-6 mb-8"
+          className="mx-auto border-b py-6"
           onMouseOver={() => setIsEdit({ index: index, status: true })}
           onMouseLeave={() => setIsEdit({ index: 0, status: false })}
         >
-          <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center justify-between">
             <div className="flex items-center mb-4">
               <img
                 src={post?.poster?.profile_picture}
                 alt={post?.poster?.name}
                 className="w-10 h-10 rounded-full mr-4"
               />
               <div className="flex flex-col gap-1">
-                <span className="font-bold">{post?.poster?.name}</span>
+                <span className="font-bold text-xs lg:text-lg">
+                  {post?.poster?.name}
+                </span>
                 <span className="text-sm text-gray-500">
                   {moment(post?.createdAt).fromNow()}
                 </span>
               </div>
             </div>
-            {isEdit.status &&
-              isEdit.index === index &&
-              user.id === post?.poster?.id && (
+            {(isEdit.status &&
+              isEdit?.index === index &&
+              user?.id === post?.poster?.id) ||
+              (user?.id === team?.admin?.id && (
                 <div className="flex items-center gap-3 mb-4">
-                  <button
-                    title="Edit Message"
-                    onClick={() =>
-                      setIsEditMessage({ id: post?.id, status: true })
-                    }
-                    className="bg-gray-400 p-2 rounded-md text-white"
-                  >
-                    <FaPencilAlt />
-                  </button>
+                  {user.id === post.poster.id && (
+                    <button
+                      title="Edit Message"
+                      onClick={() =>
+                        setIsEditMessage({ id: post?.id, status: true })
+                      }
+                      className="bg-gray-400 p-2 rounded-md text-white"
+                    >
+                      <FaPencilAlt className="text-xs lg:text-xl" />
+                    </button>
+                  )}
                   <button
                     title="Delete Message"
                     onClick={() => handleDeleteMessage(post?.id)}
                     className="bg-gray-400 p-2 rounded-md text-white"
                   >
-                    <FaRegTrashAlt />
+                    <FaRegTrashAlt className="text-xs lg:text-xl" />
                   </button>
                 </div>
-              )}
+              ))}
           </div>
-          {isEditMessage.status && isEditMessage.id === post?.id ? (
-            <div className="flex flex-col gap-3">
+          {isEditMessage?.status && isEditMessage.id === post?.id ? (
+            <div className="flex flex-col gap-1 mb-2">
               <p>
                 <textarea
                   defaultValue={post.text}
                   onChange={(e) => setEditedMessage(e.target.value)}
                   name="text"
                   id="text"
-                  className="border-2 border-gray-300 px-2 w-full rounded-md focus:outline-none focus:border-blue-500 flex-grow"
+                  className="border-2 border-gray-300 p-2 w-full rounded-md focus:outline-none focus:border-blue-500"
                 />
               </p>
               <p className="flex gap-2">

diff --git a/frontend/src/components/pages/teams/collaborations/discussions/Discussion.tsx b/frontend/src/components/pages/teams/collaborations/discussions/Discussion.tsx
@@ -2,19 +2,20 @@ import React from "react";
 import ShowMessages from "../common/ShowMessages";
 import MessageForm from "../common/MessageForm";
 import { useGetMessagesByTypeQuery } from "@/features/message";
+import { ITeam } from "@/interfaces/team.interface";
 
 type Props = {
-  teamId: string;
+  team: ITeam;
 };
-const Discussion = ({ teamId }: Props) => {
+const Discussion = ({ team }: Props) => {
   const { data: messageData } = useGetMessagesByTypeQuery({
     type: "discussion",
-    conversationId: teamId,
+    conversationId: team?.id,
   });
   return (
     <div>
-      <ShowMessages messages={messageData?.data} />
-      <MessageForm teamId={teamId} type={"discussion"} />
+      <ShowMessages team={team} messages={messageData?.data} />
+      <MessageForm teamId={team?.id} type={"discussion"} />
     </div>
   );
 };

diff --git a/frontend/src/components/pages/teams/collaborations/resources/Resources.tsx b/frontend/src/components/pages/teams/collaborations/resources/Resources.tsx
@@ -2,20 +2,21 @@ import React from "react";
 import ShowMessages from "../common/ShowMessages";
 import MessageForm from "../common/MessageForm";
 import { useGetMessagesByTypeQuery } from "@/features/message";
+import { ITeam } from "@/interfaces/team.interface";
 
 type Props = {
-  teamId: string;
+  team: ITeam;
 };
 
-const Resources = ({ teamId }: Props) => {
+const Resources = ({ team }: Props) => {
   const { data: messageData } = useGetMessagesByTypeQuery({
     type: "resources",
-    conversationId: teamId,
+    conversationId: team?.id,
   });
   return (
     <div>
-      <ShowMessages messages={messageData?.data} />
-      <MessageForm teamId={teamId} type={"resources"} />
+      <ShowMessages team={team} messages={messageData?.data} />
+      <MessageForm teamId={team?.id} type={"resources"} />
     </div>
   );
 };

diff --git a/frontend/src/components/pages/teams/mobile/chat/index.tsx b/frontend/src/components/pages/teams/mobile/chat/index.tsx
@@ -13,52 +13,30 @@ type Props = {
 const Chat = ({ team, handleActive }: Props) => {
   const [activeChat, setActiveChat] = useState("Discussion");
   return (
-    <div className="p-4">
+    <div className="lg:p-4 px-4">
       <div>
         <button
           onClick={() => handleActive("Team info")}
-          className="flex text-xl items-center bg-gray-200 dark:bg-gray-600 px-4 py-2 gap-2 rounded-md mb-4 font-semibold"
+          className="flex text-xl items-center bg-gray-200 dark:bg-gray-600 px-4 py-1 lg:py-2 gap-2 rounded-md mb-4 font-semibold"
         >
           <MdOutlineArrowBackIos />
           <small>Back</small>
         </button>
       </div>
-      <div className="flex justify-between items-center gap-3">
-        <p className="w-1/3">
-          <button
-            onClick={() => setActiveChat("Announcement")}
-            className={`border w-full px-4 py-2 rounded-md ${
-              activeChat === "Announcement" && "bg-gray-200 dark:bg-gray-600"
-            }`}
-          >
-            Announcement
-          </button>
-        </p>
-        <p className="w-1/3">
-          <button
-            onClick={() => setActiveChat("Resources")}
-            className={`border w-full px-4 py-2 rounded-md  ${
-              activeChat === "Resources" && "bg-gray-200 dark:bg-gray-600"
-            }`}
-          >
-            Resources
-          </button>
-        </p>
-        <p className="w-1/3">
-          <button
-            onClick={() => setActiveChat("Discussion")}
-            className={`border w-full px-4 py-2 rounded-md   ${
-              activeChat === "Discussion" && "bg-gray-200 dark:bg-gray-600"
-            }`}
-          >
-            Discussion
-          </button>
-        </p>
-      </div>
+      <select
+        className="border-2 w-full border-gray-300 p-2 rounded-md focus:outline-none focus:border-blue-500 flex-grow"
+        name="category"
+        id="category"
+        onChange={(e: any) => setActiveChat(e.target.value)}
+      >
+        <option value="Announcement">Announcement</option>
+        <option value="Resources">Resources</option>
+        <option value="Discussion">Discussion</option>
+      </select>
       <div>
-        {activeChat === "Announcement" && <Announcement teamId={team?.id} />}
-        {activeChat === "Resources" && <Resources teamId={team?.id} />}
-        {activeChat === "Discussion" && <Discussion teamId={team?.id} />}
+        {activeChat === "Announcement" && <Announcement team={team} />}
+        {activeChat === "Resources" && <Resources team={team} />}
+        {activeChat === "Discussion" && <Discussion team={team} />}
       </div>
     </div>
   );

diff --git a/frontend/src/components/pages/teams/mobile/index.tsx b/frontend/src/components/pages/teams/mobile/index.tsx
@@ -21,7 +21,7 @@ const TeamDetailsMobilePage = () => {
       setActive(text);
     }
   };
-  
+
   return (
     <div>
       {!isChat && (

diff --git a/frontend/src/components/pages/teams/showTeam/TeamDetailsPage.tsx b/frontend/src/components/pages/teams/showTeam/TeamDetailsPage.tsx
@@ -85,9 +85,9 @@ const TeamDetailsPage = () => {
           </ul>
         </nav>
         <div>
-          {activeNav === "Announcement" && <Announcement teamId={team?.id} />}
-          {activeNav === "Resources" && <Resources teamId={team?.id} />}
-          {activeNav === "Discussion" && <Discussion teamId={team?.id} />}
+          {activeNav === "Announcement" && <Announcement team={team} />}
+          {activeNav === "Resources" && <Resources team={team} />}
+          {activeNav === "Discussion" && <Discussion team={team} />}
         </div>
       </div>
     </div>