Skip to content

Commit

Permalink
Add three dots for message actions
Browse files Browse the repository at this point in the history
  • Loading branch information
@Md-Rubel-Ahmed-Rana
Md-Rubel-Ahmed-Rana committed Jul 9, 2024
1 parent c571201 commit b5bedf0
Show file tree
Hide file tree
Showing 6 changed files with 96 additions and 62 deletions.
2 changes: 1 addition & 1 deletion frontend/src/components/pages/Profile/ProfilePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const ProfilePage = () => {
{!isEdit && (
<div className="p-4">
<h1 className="text-2xl font-semibold">Profile</h1>
<div className="mt-4">
<div className="mt-4 mb-7">
{!user?.profile_picture && (
<div className="my-3 border w-64 rounded-md p-4 text-lg">
<p className="mb-2 font-semibold">No Profile picture</p>
Expand Down
20 changes: 10 additions & 10 deletions frontend/src/components/pages/dashboard/team/TeamDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,23 +98,23 @@ const TeamDetails = ({ team }: { team: ITeam }) => {
<div className="flex flex-col md:flex-row items-center gap-5">
{admin.id === user.id && (
<>
<p>
<p className="w-full lg:w-auto">
<button
onClick={() => setIsOpen(true)}
className="mx-auto outline-none border px-5 py-2 rounded-lg"
className="mx-auto outline-none border w-full lg:w-auto px-5 py-2 rounded-lg"
>
Add members
</button>
</p>
<p>
<p className="w-full lg:w-auto">
<button
onClick={() => setIsRemove(true)}
className="mx-auto border px-5 py-2 rounded-lg"
className="mx-auto border px-5 py-2 rounded-lg w-full lg:w-auto"
>
Remove members
</button>
</p>
<p>
<p className="w-full lg:w-auto">
<Link
href={{
pathname: `/teams/edit-team/${team?.id}`,
Expand All @@ -126,28 +126,28 @@ const TeamDetails = ({ team }: { team: ITeam }) => {
},
}}
>
<button className="mx-auto border px-5 py-2 rounded-lg">
<button className="mx-auto border px-5 py-2 w-full lg:w-auto rounded-lg">
Edit Team
</button>
</Link>
</p>
</>
)}
{admin?.id !== user?.id && (
<p>
<p className="w-full lg:w-auto">
<button
onClick={handleRequestToLeave}
disabled={teamIds?.includes(id)}
className={` ${
teamIds?.includes(id) ? "cursor-not-allowed" : "shadow-md"
} mx-auto outline-none border px-5 py-2 rounded-lg`}
} mx-auto outline-none border px-5 py-2 rounded-lg w-full lg:w-auto`}
>
{teamIds?.includes(id) ? "Requested" : "Request to leave"}
</button>
</p>
)}

<p>
<p className="w-full lg:w-auto">
<Link
href={{
pathname: `/teams/${team?.id}`,
Expand All @@ -158,7 +158,7 @@ const TeamDetails = ({ team }: { team: ITeam }) => {
},
}}
>
<button className="font-medium border px-5 py-2 rounded-md">
<button className="font-medium w-full border px-5 py-2 rounded-md lg:w-auto">
View details
</button>
</Link>
Expand Down
17 changes: 13 additions & 4 deletions frontend/src/components/pages/teams/collaborations/common/MessageForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const MessageForm = ({ teamId, type }: Props) => {
const uploadImages = useUploadMultipleImage();
const uploadFiles = useUploadMultipleFile();
const [sendMessage] = useSendMessageMutation();
const [isMessage, setIsMessage] = useState(false);
const [isMessage, setIsMessage] = useState<any>({ status: false, value: "" });

const openLinkModal = () => {
setShowLinkModal(true);
Expand All @@ -73,6 +73,8 @@ const MessageForm = ({ teamId, type }: Props) => {
data.poster = user.id;
data.conversationId = teamId;
data.type = type;
data.text = data?.text || isMessage?.value;
console.log({ payload: data });
const result: any = await sendMessage(data);
if (result?.data?.success) {
const message = result?.data?.data;
Expand Down Expand Up @@ -249,10 +251,17 @@ const MessageForm = ({ teamId, type }: Props) => {
</label>

<input
autoFocus
type="text"
{...register("text")}
name="text"
placeholder="Type your message..."
onChange={(e) => setIsMessage(e.target.value ? true : false)}
onChange={(e) =>
setIsMessage({
status: e.target.value ? true : false,
value: e.target.value,
})
}
className="border-2 border-gray-300 p-2 rounded-md focus:outline-none focus:border-blue-500 flex-grow"
/>

Expand All @@ -261,14 +270,14 @@ const MessageForm = ({ teamId, type }: Props) => {
links.length <= 0 &&
filePreview.length <= 0 &&
imagePreview.length <= 0 &&
!isMessage
!isMessage?.status
}
type="submit"
className={`${
links.length <= 0 &&
filePreview.length <= 0 &&
imagePreview.length <= 0 &&
!isMessage
!isMessage?.status
? "bg-gray-500 hover:bg-gray-600"
: "bg-blue-500 hover:bg-blue-600"
} text-white px-4 py-2 rounded-md focus:outline-none`}
Expand Down
97 changes: 57 additions & 40 deletions frontend/src/components/pages/teams/collaborations/common/ShowMessages.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { IUser } from "@/interfaces/user.interface";
import React, { useContext, useEffect, useRef, useState } from "react";
import toast from "react-hot-toast";
import { FaRegTrashAlt, FaPencilAlt } from "react-icons/fa";
import { HiDotsVertical } from "react-icons/hi";
import moment from "moment";
import { formattedDate } from "@/utils/formattedDate";
import { ITeam } from "@/interfaces/team.interface";
Expand All @@ -24,17 +25,11 @@ const ShowMessages = ({ messages, team }: Props) => {
const { socket, realTimeMessages, setRealTimeMessages }: any =
useContext(SocketContext);
const messagesContainerRef = useRef<HTMLDivElement | null>(null);
const [isEdit, setIsEdit] = useState({ index: 0, status: false });
const [editedMessage, setEditedMessage] = useState<string | undefined>("");
const [imageModalOpen, setImageModalOpen] = useState<boolean>(false);
const [selectedImage, setSelectedImage] = useState<string>("");
const [isEditMessage, setIsEditMessage] = useState<{
id: string | undefined;
status: boolean;
}>({
id: "",
status: false,
});
const [msIndex, setMsIndex] = useState<number | null>(null);
const [isEditMessage, setIsEditMessage] = useState<any>("");
const { data: userData } = useLoggedInUserQuery({});
const user: IUser = userData?.data;
const [deleteMessage] = useDeleteMessageMutation();
Expand All @@ -49,22 +44,35 @@ const ShowMessages = ({ messages, team }: Props) => {
const result: any = await deleteMessage(id);
if (result?.data?.success) {
toast.success("Message deleted");
setMsIndex(null);
}
if (result?.error) {
toast.error("Message was not deleted");
}
};

const handleShowDropdown = (index: number) => {
if (msIndex === index) {
setMsIndex(null);
} else {
setMsIndex(index);
}
};

const handleEditMessage = async () => {
const result: any = await editMessage({
id: isEditMessage.id,
id: isEditMessage,
text: editedMessage,
});
if (result?.data?.success) {
toast.success("Message updated");
setMsIndex(null);
setIsEditMessage("");
}
if (result?.error) {
toast.error("Message was not updated");
setMsIndex(null);
setIsEditMessage("");
}
};

Expand Down Expand Up @@ -99,13 +107,8 @@ const ShowMessages = ({ messages, team }: Props) => {
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 border-b py-6"
onMouseOver={() => setIsEdit({ index: index, status: true })}
onMouseLeave={() => setIsEdit({ index: 0, status: false })}
>
<div className="flex items-center justify-between">
<div key={post?.id} className="mx-auto border-b py-6">
<div className="flex justify-between items-start">
<div className="flex items-center mb-4">
<img
src={post?.poster?.profile_picture}
Expand All @@ -121,33 +124,47 @@ const ShowMessages = ({ messages, team }: Props) => {
</span>
</div>
</div>
{(isEdit.status &&
isEdit?.index === index &&
user?.id === post?.poster?.id) ||
(user?.id === team?.admin?.id && (
<div className="flex items-center gap-3 mb-4">
{user.id === post.poster.id && (
{(user?.id === post?.poster?.id ||
user?.id === team?.admin?.id) && (
<div className="relative">
<button
onClick={() => handleShowDropdown(index)}
title="Drop down button"
className="bg-gray-400 p-2 rounded-md text-white"
>
<HiDotsVertical className="text-xs lg:text-xl" />
</button>
{msIndex === index && (
<div className="absolute right-0 flex w-40 flex-col gap-2 top-10 rounded-md dark:bg-gray-700 z-50 p-2 text-start">
{user?.id === post?.poster?.id && (
<button
onClick={() => {
setIsEditMessage(post?.id);
setMsIndex(null);
}}
className="text-start w-full dark:bg-gray-800 px-2 py-1 rounded-md"
>
Edit
</button>
)}
<button
title="Edit Message"
onClick={() =>
setIsEditMessage({ id: post?.id, status: true })
}
className="bg-gray-400 p-2 rounded-md text-white"
onClick={() => handleDeleteMessage(post.id)}
className="text-start w-full dark:bg-gray-800 px-2 py-1 rounded-md"
>
<FaPencilAlt className="text-xs lg:text-xl" />
Delete
</button>
)}
<button
title="Delete Message"
onClick={() => handleDeleteMessage(post?.id)}
className="bg-gray-400 p-2 rounded-md text-white"
>
<FaRegTrashAlt className="text-xs lg:text-xl" />
</button>
</div>
))}
<button
onClick={() => handleShowDropdown(index)}
className="text-start w-full dark:bg-gray-800 px-2 py-1 rounded-md"
>
Cancel
</button>
</div>
)}
</div>
)}
</div>
{isEditMessage?.status && isEditMessage.id === post?.id ? (
{isEditMessage === post?.id ? (
<div className="flex flex-col gap-1 mb-2">
<p>
<textarea
Expand All @@ -160,7 +177,7 @@ const ShowMessages = ({ messages, team }: Props) => {
</p>
<p className="flex gap-2">
<button
onClick={() => setIsEditMessage({ id: "", status: false })}
onClick={() => setIsEditMessage("")}
className="border px-3 rounded-sm"
>
Cancel
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/components/pages/teams/showTeam/TeamPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,14 +44,14 @@ const Teams = () => {
<h2 className="text-2xl font-bold my-2">{team.name}</h2>
<h4 className="text-xl font-semibold mb-3">{team.category}</h4>
<p className="w-full mb-10">{team.description}</p>
<div>
<p className="absolute bottom-3 left-8 border font-medium px-5 py-2 rounded-md flex items-center gap-1">
<div className="flex justify-between items-center gap-2 absolute bottom-4 w-full right-0 left-0 px-5">
<p className="border font-medium px-2 lg:px-5 py-1 lg:py-2 rounded-md flex items-center gap-1">
<span> Members: </span>
<span>{Number(team.activeMembers?.length)}</span>
</p>
<p className="absolute bottom-5 right-8">
<p>
<Link
className="border font-medium px-5 py-2 rounded-md"
className="border font-medium px-2 lg:px-5 py-2 rounded-md"
href={{
pathname: `/teams/${team.id}`,
query: {
Expand Down
14 changes: 11 additions & 3 deletions frontend/src/components/shared/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { useTheme } from "next-themes";
import { useGetNotificationQuery } from "@/features/notification";
import { INotification } from "@/interfaces/notification.interface";
import { SocketContext } from "@/context/SocketContext";
import Swal from "sweetalert2";

const Navbar = () => {
const { socket }: any = useContext(SocketContext);
Expand All @@ -27,9 +28,16 @@ const Navbar = () => {
>([]);

const handleLogOut = async () => {
const res = await logout("");
console.log(res);
// window.location.replace("/");
const res: any = await logout("");
if (res?.data?.statusCode === 200) {
Swal.fire({
position: "center",
icon: "success",
title: res?.data?.message,
showConfirmButton: false,
});
window.location.replace("/");
}
};

useEffect(() => {
Expand Down

0 comments on commit b5bedf0

Please sign in to comment.