From e93c37efbb045d6ce307fecb3d3003331ff42916 Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Wed, 23 Feb 2022 01:07:22 -0300
Subject: [PATCH] Fix chat

---
 src/components/help/views/HelpIndexView.tsx   | 10 ++++-
 .../views/ongoing/GuideToolOngoingView.tsx    | 41 ++++++++++---------
 2 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/components/help/views/HelpIndexView.tsx b/src/components/help/views/HelpIndexView.tsx
index 7cea4922..bec9167e 100644
--- a/src/components/help/views/HelpIndexView.tsx
+++ b/src/components/help/views/HelpIndexView.tsx
@@ -4,7 +4,8 @@ import { LocalizeText } from '../../../api';
 import { Button } from '../../../common/Button';
 import { Column } from '../../../common/Column';
 import { Text } from '../../../common/Text';
-import { SendMessageHook } from '../../../hooks';
+import { GuideToolEvent } from '../../../events/guide-tool/GuideToolEvent';
+import { dispatchUiEvent, SendMessageHook } from '../../../hooks';
 import { useHelpContext } from '../HelpContext';
 
 export const HelpIndexView: FC<{}> = props =>
@@ -23,6 +24,11 @@ export const HelpIndexView: FC<{}> = props =>
         SendMessageHook(new GetCfhStatusMessageComposer(false));
     }, []);
 
+    const onNewHelpRequestClick = useCallback(() =>
+    {
+        dispatchUiEvent(new GuideToolEvent(GuideToolEvent.CREATE_HELP_REQUEST));
+    }, []);
+
     return (
         <>
             <Column gap={ 1 }>
@@ -31,7 +37,7 @@ export const HelpIndexView: FC<{}> = props =>
             </Column>
             <Column gap={ 1 }>
                 <Button onClick={ onReportClick }>{ LocalizeText('help.main.bully.subtitle') }</Button>
-                <Button disabled={ true }>{ LocalizeText('help.main.help.title') }</Button>
+                <Button onClick={ onNewHelpRequestClick }>{ LocalizeText('help.main.help.title') }</Button>
                 <Button disabled={ true }>{ LocalizeText('help.main.self.tips.title') }</Button>
                 <Button variant="link" className="text-black" onClick={ onRequestMySanctionStatusClick }>{ LocalizeText('help.main.my.sanction.status') }</Button>
             </Column>
diff --git a/src/views/guide-tool/views/ongoing/GuideToolOngoingView.tsx b/src/views/guide-tool/views/ongoing/GuideToolOngoingView.tsx
index 956a30ce..fd4f259a 100644
--- a/src/views/guide-tool/views/ongoing/GuideToolOngoingView.tsx
+++ b/src/views/guide-tool/views/ongoing/GuideToolOngoingView.tsx
@@ -53,6 +53,11 @@ export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
         sendMessage();
     }, [ sendMessage ]);
 
+    const isOwnChat = useCallback((userId: number) =>
+    {
+        return userId === GetSessionDataManager().userId;
+    }, []);
+
     return (
         <NitroCardContentView className="p-0">
             <div className="d-flex gap-2 align-items-center bg-secondary p-2 text-white">
@@ -71,26 +76,24 @@ export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
                     { messageGroups.map((group, index) =>
                     {
                         return (
-                            <NitroLayoutFlex className={ 'w-100 justify-content-' + (group.userId === 0 ? 'end' : 'start') } gap={ 2 }>
-                                { (group.userId === userId) &&
-                                    <NitroLayoutBase className="message-avatar flex-shrink-0">
-                                        <AvatarImageView figure={ userFigure } direction={ 2 } />
-                                    </NitroLayoutBase> }
-                                <NitroLayoutBase className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (group.userId !== userId ? 'right' : 'left') }>
-                                    { group.messages.map((message, index) =>
-                                    {
-                                        return (
-                                            <NitroLayoutBase key={ index } className="text-break">
-                                                { message.roomId > 0 ? LocalizeText('guide.help.request.user.ongoing.visit.guide.request.message', ['name', 'roomname'], [userName, message.message]) : message.message }
-                                            </NitroLayoutBase>
-                                        );
-                                    }) }
+                            <NitroLayoutFlex className={ 'w-100 justify-content-' + (isOwnChat(group.userId) ? 'end' : 'start') } gap={ 2 }>
+                                <NitroLayoutBase className="message-avatar flex-shrink-0">
+                                { (!isOwnChat(group.userId)) &&
+                                    <AvatarImageView figure={ userFigure } direction={ 2 } />
+                                }
                                 </NitroLayoutBase>
-                                { (group.userId !== userId) &&
-                                    <NitroLayoutBase className="message-avatar flex-shrink-0">
-                                        <AvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
-                                    </NitroLayoutBase> }
-                            </NitroLayoutFlex>
+                            <NitroLayoutBase className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (isOwnChat(group.userId) ? 'right' : 'left') }>
+                                <NitroLayoutBase className='fw-bold'>
+                                    { (isOwnChat(group.userId)) && GetSessionDataManager().userName }
+                                    { (!isOwnChat(group.userId)) && userName }
+                                </NitroLayoutBase>
+                                { group.messages.map((chat, index) =><NitroLayoutBase key={ index } className="text-break">{ chat.message }</NitroLayoutBase>) }
+                            </NitroLayoutBase>
+                            { (isOwnChat(group.userId)) &&
+                                <NitroLayoutBase className="message-avatar flex-shrink-0">
+                                    <AvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
+                                </NitroLayoutBase> }
+                        </NitroLayoutFlex>
                         );
                     }) } 
                 </div>