From 85cfe9bd7daec8dcecd133d8dcd225da7ae28d04 Mon Sep 17 00:00:00 2001 From: Bilaboz Date: Mon, 27 Nov 2023 18:59:10 +0100 Subject: [PATCH] dm: multiple fixes --- front/src/components/chat/Chat.tsx | 16 +++++- front/src/components/chat/ChatInfos.tsx | 12 ++-- front/src/components/chat/DmConversation.tsx | 35 +++++++----- front/src/components/chat/DmCreate.tsx | 9 +-- front/src/components/chat/DmInfos.tsx | 60 ++------------------ front/src/components/chat/DmList.tsx | 37 +++++++++--- 6 files changed, 78 insertions(+), 91 deletions(-) diff --git a/front/src/components/chat/Chat.tsx b/front/src/components/chat/Chat.tsx index 6bec370..ba64a21 100644 --- a/front/src/components/chat/Chat.tsx +++ b/front/src/components/chat/Chat.tsx @@ -44,7 +44,7 @@ const Chat = () => { const [loading, setLoading] = useState(true); const [joinedChannels, setJoinedChannels] = useState([]); const [currentChannel, setCurrentChannel] = useState(null); - const [showChannels, setShowChannels] = useState(false); + const [showChannels, setShowChannels] = useState(true); let me: userDto | undefined; const { data: user } = useApi().get('get user infos', '/user/me') as UseQueryResult; @@ -72,6 +72,17 @@ const Chat = () => { console.log('youJoined - channel list :', joinedChannels); }); + tmpSocket.on('dm', (data) => { + setCurrentChannel(data.channel); + setJoinedChannels((prev) => { + if (!prev.some((c) => c.name === data.channel.name)) { + return [...prev, data.channel]; + } + return prev; + }); + setShowChannels(false); + }); + tmpSocket.on('exception', (data) => { if (Array.isArray(data.message)) { alert(data.message.join('\n')); @@ -84,6 +95,7 @@ const Chat = () => { return () => { socket?.off('youJoined'); socket?.off('exception'); + socket?.off('dm'); socket?.disconnect(); }; }, []); @@ -204,6 +216,8 @@ const Chat = () => { joinedChannels={joinedChannels.filter((c) => c.isDM === true)} setCurrentChannel={setCurrentChannel} currentChannel={currentChannel} + socket={socket} + setJoinedChannels={setJoinedChannels} /> )} diff --git a/front/src/components/chat/ChatInfos.tsx b/front/src/components/chat/ChatInfos.tsx index 92d29ee..6171cd8 100644 --- a/front/src/components/chat/ChatInfos.tsx +++ b/front/src/components/chat/ChatInfos.tsx @@ -40,6 +40,7 @@ const ChatInfos = ({ const [users, setUsers] = useState([]); const [isAdmin, setIsAdmin] = useState(false); const [showMuteModal, setShowMuteModal] = useState(false); + const [muteUserState, setMuteUser] = useState(); const muteDurationRef = useRef(null); const muteReasonRef = useRef(null); @@ -95,12 +96,12 @@ const ChatInfos = ({ setBlockedUsers(blockedUsers.filter((u) => u.id !== user.id)); }; - const muteUser = (e: React.FormEvent, user: UserType) => { + const muteUser = (e: React.FormEvent) => { e.preventDefault(); const muteData = { channel: channelName, - login: user.login, + login: muteUserState?.login, reason: muteReasonRef.current?.value, duration: Number(muteDurationRef.current?.value), }; @@ -188,7 +189,10 @@ const ChatInfos = ({ className="rounded-full p-1 enabled:hover:bg-red disabled:cursor-not-allowed" title={isAdmin ? 'Mute user' : "Can't mute user because you are not admin"} disabled={!isAdmin} - onClick={() => setShowMuteModal(true)} + onClick={() => { + setShowMuteModal(true); + setMuteUser(user); + }} > mute @@ -214,7 +218,7 @@ const ChatInfos = ({

Mute user

-
muteUser(e, user)}> + muteUser(e)}> const bottomEl = useRef(null); useEffect(() => { - socket.on('message', (data: MessageType) => { + socket.on('dm', (data: MessageType) => { setMessages((messages) => [...messages, data]); }); @@ -54,10 +55,6 @@ const DmConversation = ({ channel, socket, me, allUsers }: ConversationProps) => }, ); - socket.on('mute', (data) => { - alert(`Channel ${channel.name}, ${data.reason}`); - }); - return () => { socket.off('message'); }; @@ -67,25 +64,37 @@ const DmConversation = ({ channel, socket, me, allUsers }: ConversationProps) => bottomEl?.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages]); - const sendMessage = (e: React.FormEvent) => { + const sendMessage = (e: React.FormEvent, channelName: string) => { e.preventDefault(); if (!message) return; - socket.emit('message', { channel: channel.name, content: message }); + const names = channelName.substring(1).split('_'); + const otherLogin = names[0] === me?.login ? names[1] : names[0]; + socket.emit('dm', { login: otherLogin, content: message }); setMessage(''); }; function findUserInfos(chatName: string) { if (!chatName) return ''; - chatName = chatName.substring(1); - const names = chatName.split('_'); + + const { data: users } = useApi().get('get all users', 'user/all') as UseQueryResult; + allUsers = users; + + const names = chatName.substring(1).split('_'); if (names[0] === me?.login) { const user = allUsers?.filter((user) => user.login === names[1]); - if (user) return user[0].displayName ? user[0].displayName : user[0]?.login; + if (user?.length) { + return user[0].displayName ? user[0].displayName : user[0]?.login; + } else { + return names[1]; + } } else { const user = allUsers?.filter((user) => user.login === names[0]); - if (user) return user[0].displayName ? user[0].displayName : user[0]?.login; + if (user?.length) { + return user[0].displayName ? user[0].displayName : user[0]?.login; + } else { + return names[0]; + } } - return ''; } return ( @@ -131,7 +140,7 @@ const DmConversation = ({ channel, socket, me, allUsers }: ConversationProps) =>
sendMessage(e)} + onSubmit={(e) => sendMessage(e, channel.name)} > (null); const [selectedLogin, setSelectedLogin] = useState(''); - useEffect(() => { - socket.on('dm', (data) => { - setCurrentChannel(data.channel); - }); - }, []); - const useSetLogin = (displayName: string): void => { const selectedUser = users?.find((user) => user.displayName == displayName); setSelectedLogin(selectedUser?.login || ''); diff --git a/front/src/components/chat/DmInfos.tsx b/front/src/components/chat/DmInfos.tsx index 26fadec..6276244 100644 --- a/front/src/components/chat/DmInfos.tsx +++ b/front/src/components/chat/DmInfos.tsx @@ -1,10 +1,9 @@ -import React, { useEffect, useRef, useState } from 'react'; +import { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; import { Socket } from 'socket.io-client'; import game_icon from '@/assets/chat/boxing-glove.svg'; -import ChatModal from './ChatModal'; import { UserType } from './DmConversation'; interface DmInfosProps { @@ -22,36 +21,19 @@ interface UserListResponse { // TODO: leaver button ?? const DmInfos = ({ setShowModal, socket, channelName, currentUserLogin }: DmInfosProps) => { const [users, setUsers] = useState([]); - const [isAdmin, setIsAdmin] = useState(false); - const [showMuteModal, setShowMuteModal] = useState(false); - const muteDurationRef = useRef(null); - const muteReasonRef = useRef(null); useEffect(() => { socket.emit('userList', { channel: channelName }, (res: UserListResponse) => { setUsers(res.users.filter((user) => user.login !== currentUserLogin)); - const user = res.users.find((user) => user.login === currentUserLogin) || null; - if (user && (user.role === 'ADMIN' || user.role === 'OWNER')) setIsAdmin(true); }); }, []); - const muteUser = (e: React.FormEvent, user: UserType) => { - e.preventDefault(); - - const muteData = { - channel: channelName, - login: user.login, - reason: muteReasonRef.current?.value, - duration: Number(muteDurationRef.current?.value), - }; - - socket.emit('mute', muteData); - }; - const startGame = () => { const code = (Math.random() + 1).toString(36).substring(7); const message = `Come join me in a Pong game! ${window.location.origin}/game?code=${code}`; - socket.emit('message', { channel: channelName, content: message }); + const names = channelName.substring(1).split('_'); + const otherLogin = names[0] === currentUserLogin ? names[1] : names[0]; + socket.emit('dm', { login: otherLogin, content: message }); }; // Contains the list of members in the channel, whith a possibility to kick them, to promote them as admin, and to start a game with them @@ -84,40 +66,6 @@ const DmInfos = ({ setShowModal, socket, channelName, currentUserLogin }: DmInfo > close - {showMuteModal && ( - -
-
-

Mute user

- muteUser(e, user)}> - - -
- - -
- -
-
-
-
- )}
); diff --git a/front/src/components/chat/DmList.tsx b/front/src/components/chat/DmList.tsx index 4fee3d5..a2b72c2 100644 --- a/front/src/components/chat/DmList.tsx +++ b/front/src/components/chat/DmList.tsx @@ -1,6 +1,11 @@ // import logo from '@/assets/logo.svg'; +import { Dispatch, SetStateAction, useEffect } from 'react'; +import { UseQueryResult } from 'react-query'; +import { Socket } from 'socket.io-client'; + import { userDto } from '@/dto/userDto'; +import { useApi } from '@/hooks/useApi'; import { ChannelType } from './Chat'; @@ -24,18 +29,28 @@ const DmListElem = ({ }; let user; - const findUserInfos = (chatName: string) => { - chatName = chatName.substring(1); - const names = chatName.split('_'); + function findUserInfos(chatName: string) { + if (!chatName) return ''; + + const { data: users } = useApi().get('get all users', 'user/all') as UseQueryResult; + + const names = chatName.substring(1).split('_'); if (names[0] === me?.login) { - user = allUsers?.filter((user) => user.login === names[1]); - if (user) return user[0].displayName ? user[0].displayName : user[0]?.login; + const user = users?.filter((user) => user.login === names[1]); + if (user?.length) { + return user[0].displayName ? user[0].displayName : user[0]?.login; + } else { + return names[1]; + } } else { - user = allUsers?.filter((user) => user.login === names[0]); - if (user) return user[0].displayName ? user[0].displayName : user[0]?.login; + const user = users?.filter((user) => user.login === names[0]); + if (user?.length) { + return user[0].displayName ? user[0].displayName : user[0]?.login; + } else { + return names[0]; + } } - return ''; - }; + } return (