finish friend list

Wadie-ess · Nov 15, 2023 · 4447e18 · 4447e18
1 parent fa17ed9
commit 4447e18
Show file tree

Hide file tree

Showing 6 changed files with 114 additions and 28 deletions.
diff --git a/backend/code/src/rooms/rooms.service.ts b/backend/code/src/rooms/rooms.service.ts
@@ -39,6 +39,12 @@ export class RoomsService {
  delete roomData.secondMember;
 
  if (roomData.type === 'dm') {
+ if (roomOwnerId === secondMember) {
+ throw new HttpException(
+ 'you cannot create a dm room with yourself',
+ HttpStatus.BAD_REQUEST,
+ );
+ }
  const user = await this.prisma.user.findUnique({
  where: {
  userId: secondMember,

diff --git a/frontend/code/src/Components/Chat/Components/Conversation.tsx b/frontend/code/src/Components/Chat/Components/Conversation.tsx
@@ -312,27 +312,26 @@ export const ConversationHeader: React.FC<ConversationProps> = ({
  : "hide Room Info"}
  </span>
  </li>
- {currentRoom?.isOwner === false && (
- <div>
- <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.changeChatType(ChatType.Chat);
- ChatState.deleteRoom(currentRoom?.id as string);
- }
+ {/* {currentRoom?.isOwner === false && ( */}
+ <div>
+ <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.changeChatType(ChatType.Chat);
+ ChatState.deleteRoom(currentRoom?.id as string);
  }
- );
- }}
- >
-  <span className="hover:bg-[#7940CF]">leave The Room</span>
- </li>
- </div>
- )}
+ }
+ );
+ }}
+ >
+ <span className="hover:bg-[#7940CF]">leave The Room</span>
+ </li>
+ </div>
  </ul>
  <ConfirmationModal
  isOpen={isModalOpen}

diff --git a/frontend/code/src/Components/Chat/Components/RoomChatHelpers.tsx b/frontend/code/src/Components/Chat/Components/RoomChatHelpers.tsx
@@ -33,6 +33,7 @@ import { formatTime } from "./tools/utils";
 import { getBlockedCall, unblockCall } from "../Services/FriendsServices";
 import { useSocketStore } from "../Services/SocketsServices";
 import { useInView } from "react-intersection-observer";
+import { classNames } from "../../../Utils/helpers";
 
 interface NullComponentProps {
  message: string;
@@ -538,8 +539,69 @@ export const BlockedUsersModal = () => {
  );
 };
 
+export const FriendStatusTile = (props: { user: RoomMember }) => {
+ const [IsAdding, setIsAdding] = useState(false);
+ const selectedChatID = useChatStore((state) => state.selectedChatID);
+ const LayoutState = useModalStore((state) => state);
+ const user = props.user;
+ const [onlineStatus, setOnlineStatus] = useState<string>("offline");
+ const socketStore = useSocketStore((state) => state);
+
+ useEffect(() => {
+ socketStore?.socket?.emit(
+ "status",
+ { userId: user.id },
+ (data: { status: string; inGame: boolean }) => {
+ console.log(data);
+ if (data.status === "online" && !data.inGame) {
+ setOnlineStatus("online");
+ } else if (data.status === "online" && data.inGame) {
+ setOnlineStatus("inGame");
+ } else {
+ setOnlineStatus("offline");
+ }
+ }
+ );
+ }, [user.id, socketStore?.socket]);
+ return (
+ <div key={user.id}>
+ <div className="flex flex-row justify-between p-3">
+ <div className="flex flex-row items-center space-x-3">
+ <div className="pr-1">
+ <img
+ className="w-12 rounded-full "
+ alt=""
+ src={user?.avatar?.medium}
+ />
+ </div>
+
+ <p className="text-white font-poppins text-base font-medium leading-normal">
+ {user?.firstname ?? "user"}
+ </p>
+ </div>
+
+ <div>
+ <span
+ className={classNames(
+ "px-2 py-1 font-light ml-2 text-xs border rounded-full",
+ onlineStatus === "online"
+ ? "text-green-500 border-green-500"
+ : onlineStatus === "inGame"
+ ? "text-yellow-500 border-yellow-500"
+ : "text-red-500 border-red-500"
+ )}
+ >
+ {onlineStatus}
+ </span>
+ </div>
+ </div>
+ </div>
+ );
+};
+
 export const FriendsListModal = () => {
  const [currentFriends, setUsers] = useState<RoomMember[]>([]);
+ const [onlineStatus, setOnlineStatus] = useState<string>("offline");
 
  const LayoutState = useModalStore((state) => state);
  const [IsLoading, setIsLoading] = useState(false);
@@ -611,7 +673,7 @@ export const FriendsListModal = () => {
  <NullPlaceHolder message="You have no Friends Yet" />
  )}
  {currentFriends.map((user) => (
- <FriendTile key={user.id} user={user} />
+ <FriendStatusTile key={user.id} user={user} />
  ))}
  </div>
  )}

diff --git a/frontend/code/src/Components/Chat/index.tsx b/frontend/code/src/Components/Chat/index.tsx
@@ -28,6 +28,7 @@ import { getRoomMembersCall } from "./Services/ChatServices";
 import { classNames } from "../../Utils/helpers";
 import { useModalStore } from "./Controllers/LayoutControllers";
 import { useInView } from "react-intersection-observer";
+import { useNavigate } from "react-router-dom";
 
 export interface ConversationProps {
  onRemoveUserPreview: () => void;
@@ -102,6 +103,7 @@ export const UserPreviewCard: React.FC<ConversationProps> = ({
  const [currentUsers, setUsers] = useState<RoomMember[]>([]);
  const LayoutState = useModalStore((state) => state);
  const SelectedChat = useChatStore((state) => state.selectedChatID);
+ const navigate = useNavigate();
 
  const currentUser = useChatStore((state) => state.currentDmUser);
  const selectedChatType = useChatStore((state) => state.selectedChatType);
@@ -206,10 +208,23 @@ export const UserPreviewCard: React.FC<ConversationProps> = ({
  <div className="flex items-center justify-start space-x-2">
  <div className="avatar">
  <div className="mask mask-squircle w-11 h-11">
- <img
+ <button
+ onClick={async () => {
+ {
+ navigate(`/profile/${user.id}`);
+ }
+ }}
+ >
+ <img
+ className="w-12 rounded-full "
+ alt=""
+ src={user?.avatar?.medium ?? NullUser}
+ />
+ </button>
+ {/* <img
  src={user?.avatar?.medium ?? NullUser}
  alt="Avatar Tailwind CSS Component"
- />
+ /> */}
  </div>
  </div>
  <div>

diff --git a/frontend/code/src/Components/Layout/index.tsx b/frontend/code/src/Components/Layout/index.tsx
@@ -15,7 +15,11 @@ import { useUserStore } from "../../Stores/stores";
 import { useNavigate } from "react-router-dom";
 import { FirstLogin } from "../FirstLogin";
 import { useSocketStore } from "../Chat/Services/SocketsServices";
-import { ShowLogoModal } from "../Chat/Components/RoomChatHelpers";
+import {
+ BlockedUsersModal,
+ FriendsListModal,
+ ShowLogoModal,
+} from "../Chat/Components/RoomChatHelpers";
 import { Modal } from "./Assets/Modal";
 import toast from "react-hot-toast";
 import { closeWhite } from "../Chat/Components/tools/Assets";
@@ -184,6 +188,8 @@ export const Layout: FC<PropsWithChildren> = (): JSX.Element => {
  <div className=" flex flex-row w-screen h-[9vh] bg-base-200">
  <div className="flex justify-start items-center z-50 h-full w-full">
  <ShowLogoModal />
+ <BlockedUsersModal />
+ <FriendsListModal />
  <Logo className="sm:w-30 w-20" />
  </div>
  <div className="flex items-center justify-end pr-6 gap-6 h-full w-full">

diff --git a/frontend/code/src/Components/Profile/index.tsx b/frontend/code/src/Components/Profile/index.tsx
@@ -94,7 +94,7 @@ export const Profile = () => {
  } else {
  setOnlineStatus("offline");
  }
- },
+ }
  );
  }, [params.id, socketStore?.socket, user.id]);
 
@@ -155,8 +155,6 @@ export const Profile = () => {
 
  return (
  <>
- <BlockedUsersModal />
- <FriendsListModal />
  <div className=" flex flex-col items-center h-full bg-accent">
  <div className="relative pt-12 h-auto max-h-[30vh] min-h-[16vh] md:min-h-[28vh] xl:min-h-[33vh] w-[85vw]">
  <div className="relative h-full w-full md:px-32 bg-[#2b3bfb] rounded-t-3xl">
@@ -202,7 +200,7 @@ export const Profile = () => {
  ? "text-green-500 border-green-500"
  : onlineStatus === "inGame"
  ? "text-yellow-500 border-yellow-500"
- : "text-red-500 border-red-500",
+ : "text-red-500 border-red-500"
  )}
  >
  {onlineStatus}