Finish Room Settings : Ban & mute , Kick , SetAsAdmin, Delete (#70)

backend/code/src/rooms/rooms.service.ts

@@ -14,6 +14,7 @@ import { RoomSearchDto } from './dto/room-search.dto';
 import * as bcrypt from 'bcrypt';
 import { UpdateRoomDto } from './dto/update-room.dto';
 import { RoomDataDto } from './dto/room-data.dto';
+import { PICTURE } from 'src/profile/dto/profile.dto';
 
 @Injectable()
 export class RoomsService {
@@ -380,7 +381,7 @@ export class RoomsService {
  if (!user)
  throw new UnauthorizedException('You are not a member of this room');
 
- return await this.prisma.roomMember.findMany({
+ const members = await this.prisma.roomMember.findMany({
  skip: offset,
  take: limit,
  where: {
@@ -398,6 +399,18 @@ export class RoomsService {
  },
  },
  });
+ return members.map((member) => {
+ const avatar: PICTURE = {
+ thumbnail: `https://res.cloudinary.com/trandandan/image/upload/c_thumb,h_48,w_48/${member.user.avatar}`,
+ medium: `https://res.cloudinary.com/trandandan/image/upload/c_thumb,h_72,w_72/${member.user.avatar}`,
+ large: `https://res.cloudinary.com/trandandan/image/upload/c_thumb,h_128,w_128/${member.user.avatar}`,
+ };
+ return {
+ id: member.user.userId,
+ name: { first: member.user.firstName, last: member.user.lastName },
+ avatar,
+ }
+ });
  }
 
  async banMember(memberData: ChangeOwnerDto, userId: string) {
@@ -480,16 +493,18 @@ export class RoomsService {
  name: true,
  type: true,
  ownerId: true,
- members: {
+ ...(joined && {members: {
  where: {
  userId: userId,
  },
  select: {
  is_admin: true,
  },
- },
+ }})
  },
  });
+ if (!joined)
+ return rooms;
  return rooms.map((room) => {
  const is_owner = room.ownerId === userId;
  return {

frontend/code/src/Api/base.tsx

@@ -1,37 +1,34 @@
-import axios from 'axios';
+import axios from "axios";
 
 const api = axios.create({
  baseURL: `${process.env.REACT_APP_API_ENDPOINT}`,
  timeout: 10000,
  withCredentials: true,
  headers: {
  "Cache-Control": "no-cache",
- 'Content-Type': 'application/json',
+ "Content-Type": "application/json",
  },
 });
 
 let refreshAttempted = false;
 
-const errorHandler = async (error:any) => {
-
+const errorHandler = async (error: any) => {
  if (error.response.status === 401) {
- if (!refreshAttempted ) {
+ if (!refreshAttempted) {
  try {
  refreshAttempted = true;
  await api.get("auth/refresh");
  return api.request(error.config);
- } catch (refreshError) {
- }
+ } catch (refreshError) {}
  } else {
- refreshAttempted = false
+ refreshAttempted = false;
  }
  }
- 
+
  return Promise.reject({ ...error });
 };
 
 api.interceptors.response.use(
-
  (response) => response,
  (error) => errorHandler(error)
 );

frontend/code/src/Components/Chat/Components/Conversation.tsx

@@ -9,11 +9,10 @@ import users, {
 } from "./tools/Assets";
 import { ChatType, useChatStore } from "../Controllers/ChatControllers";
 
-import {
- ChatPlaceHolder,
- ConfirmationModal,
-} from "./RoomChatHelpers";
+import { ChatPlaceHolder, ConfirmationModal } from "./RoomChatHelpers";
 import { KeyboardEvent } from "react";
+import { leaveRoomCall } from "../Services/ChatServices";
+import toast from "react-hot-toast";
 
 export interface ChatPaceHolderProps {
  username: string;
@@ -84,31 +83,35 @@ export const ConversationHeader: React.FC<ConversationProps> = ({
 }) => {
  const [MyUsers] = useState(users);
 
+ const ChatState = useChatStore((state) => state);
  const SelectedChat = useChatStore((state) => state.selectedChatID);
 
  const currentUser = MyUsers.find((user) => user.id === SelectedChat);
  const selectedChatType = useChatStore((state) => state.selectedChatType);
 
  const currentRoom = chatRooms.find((room) => room.id === SelectedChat);
 
- const [isModalOpen, setIsModalOpen] = useState(false);
+ const toggleChatRooms = useChatStore((state) => state.toggleChatRooms);
 
- // Function to open the modal
- const openModal = () => {
- setIsModalOpen(true);
- };
+ const [isModalOpen, setIsModalOpen] = useState(false);
 
- // Function to handle the confirmation
  const handleConfirmation = () => {
- // Perform your action when the user confirms (e.g., delete item)
- // For this example, we'll just close the modal
  setIsModalOpen(false);
  };
 
  return (
  <>
  <div className="flex flex-row justify-between bg-[#1A1C26] p-3 border-b-2 border-black ">
  <div className="flex flex-row ">
+ <div className="flex items-center justify-center h-full mr-4 md:hidden">
+ <button
+ className="w-8 h-8 rounded-md bg-slate-700 flex items-center justify-center hover:bg-slate-600"
+ onClick={() => toggleChatRooms()}
+ >
+ =
+ </button>
+ </div>
+
  <div className="pr-1">
  <img
  className="w-12 rounded-full "
@@ -124,6 +127,8 @@ export const ConversationHeader: React.FC<ConversationProps> = ({
  <p className="text-white font-poppins text-base font-medium leading-normal">
  {selectedChatType === ChatType.Chat
  ? currentUser?.name
+ : currentRoom?.isOwner
+ ? currentRoom.name + " ♚"
  : currentRoom?.name}
  </p>
  {selectedChatType === ChatType.Chat ? (
@@ -178,7 +183,8 @@ export const ConversationHeader: React.FC<ConversationProps> = ({
  className="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52 absolute right-full "
  >
  {/* check if current user is admin or owner to show the settings toast */}
- {currentRoom?.isAdmin || currentRoom?.isOwner ? (
+ {(currentRoom?.isAdmin === true ||
+ currentRoom?.isOwner === true) && (
  <div className="icons-row flex flex-col ">
  <a href="#my_modal_9" className="">
  <li>
@@ -193,8 +199,6 @@ export const ConversationHeader: React.FC<ConversationProps> = ({
  </li>
  </a>
  </div>
- ) : (
- <></>
  )}
 
  <li className="hidden md:block">
@@ -205,16 +209,25 @@ export const ConversationHeader: React.FC<ConversationProps> = ({
  Show Room Info
  </span>
  </li>
- {currentRoom?.isOwner === false ? (
+ {currentRoom?.isOwner === false && (
  <div>
- <li>
- <span onClick={openModal} className="hover:bg-[#7940CF]">
- leave The Room
- </span>
+ <li
+ onClick={async () => {
+ ChatState.setIsLoading(true);
+ await leaveRoomCall(currentRoom?.id as string).then(
+ (res) => {
+ ChatState.setIsLoading(false);
+ if (res?.status === 200 || res?.status === 201) {
+ toast.success("Room Left Successfully");
+ ChatState.selectNewChatID(chatRooms[0].id);
+ }
+ }
+ );
+ }}
+ >
+ <span className="hover:bg-[#7940CF]">leave The Room</span>
  </li>
  </div>
- ) : (
- <></>
  )}
  </ul>
  <ConfirmationModal

frontend/code/src/Components/Chat/Components/RecentChat.tsx

@@ -10,13 +10,10 @@ import users, {
 } from "./tools/Assets";
 
 import {
- AddUsersModal,
- CreateNewRoomModal,
- ExploreRoomsModal,
+
  NullPlaceHolder,
  RoomChatPlaceHolder,
- RoomSettingsModal,
- ShowLogoModal,
+
 } from "./RoomChatHelpers";
 import { useModalStore } from "../Controllers/ModalControllers";
 
@@ -27,7 +24,7 @@ export const RecentConversations = () => {
  <div className="h-full flex flex-col ">
  <OnlineNowUsers />
  {MyUsers.length > 0 ? (
- <div className="flex-grow overflow-y-auto no-scrollbar">
+ <div className="flex-grow overflow-y-auto no-scrollbar bg-[#1A1C26]">
  {MyUsers.filter((friend) => friend.messages.length > 0).map(
  // to change 0 to the last message here
  (friend) => (
@@ -140,13 +137,7 @@ export const OnlineNowUsers = () => {
  src={Explore}
  />
  </a>
- <div>
- <ExploreRoomsModal />
- <RoomSettingsModal />
- <AddUsersModal />
- <CreateNewRoomModal />
- <ShowLogoModal />
- </div>
+
  </div>
  </div>
  <div className="Message-Type-Buttons flex flex-row pt-2 pb-2 justify-between ">