From 4447e18dfef6ea9fc7adaf172956ce21baef9752 Mon Sep 17 00:00:00 2001 From: Wadie-ess Date: Wed, 15 Nov 2023 20:28:12 +0100 Subject: [PATCH] finish friend list --- backend/code/src/rooms/rooms.service.ts | 6 ++ .../Chat/Components/Conversation.tsx | 39 ++++++----- .../Chat/Components/RoomChatHelpers.tsx | 64 ++++++++++++++++++- frontend/code/src/Components/Chat/index.tsx | 19 +++++- frontend/code/src/Components/Layout/index.tsx | 8 ++- .../code/src/Components/Profile/index.tsx | 6 +- 6 files changed, 114 insertions(+), 28 deletions(-) diff --git a/backend/code/src/rooms/rooms.service.ts b/backend/code/src/rooms/rooms.service.ts index a2db851..4d08436 100644 --- 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 index 9690c9a..cb5b728 100644 --- 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 = ({ : "hide Room Info"} - {currentRoom?.isOwner === false && ( -
-
  • { - 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 && ( */} +
    +
  • { + 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); } - ); - }} - > - leave The Room -
    • -
    - )} + } + ); + }} + > + leave The Room + + { ); }; +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("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 ( +
    +
    +
    +
    + +
    + +

    + {user?.firstname ?? "user"} +

    +
    + +
    + + {onlineStatus} + +
    +
    +
    + ); +}; + export const FriendsListModal = () => { const [currentFriends, setUsers] = useState([]); + const [onlineStatus, setOnlineStatus] = useState("offline"); const LayoutState = useModalStore((state) => state); const [IsLoading, setIsLoading] = useState(false); @@ -611,7 +673,7 @@ export const FriendsListModal = () => { )} {currentFriends.map((user) => ( - + ))} )} diff --git a/frontend/code/src/Components/Chat/index.tsx b/frontend/code/src/Components/Chat/index.tsx index 1127f0f..6c26115 100644 --- 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 = ({ const [currentUsers, setUsers] = useState([]); 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 = ({
    - { + { + navigate(`/profile/${user.id}`); + } + }} + > + + + {/* Avatar Tailwind CSS Component + /> */}
    diff --git a/frontend/code/src/Components/Layout/index.tsx b/frontend/code/src/Components/Layout/index.tsx index af514b4..43c8853 100644 --- 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 = (): JSX.Element => {
    + +
    diff --git a/frontend/code/src/Components/Profile/index.tsx b/frontend/code/src/Components/Profile/index.tsx index 4c66e36..baa8874 100644 --- 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 ( <> - -
    @@ -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}