From 17d82333813257d1305a7798b5feb0eccebd77ca Mon Sep 17 00:00:00 2001 From: oobjectt Date: Thu, 8 Dec 2022 19:01:58 +0100 Subject: [PATCH 1/2] Fix issue #11 - Report user chat history like Unity --- .../chat-history/ChatHistoryView.scss | 4 +++ .../chat-history/ChatHistoryView.tsx | 26 ++++++++++++++----- src/hooks/chat-history/useChatHistory.ts | 4 +-- 3 files changed, 25 insertions(+), 9 deletions(-) diff --git a/src/components/chat-history/ChatHistoryView.scss b/src/components/chat-history/ChatHistoryView.scss index f18f91b5d..73acbc5f5 100644 --- a/src/components/chat-history/ChatHistoryView.scss +++ b/src/components/chat-history/ChatHistoryView.scss @@ -2,3 +2,7 @@ width: $chat-history-width; height: $chat-history-height; } + +.cursor-pointer { + cursor: pointer; +} diff --git a/src/components/chat-history/ChatHistoryView.tsx b/src/components/chat-history/ChatHistoryView.tsx index 64892aabb..d3327665b 100644 --- a/src/components/chat-history/ChatHistoryView.tsx +++ b/src/components/chat-history/ChatHistoryView.tsx @@ -1,16 +1,18 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { ILinkEventTracker } from '@nitrots/nitro-renderer'; import { FC, useEffect, useMemo, useState } from 'react'; -import { AddEventLinkTracker, ChatEntryType, LocalizeText, RemoveLinkEventTracker } from '../../api'; +import { AddEventLinkTracker, ChatEntryType, GetSessionDataManager, GetUserProfile, LocalizeText, RemoveLinkEventTracker, ReportType } from '../../api'; import { Flex, InfiniteScroll, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common'; -import { useChatHistory } from '../../hooks'; +import { useChatHistory, useHelp } from '../../hooks'; export const ChatHistoryView: FC<{}> = props => { const [ isVisible, setIsVisible ] = useState(false); const [ searchText, setSearchText ] = useState(''); - const { chatHistory = [] } = useChatHistory(); + const { chatHistory = [], setMessengerHistory, addMessengerEntry } = useChatHistory(); + const { report = null } = useHelp(); - const filteredChatHistory = useMemo(() => + const filteredChatHistory = useMemo(() => { if (searchText.length === 0) return chatHistory; @@ -19,6 +21,13 @@ export const ChatHistoryView: FC<{}> = props => return chatHistory.filter(entry => ((entry.message && entry.message.toLowerCase().includes(text))) || (entry.name && entry.name.toLowerCase().includes(text))); }, [ chatHistory, searchText ]); + const reportMessage = (message: any) => + { + setMessengerHistory([]); // We do this because we are interested in displaying only the reported message. + report(ReportType.IM, { reportedUserId: message.webId }); + addMessengerEntry({ id: message.id, webId: message.webId, entityId: message.entityId, name: message.name, timestamp: message.timestamp, type: ChatEntryType.TYPE_IM, roomId: message.roomId, message: message.message }); + } + /* useEffect(() => { if(elementRef && elementRef.current && isVisible) elementRef.current.scrollTop = elementRef.current.scrollHeight; @@ -30,9 +39,9 @@ export const ChatHistoryView: FC<{}> = props => linkReceived: (url: string) => { const parts = url.split('/'); - + if(parts.length < 2) return; - + switch(parts[1]) { case 'show': @@ -66,12 +75,15 @@ export const ChatHistoryView: FC<{}> = props => return ( { row.timestamp } + { (row.type === ChatEntryType.TYPE_CHAT && GetSessionDataManager().userId !== row.webId ) && + reportMessage(row) } /> + } { (row.type === ChatEntryType.TYPE_CHAT) &&
{ (row.style === 0) &&
}
-
+
GetUserProfile(row.webId) }> { row.imageUrl && (row.imageUrl.length > 0) &&
}
diff --git a/src/hooks/chat-history/useChatHistory.ts b/src/hooks/chat-history/useChatHistory.ts index a2f3c3464..d45c669f2 100644 --- a/src/hooks/chat-history/useChatHistory.ts +++ b/src/hooks/chat-history/useChatHistory.ts @@ -97,8 +97,8 @@ const useChatHistoryState = () => addMessengerEntry({ id: -1, webId: parser.senderId, entityId: -1, name: '', message: parser.messageText, roomId: -1, timestamp: MessengerHistoryCurrentDate(), type: ChatEntryType.TYPE_IM }); }); - - return { addChatEntry, chatHistory, roomHistory, messengerHistory }; + + return { addChatEntry, chatHistory, roomHistory, messengerHistory, setMessengerHistory, addMessengerEntry }; } export const useChatHistory = () => useBetween(useChatHistoryState); From 985fe9be152e9d3cb9d6b3f399601b5838310988 Mon Sep 17 00:00:00 2001 From: oobjectt Date: Tue, 13 Dec 2022 21:31:48 +0100 Subject: [PATCH 2/2] Required changes fixed --- src/components/chat-history/ChatHistoryView.tsx | 13 ++++++++++--- src/hooks/chat-history/useChatHistory.ts | 2 +- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/chat-history/ChatHistoryView.tsx b/src/components/chat-history/ChatHistoryView.tsx index d3327665b..21d0632a1 100644 --- a/src/components/chat-history/ChatHistoryView.tsx +++ b/src/components/chat-history/ChatHistoryView.tsx @@ -9,7 +9,7 @@ export const ChatHistoryView: FC<{}> = props => { const [ isVisible, setIsVisible ] = useState(false); const [ searchText, setSearchText ] = useState(''); - const { chatHistory = [], setMessengerHistory, addMessengerEntry } = useChatHistory(); + const { chatHistory = [], setMessengerHistory = null } = useChatHistory(); const { report = null } = useHelp(); const filteredChatHistory = useMemo(() => @@ -23,9 +23,16 @@ export const ChatHistoryView: FC<{}> = props => const reportMessage = (message: any) => { - setMessengerHistory([]); // We do this because we are interested in displaying only the reported message. + setMessengerHistory(prevValue => + { + const newValue = [ ...prevValue ]; + + newValue.push({ id: message.id, webId: message.webId, entityId: message.entityId, name: '', message: message.message, roomId: message.roomId, timestamp: message.timestamp, type: ChatEntryType.TYPE_IM }); + + return newValue; + }); + report(ReportType.IM, { reportedUserId: message.webId }); - addMessengerEntry({ id: message.id, webId: message.webId, entityId: message.entityId, name: message.name, timestamp: message.timestamp, type: ChatEntryType.TYPE_IM, roomId: message.roomId, message: message.message }); } /* useEffect(() => diff --git a/src/hooks/chat-history/useChatHistory.ts b/src/hooks/chat-history/useChatHistory.ts index d45c669f2..ec7df0e18 100644 --- a/src/hooks/chat-history/useChatHistory.ts +++ b/src/hooks/chat-history/useChatHistory.ts @@ -98,7 +98,7 @@ const useChatHistoryState = () => addMessengerEntry({ id: -1, webId: parser.senderId, entityId: -1, name: '', message: parser.messageText, roomId: -1, timestamp: MessengerHistoryCurrentDate(), type: ChatEntryType.TYPE_IM }); }); - return { addChatEntry, chatHistory, roomHistory, messengerHistory, setMessengerHistory, addMessengerEntry }; + return { addChatEntry, chatHistory, roomHistory, messengerHistory, setMessengerHistory }; } export const useChatHistory = () => useBetween(useChatHistoryState);