diff --git a/backend/code/src/game/game.service.ts b/backend/code/src/game/game.service.ts index 5c9c1d4..9b50781 100644 --- a/backend/code/src/game/game.service.ts +++ b/backend/code/src/game/game.service.ts @@ -57,6 +57,7 @@ export class GameService { //NOTE: add game modes here private launchGame() { setInterval(() => { + // console.log('waitingPlayers', this.classicwaitingPlayers.length); console.log('waitingPlayers classic', this.classicwaitingPlayers.length); console.log('waitingPlayers extra', this.extraWaitingPlayers.length); diff --git a/backend/code/src/gateways/gateways.gateway.ts b/backend/code/src/gateways/gateways.gateway.ts index 43db25d..74d92af 100644 --- a/backend/code/src/gateways/gateways.gateway.ts +++ b/backend/code/src/gateways/gateways.gateway.ts @@ -443,9 +443,9 @@ export class Gateways implements OnGatewayConnection, OnGatewayDisconnect { const friendId = data.friendId; if (this.server.sockets.adapter.rooms.get(`User:${friendId}`)?.size) { client.emit('friendOnline', friendId); - return true; + } else { + client.emit('friendOffline', friendId); } - return false; } @SubscribeMessage('unban') diff --git a/backend/code/src/rooms/rooms.service.ts b/backend/code/src/rooms/rooms.service.ts index beeb64a..9b68ff1 100644 --- a/backend/code/src/rooms/rooms.service.ts +++ b/backend/code/src/rooms/rooms.service.ts @@ -39,6 +39,20 @@ 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, + }, + }); + if (!user) { + throw new HttpException('user not found', HttpStatus.NOT_FOUND); + } const friendshipId = [roomOwnerId, secondMember].sort().join('-'); const blocked = await this.prisma.blockedUsers.findUnique({ where: { diff --git a/backend/code/src/users/users.controller.ts b/backend/code/src/users/users.controller.ts index 4c7bde5..f62ada3 100644 --- a/backend/code/src/users/users.controller.ts +++ b/backend/code/src/users/users.controller.ts @@ -23,8 +23,11 @@ export class UsersController { @Get('search') @HttpCode(HttpStatus.OK) @UseGuards(AtGuard) - async getUsers(@Query() query: usersSearchDto) { - return this.usersService.getUsers(query.q); + async getUsers( + @Query() query: usersSearchDto, + @GetCurrentUser('userId') userId: string, + ) { + return this.usersService.getUsers(query.q, userId); } @Post('enableTwoFactorAuth') diff --git a/backend/code/src/users/users.service.ts b/backend/code/src/users/users.service.ts index 43f1f50..9b389db 100644 --- a/backend/code/src/users/users.service.ts +++ b/backend/code/src/users/users.service.ts @@ -89,7 +89,7 @@ export class UsersService { }); } - async getUsers(name: string) { + async getUsers(name: string, currentUserId: string) { const users = await this.prisma.user.findMany({ take: 5, where: { @@ -114,32 +114,22 @@ export class UsersService { }, ], NOT: { - blocked_by: { - some: { - Blcoked_by: { - OR: [ - { - firstName: { - contains: name, - mode: 'insensitive', - }, - }, - { - lastName: { - contains: name, - mode: 'insensitive', - }, - }, - { - Username: { - contains: name, - mode: 'insensitive', - }, - }, - ], + OR: [ + { + blocked_by: { + some: { + blocked_id: currentUserId, + }, }, }, - }, + { + blocked: { + some: { + blocked_by_id: currentUserId, + }, + }, + }, + ], }, }, }); diff --git a/frontend/code/src/Components/Chat/Components/Conversation.tsx b/frontend/code/src/Components/Chat/Components/Conversation.tsx index 4ff18ec..ea1457f 100644 --- a/frontend/code/src/Components/Chat/Components/Conversation.tsx +++ b/frontend/code/src/Components/Chat/Components/Conversation.tsx @@ -24,6 +24,8 @@ import { useUserStore } from "../../../Stores/stores"; import { formatTime } from "./tools/utils"; import { useSocketStore } from "../Services/SocketsServices"; import { useNavigate } from "react-router-dom"; +import { blockUserCall } from "../Services/FriendsServices"; +import { InvitationWaiting } from "../../Layout/Assets/Invitationacceptance"; export interface ChatPaceHolderProps { username: string; @@ -99,6 +101,8 @@ export const ConversationHeader: React.FC = ({ const currentUser = useChatStore((state) => state.currentDmUser); const selectedChatType = useChatStore((state) => state.selectedChatType); const socketStore = useSocketStore(); + const inviteWaitingModalRef = useRef(null); + const user = useUserStore(); const currentRoom = chatRooms.find((room) => room.id === SelectedChat); @@ -195,13 +199,44 @@ export const ConversationHeader: React.FC = ({ tabIndex={0} className="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52 absolute right-full " > -
  • +
  • { + ChatState.setIsLoading(true); + await blockUserCall(currentUser?.secondUserId).then((res) => { + ChatState.setIsLoading(false); + if (res?.status === 200 || res?.status === 201) { + toast.success("User Blocked"); + // ChatState.selectNewChatID("1"); + } else { + toast.error("Could Not Block User"); + } + }); + }} + > Block
    • -
  • - - invite for a Pong Game - +
  • { + socketStore?.socket?.emit( + "inviteToGame", + { + inviterId: user.id, + opponentId: currentUser.secondUserId, + gameMode: "classic", + }, + (data: { error: string | null; gameId: string }) => { + if (data.error) { + toast.error(data.error); + return; + } + user.setGameWaitingId(data.gameId); + inviteWaitingModalRef.current?.showModal(); + } + ); + }} + > + Invite to a game
  • { @@ -276,26 +311,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.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 + + = ({ )} + ); }; @@ -386,6 +433,7 @@ export const Conversation: React.FC = ({ socketStore.socket.on("message", handleMessage); const fetch = async () => { + // const offset = chatState.currentMessages.length; setLoading(true); chatState.selectedChatID !== "1" && getRoomMessagesCall(chatState.selectedChatID, 0, 20) @@ -415,7 +463,7 @@ export const Conversation: React.FC = ({ }); } ); - chatState.fillCurrentMessages(messages.reverse()); + chatState.fillCurrentMessages(messages); } }) .finally(() => { @@ -438,8 +486,8 @@ export const Conversation: React.FC = ({ const sendMessage = async () => { if (inputValue.length === 0) return; + setInputValue(""); await sendMessageCall(chatState.selectedChatID, inputValue).then((res) => { - setInputValue(""); if (res?.status !== 200 && res?.status !== 201) { setFail(true); chatState.selectedChatType === ChatType.Room diff --git a/frontend/code/src/Components/Chat/Components/RecentChat.tsx b/frontend/code/src/Components/Chat/Components/RecentChat.tsx index 980f0b1..178edc7 100644 --- a/frontend/code/src/Components/Chat/Components/RecentChat.tsx +++ b/frontend/code/src/Components/Chat/Components/RecentChat.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import { ChatType, useChatStore } from "../Controllers/RoomChatControllers"; import { ChatPaceHolderProps } from "./Conversation"; import { @@ -33,65 +33,71 @@ export const RecentConversations = () => { const [ref, inView] = useInView(); const [EndOfFetching, setEndOfFetching] = useState(false); - useEffect(() => { - const fetch = async () => { - const offset = ChatRoomsState.recentDms.length; - offset === 0 && setLoading(true); - await fetchDmsCall(offset, 7).then((res) => { - setLoading(false); - if (res?.status !== 200 && res?.status !== 201) { - } else { - const rooms: DmRoom[] = []; - res.data.forEach( - (room: { - secondMemberId: string; - id: string; - last_message?: { - content?: string; - createdAt?: string; - }; - name: string; - avatar: { - thumbnail: string; - medium: string; - large: string; - }; - bio: string; - }) => { - rooms.push({ - secondUserId: room.secondMemberId, - id: room.id, - name: room.name, - avatar: room.avatar, - last_message: { - content: room.last_message?.content, - createdAt: room.last_message?.createdAt, - }, - bio: room.bio, - }); - } - ); + const fetchRecentDms = useCallback(async () => { + const offset = ChatRoomsState.recentDms.length; + offset === 0 && setLoading(true); + await fetchDmsCall(offset, 7).then((res) => { + setLoading(false); + if (res?.status !== 200 && res?.status !== 201) { + } else { + const rooms: DmRoom[] = []; + res.data.forEach( + (room: { + secondMemberId: string; + id: string; + last_message?: { + content?: string; + createdAt?: string; + }; + name: string; - if (res.data.length > 0) { - ChatRoomsState.fillRecentDms([ - ...ChatRoomsState.recentDms, - ...rooms, - ]); - } else { - setEndOfFetching(true); + avatar: { + thumbnail: string; + medium: string; + large: string; + }; + bio: string; + }) => { + // to check if not exist + rooms.push({ + secondUserId: room.secondMemberId, + id: room.id, + name: room.name, + avatar: room.avatar, + last_message: { + content: room.last_message?.content, + createdAt: room.last_message?.createdAt, + }, + bio: room.bio, + }); } + ); + + if (res.data.length > 0) { + ChatRoomsState.fillRecentDms([...ChatRoomsState.recentDms, ...rooms]); + } else { + setEndOfFetching(true); } - }); - }; - if (!EndOfFetching) { - fetch(); - } + } + }); + // eslint-disable-next-line + }, [ChatRoomsState.recentDms]); + + useEffect(() => { + fetchRecentDms(); return () => { setEndOfFetching(false); }; // eslint-disable-next-line - }, [ChatRoomsState.selectedChatID, ChatRoomsState.selectedChatType, inView]); + }, []); + + useEffect(() => { + if (inView && !EndOfFetching) { + fetchRecentDms(); + } + // eslint-disable-next-line + }, [inView]); return selectedChatType === ChatType.Chat ? (
    diff --git a/frontend/code/src/Components/Chat/Components/RoomChatHelpers.tsx b/frontend/code/src/Components/Chat/Components/RoomChatHelpers.tsx index 75fb829..bffdfda 100644 --- a/frontend/code/src/Components/Chat/Components/RoomChatHelpers.tsx +++ b/frontend/code/src/Components/Chat/Components/RoomChatHelpers.tsx @@ -1,4 +1,4 @@ -import { SetStateAction, useEffect, useState } from "react"; +import { SetStateAction, useCallback, useEffect, useState } from "react"; import { ChatType, useChatStore } from "../Controllers/RoomChatControllers"; import { ChatGif, @@ -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; @@ -45,61 +46,76 @@ export const RoomChatPlaceHolder = () => { const [ref, inView] = useInView(); const [EndOfFetching, setEndOfFetching] = useState(false); - useEffect(() => { - const fetch = async () => { - const offset = ChatRoomsState.recentRooms.length; - offset === 0 && setIsLoading(true); - - await fetchRoomsCall(offset, 7, true).then((res) => { - if (res?.status !== 200 && res?.status !== 201) { - } else { - const rooms: ChatRoom[] = []; - res.data.forEach( - (room: { - countMembers: number; - id: string; - is_admin: boolean; - is_owner: boolean; - last_message: { - content: string; - createdAt: string; - }; - name: string; - type: string; - }) => { - rooms.push({ - id: room.id, - name: room.name, - type: RoomType[room.type as keyof typeof RoomType], - messages: [], - usersId: [], - isOwner: room.is_owner, - isAdmin: room.is_admin, - membersCount: room.countMembers, - last_message: room.last_message, - }); - } - ); - setIsLoading(false); - if (res.data.length > 0) { - ChatRoomsState.fillRecentRooms([ - ...ChatRoomsState.recentRooms, - ...rooms, - ]); - } else { - setEndOfFetching(true); + const fetchRooms = useCallback(async () => { + const offset = ChatRoomsState.recentRooms.length; + offset === 0 && setIsLoading(true); + + await fetchRoomsCall(offset, 7, true).then((res) => { + if (res?.status !== 200 && res?.status !== 201) { + } else { + const rooms: ChatRoom[] = []; + res.data.forEach( + (room: { + countMembers: number; + id: string; + is_admin: boolean; + is_owner: boolean; + last_message: { + content: string; + createdAt: string; + }; + name: string; + type: string; + }) => { + rooms.push({ + id: room.id, + name: room.name, + type: RoomType[room.type as keyof typeof RoomType], + messages: [], + usersId: [], + isOwner: room.is_owner, + isAdmin: room.is_admin, + membersCount: room.countMembers, + last_message: room.last_message, + }); } + ); + setIsLoading(false); + if (res.data.length > 0) { + ChatRoomsState.fillRecentRooms([ + ...ChatRoomsState.recentRooms, + ...rooms, + ]); + } else { + setEndOfFetching(true); } - }); - }; - if (!EndOfFetching) { - fetch(); - } + } + }); + // eslint-disable-next-line + }, [ + ChatRoomsState.recentRooms, + setIsLoading, + fetchRoomsCall, + ChatRoomsState.fillRecentRooms, + setEndOfFetching, + ]); + + useEffect(() => { + fetchRooms(); return () => { setEndOfFetching(false); + ChatRoomsState.fillRecentRooms([]); }; // eslint-disable-next-line - }, [ChatRoomsState.selectedChatID, ChatRoomsState.selectedChatType, inView]); + }, [ChatRoomsState.selectedChatType, ChatRoomsState.recentRoomsOnchange]); + + useEffect(() => { + if (inView && !EndOfFetching) { + fetchRooms(); + } + + // eslint-disable-next-line + }, [inView]); return ChatRoomsState.recentRooms.length > 0 ? (
    @@ -140,9 +156,9 @@ export const RoomChatPlaceHolder = () => {

    {room.last_message !== null && (
    -
    )}
    @@ -185,11 +201,9 @@ export const CreateNewRoomModal = () => { setName(event.target.value); }; - const createNewRoom = useChatStore((state) => state.createNewRoom); - const [selectedOption, setSelectedOption] = useState(RoomType.public); - const setIsLoading = useChatStore((state) => state.setIsLoading); + const chatState = useChatStore((state) => state); const resetModalState = () => { setPassword(""); @@ -306,7 +320,14 @@ export const CreateNewRoomModal = () => { toast.error("something went wrong, try again"); resetModalState(); } else { - createNewRoom(RoomName, selectedOption, res.data.id); + toast.success("Room Created Successfully"); + // createNewRoom(RoomName, selectedOption, res.data.id); + + chatState.changeChatType(ChatType.Room); + chatState.setOnRoomsChange( + !chatState.recentRoomsOnchange + ); + // chatState.fillRecentRooms([ resetModalState(); } setIsLoading(false); @@ -519,6 +540,155 @@ export const BlockedUsersModal = () => { ); }; +export const FriendStatusTile = (props: { user: RoomMember }) => { + 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 LayoutState = useModalStore((state) => state); + const [IsLoading, setIsLoading] = useState(false); + + const [skipCount, setSkipCount] = useState(true); + + useEffect(() => { + if (skipCount) setSkipCount(false); + if (!skipCount) { + const fetchData = async () => { + try { + setIsLoading(true); + + await getFriendsCall(0, 0).then((res) => { + setIsLoading(false); + if (res?.status === 200 || res?.status === 201) { + const friends: RoomMember[] = []; + res.data.forEach( + (friend: { + userId: string; + firstname: string; + lastname: string; + avatar: { + thumbnail: string; + medium: string; + large: string; + }; + }) => { + friends.push({ + id: friend.userId, + firstname: friend.firstname, + lastname: friend.lastname, + // to inject it with the real images later + avatar: friend.avatar, + } as RoomMember); + } + ); + + setUsers(friends); + } else { + } + }); + } catch (error) { + console.error("Error fetching data: ", error); + } + }; + + fetchData(); + } + // eslint-disable-next-line + }, [LayoutState.showFriendsListModal]); + return ( +
    +
    +
    +
    +

    + list of Friends +

    +
    + + {IsLoading === true ? ( +
    + +
    + ) : ( +
    + {currentFriends.length < 1 && ( + + )} + {currentFriends.map((user) => ( + + ))} +
    + )} + + +
    +
    +
    + ); +}; + export const AddUsersModal = () => { const [currentFriends, setUsers] = useState([]); const [currentRoomMembers, setRoomMembers] = useState([]); @@ -679,11 +849,12 @@ export const RoomSettingsModal = () => { setLOading(true); await getRoomMembersCall(currentRoom?.id as string, 0, 20).then( (res) => { + console.log("hna"); setLOading(false); if (res?.status === 200 || res?.status === 201) { const extractedData = res.data; + setUsers(extractedData); - } else { } } ); @@ -691,8 +862,9 @@ export const RoomSettingsModal = () => { console.error("Error fetching data: ", error); } }; - - fetchData(); + if (chatState.selectedChatID !== "1") { + fetchData(); + } } // eslint-disable-next-line }, [LayoutState.showSettingsModal]); @@ -702,6 +874,7 @@ export const RoomSettingsModal = () => { setPassword(""); setSelectedOption(currentRoom?.type as RoomType); setName((currentRoom?.name || "") as string); + setUsers([]); }; return ( @@ -1101,7 +1274,9 @@ export const ExploreRoomsModal = () => { } }; - fetch(); + if (!EndOfFetching) { + fetch(); + } // eslint-disable-next-line }, [modalState, inView]); @@ -1214,8 +1389,11 @@ export const ExploreRoomsModal = () => { resetModalState(); } else { toast.success("Room Joined Successfully"); + recentRooms.selectNewChatID("1"); + // recentRooms.setOnRoomsChange( + // !recentRooms.recentRoomsOnchange + // ); recentRooms.changeChatType(ChatType.Room); - recentRooms.selectNewChatID(SelectedRoomID); resetModalState(); } diff --git a/frontend/code/src/Components/Chat/Controllers/LayoutControllers.tsx b/frontend/code/src/Components/Chat/Controllers/LayoutControllers.tsx index 528d3f4..ba6f065 100644 --- a/frontend/code/src/Components/Chat/Controllers/LayoutControllers.tsx +++ b/frontend/code/src/Components/Chat/Controllers/LayoutControllers.tsx @@ -5,13 +5,15 @@ export interface ModalState { showPreviewCard: boolean; showAddUsersModal: boolean; showSettingsModal: boolean; - showBlockedLIstModal : boolean; + showBlockedLIstModal: boolean; + showFriendsListModal: boolean; setShowExploreModal: (showExploreModal: boolean) => void; + setShowFriendsModal: (showFriendsModal: boolean) => void; setShowPreviewCard: (showPreviewCard: boolean) => void; setShowAddUsersModal: (showAddUsersModal: boolean) => void; setShowSettingsModal: (showSettingsModal: boolean) => void; - setShowBlockedList : (showBlockedLIstModal : boolean) => void; + setShowBlockedList: (showBlockedLIstModal: boolean) => void; } export const useModalStore = create((set) => ({ @@ -19,13 +21,19 @@ export const useModalStore = create((set) => ({ showPreviewCard: false, showAddUsersModal: false, showSettingsModal: false, - showBlockedLIstModal : false, - - setShowBlockedList : (showBlockedLIstModal : boolean) => set((state) => { - state.showBlockedLIstModal = showBlockedLIstModal; - return { ...state }; - }), + showBlockedLIstModal: false, + showFriendsListModal: false, + setShowFriendsModal: (showFriendsModal: boolean) => + set((state) => { + state.showFriendsListModal = showFriendsModal; + return { ...state }; + }), + setShowBlockedList: (showBlockedLIstModal: boolean) => + set((state) => { + state.showBlockedLIstModal = showBlockedLIstModal; + return { ...state }; + }), setShowSettingsModal: (showSettingsModal: boolean) => set((state) => { diff --git a/frontend/code/src/Components/Chat/Controllers/RoomChatControllers.tsx b/frontend/code/src/Components/Chat/Controllers/RoomChatControllers.tsx index 53e4a73..556391b 100644 --- a/frontend/code/src/Components/Chat/Controllers/RoomChatControllers.tsx +++ b/frontend/code/src/Components/Chat/Controllers/RoomChatControllers.tsx @@ -22,12 +22,14 @@ export interface ChatState { recentRooms: ChatRoom[]; recentDms: DmRoom[]; onlineFriendsIds: string[]; + recentRoomsOnchange: boolean; showChatRooms: boolean; fillOnlineFriendsIds: (ids: string[]) => void; addOnlineFriend: (id: string) => void; removeOnlineFriend: (id: string) => void; + setOnRoomsChange: (value: boolean) => void; setCurrentDmUser: (user: DmRoom) => void; setMessageAsFailed: (id: string) => void; @@ -64,8 +66,11 @@ export const useChatStore = create()((set) => ({ }, }, + recentRoomsOnchange: false, + // to fix this - currentMessages: users.find((user) => user.id === "1")?.messages as Message[], + currentMessages: + (users.find((user) => user.id === "1")?.messages as Message[]) ?? [], currentRoomMessages: chatRooms.find((room) => room.id === "1") ?.messages as Message[], fillOnlineFriendsIds: (ids: string[]) => @@ -74,6 +79,12 @@ export const useChatStore = create()((set) => ({ state.onlineFriendsIds = [...ids.slice(0, 5)]; return { ...state }; }), + setOnRoomsChange: (value: boolean) => + set((state) => { + state.recentRoomsOnchange = value; + return { ...state }; + }), + addOnlineFriend: (id: string) => set((state) => { if ( @@ -137,6 +148,10 @@ export const useChatStore = create()((set) => ({ if (state.recentRooms.length > 0) state.selectedChatID = state.recentRooms[0].id; else state.selectedChatID = "1"; + state.recentRoomsOnchange = !state.recentRoomsOnchange; + // state.selectedChatType = ChatType.Chat; + // state.selectNewChatID(state.recentDms[0].id ?? "1"); + state.selectNewChatID("1"); return { ...state }; }), @@ -166,6 +181,7 @@ export const useChatStore = create()((set) => ({ } state.selectedChatID = id; state.recentRooms = [...chatRooms]; + state.recentRoomsOnchange = !state.recentRoomsOnchange; return { ...state }; }), createNewRoom: (name: string, roomType: RoomType, id: string) => @@ -179,7 +195,7 @@ export const useChatStore = create()((set) => ({ isOwner: true, isAdmin: true, }; - state.selectedChatID = id; + // state.selectedChatID = id; chatRooms.push(newRoom); state.recentRooms = [...chatRooms]; diff --git a/frontend/code/src/Components/Chat/index.tsx b/frontend/code/src/Components/Chat/index.tsx index 3cb396c..551a48d 100644 --- a/frontend/code/src/Components/Chat/index.tsx +++ b/frontend/code/src/Components/Chat/index.tsx @@ -28,6 +28,8 @@ import { getRoomMembersCall } from "./Services/ChatServices"; import { classNames } from "../../Utils/helpers"; import { useModalStore } from "./Controllers/LayoutControllers"; +import { useNavigate } from "react-router-dom"; + export interface ConversationProps { onRemoveUserPreview: () => void; } @@ -39,7 +41,6 @@ export const Chat = () => { const showChatRooms = useChatStore((state) => state.showChatRooms); const toggleChatRooms = useChatStore((state) => state.toggleChatRooms); - const chatRooms = useChatStore((state) => state.recentRooms); const handleRemoveUserPreview = () => { setShowUserPreview(!showUserPreview); }; @@ -72,7 +73,7 @@ export const Chat = () => { /> )}
    - {chatRooms.length < 1 && ChatState.selectedChatID === "1" ? ( + {ChatState.selectedChatID === "1" ? ( ) : ( @@ -101,6 +102,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); @@ -114,11 +116,12 @@ export const UserPreviewCard: React.FC = ({ onRemoveUserPreview(); } else { setIsLoading(true); - await getRoomMembersCall(SelectedChat as string, 0, 10).then( + await getRoomMembersCall(SelectedChat as string, 0, 20).then( (res) => { if (res?.status === 200 || res?.status === 201) { const extractedData = res.data; setIsLoading(false); + setUsers(extractedData); } } @@ -196,7 +199,7 @@ export const UserPreviewCard: React.FC = ({ {}

    {currentRoom?.name}'s Members

    -
    +
    {isLoading === false ? ( <> {currentUsers.map((user) => ( @@ -204,10 +207,21 @@ 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 7bc2b00..7acf201 100644 --- a/frontend/code/src/Components/Layout/index.tsx +++ b/frontend/code/src/Components/Layout/index.tsx @@ -15,8 +15,13 @@ 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 { InvitationGame } from "./Assets/Invitationmodale"; const routes = [ @@ -181,6 +186,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 93ea200..2d212b5 100644 --- a/frontend/code/src/Components/Profile/index.tsx +++ b/frontend/code/src/Components/Profile/index.tsx @@ -26,7 +26,7 @@ import { } from "../Chat/Controllers/RoomChatControllers"; import { More } from "../Chat/Components/tools/Assets"; import { useModalStore } from "../Chat/Controllers/LayoutControllers"; -import { BlockedUsersModal } from "../Chat/Components/RoomChatHelpers"; + import { blockUserCall } from "../Chat/Services/FriendsServices"; import { AxiosError } from "axios"; import { InvitationWaiting } from "../Layout/Assets/Invitationacceptance"; @@ -91,7 +91,7 @@ export const Profile = () => { } else { setOnlineStatus("offline"); } - }, + } ); }, [params.id, socketStore?.socket, user.id]); @@ -152,7 +152,6 @@ export const Profile = () => { return ( <> -
    @@ -198,7 +197,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} @@ -213,24 +212,36 @@ export const Profile = () => {
    {/* for debug */} - {/* */} + {params.id !== "me" && params.id !== user.id && status === "none" && ( @@ -322,7 +333,7 @@ export const Profile = () => { "", "dm", undefined, - params.id, + params.id ).then((res) => { ChatState.setIsLoading(false); if (res?.status === 200 || res?.status === 201) { @@ -338,7 +349,7 @@ export const Profile = () => { navigate(`/Dm/${res?.data.id}`); } else { toast.error( - "You Can't Send Message To this User For Now, try Again later", + "You Can't Send Message To this User For Now, try Again later" ); } }); @@ -377,7 +388,7 @@ export const Profile = () => { } user.setGameWaitingId(data.gameId); inviteWaitingModalRef.current?.showModal(); - }, + } ); }} > @@ -403,7 +414,7 @@ export const Profile = () => { } user.setGameWaitingId(data.gameId); inviteWaitingModalRef.current?.showModal(); - }, + } ); }} > @@ -464,10 +475,23 @@ export const Profile = () => { tabIndex={0} className="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52 absolute bottom-16 " > +
  • { + LayoutState.setShowFriendsModal( + !LayoutState.showFriendsListModal + ); + }} + > + + +
    See Friends List
    +     +     +
  • { LayoutState.setShowBlockedList( - !LayoutState.showBlockedLIstModal, + !LayoutState.showBlockedLIstModal ); }} > diff --git a/frontend/code/src/index.tsx b/frontend/code/src/index.tsx index 84d8973..e86aa1f 100644 --- a/frontend/code/src/index.tsx +++ b/frontend/code/src/index.tsx @@ -1,37 +1,32 @@ +import "./index.css"; +import ReactDOM from "react-dom/client"; +import reportWebVitals from "./reportWebVitals"; +import { Toaster } from "react-hot-toast"; +import { AllRouters } from "./Routes"; - - -import './index.css'; -import ReactDOM from 'react-dom/client'; -import reportWebVitals from './reportWebVitals'; -import { Toaster } from 'react-hot-toast'; -import { AllRouters } from './Routes'; - -console.log = () => {} -console.error = () => {} +// console.log = () => {} +// console.error = () => {} const root = ReactDOM.createRoot( - document.getElementById('root') as HTMLElement - ); + document.getElementById("root") as HTMLElement +); root.render( - <> - + - - - + + ); - reportWebVitals();