From 2d2604cdc9b5e00e7b5a401c9e33fd023391c8b2 Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Fri, 15 Oct 2021 21:34:36 -0500
Subject: [PATCH 01/29] created chatlog component

---
 src/views/mod-tools/ModToolsView.scss         |  3 +-
 src/views/mod-tools/ModToolsView.tsx          |  8 +-
 .../mod-tools/views/chatlog/ChatlogView.scss  | 28 +++++++
 .../mod-tools/views/chatlog/ChatlogView.tsx   | 57 +++++++++++++
 .../views/chatlog/ChatlogView.types.ts        |  6 ++
 .../views/chatlog/ModToolsChatlogView.scss    | 26 ------
 .../views/chatlog/ModToolsChatlogView.tsx     | 84 -------------------
 .../room-chatlog/ModToolsChatlogView.scss     |  3 +
 .../room-chatlog/ModToolsChatlogView.tsx      | 62 ++++++++++++++
 .../ModToolsChatlogView.types.ts              |  0
 10 files changed, 164 insertions(+), 113 deletions(-)
 create mode 100644 src/views/mod-tools/views/chatlog/ChatlogView.scss
 create mode 100644 src/views/mod-tools/views/chatlog/ChatlogView.tsx
 create mode 100644 src/views/mod-tools/views/chatlog/ChatlogView.types.ts
 delete mode 100644 src/views/mod-tools/views/chatlog/ModToolsChatlogView.scss
 delete mode 100644 src/views/mod-tools/views/chatlog/ModToolsChatlogView.tsx
 create mode 100644 src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.scss
 create mode 100644 src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.tsx
 rename src/views/mod-tools/views/{chatlog => room-chatlog}/ModToolsChatlogView.types.ts (100%)

diff --git a/src/views/mod-tools/ModToolsView.scss b/src/views/mod-tools/ModToolsView.scss
index 9f5554e9..66fe1306 100644
--- a/src/views/mod-tools/ModToolsView.scss
+++ b/src/views/mod-tools/ModToolsView.scss
@@ -2,5 +2,6 @@
     width: 200px;
 }
 
-@import './views/chatlog/ModToolsChatlogView';
+@import './views/room-chatlog/ModToolsChatlogView';
 @import './views/room/ModToolsRoomView';
+@import './views/chatlog/ChatlogView';
diff --git a/src/views/mod-tools/ModToolsView.tsx b/src/views/mod-tools/ModToolsView.tsx
index b6591d92..60fc1ba3 100644
--- a/src/views/mod-tools/ModToolsView.tsx
+++ b/src/views/mod-tools/ModToolsView.tsx
@@ -9,6 +9,7 @@ import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../
 import { ModToolsContextProvider } from './context/ModToolsContext';
 import { ModToolsViewProps } from './ModToolsView.types';
 import { initialModTools, ModToolsActions, ModToolsReducer } from './reducers/ModToolsReducer';
+import { ModToolsChatlogView } from './views/room-chatlog/ModToolsChatlogView';
 import { ModToolsRoomView } from './views/room/ModToolsRoomView';
 import { ModToolsTicketsView } from './views/tickets/ModToolsTicketsView';
 import { ModToolsUserView } from './views/user/ModToolsUserView';
@@ -22,6 +23,7 @@ export const ModToolsView: FC<ModToolsViewProps> = props =>
     const [ isRoomVisible, setIsRoomVisible ] = useState(false);
     const [ isUserVisible, setIsUserVisible ] = useState(false);
     const [ isTicketsVisible, setIsTicketsVisible ] = useState(false);
+    const [ isChatlogVisible, setChatlogVisible ] = useState(false);
 
     const onModToolsEvent = useCallback((event: ModToolsEvent) =>
     {
@@ -166,7 +168,7 @@ export const ModToolsView: FC<ModToolsViewProps> = props =>
                     <NitroCardHeaderView headerText={ 'Mod Tools' } onCloseClick={ event => setIsVisible(false) } />
                     <NitroCardContentView className="text-black">
                         <button className="btn btn-primary btn-sm w-100 mb-2" onClick={ () => handleClick('toggle_room') } disabled={ !currentRoomId }><i className="fas fa-home"></i> Room Tool</button>
-                        <button className="btn btn-primary btn-sm w-100 mb-2" onClick={ () => {} } disabled={ !currentRoomId }><i className="fas fa-comments"></i> Chatlog Tool</button>
+                        <button className="btn btn-primary btn-sm w-100 mb-2" onClick={ () => setChatlogVisible(value => !value) } disabled={ !currentRoomId }><i className="fas fa-comments"></i> Chatlog Tool</button>
                         <button className="btn btn-primary btn-sm w-100 mb-2" onClick={ () => setIsUserVisible(value => !value) } disabled={ !selectedUser }><i className="fas fa-user"></i> User: { selectedUser ? selectedUser.name : '' }</button>
                         <button className="btn btn-primary btn-sm w-100" onClick={ () => setIsTicketsVisible(value => !value) }><i className="fas fa-exclamation-circle"></i> Report Tool</button>
                     </NitroCardContentView>
@@ -174,10 +176,12 @@ export const ModToolsView: FC<ModToolsViewProps> = props =>
             { openRooms && openRooms.map(roomId =>
                 {
                     return <ModToolsRoomView key={ roomId } roomId={ roomId } onCloseClick={ () => handleClick('close_room', roomId.toString()) } />;
-                }) }
+                }) 
+            }
             
             { isUserVisible && <ModToolsUserView /> }
             { isTicketsVisible && <ModToolsTicketsView onCloseClick={ () => setIsTicketsVisible(false) } /> }
+            { isChatlogVisible && <ModToolsChatlogView roomId={currentRoomId} onCloseClick={ () => setChatlogVisible(false) }/>}
         </ModToolsContextProvider>
     );
 }
diff --git a/src/views/mod-tools/views/chatlog/ChatlogView.scss b/src/views/mod-tools/views/chatlog/ChatlogView.scss
new file mode 100644
index 00000000..332ccc31
--- /dev/null
+++ b/src/views/mod-tools/views/chatlog/ChatlogView.scss
@@ -0,0 +1,28 @@
+.chatlog-messages {
+    color: $black;
+
+    $username-col-width: 100px;
+
+    .username-label {
+        width: $username-col-width;
+    }
+
+    .chatlog {
+        min-height: 200px;
+        min-width: 400px;
+
+        .chatlog-container {
+            color: $black;
+
+            div.chatlog-entry {
+                border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+
+                .username {
+                    color: #1E7295;
+                    text-decoration: underline;
+                    width: $username-col-width;
+                }
+            }
+        }
+    }
+}
diff --git a/src/views/mod-tools/views/chatlog/ChatlogView.tsx b/src/views/mod-tools/views/chatlog/ChatlogView.tsx
new file mode 100644
index 00000000..b56a9b86
--- /dev/null
+++ b/src/views/mod-tools/views/chatlog/ChatlogView.tsx
@@ -0,0 +1,57 @@
+import { UserProfileComposer } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
+import { AutoSizer, CellMeasurerCache, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
+import { SendMessageHook } from '../../../../hooks';
+import { ChatlogViewProps } from './ChatlogView.types';
+
+export const ChatlogView: FC<ChatlogViewProps> = props =>
+{
+    const { record = null } = props;
+
+    const cache = new CellMeasurerCache({
+        defaultHeight: 20,
+        fixedWidth: true
+    });
+
+    const rowRenderer: ListRowRenderer = (props: ListRowProps) =>
+    {
+        const item = record.chatlog[props.index];
+
+        return (
+            <div key={props.key} style={props.style} className="row chatlog-entry justify-content-start">
+                <div className="col-md-auto text-center">{item.timestamp}</div>
+                <div className="col-sm-2 justify-content-start username"><span className="fw-bold cursor-pointer" onClick={() => SendMessageHook(new UserProfileComposer(item.userId))}>{item.userName}</span></div>
+                <div className="col-lg-auto justify-content-start">{item.message}</div>
+            </div>
+        );
+    }
+
+    return (
+        <>
+            {record && <div className="chatlog-messages w-100 h-100 overflow-hidden">
+                <div className="row align-items-start w-100">
+                    <div className="col-md-auto text-center">Time</div>
+                    <div className="col-sm-2 username-label">User</div>
+                    <div className="col-lg-auto">Message</div>
+                </div>
+                <div className="row w-100 h-100 chatlog">
+                    <AutoSizer defaultWidth={400} defaultHeight={200}>
+                        {({ height, width }) => 
+                        {
+                            return (
+                                <List
+                                    width={width}
+                                    height={height}
+                                    rowCount={record.chatlog.length}
+                                    rowHeight={20}
+                                    className={'chatlog-container'}
+                                    rowRenderer={rowRenderer} />
+                            )
+                        }
+                        }
+                    </AutoSizer>
+                </div>
+            </div>}
+        </>
+    );
+}
diff --git a/src/views/mod-tools/views/chatlog/ChatlogView.types.ts b/src/views/mod-tools/views/chatlog/ChatlogView.types.ts
new file mode 100644
index 00000000..edf5ed3e
--- /dev/null
+++ b/src/views/mod-tools/views/chatlog/ChatlogView.types.ts
@@ -0,0 +1,6 @@
+import { ChatRecordData } from '@nitrots/nitro-renderer';
+
+export interface ChatlogViewProps
+{
+    record: ChatRecordData;
+}
diff --git a/src/views/mod-tools/views/chatlog/ModToolsChatlogView.scss b/src/views/mod-tools/views/chatlog/ModToolsChatlogView.scss
deleted file mode 100644
index 7a2ddc8a..00000000
--- a/src/views/mod-tools/views/chatlog/ModToolsChatlogView.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.nitro-mod-tools-chatlog {
-    width: 480px;
-    
-    .chatlog-messages {
-        height: 300px;
-        max-height: 300px;
-
-        .table {
-            color: $black;
-    
-            > :not(caption) > * > * {
-                box-shadow: none;
-                border-bottom: 1px solid rgba(0, 0, 0, .2);
-            }
-    
-            &.table-striped > tbody > tr:nth-of-type(odd) {
-                color: $black;
-                background: rgba(0, 0, 0, .05);
-            }
-    
-            td {
-                padding: 0px 5px;
-            }
-        }
-    }
-}
diff --git a/src/views/mod-tools/views/chatlog/ModToolsChatlogView.tsx b/src/views/mod-tools/views/chatlog/ModToolsChatlogView.tsx
deleted file mode 100644
index 18f20609..00000000
--- a/src/views/mod-tools/views/chatlog/ModToolsChatlogView.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { ModtoolRequestRoomChatlogComposer, ModtoolRoomChatlogEvent, ModtoolRoomChatlogLine } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useState } from 'react';
-import { TryVisitRoom } from '../../../../api';
-import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
-import { ModToolsChatlogViewProps } from './ModToolsChatlogView.types';
-
-export const ModToolsChatlogView: FC<ModToolsChatlogViewProps> = props =>
-{
-    const { roomId = null, onCloseClick = null } = props;
-
-    const [ roomName, setRoomName ] = useState(null);
-    const [ messages, setMessages ] = useState<ModtoolRoomChatlogLine[]>(null);
-    const [ loadedRoomId, setLoadedRoomId ] = useState(null);
-
-    const [ messagesRequested, setMessagesRequested ] = useState(false);
-
-    useEffect(() =>
-    {
-        if(messagesRequested) return;
-
-        SendMessageHook(new ModtoolRequestRoomChatlogComposer(roomId));
-        setMessagesRequested(true);
-    }, [ roomId, messagesRequested, setMessagesRequested ]);
-
-    const onModtoolRoomChatlogEvent = useCallback((event: ModtoolRoomChatlogEvent) =>
-    {
-        const parser = event.getParser();
-
-        setRoomName(parser.data.roomName);
-        setMessages(parser.data.chatlog);
-        setLoadedRoomId(parser.data.roomId);
-    }, [ setRoomName, setMessages ]);
-
-    CreateMessageHook(ModtoolRoomChatlogEvent, onModtoolRoomChatlogEvent);
-
-    const handleClick = useCallback((action: string, value?: string) =>
-    {
-        if(!action) return;
-
-        switch(action)
-        {
-            case 'close':
-                onCloseClick();
-                return;
-            case 'visit_room':
-                TryVisitRoom(loadedRoomId);
-                return;
-        }
-    }, [ onCloseClick, loadedRoomId ]);
-
-    return (
-        <NitroCardView className="nitro-mod-tools-chatlog" simple={ true }>
-            <NitroCardHeaderView headerText={ 'Room Chatlog' + (roomName ? ': ' + roomName : '') } onCloseClick={ event => handleClick('close') } />
-            <NitroCardContentView className="text-black h-100">
-                <div className="w-100 d-flex justify-content-end">
-                    <button className="btn btn-sm btn-primary me-2" onClick={ event => handleClick('visit_room') }>Visit Room</button>
-                    <button className="btn btn-sm btn-primary">Room Tools</button>
-                </div>
-                <div className="chatlog-messages overflow-auto">
-                    { messages && <table className="table table-striped">
-                        <thead>
-                            <tr>
-                                <th className="text-center">Time</th>
-                                <th className="text-center">User</th>
-                                <th>Message</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            { messages.map((message, index) =>
-                                {
-                                    return <tr key={ index }>
-                                        <td className="text-center">{ message.timestamp }</td>
-                                        <td className="text-center"><a href="#" className="fw-bold">{ message.userName }</a></td>
-                                        <td className="word-break">{ message.message }</td>
-                                    </tr>;
-                                }) }
-                        </tbody>
-                    </table> }
-                </div>
-            </NitroCardContentView>
-        </NitroCardView>
-    );
-}
diff --git a/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.scss b/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.scss
new file mode 100644
index 00000000..cf1d0dca
--- /dev/null
+++ b/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.scss
@@ -0,0 +1,3 @@
+.nitro-mod-tools-room-chatlog {
+    
+}
diff --git a/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.tsx b/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.tsx
new file mode 100644
index 00000000..dbf902c6
--- /dev/null
+++ b/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.tsx
@@ -0,0 +1,62 @@
+import { ChatRecordData, ModtoolRequestRoomChatlogComposer, ModtoolRoomChatlogEvent } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { TryVisitRoom } from '../../../../api';
+import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
+import { ChatlogView } from '../chatlog/ChatlogView';
+import { ModToolsChatlogViewProps } from './ModToolsChatlogView.types';
+
+export const ModToolsChatlogView: FC<ModToolsChatlogViewProps> = props =>
+{
+    const { roomId = null, onCloseClick = null } = props;
+
+    const [roomChatlog, setRoomChatlog] = useState<ChatRecordData>(null);
+
+    useEffect(() =>
+    {
+        SendMessageHook(new ModtoolRequestRoomChatlogComposer(roomId));
+    }, [roomId]);
+
+    const onModtoolRoomChatlogEvent = useCallback((event: ModtoolRoomChatlogEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!parser) return;
+
+        setRoomChatlog(parser.data);
+    }, [setRoomChatlog]);
+
+    CreateMessageHook(ModtoolRoomChatlogEvent, onModtoolRoomChatlogEvent);
+
+    const handleClick = useCallback((action: string, value?: string) =>
+    {
+        if(!action) return;
+
+        switch(action)
+        {
+            case 'close':
+                onCloseClick();
+                return;
+            case 'visit_room':
+                TryVisitRoom(roomChatlog.roomId);
+                return;
+        }
+    }, [onCloseClick, roomChatlog]);
+
+    return (
+        <NitroCardView className="nitro-mod-tools-room-chatlog" simple={true}>
+            <NitroCardHeaderView headerText={'Room Chatlog' + (roomChatlog ? ': ' + roomChatlog.roomName : '')} onCloseClick={event => handleClick('close')} />
+            <NitroCardContentView className="text-black h-100">
+                {roomChatlog &&
+                    <>
+                        <div className="w-100 d-flex justify-content-start">
+                            <button className="btn btn-sm btn-primary me-2" onClick={event => handleClick('visit_room')}>Visit Room</button>
+                            <button className="btn btn-sm btn-primary">Room Tools</button>
+                        </div>
+                        <ChatlogView record={roomChatlog} />
+                    </>
+                }
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}
diff --git a/src/views/mod-tools/views/chatlog/ModToolsChatlogView.types.ts b/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.types.ts
similarity index 100%
rename from src/views/mod-tools/views/chatlog/ModToolsChatlogView.types.ts
rename to src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.types.ts

From 7d9b6f933637cb26a27e20b483f9b771edad94d9 Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Fri, 15 Oct 2021 22:34:34 -0500
Subject: [PATCH 02/29] fixed row height

---
 .../mod-tools/views/chatlog/ChatlogView.scss  |  5 +++-
 .../mod-tools/views/chatlog/ChatlogView.tsx   | 24 +++++++++++--------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/views/mod-tools/views/chatlog/ChatlogView.scss b/src/views/mod-tools/views/chatlog/ChatlogView.scss
index 332ccc31..6d9ceb16 100644
--- a/src/views/mod-tools/views/chatlog/ChatlogView.scss
+++ b/src/views/mod-tools/views/chatlog/ChatlogView.scss
@@ -16,12 +16,15 @@
 
             div.chatlog-entry {
                 border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-
                 .username {
                     color: #1E7295;
                     text-decoration: underline;
                     width: $username-col-width;
                 }
+
+                .message {
+                    word-break: break-all;
+                }
             }
         }
     }
diff --git a/src/views/mod-tools/views/chatlog/ChatlogView.tsx b/src/views/mod-tools/views/chatlog/ChatlogView.tsx
index b56a9b86..67eab764 100644
--- a/src/views/mod-tools/views/chatlog/ChatlogView.tsx
+++ b/src/views/mod-tools/views/chatlog/ChatlogView.tsx
@@ -1,6 +1,6 @@
 import { UserProfileComposer } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
-import { AutoSizer, CellMeasurerCache, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
+import { AutoSizer, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
 import { SendMessageHook } from '../../../../hooks';
 import { ChatlogViewProps } from './ChatlogView.types';
 
@@ -8,10 +8,14 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
 {
     const { record = null } = props;
 
-    const cache = new CellMeasurerCache({
-        defaultHeight: 20,
-        fixedWidth: true
-    });
+    const getRowHeight = ({ index }) =>
+    {
+        const item = record.chatlog[index];
+
+        if(item.message.length < 40) return 20;
+        else if(item.message.length < 70) return 42;
+        else return 62;
+    };
 
     const rowRenderer: ListRowRenderer = (props: ListRowProps) =>
     {
@@ -21,7 +25,7 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
             <div key={props.key} style={props.style} className="row chatlog-entry justify-content-start">
                 <div className="col-md-auto text-center">{item.timestamp}</div>
                 <div className="col-sm-2 justify-content-start username"><span className="fw-bold cursor-pointer" onClick={() => SendMessageHook(new UserProfileComposer(item.userId))}>{item.userName}</span></div>
-                <div className="col-lg-auto justify-content-start">{item.message}</div>
+                <div className="col justify-content-start h-100"><span className="text-break text-wrap h-100">{item.message}</span></div>
             </div>
         );
     }
@@ -30,9 +34,9 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
         <>
             {record && <div className="chatlog-messages w-100 h-100 overflow-hidden">
                 <div className="row align-items-start w-100">
-                    <div className="col-md-auto text-center">Time</div>
-                    <div className="col-sm-2 username-label">User</div>
-                    <div className="col-lg-auto">Message</div>
+                    <div className="col-md-auto text-center fw-bold">Time</div>
+                    <div className="col-sm-2 username-label fw-bold">User</div>
+                    <div className="col fw-bold">Message</div>
                 </div>
                 <div className="row w-100 h-100 chatlog">
                     <AutoSizer defaultWidth={400} defaultHeight={200}>
@@ -43,7 +47,7 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
                                     width={width}
                                     height={height}
                                     rowCount={record.chatlog.length}
-                                    rowHeight={20}
+                                    rowHeight={getRowHeight}
                                     className={'chatlog-container'}
                                     rowRenderer={rowRenderer} />
                             )

From 5c914a6de13076cd7c029bdfa568c5dddaae0088 Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Sat, 16 Oct 2021 00:44:36 -0500
Subject: [PATCH 03/29] fix dynamic row height for real this time

---
 .../mod-tools/views/chatlog/ChatlogView.tsx   | 41 +++++++++++--------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/views/mod-tools/views/chatlog/ChatlogView.tsx b/src/views/mod-tools/views/chatlog/ChatlogView.tsx
index 67eab764..64e9a9ca 100644
--- a/src/views/mod-tools/views/chatlog/ChatlogView.tsx
+++ b/src/views/mod-tools/views/chatlog/ChatlogView.tsx
@@ -1,6 +1,6 @@
 import { UserProfileComposer } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
-import { AutoSizer, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
+import { AutoSizer, CellMeasurer, CellMeasurerCache, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
 import { SendMessageHook } from '../../../../hooks';
 import { ChatlogViewProps } from './ChatlogView.types';
 
@@ -8,27 +8,31 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
 {
     const { record = null } = props;
 
-    const getRowHeight = ({ index }) =>
-    {
-        const item = record.chatlog[index];
-
-        if(item.message.length < 40) return 20;
-        else if(item.message.length < 70) return 42;
-        else return 62;
-    };
-
     const rowRenderer: ListRowRenderer = (props: ListRowProps) =>
     {
         const item = record.chatlog[props.index];
 
         return (
-            <div key={props.key} style={props.style} className="row chatlog-entry justify-content-start">
-                <div className="col-md-auto text-center">{item.timestamp}</div>
-                <div className="col-sm-2 justify-content-start username"><span className="fw-bold cursor-pointer" onClick={() => SendMessageHook(new UserProfileComposer(item.userId))}>{item.userName}</span></div>
-                <div className="col justify-content-start h-100"><span className="text-break text-wrap h-100">{item.message}</span></div>
-            </div>
+            <CellMeasurer
+                cache={cache}
+                columnIndex={0}
+                key={props.key}
+                parent={props.parent}
+                rowIndex={props.index}
+            >
+                <div key={props.key} style={props.style} className="row chatlog-entry justify-content-start">
+                    <div className="col-md-auto text-center">{item.timestamp}</div>
+                    <div className="col-sm-2 justify-content-start username"><span className="fw-bold cursor-pointer" onClick={() => SendMessageHook(new UserProfileComposer(item.userId))}>{item.userName}</span></div>
+                    <div className="col justify-content-start h-100"><span className="text-break text-wrap h-100">{item.message}</span></div>
+                </div>
+            </CellMeasurer>
         );
-    }
+    };
+
+    const cache = new CellMeasurerCache({
+        defaultHeight: 25,
+        fixedWidth: true
+    });
 
     return (
         <>
@@ -47,9 +51,10 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
                                     width={width}
                                     height={height}
                                     rowCount={record.chatlog.length}
-                                    rowHeight={getRowHeight}
+                                    rowHeight={cache.rowHeight}
                                     className={'chatlog-container'}
-                                    rowRenderer={rowRenderer} />
+                                    rowRenderer={rowRenderer}
+                                    deferredMeasurementCache={cache} />
                             )
                         }
                         }

From d4e44b888ee3d89a239429f9781dd0c48ee76a1d Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Sat, 16 Oct 2021 01:26:03 -0500
Subject: [PATCH 04/29] detect window resize

---
 src/views/mod-tools/views/chatlog/ChatlogView.scss | 2 +-
 src/views/mod-tools/views/chatlog/ChatlogView.tsx  | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/views/mod-tools/views/chatlog/ChatlogView.scss b/src/views/mod-tools/views/chatlog/ChatlogView.scss
index 6d9ceb16..662d0c7a 100644
--- a/src/views/mod-tools/views/chatlog/ChatlogView.scss
+++ b/src/views/mod-tools/views/chatlog/ChatlogView.scss
@@ -1,5 +1,6 @@
 .chatlog-messages {
     color: $black;
+    min-width: 400px;
 
     $username-col-width: 100px;
 
@@ -9,7 +10,6 @@
 
     .chatlog {
         min-height: 200px;
-        min-width: 400px;
 
         .chatlog-container {
             color: $black;
diff --git a/src/views/mod-tools/views/chatlog/ChatlogView.tsx b/src/views/mod-tools/views/chatlog/ChatlogView.tsx
index 64e9a9ca..78b3dd07 100644
--- a/src/views/mod-tools/views/chatlog/ChatlogView.tsx
+++ b/src/views/mod-tools/views/chatlog/ChatlogView.tsx
@@ -21,7 +21,7 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
                 rowIndex={props.index}
             >
                 <div key={props.key} style={props.style} className="row chatlog-entry justify-content-start">
-                    <div className="col-md-auto text-center">{item.timestamp}</div>
+                    <div className="col-auto text-center">{item.timestamp}</div>
                     <div className="col-sm-2 justify-content-start username"><span className="fw-bold cursor-pointer" onClick={() => SendMessageHook(new UserProfileComposer(item.userId))}>{item.userName}</span></div>
                     <div className="col justify-content-start h-100"><span className="text-break text-wrap h-100">{item.message}</span></div>
                 </div>
@@ -38,7 +38,7 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
         <>
             {record && <div className="chatlog-messages w-100 h-100 overflow-hidden">
                 <div className="row align-items-start w-100">
-                    <div className="col-md-auto text-center fw-bold">Time</div>
+                    <div className="col-auto text-center fw-bold">Time</div>
                     <div className="col-sm-2 username-label fw-bold">User</div>
                     <div className="col fw-bold">Message</div>
                 </div>
@@ -46,6 +46,8 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
                     <AutoSizer defaultWidth={400} defaultHeight={200}>
                         {({ height, width }) => 
                         {
+                            cache.clearAll();
+                            
                             return (
                                 <List
                                     width={width}

From aa97a2f430e59324d8453a76d248004124af7b25 Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Sat, 16 Oct 2021 03:10:53 -0500
Subject: [PATCH 05/29] add rights check to mod tool icon

---
 src/views/toolbar/ToolbarView.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/views/toolbar/ToolbarView.tsx b/src/views/toolbar/ToolbarView.tsx
index 34b1ac71..1e9fbab2 100644
--- a/src/views/toolbar/ToolbarView.tsx
+++ b/src/views/toolbar/ToolbarView.tsx
@@ -29,6 +29,7 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
     const [ unseenInventoryCount, setUnseenInventoryCount ] = useState(0);
     const [ unseenAchievementCount, setUnseenAchievementCount ] = useState(0);
 
+    const isMod = GetSessionDataManager().isModerator;
     const unseenFriendListCount = 0;
 
     const onUserInfoEvent = useCallback((event: UserInfoEvent) =>
@@ -200,9 +201,10 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
                             <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.CAMERA_ITEM) }>
                                 <i className="icon icon-camera"></i>
                             </div>) }
-                        <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.MOD_TOOLS_ITEM) }>
+                        { isMod && (
+                            <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.MOD_TOOLS_ITEM) }>
                             <i className="icon icon-modtools"></i>
-                        </div>
+                        </div>) }
                     </div>
                     <div id="toolbar-chat-input-container" className="d-flex align-items-center" />
                 </div>

From b54e18bf01e32dc9297dece4a7b9549a7de02808 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Sat, 16 Oct 2021 04:13:54 -0400
Subject: [PATCH 06/29] Update trophy

---
 .../widgets/furniture/trophy/FurnitureTrophyView.tsx     | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/views/room/widgets/furniture/trophy/FurnitureTrophyView.tsx b/src/views/room/widgets/furniture/trophy/FurnitureTrophyView.tsx
index 5f21e504..403a60e2 100644
--- a/src/views/room/widgets/furniture/trophy/FurnitureTrophyView.tsx
+++ b/src/views/room/widgets/furniture/trophy/FurnitureTrophyView.tsx
@@ -1,6 +1,6 @@
 import { NitroEvent, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
-import { GetRoomEngine, RoomWidgetRoomObjectUpdateEvent } from '../../../../../api';
+import { GetRoomEngine, RoomWidgetUpdateRoomObjectEvent } from '../../../../../api';
 import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
 import { useRoomEngineEvent } from '../../../../../hooks/events/nitro/room/room-engine-event';
 import { NitroLayoutTrophyView } from '../../../../../layout';
@@ -9,6 +9,7 @@ import { FurnitureTrophyData } from './FurnitureTrophyData';
 
 export const FurnitureTrophyView: FC<{}> = props =>
 {
+
     const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
     const [ trophyData, setTrophyData ] = useState<FurnitureTrophyData>(null);
 
@@ -39,8 +40,8 @@ export const FurnitureTrophyView: FC<{}> = props =>
                 setTrophyData(new FurnitureTrophyData(widgetEvent.objectId, widgetEvent.category, color, ownerName, trophyDate, trophyText));
                 return;
             }
-            case RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED: {
-                const widgetEvent = (event as RoomWidgetRoomObjectUpdateEvent);
+            case RoomWidgetUpdateRoomObjectEvent.FURNI_REMOVED: {
+                const widgetEvent = (event as RoomWidgetUpdateRoomObjectEvent);
 
                 setTrophyData(prevState =>
                     {
@@ -54,7 +55,7 @@ export const FurnitureTrophyView: FC<{}> = props =>
     }, []);
 
     useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_TROPHY, onNitroEvent);
-    CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED, widgetHandler.eventDispatcher, onNitroEvent);
+    CreateEventDispatcherHook(RoomWidgetUpdateRoomObjectEvent.FURNI_REMOVED, widgetHandler.eventDispatcher, onNitroEvent);
 
     const processAction = useCallback((type: string, value: string = null) =>
     {

From dca22b58c3f60763db20d981a185157a4bae4c3e Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Tue, 19 Oct 2021 16:32:22 -0500
Subject: [PATCH 07/29] finish room and user chatlogs

---
 src/events/mod-tools/ModToolsEvent.ts         |   4 +-
 .../mod-tools/ModToolsOpenRoomChatlogEvent.ts |  18 ++
 .../mod-tools/ModToolsOpenUserChatlogEvent.ts |  18 ++
 .../mod-tools/ModToolsOpenUserInfoEvent.ts    |  18 ++
 .../mod-tools/ModToolsSelectUserEvent.ts      |  25 --
 src/views/mod-tools/ModToolsView.scss         |   2 +-
 src/views/mod-tools/ModToolsView.tsx          | 213 ++++++++++++++----
 .../mod-tools/reducers/ModToolsReducer.tsx    |  40 ++--
 src/views/mod-tools/utils/ISelectedUser.ts    |   4 +
 .../mod-tools/views/chatlog/ChatlogView.scss  |   4 +
 .../mod-tools/views/chatlog/ChatlogView.tsx   | 150 +++++++++---
 .../views/chatlog/ChatlogView.types.ts        |   2 +-
 .../room-chatlog/ModToolsChatlogView.scss     |   3 -
 .../room-chatlog/ModToolsChatlogView.tsx      |  26 +--
 .../views/room/ModToolsRoomView.scss          |   5 +
 .../mod-tools/views/room/ModToolsRoomView.tsx |   9 +-
 .../user-chatlog/ModToolsUserChatlogView.tsx  |  41 ++++
 .../ModToolsUserChatlogView.types.ts          |   5 +
 .../views/user/ModToolsUserView.scss          |   8 +
 .../mod-tools/views/user/ModToolsUserView.tsx |  52 ++++-
 .../views/user/ModToolsUserView.types.ts      |   6 +-
 21 files changed, 505 insertions(+), 148 deletions(-)
 create mode 100644 src/events/mod-tools/ModToolsOpenRoomChatlogEvent.ts
 create mode 100644 src/events/mod-tools/ModToolsOpenUserChatlogEvent.ts
 create mode 100644 src/events/mod-tools/ModToolsOpenUserInfoEvent.ts
 delete mode 100644 src/events/mod-tools/ModToolsSelectUserEvent.ts
 create mode 100644 src/views/mod-tools/utils/ISelectedUser.ts
 delete mode 100644 src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.scss
 create mode 100644 src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.tsx
 create mode 100644 src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.types.ts
 create mode 100644 src/views/mod-tools/views/user/ModToolsUserView.scss

diff --git a/src/events/mod-tools/ModToolsEvent.ts b/src/events/mod-tools/ModToolsEvent.ts
index b6070a36..ac7dc7d8 100644
--- a/src/events/mod-tools/ModToolsEvent.ts
+++ b/src/events/mod-tools/ModToolsEvent.ts
@@ -5,6 +5,8 @@ export class ModToolsEvent extends NitroEvent
     public static SHOW_MOD_TOOLS: string = 'MTE_SHOW_MOD_TOOLS';
     public static HIDE_MOD_TOOLS: string = 'MTE_HIDE_MOD_TOOLS';
     public static TOGGLE_MOD_TOOLS: string = 'MTE_TOGGLE_MOD_TOOLS';
-    public static SELECT_USER: string = 'MTE_SELECT_USER';
     public static OPEN_ROOM_INFO: string = 'MTE_OPEN_ROOM_INFO';
+    public static OPEN_ROOM_CHATLOG: string = 'MTE_OPEN_ROOM_CHATLOG';
+    public static OPEN_USER_INFO: string = 'MTE_OPEN_USER_INFO';
+    public static OPEN_USER_CHATLOG: string = 'MTE_OPEN_USER_CHATLOG';
 }
diff --git a/src/events/mod-tools/ModToolsOpenRoomChatlogEvent.ts b/src/events/mod-tools/ModToolsOpenRoomChatlogEvent.ts
new file mode 100644
index 00000000..692e687d
--- /dev/null
+++ b/src/events/mod-tools/ModToolsOpenRoomChatlogEvent.ts
@@ -0,0 +1,18 @@
+import { ModToolsEvent } from './ModToolsEvent';
+
+export class ModToolsOpenRoomChatlogEvent extends ModToolsEvent
+{
+    private _roomId: number;
+
+    constructor(roomId: number)
+    {
+        super(ModToolsEvent.OPEN_ROOM_CHATLOG);
+
+        this._roomId = roomId;
+    }
+
+    public get roomId(): number
+    {
+        return this._roomId;
+    }
+}
diff --git a/src/events/mod-tools/ModToolsOpenUserChatlogEvent.ts b/src/events/mod-tools/ModToolsOpenUserChatlogEvent.ts
new file mode 100644
index 00000000..aa8858e8
--- /dev/null
+++ b/src/events/mod-tools/ModToolsOpenUserChatlogEvent.ts
@@ -0,0 +1,18 @@
+import { ModToolsEvent } from './ModToolsEvent';
+
+export class ModToolsOpenUserChatlogEvent extends ModToolsEvent
+{
+    private _userId: number;
+
+    constructor(userId: number)
+    {
+        super(ModToolsEvent.OPEN_USER_CHATLOG);
+
+        this._userId = userId;
+    }
+
+    public get userId(): number
+    {
+        return this._userId;
+    }
+}
diff --git a/src/events/mod-tools/ModToolsOpenUserInfoEvent.ts b/src/events/mod-tools/ModToolsOpenUserInfoEvent.ts
new file mode 100644
index 00000000..58148ee9
--- /dev/null
+++ b/src/events/mod-tools/ModToolsOpenUserInfoEvent.ts
@@ -0,0 +1,18 @@
+import { ModToolsEvent } from './ModToolsEvent';
+
+export class ModToolsOpenUserInfoEvent extends ModToolsEvent
+{
+    private _userId: number;
+
+    constructor(userId: number)
+    {
+        super(ModToolsEvent.OPEN_USER_INFO);
+
+        this._userId = userId;
+    }
+
+    public get userId(): number
+    {
+        return this._userId;
+    }
+}
diff --git a/src/events/mod-tools/ModToolsSelectUserEvent.ts b/src/events/mod-tools/ModToolsSelectUserEvent.ts
deleted file mode 100644
index 148ffe28..00000000
--- a/src/events/mod-tools/ModToolsSelectUserEvent.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ModToolsEvent } from './ModToolsEvent';
-
-export class ModToolsSelectUserEvent extends ModToolsEvent
-{
-    private _webID: number;
-    private _name: string;
-
-    constructor(webID: number, name: string)
-    {
-        super(ModToolsEvent.SELECT_USER);
-
-        this._webID = webID;
-        this._name = name;
-    }
-
-    public get webID(): number
-    {
-        return this._webID;
-    }
-
-    public get name(): string
-    {
-        return this._name;
-    }
-}
diff --git a/src/views/mod-tools/ModToolsView.scss b/src/views/mod-tools/ModToolsView.scss
index 66fe1306..73b4142d 100644
--- a/src/views/mod-tools/ModToolsView.scss
+++ b/src/views/mod-tools/ModToolsView.scss
@@ -2,6 +2,6 @@
     width: 200px;
 }
 
-@import './views/room-chatlog/ModToolsChatlogView';
 @import './views/room/ModToolsRoomView';
 @import './views/chatlog/ChatlogView';
+@import './views/user/ModToolsUserView';
diff --git a/src/views/mod-tools/ModToolsView.tsx b/src/views/mod-tools/ModToolsView.tsx
index 60fc1ba3..3c5dec10 100644
--- a/src/views/mod-tools/ModToolsView.tsx
+++ b/src/views/mod-tools/ModToolsView.tsx
@@ -1,29 +1,31 @@
-import { RoomEngineEvent } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useReducer, useState } from 'react';
+import { RoomEngineEvent, RoomEngineObjectEvent, RoomObjectCategory } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useReducer, useState } from 'react';
+import { GetRoomSession } from '../../api';
 import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
+import { ModToolsOpenRoomChatlogEvent } from '../../events/mod-tools/ModToolsOpenRoomChatlogEvent';
 import { ModToolsOpenRoomInfoEvent } from '../../events/mod-tools/ModToolsOpenRoomInfoEvent';
-import { ModToolsSelectUserEvent } from '../../events/mod-tools/ModToolsSelectUserEvent';
+import { ModToolsOpenUserChatlogEvent } from '../../events/mod-tools/ModToolsOpenUserChatlogEvent';
+import { ModToolsOpenUserInfoEvent } from '../../events/mod-tools/ModToolsOpenUserInfoEvent';
 import { useRoomEngineEvent } from '../../hooks/events';
 import { dispatchUiEvent, useUiEvent } from '../../hooks/events/ui/ui-event';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
 import { ModToolsContextProvider } from './context/ModToolsContext';
 import { ModToolsViewProps } from './ModToolsView.types';
 import { initialModTools, ModToolsActions, ModToolsReducer } from './reducers/ModToolsReducer';
+import { ISelectedUser } from './utils/ISelectedUser';
 import { ModToolsChatlogView } from './views/room-chatlog/ModToolsChatlogView';
 import { ModToolsRoomView } from './views/room/ModToolsRoomView';
 import { ModToolsTicketsView } from './views/tickets/ModToolsTicketsView';
+import { ModToolsUserChatlogView } from './views/user-chatlog/ModToolsUserChatlogView';
 import { ModToolsUserView } from './views/user/ModToolsUserView';
 
 export const ModToolsView: FC<ModToolsViewProps> = props =>
 {
     const [ isVisible, setIsVisible ] = useState(false);
     const [ modToolsState, dispatchModToolsState ] = useReducer(ModToolsReducer, initialModTools);
-    const { currentRoomId = null, selectedUser = null, openRooms = null, openChatlogs = null } = modToolsState;
-
-    const [ isRoomVisible, setIsRoomVisible ] = useState(false);
-    const [ isUserVisible, setIsUserVisible ] = useState(false);
+    const { currentRoomId = null, openRooms = null, openRoomChatlogs = null, openUserChatlogs = null, openUserInfo = null } = modToolsState;
+    const [ selectedUser, setSelectedUser] = useState<ISelectedUser>(null);
     const [ isTicketsVisible, setIsTicketsVisible ] = useState(false);
-    const [ isChatlogVisible, setChatlogVisible ] = useState(false);
 
     const onModToolsEvent = useCallback((event: ModToolsEvent) =>
     {
@@ -38,41 +40,76 @@ export const ModToolsView: FC<ModToolsViewProps> = props =>
             case ModToolsEvent.TOGGLE_MOD_TOOLS:
                 setIsVisible(value => !value);
                 return;
-            case ModToolsEvent.SELECT_USER: {
-                const castedEvent = (event as ModToolsSelectUserEvent);
-                
-                dispatchModToolsState({
-                    type: ModToolsActions.SET_SELECTED_USER,
-                    payload: {
-                        selectedUser: {
-                            webID: castedEvent.webID,
-                            name: castedEvent.name
-                        }
-                    }
-                });
-                return;
-            }
             case ModToolsEvent.OPEN_ROOM_INFO: {
                 const castedEvent = (event as ModToolsOpenRoomInfoEvent);
                 
                 if(openRooms && openRooms.includes(castedEvent.roomId)) return;
                 
+                const rooms = openRooms || [];
+                
                 dispatchModToolsState({
                     type: ModToolsActions.SET_OPEN_ROOMS,
                     payload: {
-                        openRooms: [...openRooms, castedEvent.roomId]
+                        openRooms: [...rooms, castedEvent.roomId]
+                    }
+                });
+                return;
+            }
+            case ModToolsEvent.OPEN_ROOM_CHATLOG: {
+                const castedEvent = (event as ModToolsOpenRoomChatlogEvent); 
+
+                if(openRoomChatlogs && openRoomChatlogs.includes(castedEvent.roomId)) return;
+
+                const chatlogs = openRoomChatlogs || [];
+
+                dispatchModToolsState({
+                    type: ModToolsActions.SET_OPEN_ROOM_CHATLOGS,
+                    payload: {
+                        openRoomChatlogs: [...chatlogs, castedEvent.roomId]
+                    }
+                });
+                return;
+            }
+            case ModToolsEvent.OPEN_USER_INFO: {
+                const castedEvent = (event as ModToolsOpenUserInfoEvent);
+
+                if(openUserInfo && openUserInfo.includes(castedEvent.userId)) return;
+
+                const userInfo = openUserInfo || [];
+
+                dispatchModToolsState({
+                    type: ModToolsActions.SET_OPEN_USERINFO,
+                    payload: {
+                        openUserInfo: [...userInfo, castedEvent.userId]
+                    }
+                });
+                return;
+            }
+            case ModToolsEvent.OPEN_USER_CHATLOG: {
+                const castedEvent = (event as ModToolsOpenUserChatlogEvent);
+
+                if(openUserChatlogs && openUserChatlogs.includes(castedEvent.userId)) return;
+
+                const userChatlog = openUserChatlogs || [];
+
+                dispatchModToolsState({
+                    type: ModToolsActions.SET_OPEN_USER_CHATLOGS,
+                    payload: {
+                        openUserChatlogs: [...userChatlog, castedEvent.userId]
                     }
                 });
                 return;
             }
         }
-    }, [ dispatchModToolsState, setIsVisible, openRooms ]);
+    }, [openRooms, openRoomChatlogs, openUserInfo, openUserChatlogs]);
 
     useUiEvent(ModToolsEvent.SHOW_MOD_TOOLS, onModToolsEvent);
     useUiEvent(ModToolsEvent.HIDE_MOD_TOOLS, onModToolsEvent);
     useUiEvent(ModToolsEvent.TOGGLE_MOD_TOOLS, onModToolsEvent);
-    useUiEvent(ModToolsEvent.SELECT_USER, onModToolsEvent);
     useUiEvent(ModToolsEvent.OPEN_ROOM_INFO, onModToolsEvent);
+    useUiEvent(ModToolsEvent.OPEN_ROOM_CHATLOG, onModToolsEvent);
+    useUiEvent(ModToolsEvent.OPEN_USER_INFO, onModToolsEvent);
+    useUiEvent(ModToolsEvent.OPEN_USER_CHATLOG, onModToolsEvent);
 
     const onRoomEngineEvent = useCallback((event: RoomEngineEvent) =>
     {
@@ -100,6 +137,23 @@ export const ModToolsView: FC<ModToolsViewProps> = props =>
     useRoomEngineEvent(RoomEngineEvent.INITIALIZED, onRoomEngineEvent);
     useRoomEngineEvent(RoomEngineEvent.DISPOSED, onRoomEngineEvent);
 
+    const onRoomEngineObjectEvent = useCallback((event: RoomEngineObjectEvent) =>
+    {
+        if(event.category !== RoomObjectCategory.UNIT) return;
+
+        const roomSession = GetRoomSession();
+
+        if(!roomSession) return;
+
+        const userData = roomSession.userDataManager.getUserDataByIndex(event.objectId);
+
+        if(!userData) return;
+
+        setSelectedUser({ userId: userData.webID, username: userData.name });
+    }, []);
+    
+    useRoomEngineEvent(RoomEngineObjectEvent.SELECTED, onRoomEngineObjectEvent);
+
     const handleClick = useCallback((action: string, value?: string) =>
     {
         if(!action) return;
@@ -139,27 +193,95 @@ export const ModToolsView: FC<ModToolsViewProps> = props =>
                 });                
                 return;
             }
-            case 'close_chatlog': {
-                const itemIndex = openChatlogs.indexOf(Number(value));
+            case 'toggle_room_chatlog': {
+                if(!openRoomChatlogs)
+                {
+                    dispatchUiEvent(new ModToolsOpenRoomChatlogEvent(currentRoomId));
+                    return;
+                }
 
-                const clone = Array.from(openChatlogs);
+                const itemIndex = openRoomChatlogs.indexOf(currentRoomId);
+
+                if(itemIndex > -1)
+                {
+                    handleClick('close_room_chatlog', currentRoomId.toString());
+                }
+                else
+                {
+                    dispatchUiEvent(new ModToolsOpenRoomChatlogEvent(currentRoomId));
+                }
+                return;
+            }
+            case 'close_room_chatlog': {
+                const itemIndex = openRoomChatlogs.indexOf(Number(value));
+
+                const clone = Array.from(openRoomChatlogs);
                 clone.splice(itemIndex, 1);
 
                 dispatchModToolsState({
-                    type: ModToolsActions.SET_OPEN_CHATLOGS,
+                    type: ModToolsActions.SET_OPEN_ROOM_CHATLOGS,
                     payload: {
-                        openChatlogs: clone
+                        openRoomChatlogs: clone
+                    }
+                });                
+                return;
+            }
+            case 'toggle_user_info': {
+
+                if(!selectedUser) return;
+
+                const userId = selectedUser.userId;
+
+                if(!openUserInfo)
+                {
+                    dispatchUiEvent(new ModToolsOpenUserInfoEvent(userId));
+                    return;
+                }
+
+                const itemIndex = openUserInfo.indexOf(userId);
+
+                if(itemIndex > -1)
+                {
+                    handleClick('close_user_info', userId.toString());
+                }
+                else
+                {
+                    dispatchUiEvent(new ModToolsOpenUserInfoEvent(userId));
+                }
+                return;
+            }
+            case 'close_user_info': {
+                const itemIndex = openUserInfo.indexOf(Number(value));
+
+                const clone = Array.from(openUserInfo);
+                clone.splice(itemIndex, 1);
+
+                dispatchModToolsState({
+                    type: ModToolsActions.SET_OPEN_USERINFO,
+                    payload: {
+                        openUserInfo: clone
+                    }
+                });                
+                return;
+            }
+            case 'close_user_chatlog': {
+                const itemIndex = openUserChatlogs.indexOf(Number(value));
+
+                const clone = Array.from(openUserChatlogs);
+                clone.splice(itemIndex, 1);
+
+                dispatchModToolsState({
+                    type: ModToolsActions.SET_OPEN_USER_CHATLOGS,
+                    payload: {
+                        openUserChatlogs: clone
                     }
                 });                
                 return;
             }
         }
-    }, [ dispatchModToolsState, openRooms, openChatlogs, currentRoomId ]);
+    }, [openRooms, currentRoomId, openRoomChatlogs, selectedUser, openUserInfo, openUserChatlogs]);
 
-    useEffect(() =>
-    {
-        if(!isVisible) return;
-    }, [ isVisible ]);
+    if(!isVisible) return null;
 
     return (
         <ModToolsContextProvider value={ { modToolsState, dispatchModToolsState } }>
@@ -168,8 +290,8 @@ export const ModToolsView: FC<ModToolsViewProps> = props =>
                     <NitroCardHeaderView headerText={ 'Mod Tools' } onCloseClick={ event => setIsVisible(false) } />
                     <NitroCardContentView className="text-black">
                         <button className="btn btn-primary btn-sm w-100 mb-2" onClick={ () => handleClick('toggle_room') } disabled={ !currentRoomId }><i className="fas fa-home"></i> Room Tool</button>
-                        <button className="btn btn-primary btn-sm w-100 mb-2" onClick={ () => setChatlogVisible(value => !value) } disabled={ !currentRoomId }><i className="fas fa-comments"></i> Chatlog Tool</button>
-                        <button className="btn btn-primary btn-sm w-100 mb-2" onClick={ () => setIsUserVisible(value => !value) } disabled={ !selectedUser }><i className="fas fa-user"></i> User: { selectedUser ? selectedUser.name : '' }</button>
+                        <button className="btn btn-primary btn-sm w-100 mb-2" onClick={ () => handleClick('toggle_room_chatlog') } disabled={ !currentRoomId }><i className="fas fa-comments"></i> Chatlog Tool</button>
+                        <button className="btn btn-primary btn-sm w-100 mb-2" onClick={ () => handleClick('toggle_user_info') } disabled={ !selectedUser }><i className="fas fa-user"></i> User: { selectedUser ? selectedUser.username : '' }</button>
                         <button className="btn btn-primary btn-sm w-100" onClick={ () => setIsTicketsVisible(value => !value) }><i className="fas fa-exclamation-circle"></i> Report Tool</button>
                     </NitroCardContentView>
                 </NitroCardView> }
@@ -178,10 +300,23 @@ export const ModToolsView: FC<ModToolsViewProps> = props =>
                     return <ModToolsRoomView key={ roomId } roomId={ roomId } onCloseClick={ () => handleClick('close_room', roomId.toString()) } />;
                 }) 
             }
+            { openRoomChatlogs && openRoomChatlogs.map(roomId =>
+                {
+                    return <ModToolsChatlogView key={ roomId } roomId={ roomId } onCloseClick={ () => handleClick('close_room_chatlog', roomId.toString()) } />;
+                })
+            }
+            { openUserInfo && openUserInfo.map(userId =>
+                {
+                    return <ModToolsUserView key={userId} userId={userId} onCloseClick={ () => handleClick('close_user_info', userId.toString())}/>
+                })
+            }
+            { openUserChatlogs && openUserChatlogs.map(userId =>
+                {
+                    return <ModToolsUserChatlogView key={userId} userId={userId} onCloseClick={ () => handleClick('close_user_chatlog', userId.toString())}/>
+                })
+            }
             
-            { isUserVisible && <ModToolsUserView /> }
             { isTicketsVisible && <ModToolsTicketsView onCloseClick={ () => setIsTicketsVisible(false) } /> }
-            { isChatlogVisible && <ModToolsChatlogView roomId={currentRoomId} onCloseClick={ () => setChatlogVisible(false) }/>}
         </ModToolsContextProvider>
     );
 }
diff --git a/src/views/mod-tools/reducers/ModToolsReducer.tsx b/src/views/mod-tools/reducers/ModToolsReducer.tsx
index 955d70b9..9301e941 100644
--- a/src/views/mod-tools/reducers/ModToolsReducer.tsx
+++ b/src/views/mod-tools/reducers/ModToolsReducer.tsx
@@ -2,48 +2,47 @@ import { Reducer } from 'react';
 
 export interface IModToolsState
 {
-    selectedUser: {webID: number, name: string};
     currentRoomId: number;
     openRooms: number[];
-    openChatlogs: number[];
+    openRoomChatlogs: number[];
+    openUserInfo: number[];
+    openUserChatlogs: number[];
 }
 
 export interface IModToolsAction
 {
     type: string;
     payload: {
-        selectedUser?: {webID: number, name: string};
         currentRoomId?: number;
         openRooms?: number[];
-        openChatlogs?: number[];
+        openRoomChatlogs?: number[];
+        openUserInfo?: number[];
+        openUserChatlogs?: number[];
     }
 }
 
 export class ModToolsActions
 {
-    public static SET_SELECTED_USER: string = 'MTA_SET_SELECTED_USER';
     public static SET_CURRENT_ROOM_ID: string = 'MTA_SET_CURRENT_ROOM_ID';
     public static SET_OPEN_ROOMS: string = 'MTA_SET_OPEN_ROOMS';
-    public static SET_OPEN_CHATLOGS: string = 'MTA_SET_OPEN_CHATLOGS';
+    public static SET_OPEN_USERINFO: string = 'MTA_SET_OPEN_USERINFO';
+    public static SET_OPEN_ROOM_CHATLOGS: string = 'MTA_SET_OPEN_CHATLOGS';
+    public static SET_OPEN_USER_CHATLOGS: string = 'MTA_SET_OPEN_USER_CHATLOGS';
     public static RESET_STATE: string = 'MTA_RESET_STATE';
 }
 
 export const initialModTools: IModToolsState = {
-    selectedUser: null,
     currentRoomId: null,
     openRooms: null,
-    openChatlogs: null
+    openRoomChatlogs: null,
+    openUserChatlogs: null,
+    openUserInfo: null
 };
 
 export const ModToolsReducer: Reducer<IModToolsState, IModToolsAction> = (state, action) =>
 {
     switch(action.type)
     {
-        case ModToolsActions.SET_SELECTED_USER: {
-            const selectedUser = (action.payload.selectedUser || state.selectedUser || null);
-
-            return { ...state, selectedUser };
-        }
         case ModToolsActions.SET_CURRENT_ROOM_ID: {
             const currentRoomId = (action.payload.currentRoomId || state.currentRoomId || null);
 
@@ -54,6 +53,21 @@ export const ModToolsReducer: Reducer<IModToolsState, IModToolsAction> = (state,
 
             return { ...state, openRooms };
         }
+        case ModToolsActions.SET_OPEN_USERINFO: {
+            const openUserInfo = (action.payload.openUserInfo || state.openUserInfo || null);
+
+            return { ...state, openUserInfo };
+        }
+        case ModToolsActions.SET_OPEN_ROOM_CHATLOGS: {
+            const openRoomChatlogs = (action.payload.openRoomChatlogs || state.openRoomChatlogs || null);
+
+            return { ...state, openRoomChatlogs };
+        }
+        case ModToolsActions.SET_OPEN_USER_CHATLOGS: {
+            const openUserChatlogs = (action.payload.openUserChatlogs || state.openUserChatlogs || null);
+
+            return { ...state, openUserChatlogs };
+        }
         case ModToolsActions.RESET_STATE: {
             return { ...initialModTools };
         }
diff --git a/src/views/mod-tools/utils/ISelectedUser.ts b/src/views/mod-tools/utils/ISelectedUser.ts
new file mode 100644
index 00000000..c5a657a9
--- /dev/null
+++ b/src/views/mod-tools/utils/ISelectedUser.ts
@@ -0,0 +1,4 @@
+export interface ISelectedUser {
+    userId: number;
+    username: string;
+}
diff --git a/src/views/mod-tools/views/chatlog/ChatlogView.scss b/src/views/mod-tools/views/chatlog/ChatlogView.scss
index 662d0c7a..33df955a 100644
--- a/src/views/mod-tools/views/chatlog/ChatlogView.scss
+++ b/src/views/mod-tools/views/chatlog/ChatlogView.scss
@@ -26,6 +26,10 @@
                     word-break: break-all;
                 }
             }
+
+            .room-info {
+                border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+            }
         }
     }
 }
diff --git a/src/views/mod-tools/views/chatlog/ChatlogView.tsx b/src/views/mod-tools/views/chatlog/ChatlogView.tsx
index 78b3dd07..563bf700 100644
--- a/src/views/mod-tools/views/chatlog/ChatlogView.tsx
+++ b/src/views/mod-tools/views/chatlog/ChatlogView.tsx
@@ -1,16 +1,18 @@
-import { UserProfileComposer } from '@nitrots/nitro-renderer';
-import { FC } from 'react';
+import { ChatRecordData, ModtoolRoomChatlogLine, UserProfileComposer } from '@nitrots/nitro-renderer';
+import { FC, useCallback } from 'react';
 import { AutoSizer, CellMeasurer, CellMeasurerCache, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
-import { SendMessageHook } from '../../../../hooks';
+import { TryVisitRoom } from '../../../../api';
+import { ModToolsOpenRoomInfoEvent } from '../../../../events/mod-tools/ModToolsOpenRoomInfoEvent';
+import { dispatchUiEvent, SendMessageHook } from '../../../../hooks';
 import { ChatlogViewProps } from './ChatlogView.types';
 
 export const ChatlogView: FC<ChatlogViewProps> = props =>
 {
-    const { record = null } = props;
+    const { records = null } = props;
 
-    const rowRenderer: ListRowRenderer = (props: ListRowProps) =>
+    const simpleRowRenderer: ListRowRenderer = (props: ListRowProps) =>
     {
-        const item = record.chatlog[props.index];
+        const item = records[0].chatlog[props.index];
 
         return (
             <CellMeasurer
@@ -29,40 +31,122 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
         );
     };
 
+    const advancedRowRenderer: ListRowRenderer = (props: ListRowProps) =>
+    {
+        let chatlogEntry: ModtoolRoomChatlogLine;
+        let currentRecord: ChatRecordData;
+        let isRoomInfo = false;
+
+        let totalIndex = 0;
+        for(let i = 0; i < records.length; i++)
+        {
+            currentRecord = records[i];
+
+            totalIndex++; // row for room info
+            totalIndex = totalIndex + currentRecord.chatlog.length;
+
+            if(props.index > (totalIndex - 1))
+            {
+                continue; // it is not in current one
+            }
+            
+            if( (props.index + 1) === (totalIndex - currentRecord.chatlog.length))
+            {
+                console.log(`global: ${props.index} roomInfo ${currentRecord.roomName}`);
+                isRoomInfo = true;
+                break;
+            }
+            const index = props.index - (totalIndex - currentRecord.chatlog.length);
+            chatlogEntry = currentRecord.chatlog[index];
+            console.log(`global: ${props.index}  local: ${index}  value: ${chatlogEntry}`);
+            break;
+        }
+
+        return (
+            <CellMeasurer
+                cache={cache}
+                columnIndex={0}
+                key={props.key}
+                parent={props.parent}
+                rowIndex={props.index}
+            >
+                {isRoomInfo && <RoomInfo roomId={currentRecord.roomId} roomName={currentRecord.roomName} uniqueKey={props.key} style={props.style}/>}
+                {!isRoomInfo &&
+                    <div key={props.key} style={props.style} className="row chatlog-entry justify-content-start">
+                        <div className="col-auto text-center">{chatlogEntry.timestamp}</div>
+                        <div className="col-sm-2 justify-content-start username"><span className="fw-bold cursor-pointer" onClick={() => SendMessageHook(new UserProfileComposer(chatlogEntry.userId))}>{chatlogEntry.userName}</span></div>
+                        <div className="col justify-content-start h-100"><span className="text-break text-wrap h-100">{chatlogEntry.message}</span></div>
+                    </div>
+                }
+
+            </CellMeasurer>
+        );
+    }
+
+    const getNumRowsForAdvanced = useCallback(() =>
+    {
+        let count = 0;
+
+        for(let i = 0; i < records.length; i++)
+        {
+            count++; // add room info row
+            count = count + records[i].chatlog.length;
+        }
+
+        return count;
+    }, [records]);
+
     const cache = new CellMeasurerCache({
         defaultHeight: 25,
         fixedWidth: true
     });
 
+    const RoomInfo = useCallback(({ roomId, roomName, uniqueKey, style }) =>
+    {
+        return (
+            <div key={uniqueKey} style={style} className="row justify-content-start gap-2 room-info">
+                <div className="col-7"><span className="fw-bold">Room: </span>{roomName}</div>
+                <button className="btn btn-sm btn-primary col-sm-auto" onClick={() => TryVisitRoom(roomId)}>Visit Room</button>
+                <button className="btn btn-sm btn-primary col-sm-auto" onClick={() => dispatchUiEvent(new ModToolsOpenRoomInfoEvent(roomId))}>Room Tools</button>
+            </div>
+        );
+    }, []);
+
     return (
         <>
-            {record && <div className="chatlog-messages w-100 h-100 overflow-hidden">
-                <div className="row align-items-start w-100">
-                    <div className="col-auto text-center fw-bold">Time</div>
-                    <div className="col-sm-2 username-label fw-bold">User</div>
-                    <div className="col fw-bold">Message</div>
-                </div>
-                <div className="row w-100 h-100 chatlog">
-                    <AutoSizer defaultWidth={400} defaultHeight={200}>
-                        {({ height, width }) => 
-                        {
-                            cache.clearAll();
-                            
-                            return (
-                                <List
-                                    width={width}
-                                    height={height}
-                                    rowCount={record.chatlog.length}
-                                    rowHeight={cache.rowHeight}
-                                    className={'chatlog-container'}
-                                    rowRenderer={rowRenderer}
-                                    deferredMeasurementCache={cache} />
-                            )
-                        }
-                        }
-                    </AutoSizer>
-                </div>
-            </div>}
+            {
+                (records && records.length) &&
+                <>
+                    {(records.length === 1) && <RoomInfo roomId={records[0].roomId} roomName={records[0].roomName} uniqueKey={records[0].roomId} style={{}} />}
+                    <div className="chatlog-messages w-100 h-100 overflow-hidden">
+                        <div className="row align-items-start w-100">
+                            <div className="col-auto text-center fw-bold">Time</div>
+                            <div className="col-sm-2 username-label fw-bold">User</div>
+                            <div className="col fw-bold">Message</div>
+                        </div>
+                        <div className="row w-100 h-100 chatlog">
+                            <AutoSizer defaultWidth={400} defaultHeight={200}>
+                                {({ height, width }) => 
+                                {
+                                    cache.clearAll();
+
+                                    return (
+                                        <List
+                                            width={width}
+                                            height={height}
+                                            rowCount={records.length > 1 ? getNumRowsForAdvanced() : records[0].chatlog.length}
+                                            rowHeight={cache.rowHeight}
+                                            className={'chatlog-container'}
+                                            rowRenderer={records.length > 1 ? advancedRowRenderer : simpleRowRenderer}
+                                            deferredMeasurementCache={cache} />
+                                    )
+                                }
+                                }
+                            </AutoSizer>
+                        </div>
+                    </div>
+                </>
+            }
         </>
     );
 }
diff --git a/src/views/mod-tools/views/chatlog/ChatlogView.types.ts b/src/views/mod-tools/views/chatlog/ChatlogView.types.ts
index edf5ed3e..f307109f 100644
--- a/src/views/mod-tools/views/chatlog/ChatlogView.types.ts
+++ b/src/views/mod-tools/views/chatlog/ChatlogView.types.ts
@@ -2,5 +2,5 @@ import { ChatRecordData } from '@nitrots/nitro-renderer';
 
 export interface ChatlogViewProps
 {
-    record: ChatRecordData;
+    records: ChatRecordData[];
 }
diff --git a/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.scss b/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.scss
deleted file mode 100644
index cf1d0dca..00000000
--- a/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.nitro-mod-tools-room-chatlog {
-    
-}
diff --git a/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.tsx b/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.tsx
index dbf902c6..b1799000 100644
--- a/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.tsx
+++ b/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.tsx
@@ -1,6 +1,5 @@
 import { ChatRecordData, ModtoolRequestRoomChatlogComposer, ModtoolRoomChatlogEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
-import { TryVisitRoom } from '../../../../api';
 import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { ChatlogView } from '../chatlog/ChatlogView';
@@ -28,33 +27,12 @@ export const ModToolsChatlogView: FC<ModToolsChatlogViewProps> = props =>
 
     CreateMessageHook(ModtoolRoomChatlogEvent, onModtoolRoomChatlogEvent);
 
-    const handleClick = useCallback((action: string, value?: string) =>
-    {
-        if(!action) return;
-
-        switch(action)
-        {
-            case 'close':
-                onCloseClick();
-                return;
-            case 'visit_room':
-                TryVisitRoom(roomChatlog.roomId);
-                return;
-        }
-    }, [onCloseClick, roomChatlog]);
-
     return (
         <NitroCardView className="nitro-mod-tools-room-chatlog" simple={true}>
-            <NitroCardHeaderView headerText={'Room Chatlog' + (roomChatlog ? ': ' + roomChatlog.roomName : '')} onCloseClick={event => handleClick('close')} />
+            <NitroCardHeaderView headerText={'Room Chatlog' + (roomChatlog ? ': ' + roomChatlog.roomName : '')} onCloseClick={() => onCloseClick()} />
             <NitroCardContentView className="text-black h-100">
                 {roomChatlog &&
-                    <>
-                        <div className="w-100 d-flex justify-content-start">
-                            <button className="btn btn-sm btn-primary me-2" onClick={event => handleClick('visit_room')}>Visit Room</button>
-                            <button className="btn btn-sm btn-primary">Room Tools</button>
-                        </div>
-                        <ChatlogView record={roomChatlog} />
-                    </>
+                    <ChatlogView records={[roomChatlog]} />
                 }
             </NitroCardContentView>
         </NitroCardView>
diff --git a/src/views/mod-tools/views/room/ModToolsRoomView.scss b/src/views/mod-tools/views/room/ModToolsRoomView.scss
index 55ed938a..4faa2b33 100644
--- a/src/views/mod-tools/views/room/ModToolsRoomView.scss
+++ b/src/views/mod-tools/views/room/ModToolsRoomView.scss
@@ -1,3 +1,8 @@
 .nitro-mod-tools-room {
     width: 240px;
+
+    .username {
+        color: #1E7295;
+        text-decoration: underline;
+    }
 }
diff --git a/src/views/mod-tools/views/room/ModToolsRoomView.tsx b/src/views/mod-tools/views/room/ModToolsRoomView.tsx
index c236a9d2..a6bd2a7b 100644
--- a/src/views/mod-tools/views/room/ModToolsRoomView.tsx
+++ b/src/views/mod-tools/views/room/ModToolsRoomView.tsx
@@ -1,5 +1,8 @@
 import { ModtoolRequestRoomInfoComposer, ModtoolRoomInfoEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
+import { TryVisitRoom } from '../../../../api';
+import { ModToolsOpenRoomChatlogEvent } from '../../../../events/mod-tools/ModToolsOpenRoomChatlogEvent';
+import { dispatchUiEvent } from '../../../../hooks';
 import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { ModToolsRoomViewProps } from './ModToolsRoomView.types';
@@ -57,15 +60,15 @@ export const ModToolsRoomView: FC<ModToolsRoomViewProps> = props =>
             <NitroCardContentView className="text-black">
                 <div className="d-flex justify-content-between align-items-center mb-1">
                     <div>
-                        <b>Room Owner:</b> <a href="#" className="fw-bold">{ ownerName }</a>
+                        <b>Room Owner:</b> <span className="username fw-bold cursor-pointer">{ ownerName }</span>
                     </div>
-                    <button className="btn btn-sm btn-primary">Visit Room</button>
+                    <button className="btn btn-sm btn-primary" onClick={() => TryVisitRoom(roomId)}>Visit Room</button>
                 </div>
                 <div className="d-flex justify-content-between align-items-center mb-1">
                     <div>
                         <b>Users in room:</b> { usersInRoom }
                     </div>
-                    <button className="btn btn-sm btn-primary">Chatlog</button>
+                    <button className="btn btn-sm btn-primary" onClick={() => dispatchUiEvent(new ModToolsOpenRoomChatlogEvent(roomId))}>Chatlog</button>
                 </div>
                 <div className="d-flex justify-content-between align-items-center mb-2">
                     <div>
diff --git a/src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.tsx b/src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.tsx
new file mode 100644
index 00000000..23b1590d
--- /dev/null
+++ b/src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.tsx
@@ -0,0 +1,41 @@
+import { ChatRecordData, ModtoolRequestUserChatlogComposer, ModtoolUserChatlogEvent } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { CreateMessageHook, SendMessageHook } from '../../../../hooks';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
+import { ChatlogView } from '../chatlog/ChatlogView';
+import { ModToolsUserChatlogViewProps } from './ModToolsUserChatlogView.types';
+
+export const ModToolsUserChatlogView: FC<ModToolsUserChatlogViewProps> = props =>
+{
+    const { userId = null, onCloseClick = null } = props;
+    const [userChatlog, setUserChatlog] = useState<ChatRecordData[]>(null);
+    const [username, setUsername] = useState<string>(null);
+
+    useEffect(() =>
+    {
+        SendMessageHook(new ModtoolRequestUserChatlogComposer(userId));
+    }, [userId]);
+    
+    const onModtoolUserChatlogEvent = useCallback((event: ModtoolUserChatlogEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!parser) return;
+
+        setUsername(parser.username);
+        setUserChatlog(parser.roomVisits);
+    }, [setUsername, setUserChatlog]);
+
+    CreateMessageHook(ModtoolUserChatlogEvent, onModtoolUserChatlogEvent);
+
+    return (
+        <NitroCardView className="nitro-mod-tools-user-chatlog" simple={true}>
+            <NitroCardHeaderView headerText={'User Chatlog' + (username ? ': ' + username : '')} onCloseClick={() => onCloseClick()} />
+            <NitroCardContentView className="text-black h-100">
+                {userChatlog &&
+                    <ChatlogView records={userChatlog} />
+                }
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}
diff --git a/src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.types.ts b/src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.types.ts
new file mode 100644
index 00000000..c8eea569
--- /dev/null
+++ b/src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.types.ts
@@ -0,0 +1,5 @@
+export interface ModToolsUserChatlogViewProps
+{
+    userId: number;
+    onCloseClick: () => void;
+}
diff --git a/src/views/mod-tools/views/user/ModToolsUserView.scss b/src/views/mod-tools/views/user/ModToolsUserView.scss
new file mode 100644
index 00000000..05757d6c
--- /dev/null
+++ b/src/views/mod-tools/views/user/ModToolsUserView.scss
@@ -0,0 +1,8 @@
+.nitro-mod-tools-user {
+    width: 240px;
+    
+    .username {
+        color: #1E7295;
+        text-decoration: underline;
+    }
+}
diff --git a/src/views/mod-tools/views/user/ModToolsUserView.tsx b/src/views/mod-tools/views/user/ModToolsUserView.tsx
index d3a2f076..03c109fa 100644
--- a/src/views/mod-tools/views/user/ModToolsUserView.tsx
+++ b/src/views/mod-tools/views/user/ModToolsUserView.tsx
@@ -1,14 +1,58 @@
-import { FC } from 'react';
+import { ModeratorUserInfoData, ModtoolRequestUserInfoComposer, ModtoolUserInfoEvent } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { ModToolsOpenUserChatlogEvent } from '../../../../events/mod-tools/ModToolsOpenUserChatlogEvent';
+import { CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
+import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
 import { ModToolsUserViewProps } from './ModToolsUserView.types';
 
 export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
 {
+    const { onCloseClick = null, userId = null, simple = true } = props;
+    const [userInfo, setUserInfo] = useState<ModeratorUserInfoData>(null);
+
+    useEffect(() =>
+    {
+        SendMessageHook(new ModtoolRequestUserInfoComposer(userId));
+    }, [userId]);
+
+
+    const onModtoolUserInfoEvent = useCallback((event: ModtoolUserInfoEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!parser) return;
+
+        console.log(parser);
+        setUserInfo(parser.data);
+    }, [setUserInfo]);
+
+    CreateMessageHook(ModtoolUserInfoEvent, onModtoolUserInfoEvent);
+    
     return (
-        <NitroCardView className="nitro-mod-tools-user" simple={ true }>
-            <NitroCardHeaderView headerText={ 'User Info' } onCloseClick={ event => {} } />
+        <NitroCardView className="nitro-mod-tools-user" simple={true}>
+            <NitroCardHeaderView headerText={'User Info: ' + (userInfo ? userInfo.userName : '')} onCloseClick={() => onCloseClick()} />
             <NitroCardContentView className="text-black">
-               
+                {userInfo &&
+                    <>
+                        {!simple &&
+                            <div className="col-sm-3 px-0 d-flex align-items-center">
+                                <AvatarImageView figure={userInfo.figure} direction={2} />
+                            </div>
+                        }
+                        <div className="d-flex justify-content-between align-items-center mb-1">
+                            <div>
+                                <b>Name:</b> <span className="username fw-bold cursor-pointer">{userInfo.userName}</span>
+                            </div>
+                            <button className="btn btn-sm btn-primary" onClick={() => dispatchUiEvent(new ModToolsOpenUserChatlogEvent(userId))}>Chatlog</button>
+                        </div>
+                        <div className="d-flex justify-content-between align-items-center mb-1">
+                            <div>
+                                <b>CFHs:</b> {userInfo.cfhCount}
+                            </div>
+                        </div>
+                    </>
+                }
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/views/mod-tools/views/user/ModToolsUserView.types.ts b/src/views/mod-tools/views/user/ModToolsUserView.types.ts
index 55b9477c..21d30670 100644
--- a/src/views/mod-tools/views/user/ModToolsUserView.types.ts
+++ b/src/views/mod-tools/views/user/ModToolsUserView.types.ts
@@ -1,2 +1,6 @@
 export interface ModToolsUserViewProps
-{}
+{
+    userId: number;
+    onCloseClick: () => void;
+    simple?: boolean;
+}

From 8b4a09bdf68c7b1d960b5467be9146740f600f17 Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Tue, 19 Oct 2021 16:35:46 -0500
Subject: [PATCH 08/29] remove console logs

---
 src/views/mod-tools/views/chatlog/ChatlogView.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/views/mod-tools/views/chatlog/ChatlogView.tsx b/src/views/mod-tools/views/chatlog/ChatlogView.tsx
index 563bf700..426fd5a6 100644
--- a/src/views/mod-tools/views/chatlog/ChatlogView.tsx
+++ b/src/views/mod-tools/views/chatlog/ChatlogView.tsx
@@ -52,13 +52,11 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
             
             if( (props.index + 1) === (totalIndex - currentRecord.chatlog.length))
             {
-                console.log(`global: ${props.index} roomInfo ${currentRecord.roomName}`);
                 isRoomInfo = true;
                 break;
             }
             const index = props.index - (totalIndex - currentRecord.chatlog.length);
             chatlogEntry = currentRecord.chatlog[index];
-            console.log(`global: ${props.index}  local: ${index}  value: ${chatlogEntry}`);
             break;
         }
 

From c959bbc25547a1ce54d60374e248c971998622a7 Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Tue, 19 Oct 2021 16:41:13 -0500
Subject: [PATCH 09/29] fix mod tools packet listener

---
 .../mod-tools/views/room-chatlog/ModToolsChatlogView.tsx     | 4 ++--
 src/views/mod-tools/views/room/ModToolsRoomView.tsx          | 4 +++-
 .../mod-tools/views/user-chatlog/ModToolsUserChatlogView.tsx | 4 ++--
 src/views/mod-tools/views/user/ModToolsUserView.tsx          | 5 ++---
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.tsx b/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.tsx
index b1799000..2c23264f 100644
--- a/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.tsx
+++ b/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.tsx
@@ -20,10 +20,10 @@ export const ModToolsChatlogView: FC<ModToolsChatlogViewProps> = props =>
     {
         const parser = event.getParser();
 
-        if(!parser) return;
+        if(!parser || parser.data.roomId !== roomId) return;
 
         setRoomChatlog(parser.data);
-    }, [setRoomChatlog]);
+    }, [roomId, setRoomChatlog]);
 
     CreateMessageHook(ModtoolRoomChatlogEvent, onModtoolRoomChatlogEvent);
 
diff --git a/src/views/mod-tools/views/room/ModToolsRoomView.tsx b/src/views/mod-tools/views/room/ModToolsRoomView.tsx
index a6bd2a7b..31d8459f 100644
--- a/src/views/mod-tools/views/room/ModToolsRoomView.tsx
+++ b/src/views/mod-tools/views/room/ModToolsRoomView.tsx
@@ -32,13 +32,15 @@ export const ModToolsRoomView: FC<ModToolsRoomViewProps> = props =>
     {
         const parser = event.getParser();
 
+        if(!parser || parser.id !== roomId) return;
+
         setLoadedRoomId(parser.id);
         setName(parser.name);
         setOwnerId(parser.ownerId);
         setOwnerName(parser.ownerName);
         setOwnerInRoom(parser.ownerInRoom);
         setUsersInRoom(parser.playerAmount);
-    }, [ setLoadedRoomId, setName, setOwnerId, setOwnerName, setOwnerInRoom, setUsersInRoom ]);
+    }, [ setLoadedRoomId, setName, setOwnerId, setOwnerName, setOwnerInRoom, setUsersInRoom, roomId ]);
 
     CreateMessageHook(ModtoolRoomInfoEvent, onModtoolRoomInfoEvent);
 
diff --git a/src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.tsx b/src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.tsx
index 23b1590d..d2ca9bd0 100644
--- a/src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.tsx
+++ b/src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.tsx
@@ -20,11 +20,11 @@ export const ModToolsUserChatlogView: FC<ModToolsUserChatlogViewProps> = props =
     {
         const parser = event.getParser();
 
-        if(!parser) return;
+        if(!parser || parser.userId !== userId) return;
 
         setUsername(parser.username);
         setUserChatlog(parser.roomVisits);
-    }, [setUsername, setUserChatlog]);
+    }, [setUsername, setUserChatlog, userId]);
 
     CreateMessageHook(ModtoolUserChatlogEvent, onModtoolUserChatlogEvent);
 
diff --git a/src/views/mod-tools/views/user/ModToolsUserView.tsx b/src/views/mod-tools/views/user/ModToolsUserView.tsx
index 03c109fa..373bd2df 100644
--- a/src/views/mod-tools/views/user/ModToolsUserView.tsx
+++ b/src/views/mod-tools/views/user/ModToolsUserView.tsx
@@ -21,11 +21,10 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
     {
         const parser = event.getParser();
 
-        if(!parser) return;
+        if(!parser || parser.data.userId !== userId) return;
 
-        console.log(parser);
         setUserInfo(parser.data);
-    }, [setUserInfo]);
+    }, [setUserInfo, userId]);
 
     CreateMessageHook(ModtoolUserInfoEvent, onModtoolUserInfoEvent);
     

From e81cc1e7fd4a51e6c069eb2c5e6f7092573ea2e7 Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Tue, 19 Oct 2021 19:04:58 -0500
Subject: [PATCH 10/29] style changes

---
 src/views/mod-tools/ModToolsView.scss         |   4 +-
 src/views/mod-tools/ModToolsView.tsx          |   8 +-
 src/views/mod-tools/utils/IUserInfo.ts        |   6 +
 .../mod-tools/views/chatlog/ChatlogView.scss  |   1 +
 .../room-chatlog/ModToolsChatlogView.tsx      |   6 +-
 .../room-chatlog/ModToolsChatlogView.types.ts |   0
 .../{ => room-tools}/ModToolsRoomView.scss    |   0
 .../{ => room-tools}/ModToolsRoomView.tsx     |  46 +++--
 .../ModToolsRoomView.types.ts                 |   0
 .../views/user/ModToolsUserView.scss          |   8 -
 .../mod-tools/views/user/ModToolsUserView.tsx |  58 -------
 .../user-chatlog/ModToolsUserChatlogView.tsx  |   6 +-
 .../ModToolsUserChatlogView.types.ts          |   0
 .../user/user-info/ModToolsUserView.scss      |  27 +++
 .../views/user/user-info/ModToolsUserView.tsx | 161 ++++++++++++++++++
 .../{ => user-info}/ModToolsUserView.types.ts |   0
 16 files changed, 236 insertions(+), 95 deletions(-)
 create mode 100644 src/views/mod-tools/utils/IUserInfo.ts
 rename src/views/mod-tools/views/{ => room}/room-chatlog/ModToolsChatlogView.tsx (93%)
 rename src/views/mod-tools/views/{ => room}/room-chatlog/ModToolsChatlogView.types.ts (100%)
 rename src/views/mod-tools/views/room/{ => room-tools}/ModToolsRoomView.scss (100%)
 rename src/views/mod-tools/views/room/{ => room-tools}/ModToolsRoomView.tsx (68%)
 rename src/views/mod-tools/views/room/{ => room-tools}/ModToolsRoomView.types.ts (100%)
 delete mode 100644 src/views/mod-tools/views/user/ModToolsUserView.scss
 delete mode 100644 src/views/mod-tools/views/user/ModToolsUserView.tsx
 rename src/views/mod-tools/views/{ => user}/user-chatlog/ModToolsUserChatlogView.tsx (94%)
 rename src/views/mod-tools/views/{ => user}/user-chatlog/ModToolsUserChatlogView.types.ts (100%)
 create mode 100644 src/views/mod-tools/views/user/user-info/ModToolsUserView.scss
 create mode 100644 src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx
 rename src/views/mod-tools/views/user/{ => user-info}/ModToolsUserView.types.ts (100%)

diff --git a/src/views/mod-tools/ModToolsView.scss b/src/views/mod-tools/ModToolsView.scss
index 73b4142d..c340a20f 100644
--- a/src/views/mod-tools/ModToolsView.scss
+++ b/src/views/mod-tools/ModToolsView.scss
@@ -2,6 +2,6 @@
     width: 200px;
 }
 
-@import './views/room/ModToolsRoomView';
+@import './views/room/room-tools/ModToolsRoomView';
 @import './views/chatlog/ChatlogView';
-@import './views/user/ModToolsUserView';
+@import './views/user/user-info/ModToolsUserView';
diff --git a/src/views/mod-tools/ModToolsView.tsx b/src/views/mod-tools/ModToolsView.tsx
index 3c5dec10..71964dc0 100644
--- a/src/views/mod-tools/ModToolsView.tsx
+++ b/src/views/mod-tools/ModToolsView.tsx
@@ -13,11 +13,11 @@ import { ModToolsContextProvider } from './context/ModToolsContext';
 import { ModToolsViewProps } from './ModToolsView.types';
 import { initialModTools, ModToolsActions, ModToolsReducer } from './reducers/ModToolsReducer';
 import { ISelectedUser } from './utils/ISelectedUser';
-import { ModToolsChatlogView } from './views/room-chatlog/ModToolsChatlogView';
-import { ModToolsRoomView } from './views/room/ModToolsRoomView';
+import { ModToolsChatlogView } from './views/room/room-chatlog/ModToolsChatlogView';
+import { ModToolsRoomView } from './views/room/room-tools/ModToolsRoomView';
 import { ModToolsTicketsView } from './views/tickets/ModToolsTicketsView';
-import { ModToolsUserChatlogView } from './views/user-chatlog/ModToolsUserChatlogView';
-import { ModToolsUserView } from './views/user/ModToolsUserView';
+import { ModToolsUserChatlogView } from './views/user/user-chatlog/ModToolsUserChatlogView';
+import { ModToolsUserView } from './views/user/user-info/ModToolsUserView';
 
 export const ModToolsView: FC<ModToolsViewProps> = props =>
 {
diff --git a/src/views/mod-tools/utils/IUserInfo.ts b/src/views/mod-tools/utils/IUserInfo.ts
new file mode 100644
index 00000000..8d49aa74
--- /dev/null
+++ b/src/views/mod-tools/utils/IUserInfo.ts
@@ -0,0 +1,6 @@
+export interface IUserInfo
+{
+    nameKey: string;
+    nameKeyFallback: string;
+    value: string;
+}
diff --git a/src/views/mod-tools/views/chatlog/ChatlogView.scss b/src/views/mod-tools/views/chatlog/ChatlogView.scss
index 33df955a..0b61e1d1 100644
--- a/src/views/mod-tools/views/chatlog/ChatlogView.scss
+++ b/src/views/mod-tools/views/chatlog/ChatlogView.scss
@@ -29,6 +29,7 @@
 
             .room-info {
                 border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+                background: rgba(0, 0, 0, .05);
             }
         }
     }
diff --git a/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.tsx b/src/views/mod-tools/views/room/room-chatlog/ModToolsChatlogView.tsx
similarity index 93%
rename from src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.tsx
rename to src/views/mod-tools/views/room/room-chatlog/ModToolsChatlogView.tsx
index 2c23264f..77573e30 100644
--- a/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.tsx
+++ b/src/views/mod-tools/views/room/room-chatlog/ModToolsChatlogView.tsx
@@ -1,8 +1,8 @@
 import { ChatRecordData, ModtoolRequestRoomChatlogComposer, ModtoolRoomChatlogEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
-import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
-import { ChatlogView } from '../chatlog/ChatlogView';
+import { CreateMessageHook, SendMessageHook } from '../../../../../hooks/messages';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
+import { ChatlogView } from '../../chatlog/ChatlogView';
 import { ModToolsChatlogViewProps } from './ModToolsChatlogView.types';
 
 export const ModToolsChatlogView: FC<ModToolsChatlogViewProps> = props =>
diff --git a/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.types.ts b/src/views/mod-tools/views/room/room-chatlog/ModToolsChatlogView.types.ts
similarity index 100%
rename from src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.types.ts
rename to src/views/mod-tools/views/room/room-chatlog/ModToolsChatlogView.types.ts
diff --git a/src/views/mod-tools/views/room/ModToolsRoomView.scss b/src/views/mod-tools/views/room/room-tools/ModToolsRoomView.scss
similarity index 100%
rename from src/views/mod-tools/views/room/ModToolsRoomView.scss
rename to src/views/mod-tools/views/room/room-tools/ModToolsRoomView.scss
diff --git a/src/views/mod-tools/views/room/ModToolsRoomView.tsx b/src/views/mod-tools/views/room/room-tools/ModToolsRoomView.tsx
similarity index 68%
rename from src/views/mod-tools/views/room/ModToolsRoomView.tsx
rename to src/views/mod-tools/views/room/room-tools/ModToolsRoomView.tsx
index 31d8459f..6a5c69e3 100644
--- a/src/views/mod-tools/views/room/ModToolsRoomView.tsx
+++ b/src/views/mod-tools/views/room/room-tools/ModToolsRoomView.tsx
@@ -1,10 +1,10 @@
-import { ModtoolRequestRoomInfoComposer, ModtoolRoomInfoEvent } from '@nitrots/nitro-renderer';
+import { ModerateRoomMessageComposer, ModeratorActionMessageComposer, ModtoolRequestRoomInfoComposer, ModtoolRoomInfoEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
-import { TryVisitRoom } from '../../../../api';
-import { ModToolsOpenRoomChatlogEvent } from '../../../../events/mod-tools/ModToolsOpenRoomChatlogEvent';
-import { dispatchUiEvent } from '../../../../hooks';
-import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
+import { TryVisitRoom } from '../../../../../api';
+import { ModToolsOpenRoomChatlogEvent } from '../../../../../events/mod-tools/ModToolsOpenRoomChatlogEvent';
+import { dispatchUiEvent } from '../../../../../hooks';
+import { CreateMessageHook, SendMessageHook } from '../../../../../hooks/messages';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
 import { ModToolsRoomViewProps } from './ModToolsRoomView.types';
 
 export const ModToolsRoomView: FC<ModToolsRoomViewProps> = props =>
@@ -20,6 +20,12 @@ export const ModToolsRoomView: FC<ModToolsRoomViewProps> = props =>
     const [ ownerInRoom, setOwnerInRoom ] = useState(false);
     const [ usersInRoom, setUsersInRoom ] = useState(0);
 
+    //form data
+    const [kickUsers, setKickUsers] = useState(false);
+    const [lockRoom, setLockRoom] = useState(false);
+    const [changeRoomName, setChangeRoomName] = useState(false);
+    const [message, setMessage] = useState('');
+
     useEffect(() =>
     {
         if(infoRequested) return;
@@ -50,15 +56,21 @@ export const ModToolsRoomView: FC<ModToolsRoomViewProps> = props =>
 
         switch(action)
         {
-            case 'close':
-                onCloseClick();
+            case 'alert_only':
+                if(message.trim().length === 0) return;
+                SendMessageHook(new ModeratorActionMessageComposer(ModeratorActionMessageComposer.ACTION_ALERT, message, ''));
+                return;
+            case 'send_message':
+                if(message.trim().length === 0) return;
+                SendMessageHook(new ModeratorActionMessageComposer(ModeratorActionMessageComposer.ACTION_MESSAGE, message, ''));
+                SendMessageHook(new ModerateRoomMessageComposer(roomId, lockRoom ? 1 : 0, changeRoomName ? 1 : 0, kickUsers ? 1 : 0))
                 return;
         }
-    }, [ onCloseClick ]);
+    }, [changeRoomName, kickUsers, lockRoom, message, roomId]);
 
     return (
         <NitroCardView className="nitro-mod-tools-room" simple={ true }>
-            <NitroCardHeaderView headerText={ 'Room Info' + (name ? ': ' + name : '') } onCloseClick={ event => handleClick('close') } />
+            <NitroCardHeaderView headerText={ 'Room Info' + (name ? ': ' + name : '') } onCloseClick={ () => onCloseClick() } />
             <NitroCardContentView className="text-black">
                 <div className="d-flex justify-content-between align-items-center mb-1">
                     <div>
@@ -80,28 +92,28 @@ export const ModToolsRoomView: FC<ModToolsRoomViewProps> = props =>
                 </div>
                 <div className="bg-muted rounded py-1 px-2 mb-2">
                     <div className="form-check">
-                        <input className="form-check-input" type="checkbox" id="kickUsers" />
+                        <input className="form-check-input" type="checkbox" id="kickUsers" checked={ kickUsers } onChange={e => setKickUsers(e.target.checked)}/>
                         <label className="form-check-label" htmlFor="kickUsers">
                             Kick users out of the room
                         </label>
                     </div>
                     <div className="form-check">
-                        <input className="form-check-input" type="checkbox" id="lockRoom" />
+                        <input className="form-check-input" type="checkbox" id="lockRoom" checked={ lockRoom } onChange={e => setLockRoom(e.target.checked)}/>
                         <label className="form-check-label" htmlFor="lockRoom">
                             Change room lock to doorbell
                         </label>
                     </div>
                     <div className="form-check">
-                        <input className="form-check-input" type="checkbox" id="lockRoom" />
-                        <label className="form-check-label" htmlFor="lockRoom">
+                        <input className="form-check-input" type="checkbox" id="roomName" checked={ changeRoomName } onChange={e => setChangeRoomName(e.target.checked)}/>
+                        <label className="form-check-label" htmlFor="roomName">
                             Change room name to "Inappro- priate to Hotel Management"
                         </label>
                     </div>
                 </div>
-                <textarea className="form-control mb-2" placeholder="Type a mandatory message to the users in this text box..."></textarea>
+                <textarea className="form-control mb-2" placeholder="Type a mandatory message to the users in this text box..." value={message} onChange={e => setMessage(e.target.value)}></textarea>
                 <div className="d-flex justify-content-between">
-                    <button className="btn btn-danger w-100 me-2">Send Caution</button>
-                    <button className="btn btn-success w-100">Send Alert only</button>
+                    <button className="btn btn-danger w-100 me-2" onClick={() => handleClick('send_message')}>Send Caution</button>
+                    <button className="btn btn-success w-100" onClick={() => handleClick('alert_only')}>Send Alert only</button>
                 </div>
             </NitroCardContentView>
         </NitroCardView>
diff --git a/src/views/mod-tools/views/room/ModToolsRoomView.types.ts b/src/views/mod-tools/views/room/room-tools/ModToolsRoomView.types.ts
similarity index 100%
rename from src/views/mod-tools/views/room/ModToolsRoomView.types.ts
rename to src/views/mod-tools/views/room/room-tools/ModToolsRoomView.types.ts
diff --git a/src/views/mod-tools/views/user/ModToolsUserView.scss b/src/views/mod-tools/views/user/ModToolsUserView.scss
deleted file mode 100644
index 05757d6c..00000000
--- a/src/views/mod-tools/views/user/ModToolsUserView.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.nitro-mod-tools-user {
-    width: 240px;
-    
-    .username {
-        color: #1E7295;
-        text-decoration: underline;
-    }
-}
diff --git a/src/views/mod-tools/views/user/ModToolsUserView.tsx b/src/views/mod-tools/views/user/ModToolsUserView.tsx
deleted file mode 100644
index 373bd2df..00000000
--- a/src/views/mod-tools/views/user/ModToolsUserView.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { ModeratorUserInfoData, ModtoolRequestUserInfoComposer, ModtoolUserInfoEvent } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useState } from 'react';
-import { ModToolsOpenUserChatlogEvent } from '../../../../events/mod-tools/ModToolsOpenUserChatlogEvent';
-import { CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
-import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
-import { ModToolsUserViewProps } from './ModToolsUserView.types';
-
-export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
-{
-    const { onCloseClick = null, userId = null, simple = true } = props;
-    const [userInfo, setUserInfo] = useState<ModeratorUserInfoData>(null);
-
-    useEffect(() =>
-    {
-        SendMessageHook(new ModtoolRequestUserInfoComposer(userId));
-    }, [userId]);
-
-
-    const onModtoolUserInfoEvent = useCallback((event: ModtoolUserInfoEvent) =>
-    {
-        const parser = event.getParser();
-
-        if(!parser || parser.data.userId !== userId) return;
-
-        setUserInfo(parser.data);
-    }, [setUserInfo, userId]);
-
-    CreateMessageHook(ModtoolUserInfoEvent, onModtoolUserInfoEvent);
-    
-    return (
-        <NitroCardView className="nitro-mod-tools-user" simple={true}>
-            <NitroCardHeaderView headerText={'User Info: ' + (userInfo ? userInfo.userName : '')} onCloseClick={() => onCloseClick()} />
-            <NitroCardContentView className="text-black">
-                {userInfo &&
-                    <>
-                        {!simple &&
-                            <div className="col-sm-3 px-0 d-flex align-items-center">
-                                <AvatarImageView figure={userInfo.figure} direction={2} />
-                            </div>
-                        }
-                        <div className="d-flex justify-content-between align-items-center mb-1">
-                            <div>
-                                <b>Name:</b> <span className="username fw-bold cursor-pointer">{userInfo.userName}</span>
-                            </div>
-                            <button className="btn btn-sm btn-primary" onClick={() => dispatchUiEvent(new ModToolsOpenUserChatlogEvent(userId))}>Chatlog</button>
-                        </div>
-                        <div className="d-flex justify-content-between align-items-center mb-1">
-                            <div>
-                                <b>CFHs:</b> {userInfo.cfhCount}
-                            </div>
-                        </div>
-                    </>
-                }
-            </NitroCardContentView>
-        </NitroCardView>
-    );
-}
diff --git a/src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.tsx b/src/views/mod-tools/views/user/user-chatlog/ModToolsUserChatlogView.tsx
similarity index 94%
rename from src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.tsx
rename to src/views/mod-tools/views/user/user-chatlog/ModToolsUserChatlogView.tsx
index d2ca9bd0..0da179cb 100644
--- a/src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.tsx
+++ b/src/views/mod-tools/views/user/user-chatlog/ModToolsUserChatlogView.tsx
@@ -1,8 +1,8 @@
 import { ChatRecordData, ModtoolRequestUserChatlogComposer, ModtoolUserChatlogEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
-import { CreateMessageHook, SendMessageHook } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
-import { ChatlogView } from '../chatlog/ChatlogView';
+import { CreateMessageHook, SendMessageHook } from '../../../../../hooks';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
+import { ChatlogView } from '../../chatlog/ChatlogView';
 import { ModToolsUserChatlogViewProps } from './ModToolsUserChatlogView.types';
 
 export const ModToolsUserChatlogView: FC<ModToolsUserChatlogViewProps> = props =>
diff --git a/src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.types.ts b/src/views/mod-tools/views/user/user-chatlog/ModToolsUserChatlogView.types.ts
similarity index 100%
rename from src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.types.ts
rename to src/views/mod-tools/views/user/user-chatlog/ModToolsUserChatlogView.types.ts
diff --git a/src/views/mod-tools/views/user/user-info/ModToolsUserView.scss b/src/views/mod-tools/views/user/user-info/ModToolsUserView.scss
new file mode 100644
index 00000000..202b92fa
--- /dev/null
+++ b/src/views/mod-tools/views/user/user-info/ModToolsUserView.scss
@@ -0,0 +1,27 @@
+.nitro-mod-tools-user {
+    width: 350px;
+    height: 400px;
+
+    .username {
+        color: #1E7295;
+        text-decoration: underline;
+    }
+
+    .table {
+        color: $black;
+
+        > :not(caption) > * > * {
+            box-shadow: none;
+            border-bottom: 1px solid rgba(0, 0, 0, .2);
+        }
+
+        &.table-striped > tbody > tr:nth-of-type(odd) {
+            color: $black;
+            background: rgba(0, 0, 0, .05);
+        }
+
+        td {
+            padding: 0px 5px;
+        }
+    }
+}
diff --git a/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx b/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx
new file mode 100644
index 00000000..762dcc3d
--- /dev/null
+++ b/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx
@@ -0,0 +1,161 @@
+import { FriendlyTime, ModeratorUserInfoData, ModtoolRequestUserInfoComposer, ModtoolUserInfoEvent } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { ModToolsOpenUserChatlogEvent } from '../../../../../events/mod-tools/ModToolsOpenUserChatlogEvent';
+import { CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../../hooks';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
+import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
+import { IUserInfo } from '../../../utils/IUserInfo';
+import { ModToolsUserViewProps } from './ModToolsUserView.types';
+
+
+export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
+{
+    const { onCloseClick = null, userId = null, simple = true } = props;
+    const [userInfo, setUserInfo] = useState<ModeratorUserInfoData>(null);
+
+    useEffect(() =>
+    {
+        SendMessageHook(new ModtoolRequestUserInfoComposer(userId));
+    }, [userId]);
+
+
+    const onModtoolUserInfoEvent = useCallback((event: ModtoolUserInfoEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!parser || parser.data.userId !== userId) return;
+
+        setUserInfo(parser.data);
+    }, [setUserInfo, userId]);
+
+    CreateMessageHook(ModtoolUserInfoEvent, onModtoolUserInfoEvent);
+
+    const OnlineIcon = useCallback(() => 
+    {
+        if(userInfo.online) return (<i className="icon icon-pf-online ml-1" />);
+        else return (<i className="icon icon-pf-offline ml-1" />);
+    }, [userInfo]);
+
+    const userProperties = useCallback(() =>
+    {
+        let properties: IUserInfo[] = [];
+
+        if(!userInfo) return properties;
+
+        properties = [
+            {
+                nameKey: 'name',
+                nameKeyFallback: 'Name',
+                value: userInfo.userName
+            },
+            {
+                nameKey: 'cfhs',
+                nameKeyFallback: 'CFHs',
+                value: userInfo.cfhCount.toString()
+            },
+            {
+                nameKey: 'abusive_cfhs',
+                nameKeyFallback: 'Abusive CFHs',
+                value: userInfo.abusiveCfhCount.toString()
+            },
+            {
+                nameKey: 'cautions',
+                nameKeyFallback: 'Cautions',
+                value: userInfo.cautionCount.toString()
+            },
+            {
+                nameKey: 'bans',
+                nameKeyFallback: 'Bans',
+                value: userInfo.banCount.toString()
+            },
+            {
+                nameKey: 'last_sanction',
+                nameKeyFallback: 'Last sanction',
+                value: userInfo.lastSanctionTime
+            },
+            {
+                nameKey: 'trade_locks',
+                nameKeyFallback: 'Trade locks',
+                value: userInfo.tradingLockCount.toString()
+            },
+            {
+                nameKey: 'lock_expires',
+                nameKeyFallback: 'Lock expires',
+                value: userInfo.tradingExpiryDate
+            },
+            {
+                nameKey: 'last_login',
+                nameKeyFallback: 'Last login',
+                value: FriendlyTime.format(userInfo.minutesSinceLastLogin * 60, '.ago', 2)
+            },
+            {
+                nameKey: 'purchase',
+                nameKeyFallback: 'Purchases',
+                value: userInfo.lastPurchaseDate
+            },
+            {
+                nameKey: 'email',
+                nameKeyFallback: 'Email',
+                value: userInfo.primaryEmailAddress
+            },
+            {
+                nameKey: 'acc_bans',
+                nameKeyFallback: 'Banned Accs.',
+                value: userInfo.identityRelatedBanCount.toString()
+            },
+            {
+                nameKey: 'registered',
+                nameKeyFallback: 'Registered',
+                value: FriendlyTime.format(userInfo.registrationAgeInMinutes * 60, '.ago', 2)
+            },
+            {
+                nameKey: 'rank',
+                nameKeyFallback: 'Rank',
+                value: userInfo.userClassification
+            }
+        ];
+
+        return properties;
+
+    }, [userInfo]);
+
+    return (
+        <NitroCardView className="nitro-mod-tools-user" simple={true}>
+            <NitroCardHeaderView headerText={'User Info: ' + (userInfo ? userInfo.userName : '')} onCloseClick={() => onCloseClick()} />
+            <NitroCardContentView className="text-black">
+                {userInfo &&
+                    <div className="row">
+                        {!simple &&
+                            <div className="col-sm-3 px-0 d-flex align-items-center">
+                                <AvatarImageView figure={userInfo.figure} direction={2} />
+                            </div>
+                        }
+                        <div className="col-7">
+                            <table className="d-flex flex-column table table-striped table-sm table-text-small text-black">
+                                <tbody>
+                                    {userProperties().map(property =>
+                                    {
+                                        return (
+                                            <tr key={property.nameKey}>
+                                                <th scope="row">{property.nameKeyFallback}</th>
+                                                <td className={'' + (property.nameKey === 'name' ? 'username' : '')}>
+                                                    {property.value} {(property.nameKey === 'name') && <OnlineIcon/>}
+                                                </td>
+                                            </tr>
+                                        )
+                                    })}
+                                </tbody>
+                            </table>
+                        </div>
+                        <div className="col-5">
+                            <button className="btn btn-sm btn-primary" onClick={() => dispatchUiEvent(new ModToolsOpenUserChatlogEvent(userId))}>Room Chat</button>
+                            <button className="btn btn-sm btn-primary mt-2">Send Message</button>
+                            <button className="btn btn-sm btn-primary mt-2">Room Visits</button>
+                            <button className="btn btn-sm btn-primary mt-2">Mod Action</button>
+                        </div>
+                    </div>
+                }
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}
diff --git a/src/views/mod-tools/views/user/ModToolsUserView.types.ts b/src/views/mod-tools/views/user/user-info/ModToolsUserView.types.ts
similarity index 100%
rename from src/views/mod-tools/views/user/ModToolsUserView.types.ts
rename to src/views/mod-tools/views/user/user-info/ModToolsUserView.types.ts

From 59dfb8d9b4d58918c2fa1d7ae0521c74e7580689 Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Tue, 19 Oct 2021 21:48:43 -0500
Subject: [PATCH 11/29] added user room visits view

---
 src/views/mod-tools/ModToolsView.scss         |  1 +
 src/views/mod-tools/ModToolsView.tsx          | 19 +++++-
 .../mod-tools/reducers/ModToolsReducer.tsx    | 10 +++
 .../user/user-info/ModToolsUserView.scss      |  2 +-
 .../views/user/user-info/ModToolsUserView.tsx | 17 ++++-
 .../ModToolsUserModActionView.tsx             | 17 +++++
 .../ModToolsUserModActionView.types.ts        |  7 ++
 .../ModToolsUserRoomVisitsView.scss           | 14 ++++
 .../ModToolsUserRoomVisitsView.tsx            | 66 +++++++++++++++++++
 .../ModToolsUserRoomVisitsView.types.ts       |  5 ++
 .../ModToolsSendUserMessage.types.ts          |  7 ++
 .../ModToolsSendUserMessageView.tsx           | 37 +++++++++++
 12 files changed, 197 insertions(+), 5 deletions(-)
 create mode 100644 src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx
 create mode 100644 src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.types.ts
 create mode 100644 src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.scss
 create mode 100644 src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx
 create mode 100644 src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.types.ts
 create mode 100644 src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessage.types.ts
 create mode 100644 src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessageView.tsx

diff --git a/src/views/mod-tools/ModToolsView.scss b/src/views/mod-tools/ModToolsView.scss
index c340a20f..be84aaef 100644
--- a/src/views/mod-tools/ModToolsView.scss
+++ b/src/views/mod-tools/ModToolsView.scss
@@ -5,3 +5,4 @@
 @import './views/room/room-tools/ModToolsRoomView';
 @import './views/chatlog/ChatlogView';
 @import './views/user/user-info/ModToolsUserView';
+@import './views/user/user-room-visits/ModToolsUserRoomVisitsView';
diff --git a/src/views/mod-tools/ModToolsView.tsx b/src/views/mod-tools/ModToolsView.tsx
index 71964dc0..9df029de 100644
--- a/src/views/mod-tools/ModToolsView.tsx
+++ b/src/views/mod-tools/ModToolsView.tsx
@@ -1,4 +1,4 @@
-import { RoomEngineEvent, RoomEngineObjectEvent, RoomObjectCategory } from '@nitrots/nitro-renderer';
+import { ModeratorInitMessageEvent, RoomEngineEvent, RoomEngineObjectEvent, RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useReducer, useState } from 'react';
 import { GetRoomSession } from '../../api';
 import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
@@ -6,6 +6,7 @@ import { ModToolsOpenRoomChatlogEvent } from '../../events/mod-tools/ModToolsOpe
 import { ModToolsOpenRoomInfoEvent } from '../../events/mod-tools/ModToolsOpenRoomInfoEvent';
 import { ModToolsOpenUserChatlogEvent } from '../../events/mod-tools/ModToolsOpenUserChatlogEvent';
 import { ModToolsOpenUserInfoEvent } from '../../events/mod-tools/ModToolsOpenUserInfoEvent';
+import { CreateMessageHook } from '../../hooks';
 import { useRoomEngineEvent } from '../../hooks/events';
 import { dispatchUiEvent, useUiEvent } from '../../hooks/events/ui/ui-event';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
@@ -154,6 +155,22 @@ export const ModToolsView: FC<ModToolsViewProps> = props =>
     
     useRoomEngineEvent(RoomEngineObjectEvent.SELECTED, onRoomEngineObjectEvent);
 
+    const onModeratorInitMessageEvent = useCallback((event: ModeratorInitMessageEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!parser) return;
+
+        dispatchModToolsState({
+            type: ModToolsActions.SET_INIT_DATA,
+            payload: {
+                settings: parser.data
+            }
+        });   
+    }, []);
+
+    CreateMessageHook(ModeratorInitMessageEvent, onModeratorInitMessageEvent);
+
     const handleClick = useCallback((action: string, value?: string) =>
     {
         if(!action) return;
diff --git a/src/views/mod-tools/reducers/ModToolsReducer.tsx b/src/views/mod-tools/reducers/ModToolsReducer.tsx
index 9301e941..c2c9df87 100644
--- a/src/views/mod-tools/reducers/ModToolsReducer.tsx
+++ b/src/views/mod-tools/reducers/ModToolsReducer.tsx
@@ -1,7 +1,9 @@
+import { ModeratorInitData } from '@nitrots/nitro-renderer';
 import { Reducer } from 'react';
 
 export interface IModToolsState
 {
+    settings: ModeratorInitData;
     currentRoomId: number;
     openRooms: number[];
     openRoomChatlogs: number[];
@@ -13,6 +15,7 @@ export interface IModToolsAction
 {
     type: string;
     payload: {
+        settings?: ModeratorInitData;
         currentRoomId?: number;
         openRooms?: number[];
         openRoomChatlogs?: number[];
@@ -23,6 +26,7 @@ export interface IModToolsAction
 
 export class ModToolsActions
 {
+    public static SET_INIT_DATA: string = 'MTA_SET_INIT_DATA';
     public static SET_CURRENT_ROOM_ID: string = 'MTA_SET_CURRENT_ROOM_ID';
     public static SET_OPEN_ROOMS: string = 'MTA_SET_OPEN_ROOMS';
     public static SET_OPEN_USERINFO: string = 'MTA_SET_OPEN_USERINFO';
@@ -32,6 +36,7 @@ export class ModToolsActions
 }
 
 export const initialModTools: IModToolsState = {
+    settings: null,
     currentRoomId: null,
     openRooms: null,
     openRoomChatlogs: null,
@@ -43,6 +48,11 @@ export const ModToolsReducer: Reducer<IModToolsState, IModToolsAction> = (state,
 {
     switch(action.type)
     {
+        case ModToolsActions.SET_INIT_DATA: {
+            const data = (action.payload.settings || state.settings || null);
+
+            return { ...state, data };
+        }
         case ModToolsActions.SET_CURRENT_ROOM_ID: {
             const currentRoomId = (action.payload.currentRoomId || state.currentRoomId || null);
 
diff --git a/src/views/mod-tools/views/user/user-info/ModToolsUserView.scss b/src/views/mod-tools/views/user/user-info/ModToolsUserView.scss
index 202b92fa..cb138384 100644
--- a/src/views/mod-tools/views/user/user-info/ModToolsUserView.scss
+++ b/src/views/mod-tools/views/user/user-info/ModToolsUserView.scss
@@ -1,6 +1,6 @@
 .nitro-mod-tools-user {
     width: 350px;
-    height: 400px;
+    height: 370px;
 
     .username {
         color: #1E7295;
diff --git a/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx b/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx
index 762dcc3d..b056553b 100644
--- a/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx
+++ b/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx
@@ -5,6 +5,9 @@ import { CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../..
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
 import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
 import { IUserInfo } from '../../../utils/IUserInfo';
+import { ModToolsUserModActionView } from '../user-mod-action/ModToolsUserModActionView';
+import { ModToolsUserRoomVisitsView } from '../user-room-visits/ModToolsUserRoomVisitsView';
+import { ModToolsSendUserMessageView } from '../user-sendmessage/ModToolsSendUserMessageView';
 import { ModToolsUserViewProps } from './ModToolsUserView.types';
 
 
@@ -12,6 +15,9 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
 {
     const { onCloseClick = null, userId = null, simple = true } = props;
     const [userInfo, setUserInfo] = useState<ModeratorUserInfoData>(null);
+    const [sendMessageVisible, setSendMessageVisible] = useState(false);
+    const [modActionVisible, setModActionVisible] = useState(false);
+    const [roomVisitsVisible, setRoomVisitsVisible] = useState(false);
 
     useEffect(() =>
     {
@@ -120,6 +126,7 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
     }, [userInfo]);
 
     return (
+        <>
         <NitroCardView className="nitro-mod-tools-user" simple={true}>
             <NitroCardHeaderView headerText={'User Info: ' + (userInfo ? userInfo.userName : '')} onCloseClick={() => onCloseClick()} />
             <NitroCardContentView className="text-black">
@@ -149,13 +156,17 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
                         </div>
                         <div className="col-5">
                             <button className="btn btn-sm btn-primary" onClick={() => dispatchUiEvent(new ModToolsOpenUserChatlogEvent(userId))}>Room Chat</button>
-                            <button className="btn btn-sm btn-primary mt-2">Send Message</button>
-                            <button className="btn btn-sm btn-primary mt-2">Room Visits</button>
-                            <button className="btn btn-sm btn-primary mt-2">Mod Action</button>
+                            <button className="btn btn-sm btn-primary mt-2" onClick={ () => setSendMessageVisible(!sendMessageVisible)}>Send Message</button>
+                            <button className="btn btn-sm btn-primary mt-2" onClick={ () => setRoomVisitsVisible(!roomVisitsVisible)}>Room Visits</button>
+                            <button className="btn btn-sm btn-primary mt-2" onClick={ () => setModActionVisible(!modActionVisible)}>Mod Action</button>
                         </div>
                     </div>
                 }
             </NitroCardContentView>
         </NitroCardView>
+        {(sendMessageVisible && userInfo) && <ModToolsSendUserMessageView user={{ userId: userId, username: userInfo.userName }} onCloseClick={ () => setSendMessageVisible(false)}/>}
+        {(userInfo && modActionVisible) && <ModToolsUserModActionView user={{ userId: userId, username: userInfo.userName }} onCloseClick={() => setModActionVisible(false)}/>}
+        {(userInfo && roomVisitsVisible) && <ModToolsUserRoomVisitsView userId={userId} onCloseClick={ () => setRoomVisitsVisible(false)}/>}
+        </>
     );
 }
diff --git a/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx b/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx
new file mode 100644
index 00000000..c78f12f6
--- /dev/null
+++ b/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx
@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
+import { ModToolsUserModActionViewProps } from './ModToolsUserModActionView.types';
+
+export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = props =>
+{
+    const { user = null, onCloseClick = null } = props;
+
+    return (
+        <NitroCardView className="nitro-mod-tools-user-action" simple={true}>
+            <NitroCardHeaderView headerText={'Mod Action'} onCloseClick={() => onCloseClick()} />
+            <NitroCardContentView className="text-black">
+                {user && <div></div>}
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}
diff --git a/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.types.ts b/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.types.ts
new file mode 100644
index 00000000..2025d10d
--- /dev/null
+++ b/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.types.ts
@@ -0,0 +1,7 @@
+import { ISelectedUser } from '../../../utils/ISelectedUser';
+
+export interface ModToolsUserModActionViewProps
+{
+    user: ISelectedUser;
+    onCloseClick: () => void;
+}
diff --git a/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.scss b/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.scss
new file mode 100644
index 00000000..46efbaa5
--- /dev/null
+++ b/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.scss
@@ -0,0 +1,14 @@
+.nitro-mod-tools-user-visits {
+    min-width: 300px;
+
+    .user-visits {
+        min-height: 200px;
+
+        .roomvisits-container {
+            div.room-visit {
+                border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+            }
+        }
+        
+    }
+}
diff --git a/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx b/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx
new file mode 100644
index 00000000..8d1a709e
--- /dev/null
+++ b/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx
@@ -0,0 +1,66 @@
+import { ModtoolReceivedRoomsUserEvent, ModtoolRequestUserRoomsComposer, ModtoolRoomVisitedData } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { AutoSizer, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
+import { CreateMessageHook, SendMessageHook } from '../../../../../hooks';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
+import { ModToolsUserRoomVisitsViewProps } from './ModToolsUserRoomVisitsView.types';
+
+export const ModToolsUserRoomVisitsView: FC<ModToolsUserRoomVisitsViewProps> = props =>
+{
+    const { userId = null, onCloseClick = null } = props;
+
+    const [roomVisitData, setRoomVisitData] = useState<ModtoolRoomVisitedData>(null);
+
+    useEffect(() =>
+    {
+        SendMessageHook(new ModtoolRequestUserRoomsComposer(userId));
+    }, [userId]);
+
+    const onModtoolReceivedRoomsUserEvent = useCallback((event: ModtoolReceivedRoomsUserEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!parser || parser.data.userId !== userId) return;
+
+        setRoomVisitData(parser.data);
+    }, [userId]);
+
+    CreateMessageHook(ModtoolReceivedRoomsUserEvent, onModtoolReceivedRoomsUserEvent);
+
+    const RowRenderer: ListRowRenderer = (props: ListRowProps) =>
+    {
+        const item = roomVisitData.rooms[props.index];
+
+        return (
+        <div style={props.style} key={props.key} className="room-visit">
+            {item.enterHour}:{item.enterMinute} <b>Room:</b> {item.roomName}
+        </div>);
+    }
+
+    return (
+        <NitroCardView className="nitro-mod-tools-user-visits" simple={true}>
+            <NitroCardHeaderView headerText={'User Visits'} onCloseClick={() => onCloseClick()} />
+            <NitroCardContentView className="text-black">
+                {roomVisitData &&
+                <div className="row h-100 w-100 user-visits">
+                    <AutoSizer defaultWidth={400} defaultHeight={200}>
+                    {({ height, width }) => 
+                    {
+                        return (
+                            <List
+                                width={width}
+                                height={height}
+                                rowCount={roomVisitData.rooms.length}
+                                rowHeight={25}
+                                className={'roomvisits-container'}
+                                rowRenderer={RowRenderer}
+                            />
+                        )
+                    }}
+                    </AutoSizer>
+                    </div>
+                }
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}
diff --git a/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.types.ts b/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.types.ts
new file mode 100644
index 00000000..8aaebec5
--- /dev/null
+++ b/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.types.ts
@@ -0,0 +1,5 @@
+export interface ModToolsUserRoomVisitsViewProps
+{
+    userId: number;
+    onCloseClick: () => void;
+}
diff --git a/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessage.types.ts b/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessage.types.ts
new file mode 100644
index 00000000..617945f0
--- /dev/null
+++ b/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessage.types.ts
@@ -0,0 +1,7 @@
+import { ISelectedUser } from '../../../utils/ISelectedUser';
+
+export interface ModToolsSendUserMessageViewProps
+{
+    user: ISelectedUser;
+    onCloseClick: () => void;
+}
diff --git a/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessageView.tsx b/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessageView.tsx
new file mode 100644
index 00000000..7305bf93
--- /dev/null
+++ b/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessageView.tsx
@@ -0,0 +1,37 @@
+import { ModMessageMessageComposer } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useState } from 'react';
+import { SendMessageHook } from '../../../../../hooks';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
+import { ModToolsSendUserMessageViewProps } from './ModToolsSendUserMessage.types';
+
+export const ModToolsSendUserMessageView: FC<ModToolsSendUserMessageViewProps> = props =>
+{
+    const { user = null, onCloseClick = null } = props;
+    const [message, setMessage] = useState('');
+
+
+    const sendMessage = useCallback(() =>
+    {
+        if(message.trim().length === 0) return;
+
+        SendMessageHook(new ModMessageMessageComposer(user.userId, message, -999));
+    }, [message, user.userId]);
+
+    return (
+        <NitroCardView className="nitro-mod-tools-user-message" simple={true}>
+            <NitroCardHeaderView headerText={'Send Message'} onCloseClick={() => onCloseClick()} />
+            <NitroCardContentView className="text-black">
+                {user && <>
+                    <div>Message To: {user.username}</div>
+                    <div className="form-group mb-2">
+                        <textarea className="form-control" value={message} onChange={e => setMessage(e.target.value)}></textarea>
+                    </div>
+
+                    <div className="form-group mb-2">
+                        <button type="button" className="btn btn-primary" onClick={ () => sendMessage()}>Send message</button>
+                    </div>
+                </>}
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}

From 0f7b13a8fc5d6e056fcaff55868ced85077fb6b9 Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Wed, 20 Oct 2021 01:01:26 -0500
Subject: [PATCH 12/29] style changes to room visits

---
 src/views/mod-tools/ModToolsView.tsx          | 12 ++----
 .../ModToolsUserRoomVisitsView.tsx            | 41 ++++++++++---------
 2 files changed, 25 insertions(+), 28 deletions(-)

diff --git a/src/views/mod-tools/ModToolsView.tsx b/src/views/mod-tools/ModToolsView.tsx
index 9df029de..45ea7b46 100644
--- a/src/views/mod-tools/ModToolsView.tsx
+++ b/src/views/mod-tools/ModToolsView.tsx
@@ -184,9 +184,7 @@ export const ModToolsView: FC<ModToolsViewProps> = props =>
                     return;
                 }
 
-                const itemIndex = openRooms.indexOf(currentRoomId);
-
-                if(itemIndex > -1)
+                if(openRooms.indexOf(currentRoomId) > -1)
                 {
                     handleClick('close_room', currentRoomId.toString());
                 }
@@ -217,9 +215,7 @@ export const ModToolsView: FC<ModToolsViewProps> = props =>
                     return;
                 }
 
-                const itemIndex = openRoomChatlogs.indexOf(currentRoomId);
-
-                if(itemIndex > -1)
+                if(openRoomChatlogs.indexOf(currentRoomId) > -1)
                 {
                     handleClick('close_room_chatlog', currentRoomId.toString());
                 }
@@ -255,9 +251,7 @@ export const ModToolsView: FC<ModToolsViewProps> = props =>
                     return;
                 }
 
-                const itemIndex = openUserInfo.indexOf(userId);
-
-                if(itemIndex > -1)
+                if(openUserInfo.indexOf(userId) > -1)
                 {
                     handleClick('close_user_info', userId.toString());
                 }
diff --git a/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx b/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx
index 8d1a709e..1bc05a91 100644
--- a/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx
+++ b/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx
@@ -1,6 +1,7 @@
 import { ModtoolReceivedRoomsUserEvent, ModtoolRequestUserRoomsComposer, ModtoolRoomVisitedData } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { AutoSizer, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
+import { TryVisitRoom } from '../../../../../api';
 import { CreateMessageHook, SendMessageHook } from '../../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
 import { ModToolsUserRoomVisitsViewProps } from './ModToolsUserRoomVisitsView.types';
@@ -32,9 +33,11 @@ export const ModToolsUserRoomVisitsView: FC<ModToolsUserRoomVisitsViewProps> = p
         const item = roomVisitData.rooms[props.index];
 
         return (
-        <div style={props.style} key={props.key} className="room-visit">
-            {item.enterHour}:{item.enterMinute} <b>Room:</b> {item.roomName}
-        </div>);
+            <div style={props.style} key={props.key} className="row room-visit">
+                <div className="col-auto text-center">{item.enterHour.toString().padStart(2, '0')}:{item.enterMinute.toString().padStart(2, '0')}</div>
+                <div className="col-7"><span className="fw-bold">Room: </span>{item.roomName}</div>
+                <button className="btn btn-sm btn-link col-sm-auto fw-bold" onClick={() => TryVisitRoom(item.roomId)}>Visit Room</button>
+            </div>);
     }
 
     return (
@@ -42,22 +45,22 @@ export const ModToolsUserRoomVisitsView: FC<ModToolsUserRoomVisitsViewProps> = p
             <NitroCardHeaderView headerText={'User Visits'} onCloseClick={() => onCloseClick()} />
             <NitroCardContentView className="text-black">
                 {roomVisitData &&
-                <div className="row h-100 w-100 user-visits">
-                    <AutoSizer defaultWidth={400} defaultHeight={200}>
-                    {({ height, width }) => 
-                    {
-                        return (
-                            <List
-                                width={width}
-                                height={height}
-                                rowCount={roomVisitData.rooms.length}
-                                rowHeight={25}
-                                className={'roomvisits-container'}
-                                rowRenderer={RowRenderer}
-                            />
-                        )
-                    }}
-                    </AutoSizer>
+                    <div className="row h-100 w-100 user-visits">
+                        <AutoSizer defaultWidth={400} defaultHeight={200}>
+                            {({ height, width }) => 
+                            {
+                                return (
+                                    <List
+                                        width={width}
+                                        height={height}
+                                        rowCount={roomVisitData.rooms.length}
+                                        rowHeight={30}
+                                        className={'roomvisits-container'}
+                                        rowRenderer={RowRenderer}
+                                    />
+                                )
+                            }}
+                        </AutoSizer>
                     </div>
                 }
             </NitroCardContentView>

From fe6f27737cb71d299f1b9822f934b375041a5c3c Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Wed, 20 Oct 2021 02:45:04 -0400
Subject: [PATCH 13/29] Update mod tools user info

---
 .../user/user-info/ModToolsUserView.scss      |   4 -
 .../views/user/user-info/ModToolsUserView.tsx | 165 ++++++++----------
 .../user/user-info/ModToolsUserView.types.ts  |   1 -
 .../ModToolsUserModActionView.tsx             |   2 +-
 .../ModToolsUserModActionView.types.ts        |   3 +-
 .../ModToolsUserRoomVisitsView.tsx            |   2 +-
 .../ModToolsUserRoomVisitsView.types.ts       |   4 +-
 .../ModToolsSendUserMessage.types.ts          |   3 +-
 .../ModToolsSendUserMessageView.tsx           |   2 +-
 9 files changed, 83 insertions(+), 103 deletions(-)

diff --git a/src/views/mod-tools/views/user/user-info/ModToolsUserView.scss b/src/views/mod-tools/views/user/user-info/ModToolsUserView.scss
index cb138384..ddc24350 100644
--- a/src/views/mod-tools/views/user/user-info/ModToolsUserView.scss
+++ b/src/views/mod-tools/views/user/user-info/ModToolsUserView.scss
@@ -19,9 +19,5 @@
             color: $black;
             background: rgba(0, 0, 0, .05);
         }
-
-        td {
-            padding: 0px 5px;
-        }
     }
 }
diff --git a/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx b/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx
index b056553b..5981f666 100644
--- a/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx
+++ b/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx
@@ -1,29 +1,26 @@
 import { FriendlyTime, ModeratorUserInfoData, ModtoolRequestUserInfoComposer, ModtoolUserInfoEvent } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useState } from 'react';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { LocalizeText } from '../../../../../api';
 import { ModToolsOpenUserChatlogEvent } from '../../../../../events/mod-tools/ModToolsOpenUserChatlogEvent';
 import { CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
-import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
-import { IUserInfo } from '../../../utils/IUserInfo';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../../layout';
 import { ModToolsUserModActionView } from '../user-mod-action/ModToolsUserModActionView';
 import { ModToolsUserRoomVisitsView } from '../user-room-visits/ModToolsUserRoomVisitsView';
 import { ModToolsSendUserMessageView } from '../user-sendmessage/ModToolsSendUserMessageView';
 import { ModToolsUserViewProps } from './ModToolsUserView.types';
 
-
 export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
 {
-    const { onCloseClick = null, userId = null, simple = true } = props;
-    const [userInfo, setUserInfo] = useState<ModeratorUserInfoData>(null);
-    const [sendMessageVisible, setSendMessageVisible] = useState(false);
-    const [modActionVisible, setModActionVisible] = useState(false);
-    const [roomVisitsVisible, setRoomVisitsVisible] = useState(false);
+    const { onCloseClick = null, userId = null } = props;
+    const [ userInfo, setUserInfo ] = useState<ModeratorUserInfoData>(null);
+    const [ sendMessageVisible, setSendMessageVisible ] = useState(false);
+    const [ modActionVisible, setModActionVisible ] = useState(false);
+    const [ roomVisitsVisible, setRoomVisitsVisible ] = useState(false);
 
     useEffect(() =>
     {
         SendMessageHook(new ModtoolRequestUserInfoComposer(userId));
-    }, [userId]);
-
+    }, [ userId ]);
 
     const onModtoolUserInfoEvent = useCallback((event: ModtoolUserInfoEvent) =>
     {
@@ -36,137 +33,121 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
 
     CreateMessageHook(ModtoolUserInfoEvent, onModtoolUserInfoEvent);
 
-    const OnlineIcon = useCallback(() => 
+    const userProperties = useMemo(() =>
     {
-        if(userInfo.online) return (<i className="icon icon-pf-online ml-1" />);
-        else return (<i className="icon icon-pf-offline ml-1" />);
-    }, [userInfo]);
+        if(!userInfo) return null;
 
-    const userProperties = useCallback(() =>
-    {
-        let properties: IUserInfo[] = [];
-
-        if(!userInfo) return properties;
-
-        properties = [
+        return [
             {
-                nameKey: 'name',
-                nameKeyFallback: 'Name',
-                value: userInfo.userName
+                localeKey: 'modtools.userinfo.userName',
+                value: userInfo.userName,
+                showOnline: true
             },
             {
-                nameKey: 'cfhs',
-                nameKeyFallback: 'CFHs',
+                localeKey: 'modtools.userinfo.cfhCount',
                 value: userInfo.cfhCount.toString()
             },
             {
-                nameKey: 'abusive_cfhs',
-                nameKeyFallback: 'Abusive CFHs',
+                localeKey: 'modtools.userinfo.abusiveCfhCount',
                 value: userInfo.abusiveCfhCount.toString()
             },
             {
-                nameKey: 'cautions',
-                nameKeyFallback: 'Cautions',
+                localeKey: 'modtools.userinfo.cautionCount',
                 value: userInfo.cautionCount.toString()
             },
             {
-                nameKey: 'bans',
-                nameKeyFallback: 'Bans',
+                localeKey: 'modtools.userinfo.banCount',
                 value: userInfo.banCount.toString()
             },
             {
-                nameKey: 'last_sanction',
-                nameKeyFallback: 'Last sanction',
+                localeKey: 'modtools.userinfo.lastSanctionTime',
                 value: userInfo.lastSanctionTime
             },
             {
-                nameKey: 'trade_locks',
-                nameKeyFallback: 'Trade locks',
+                localeKey: 'modtools.userinfo.tradingLockCount',
                 value: userInfo.tradingLockCount.toString()
             },
             {
-                nameKey: 'lock_expires',
-                nameKeyFallback: 'Lock expires',
+                localeKey: 'modtools.userinfo.tradingExpiryDate',
                 value: userInfo.tradingExpiryDate
             },
             {
-                nameKey: 'last_login',
-                nameKeyFallback: 'Last login',
+                localeKey: 'modtools.userinfo.minutesSinceLastLogin',
                 value: FriendlyTime.format(userInfo.minutesSinceLastLogin * 60, '.ago', 2)
             },
             {
-                nameKey: 'purchase',
-                nameKeyFallback: 'Purchases',
+                localeKey: 'modtools.userinfo.lastPurchaseDate',
                 value: userInfo.lastPurchaseDate
             },
             {
-                nameKey: 'email',
-                nameKeyFallback: 'Email',
+                localeKey: 'modtools.userinfo.primaryEmailAddress',
                 value: userInfo.primaryEmailAddress
             },
             {
-                nameKey: 'acc_bans',
-                nameKeyFallback: 'Banned Accs.',
+                localeKey: 'modtools.userinfo.identityRelatedBanCount',
                 value: userInfo.identityRelatedBanCount.toString()
             },
             {
-                nameKey: 'registered',
-                nameKeyFallback: 'Registered',
+                localeKey: 'modtools.userinfo.registrationAgeInMinutes',
                 value: FriendlyTime.format(userInfo.registrationAgeInMinutes * 60, '.ago', 2)
             },
             {
-                nameKey: 'rank',
-                nameKeyFallback: 'Rank',
+                localeKey: 'modtools.userinfo.userClassification',
                 value: userInfo.userClassification
             }
         ];
+    }, [ userInfo ]);
 
-        return properties;
-
-    }, [userInfo]);
+    if(!userInfo) return null;
 
     return (
         <>
-        <NitroCardView className="nitro-mod-tools-user" simple={true}>
-            <NitroCardHeaderView headerText={'User Info: ' + (userInfo ? userInfo.userName : '')} onCloseClick={() => onCloseClick()} />
-            <NitroCardContentView className="text-black">
-                {userInfo &&
-                    <div className="row">
-                        {!simple &&
-                            <div className="col-sm-3 px-0 d-flex align-items-center">
-                                <AvatarImageView figure={userInfo.figure} direction={2} />
-                            </div>
-                        }
-                        <div className="col-7">
-                            <table className="d-flex flex-column table table-striped table-sm table-text-small text-black">
+            <NitroCardView className="nitro-mod-tools-user" simple={true}>
+                <NitroCardHeaderView headerText={ LocalizeText('modtools.userinfo.title', [ 'username' ], [ userInfo.userName ]) } onCloseClick={ onCloseClick } />
+                <NitroCardContentView className="text-black">
+                    <NitroLayoutGrid>
+                        <NitroLayoutGridColumn size={ 8 }>
+                            <table className="table table-striped table-sm table-text-small text-black m-0">
                                 <tbody>
-                                    {userProperties().map(property =>
-                                    {
-                                        return (
-                                            <tr key={property.nameKey}>
-                                                <th scope="row">{property.nameKeyFallback}</th>
-                                                <td className={'' + (property.nameKey === 'name' ? 'username' : '')}>
-                                                    {property.value} {(property.nameKey === 'name') && <OnlineIcon/>}
-                                                </td>
-                                            </tr>
-                                        )
-                                    })}
+                                    { userProperties.map(property =>
+                                        {
+
+                                            return (
+                                                <tr>
+                                                    <th scope="row">{ LocalizeText(property.localeKey) }</th>
+                                                    <td>
+                                                        { property.value }
+                                                        { property.showOnline && <i className={ `icon icon-pf-${ userInfo.online ? 'online' : 'offline' } ms-2` } /> }
+                                                        </td>
+                                                </tr>
+                                            );
+                                        }) }
                                 </tbody>
                             </table>
-                        </div>
-                        <div className="col-5">
-                            <button className="btn btn-sm btn-primary" onClick={() => dispatchUiEvent(new ModToolsOpenUserChatlogEvent(userId))}>Room Chat</button>
-                            <button className="btn btn-sm btn-primary mt-2" onClick={ () => setSendMessageVisible(!sendMessageVisible)}>Send Message</button>
-                            <button className="btn btn-sm btn-primary mt-2" onClick={ () => setRoomVisitsVisible(!roomVisitsVisible)}>Room Visits</button>
-                            <button className="btn btn-sm btn-primary mt-2" onClick={ () => setModActionVisible(!modActionVisible)}>Mod Action</button>
-                        </div>
-                    </div>
-                }
-            </NitroCardContentView>
-        </NitroCardView>
-        {(sendMessageVisible && userInfo) && <ModToolsSendUserMessageView user={{ userId: userId, username: userInfo.userName }} onCloseClick={ () => setSendMessageVisible(false)}/>}
-        {(userInfo && modActionVisible) && <ModToolsUserModActionView user={{ userId: userId, username: userInfo.userName }} onCloseClick={() => setModActionVisible(false)}/>}
-        {(userInfo && roomVisitsVisible) && <ModToolsUserRoomVisitsView userId={userId} onCloseClick={ () => setRoomVisitsVisible(false)}/>}
+                        </NitroLayoutGridColumn>
+                        <NitroLayoutGridColumn size={ 4 }>
+                            <NitroLayoutButton variant="primary" size="sm" onClick={ event => dispatchUiEvent(new ModToolsOpenUserChatlogEvent(userId)) }>
+                                Room Chat
+                            </NitroLayoutButton>
+                            <NitroLayoutButton variant="primary" size="sm" onClick={ event => setSendMessageVisible(!sendMessageVisible) }>
+                                Send Message
+                            </NitroLayoutButton>
+                            <NitroLayoutButton variant="primary" size="sm" onClick={ event => setRoomVisitsVisible(!roomVisitsVisible) }>
+                                Room Visits
+                            </NitroLayoutButton>
+                            <NitroLayoutButton variant="primary" size="sm" onClick={ event => setModActionVisible(!modActionVisible) }>
+                                Mod Action
+                            </NitroLayoutButton>
+                        </NitroLayoutGridColumn>
+                    </NitroLayoutGrid>
+                </NitroCardContentView>
+            </NitroCardView>
+            { sendMessageVisible &&
+                <ModToolsSendUserMessageView user={ { userId: userId, username: userInfo.userName } } onCloseClick={ event => setSendMessageVisible(false) } /> }
+            { modActionVisible &&
+                <ModToolsUserModActionView user={ { userId: userId, username: userInfo.userName } } onCloseClick={ event => setModActionVisible(false) } /> }
+            { roomVisitsVisible &&
+                <ModToolsUserRoomVisitsView userId={ userId } onCloseClick={ event => setRoomVisitsVisible(false) } /> }
         </>
     );
 }
diff --git a/src/views/mod-tools/views/user/user-info/ModToolsUserView.types.ts b/src/views/mod-tools/views/user/user-info/ModToolsUserView.types.ts
index 21d30670..534d647d 100644
--- a/src/views/mod-tools/views/user/user-info/ModToolsUserView.types.ts
+++ b/src/views/mod-tools/views/user/user-info/ModToolsUserView.types.ts
@@ -2,5 +2,4 @@ export interface ModToolsUserViewProps
 {
     userId: number;
     onCloseClick: () => void;
-    simple?: boolean;
 }
diff --git a/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx b/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx
index c78f12f6..2a8495a2 100644
--- a/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx
+++ b/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx
@@ -8,7 +8,7 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
 
     return (
         <NitroCardView className="nitro-mod-tools-user-action" simple={true}>
-            <NitroCardHeaderView headerText={'Mod Action'} onCloseClick={() => onCloseClick()} />
+            <NitroCardHeaderView headerText={'Mod Action'} onCloseClick={ onCloseClick } />
             <NitroCardContentView className="text-black">
                 {user && <div></div>}
             </NitroCardContentView>
diff --git a/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.types.ts b/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.types.ts
index 2025d10d..28714abc 100644
--- a/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.types.ts
+++ b/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.types.ts
@@ -1,7 +1,8 @@
+import { MouseEvent } from 'react';
 import { ISelectedUser } from '../../../utils/ISelectedUser';
 
 export interface ModToolsUserModActionViewProps
 {
     user: ISelectedUser;
-    onCloseClick: () => void;
+    onCloseClick: (event: MouseEvent) => void;
 }
diff --git a/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx b/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx
index 8d1a709e..76aff1fd 100644
--- a/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx
+++ b/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx
@@ -39,7 +39,7 @@ export const ModToolsUserRoomVisitsView: FC<ModToolsUserRoomVisitsViewProps> = p
 
     return (
         <NitroCardView className="nitro-mod-tools-user-visits" simple={true}>
-            <NitroCardHeaderView headerText={'User Visits'} onCloseClick={() => onCloseClick()} />
+            <NitroCardHeaderView headerText={'User Visits'} onCloseClick={ onCloseClick } />
             <NitroCardContentView className="text-black">
                 {roomVisitData &&
                 <div className="row h-100 w-100 user-visits">
diff --git a/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.types.ts b/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.types.ts
index 8aaebec5..4bbcaf40 100644
--- a/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.types.ts
+++ b/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.types.ts
@@ -1,5 +1,7 @@
+import { MouseEvent } from 'react';
+
 export interface ModToolsUserRoomVisitsViewProps
 {
     userId: number;
-    onCloseClick: () => void;
+    onCloseClick: (event: MouseEvent) => void;
 }
diff --git a/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessage.types.ts b/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessage.types.ts
index 617945f0..e8f071d8 100644
--- a/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessage.types.ts
+++ b/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessage.types.ts
@@ -1,7 +1,8 @@
+import { MouseEvent } from 'react';
 import { ISelectedUser } from '../../../utils/ISelectedUser';
 
 export interface ModToolsSendUserMessageViewProps
 {
     user: ISelectedUser;
-    onCloseClick: () => void;
+    onCloseClick: (event: MouseEvent) => void;
 }
diff --git a/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessageView.tsx b/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessageView.tsx
index 7305bf93..f1e5f01f 100644
--- a/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessageView.tsx
+++ b/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessageView.tsx
@@ -19,7 +19,7 @@ export const ModToolsSendUserMessageView: FC<ModToolsSendUserMessageViewProps> =
 
     return (
         <NitroCardView className="nitro-mod-tools-user-message" simple={true}>
-            <NitroCardHeaderView headerText={'Send Message'} onCloseClick={() => onCloseClick()} />
+            <NitroCardHeaderView headerText={'Send Message'} onCloseClick={ onCloseClick } />
             <NitroCardContentView className="text-black">
                 {user && <>
                     <div>Message To: {user.username}</div>

From e0fa8912661e1383e465cbc108482b32c37b8a16 Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Wed, 20 Oct 2021 19:28:50 -0500
Subject: [PATCH 14/29] updated packets

---
 .../room/room-chatlog/ModToolsChatlogView.tsx |  4 ++--
 .../room/room-tools/ModToolsRoomView.tsx      | 22 +++++++++----------
 .../tickets/ModToolsOpenIssuesTabView.tsx     |  6 +++++
 .../views/tickets/ModToolsTicketsView.tsx     | 16 ++++++++++++--
 .../user-chatlog/ModToolsUserChatlogView.tsx  | 14 ++++++------
 .../views/user/user-info/ModToolsUserView.tsx |  8 +++----
 .../ModToolsUserRoomVisitsView.tsx            | 10 ++++-----
 7 files changed, 49 insertions(+), 31 deletions(-)
 create mode 100644 src/views/mod-tools/views/tickets/ModToolsOpenIssuesTabView.tsx

diff --git a/src/views/mod-tools/views/room/room-chatlog/ModToolsChatlogView.tsx b/src/views/mod-tools/views/room/room-chatlog/ModToolsChatlogView.tsx
index 77573e30..4097d8c9 100644
--- a/src/views/mod-tools/views/room/room-chatlog/ModToolsChatlogView.tsx
+++ b/src/views/mod-tools/views/room/room-chatlog/ModToolsChatlogView.tsx
@@ -1,4 +1,4 @@
-import { ChatRecordData, ModtoolRequestRoomChatlogComposer, ModtoolRoomChatlogEvent } from '@nitrots/nitro-renderer';
+import { ChatRecordData, GetRoomChatlogMessageComposer, ModtoolRoomChatlogEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { CreateMessageHook, SendMessageHook } from '../../../../../hooks/messages';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
@@ -13,7 +13,7 @@ export const ModToolsChatlogView: FC<ModToolsChatlogViewProps> = props =>
 
     useEffect(() =>
     {
-        SendMessageHook(new ModtoolRequestRoomChatlogComposer(roomId));
+        SendMessageHook(new GetRoomChatlogMessageComposer(roomId));
     }, [roomId]);
 
     const onModtoolRoomChatlogEvent = useCallback((event: ModtoolRoomChatlogEvent) =>
diff --git a/src/views/mod-tools/views/room/room-tools/ModToolsRoomView.tsx b/src/views/mod-tools/views/room/room-tools/ModToolsRoomView.tsx
index 6a5c69e3..d169c1fb 100644
--- a/src/views/mod-tools/views/room/room-tools/ModToolsRoomView.tsx
+++ b/src/views/mod-tools/views/room/room-tools/ModToolsRoomView.tsx
@@ -1,4 +1,4 @@
-import { ModerateRoomMessageComposer, ModeratorActionMessageComposer, ModtoolRequestRoomInfoComposer, ModtoolRoomInfoEvent } from '@nitrots/nitro-renderer';
+import { GetModeratorRoomInfoMessageComposer, ModerateRoomMessageComposer, ModeratorActionMessageComposer, ModeratorRoomInfoEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { TryVisitRoom } from '../../../../../api';
 import { ModToolsOpenRoomChatlogEvent } from '../../../../../events/mod-tools/ModToolsOpenRoomChatlogEvent';
@@ -30,25 +30,25 @@ export const ModToolsRoomView: FC<ModToolsRoomViewProps> = props =>
     {
         if(infoRequested) return;
         
-        SendMessageHook(new ModtoolRequestRoomInfoComposer(roomId));
+        SendMessageHook(new GetModeratorRoomInfoMessageComposer(roomId));
         setInfoRequested(true);
     }, [ roomId, infoRequested, setInfoRequested ]);
 
-    const onModtoolRoomInfoEvent = useCallback((event: ModtoolRoomInfoEvent) =>
+    const onModtoolRoomInfoEvent = useCallback((event: ModeratorRoomInfoEvent) =>
     {
         const parser = event.getParser();
 
-        if(!parser || parser.id !== roomId) return;
+        if(!parser || parser.data.flatId !== roomId) return;
 
-        setLoadedRoomId(parser.id);
-        setName(parser.name);
-        setOwnerId(parser.ownerId);
-        setOwnerName(parser.ownerName);
-        setOwnerInRoom(parser.ownerInRoom);
-        setUsersInRoom(parser.playerAmount);
+        setLoadedRoomId(parser.data.flatId);
+        setName(parser.data.room.name);
+        setOwnerId(parser.data.ownerId);
+        setOwnerName(parser.data.ownerName);
+        setOwnerInRoom(parser.data.ownerInRoom);
+        setUsersInRoom(parser.data.userCount);
     }, [ setLoadedRoomId, setName, setOwnerId, setOwnerName, setOwnerInRoom, setUsersInRoom, roomId ]);
 
-    CreateMessageHook(ModtoolRoomInfoEvent, onModtoolRoomInfoEvent);
+    CreateMessageHook(ModeratorRoomInfoEvent, onModtoolRoomInfoEvent);
 
     const handleClick = useCallback((action: string, value?: string) =>
     {
diff --git a/src/views/mod-tools/views/tickets/ModToolsOpenIssuesTabView.tsx b/src/views/mod-tools/views/tickets/ModToolsOpenIssuesTabView.tsx
new file mode 100644
index 00000000..6d4392b7
--- /dev/null
+++ b/src/views/mod-tools/views/tickets/ModToolsOpenIssuesTabView.tsx
@@ -0,0 +1,6 @@
+import { FC } from 'react';
+
+export const ModToolsOpenIssuesTabView: FC<{}> = props =>
+{
+    return null;
+}
diff --git a/src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx b/src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx
index 5d2ebf47..60651532 100644
--- a/src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx
+++ b/src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx
@@ -1,5 +1,6 @@
-import { FC, useState } from 'react';
+import { FC, useCallback, useState } from 'react';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
+import { ModToolsOpenIssuesTabView } from './ModToolsOpenIssuesTabView';
 import { ModToolsTicketsViewProps } from './ModToolsTicketsView.types';
 
 const TABS: string[] = [
@@ -14,6 +15,15 @@ export const ModToolsTicketsView: FC<ModToolsTicketsViewProps> = props =>
 
     const [ currentTab, setCurrentTab ] = useState<number>(0);
 
+    const CurrentTabComponent = useCallback(() =>
+    {
+        switch(currentTab)
+        {
+            case 0: return <ModToolsOpenIssuesTabView />;
+            default: return null;
+        }
+    }, [currentTab]);
+
     return (
         <NitroCardView className="nitro-mod-tools-tickets" simple={ false }>
             <NitroCardHeaderView headerText={ 'Tickets' } onCloseClick={ onCloseClick } />
@@ -26,7 +36,9 @@ export const ModToolsTicketsView: FC<ModToolsTicketsViewProps> = props =>
                             </NitroCardTabsItemView>);
                         }) }
                 </NitroCardTabsView>
-                <div className="p-2"></div>
+                <div className="p-2">
+                    <CurrentTabComponent />
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/views/mod-tools/views/user/user-chatlog/ModToolsUserChatlogView.tsx b/src/views/mod-tools/views/user/user-chatlog/ModToolsUserChatlogView.tsx
index 0da179cb..705cc690 100644
--- a/src/views/mod-tools/views/user/user-chatlog/ModToolsUserChatlogView.tsx
+++ b/src/views/mod-tools/views/user/user-chatlog/ModToolsUserChatlogView.tsx
@@ -1,4 +1,4 @@
-import { ChatRecordData, ModtoolRequestUserChatlogComposer, ModtoolUserChatlogEvent } from '@nitrots/nitro-renderer';
+import { ChatRecordData, GetUserChatlogMessageComposer, UserChatlogEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { CreateMessageHook, SendMessageHook } from '../../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
@@ -13,20 +13,20 @@ export const ModToolsUserChatlogView: FC<ModToolsUserChatlogViewProps> = props =
 
     useEffect(() =>
     {
-        SendMessageHook(new ModtoolRequestUserChatlogComposer(userId));
+        SendMessageHook(new GetUserChatlogMessageComposer(userId));
     }, [userId]);
     
-    const onModtoolUserChatlogEvent = useCallback((event: ModtoolUserChatlogEvent) =>
+    const onModtoolUserChatlogEvent = useCallback((event: UserChatlogEvent) =>
     {
         const parser = event.getParser();
 
-        if(!parser || parser.userId !== userId) return;
+        if(!parser || parser.data.userId !== userId) return;
 
-        setUsername(parser.username);
-        setUserChatlog(parser.roomVisits);
+        setUsername(parser.data.username);
+        setUserChatlog(parser.data.roomChatlogs);
     }, [setUsername, setUserChatlog, userId]);
 
-    CreateMessageHook(ModtoolUserChatlogEvent, onModtoolUserChatlogEvent);
+    CreateMessageHook(UserChatlogEvent, onModtoolUserChatlogEvent);
 
     return (
         <NitroCardView className="nitro-mod-tools-user-chatlog" simple={true}>
diff --git a/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx b/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx
index 5981f666..fa1a3214 100644
--- a/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx
+++ b/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx
@@ -1,4 +1,4 @@
-import { FriendlyTime, ModeratorUserInfoData, ModtoolRequestUserInfoComposer, ModtoolUserInfoEvent } from '@nitrots/nitro-renderer';
+import { FriendlyTime, GetModeratorUserInfoMessageComposer, ModeratorUserInfoData, ModtoolUserInfoEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { LocalizeText } from '../../../../../api';
 import { ModToolsOpenUserChatlogEvent } from '../../../../../events/mod-tools/ModToolsOpenUserChatlogEvent';
@@ -19,7 +19,7 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
 
     useEffect(() =>
     {
-        SendMessageHook(new ModtoolRequestUserInfoComposer(userId));
+        SendMessageHook(new GetModeratorUserInfoMessageComposer(userId));
     }, [ userId ]);
 
     const onModtoolUserInfoEvent = useCallback((event: ModtoolUserInfoEvent) =>
@@ -109,11 +109,11 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
                         <NitroLayoutGridColumn size={ 8 }>
                             <table className="table table-striped table-sm table-text-small text-black m-0">
                                 <tbody>
-                                    { userProperties.map(property =>
+                                    { userProperties.map( (property, index) =>
                                         {
 
                                             return (
-                                                <tr>
+                                                <tr key={index}>
                                                     <th scope="row">{ LocalizeText(property.localeKey) }</th>
                                                     <td>
                                                         { property.value }
diff --git a/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx b/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx
index 0faec1ef..c79117dc 100644
--- a/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx
+++ b/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx
@@ -1,4 +1,4 @@
-import { ModtoolReceivedRoomsUserEvent, ModtoolRequestUserRoomsComposer, ModtoolRoomVisitedData } from '@nitrots/nitro-renderer';
+import { GetRoomVisitsMessageComposer, RoomVisitsData, RoomVisitsEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { AutoSizer, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
 import { TryVisitRoom } from '../../../../../api';
@@ -10,14 +10,14 @@ export const ModToolsUserRoomVisitsView: FC<ModToolsUserRoomVisitsViewProps> = p
 {
     const { userId = null, onCloseClick = null } = props;
 
-    const [roomVisitData, setRoomVisitData] = useState<ModtoolRoomVisitedData>(null);
+    const [roomVisitData, setRoomVisitData] = useState<RoomVisitsData>(null);
 
     useEffect(() =>
     {
-        SendMessageHook(new ModtoolRequestUserRoomsComposer(userId));
+        SendMessageHook(new GetRoomVisitsMessageComposer(userId));
     }, [userId]);
 
-    const onModtoolReceivedRoomsUserEvent = useCallback((event: ModtoolReceivedRoomsUserEvent) =>
+    const onModtoolReceivedRoomsUserEvent = useCallback((event: RoomVisitsEvent) =>
     {
         const parser = event.getParser();
 
@@ -26,7 +26,7 @@ export const ModToolsUserRoomVisitsView: FC<ModToolsUserRoomVisitsViewProps> = p
         setRoomVisitData(parser.data);
     }, [userId]);
 
-    CreateMessageHook(ModtoolReceivedRoomsUserEvent, onModtoolReceivedRoomsUserEvent);
+    CreateMessageHook(RoomVisitsEvent, onModtoolReceivedRoomsUserEvent);
 
     const RowRenderer: ListRowRenderer = (props: ListRowProps) =>
     {

From e268a5a459e50edf1e7c2a3455592b32aceae212 Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Wed, 20 Oct 2021 19:50:23 -0500
Subject: [PATCH 15/29] updated more packets

---
 src/views/mod-tools/views/chatlog/ChatlogView.tsx           | 4 ++--
 .../views/room/room-chatlog/ModToolsChatlogView.tsx         | 6 +++---
 .../mod-tools/views/user/user-info/ModToolsUserView.tsx     | 6 +++---
 .../NotificationCenterMessageHandler.tsx                    | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/views/mod-tools/views/chatlog/ChatlogView.tsx b/src/views/mod-tools/views/chatlog/ChatlogView.tsx
index 426fd5a6..1eedefe8 100644
--- a/src/views/mod-tools/views/chatlog/ChatlogView.tsx
+++ b/src/views/mod-tools/views/chatlog/ChatlogView.tsx
@@ -1,4 +1,4 @@
-import { ChatRecordData, ModtoolRoomChatlogLine, UserProfileComposer } from '@nitrots/nitro-renderer';
+import { ChatlineData, ChatRecordData, UserProfileComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
 import { AutoSizer, CellMeasurer, CellMeasurerCache, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
 import { TryVisitRoom } from '../../../../api';
@@ -33,7 +33,7 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
 
     const advancedRowRenderer: ListRowRenderer = (props: ListRowProps) =>
     {
-        let chatlogEntry: ModtoolRoomChatlogLine;
+        let chatlogEntry: ChatlineData;
         let currentRecord: ChatRecordData;
         let isRoomInfo = false;
 
diff --git a/src/views/mod-tools/views/room/room-chatlog/ModToolsChatlogView.tsx b/src/views/mod-tools/views/room/room-chatlog/ModToolsChatlogView.tsx
index 4097d8c9..96d11aba 100644
--- a/src/views/mod-tools/views/room/room-chatlog/ModToolsChatlogView.tsx
+++ b/src/views/mod-tools/views/room/room-chatlog/ModToolsChatlogView.tsx
@@ -1,4 +1,4 @@
-import { ChatRecordData, GetRoomChatlogMessageComposer, ModtoolRoomChatlogEvent } from '@nitrots/nitro-renderer';
+import { ChatRecordData, GetRoomChatlogMessageComposer, RoomChatlogEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { CreateMessageHook, SendMessageHook } from '../../../../../hooks/messages';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
@@ -16,7 +16,7 @@ export const ModToolsChatlogView: FC<ModToolsChatlogViewProps> = props =>
         SendMessageHook(new GetRoomChatlogMessageComposer(roomId));
     }, [roomId]);
 
-    const onModtoolRoomChatlogEvent = useCallback((event: ModtoolRoomChatlogEvent) =>
+    const onModtoolRoomChatlogEvent = useCallback((event: RoomChatlogEvent) =>
     {
         const parser = event.getParser();
 
@@ -25,7 +25,7 @@ export const ModToolsChatlogView: FC<ModToolsChatlogViewProps> = props =>
         setRoomChatlog(parser.data);
     }, [roomId, setRoomChatlog]);
 
-    CreateMessageHook(ModtoolRoomChatlogEvent, onModtoolRoomChatlogEvent);
+    CreateMessageHook(RoomChatlogEvent, onModtoolRoomChatlogEvent);
 
     return (
         <NitroCardView className="nitro-mod-tools-room-chatlog" simple={true}>
diff --git a/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx b/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx
index fa1a3214..ab1fc54e 100644
--- a/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx
+++ b/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx
@@ -1,4 +1,4 @@
-import { FriendlyTime, GetModeratorUserInfoMessageComposer, ModeratorUserInfoData, ModtoolUserInfoEvent } from '@nitrots/nitro-renderer';
+import { FriendlyTime, GetModeratorUserInfoMessageComposer, ModeratorUserInfoData, ModeratorUserInfoEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { LocalizeText } from '../../../../../api';
 import { ModToolsOpenUserChatlogEvent } from '../../../../../events/mod-tools/ModToolsOpenUserChatlogEvent';
@@ -22,7 +22,7 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
         SendMessageHook(new GetModeratorUserInfoMessageComposer(userId));
     }, [ userId ]);
 
-    const onModtoolUserInfoEvent = useCallback((event: ModtoolUserInfoEvent) =>
+    const onModtoolUserInfoEvent = useCallback((event: ModeratorUserInfoEvent) =>
     {
         const parser = event.getParser();
 
@@ -31,7 +31,7 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
         setUserInfo(parser.data);
     }, [setUserInfo, userId]);
 
-    CreateMessageHook(ModtoolUserInfoEvent, onModtoolUserInfoEvent);
+    CreateMessageHook(ModeratorUserInfoEvent, onModtoolUserInfoEvent);
 
     const userProperties = useMemo(() =>
     {
diff --git a/src/views/notification-center/NotificationCenterMessageHandler.tsx b/src/views/notification-center/NotificationCenterMessageHandler.tsx
index 9afc098d..76c68e65 100644
--- a/src/views/notification-center/NotificationCenterMessageHandler.tsx
+++ b/src/views/notification-center/NotificationCenterMessageHandler.tsx
@@ -60,7 +60,7 @@ export const NotificationCenterMessageHandler: FC<INotificationCenterMessageHand
     {
         const parser = event.getParser();
 
-        NotificationUtilities.handleModeratorMessage(parser.message, parser.link);
+        NotificationUtilities.handleModeratorMessage(parser.message, parser.url);
     }, []);
 
     CreateMessageHook(ModeratorMessageEvent, onModeratorMessageEvent);

From 81d1a2910a57474ee663c9d6ad10e2a4151082e3 Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Wed, 20 Oct 2021 20:31:26 -0500
Subject: [PATCH 16/29] bill fix this

---
 src/views/mod-tools/ModToolsView.tsx          |  7 ++++--
 .../tickets/ModToolsOpenIssuesTabView.tsx     |  6 -----
 .../views/tickets/ModToolsTicketsView.tsx     | 24 ++++++++++++++-----
 .../open-issues/ModToolsOpenIssuesTabView.tsx | 11 +++++++++
 .../ModToolsOpenIssuesTabView.types.ts        |  6 +++++
 5 files changed, 40 insertions(+), 14 deletions(-)
 delete mode 100644 src/views/mod-tools/views/tickets/ModToolsOpenIssuesTabView.tsx
 create mode 100644 src/views/mod-tools/views/tickets/open-issues/ModToolsOpenIssuesTabView.tsx
 create mode 100644 src/views/mod-tools/views/tickets/open-issues/ModToolsOpenIssuesTabView.types.ts

diff --git a/src/views/mod-tools/ModToolsView.tsx b/src/views/mod-tools/ModToolsView.tsx
index 45ea7b46..4f73d340 100644
--- a/src/views/mod-tools/ModToolsView.tsx
+++ b/src/views/mod-tools/ModToolsView.tsx
@@ -161,12 +161,15 @@ export const ModToolsView: FC<ModToolsViewProps> = props =>
 
         if(!parser) return;
 
+        const data = parser.data;
+
         dispatchModToolsState({
             type: ModToolsActions.SET_INIT_DATA,
             payload: {
-                settings: parser.data
+                settings: data
             }
-        });   
+        });
+        console.log(parser);   
     }, []);
 
     CreateMessageHook(ModeratorInitMessageEvent, onModeratorInitMessageEvent);
diff --git a/src/views/mod-tools/views/tickets/ModToolsOpenIssuesTabView.tsx b/src/views/mod-tools/views/tickets/ModToolsOpenIssuesTabView.tsx
deleted file mode 100644
index 6d4392b7..00000000
--- a/src/views/mod-tools/views/tickets/ModToolsOpenIssuesTabView.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { FC } from 'react';
-
-export const ModToolsOpenIssuesTabView: FC<{}> = props =>
-{
-    return null;
-}
diff --git a/src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx b/src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx
index 60651532..6f9471ae 100644
--- a/src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx
+++ b/src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx
@@ -1,7 +1,9 @@
-import { FC, useCallback, useState } from 'react';
+import { IssueMessageData } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useMemo, useState } from 'react';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
-import { ModToolsOpenIssuesTabView } from './ModToolsOpenIssuesTabView';
+import { useModToolsContext } from '../../context/ModToolsContext';
 import { ModToolsTicketsViewProps } from './ModToolsTicketsView.types';
+import { ModToolsOpenIssuesTabView } from './open-issues/ModToolsOpenIssuesTabView';
 
 const TABS: string[] = [
     'Open Issues',
@@ -12,17 +14,27 @@ const TABS: string[] = [
 export const ModToolsTicketsView: FC<ModToolsTicketsViewProps> = props =>
 {
     const { onCloseClick = null } = props;
-
+    const { modToolsState = null } = useModToolsContext();
+    const { settings = null } = modToolsState;
     const [ currentTab, setCurrentTab ] = useState<number>(0);
 
+    const openIssues = useMemo(() =>
+    {
+        if(!settings) return [];
+        
+        return settings.issues.filter(issue => issue.state === IssueMessageData.STATE_OPEN)
+    }, [settings]);
+
     const CurrentTabComponent = useCallback(() =>
     {
         switch(currentTab)
         {
-            case 0: return <ModToolsOpenIssuesTabView />;
+            case 0: return <ModToolsOpenIssuesTabView openIssues={openIssues}/>;
             default: return null;
         }
-    }, [currentTab]);
+    }, [currentTab, openIssues]);
+
+    console.log(settings);
 
     return (
         <NitroCardView className="nitro-mod-tools-tickets" simple={ false }>
@@ -37,7 +49,7 @@ export const ModToolsTicketsView: FC<ModToolsTicketsViewProps> = props =>
                         }) }
                 </NitroCardTabsView>
                 <div className="p-2">
-                    <CurrentTabComponent />
+                    {settings && <CurrentTabComponent /> }
                 </div>
             </NitroCardContentView>
         </NitroCardView>
diff --git a/src/views/mod-tools/views/tickets/open-issues/ModToolsOpenIssuesTabView.tsx b/src/views/mod-tools/views/tickets/open-issues/ModToolsOpenIssuesTabView.tsx
new file mode 100644
index 00000000..d6ebe1bc
--- /dev/null
+++ b/src/views/mod-tools/views/tickets/open-issues/ModToolsOpenIssuesTabView.tsx
@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { ModToolsOpenIssuesTabViewProps } from './ModToolsOpenIssuesTabView.types';
+
+export const ModToolsOpenIssuesTabView: FC<ModToolsOpenIssuesTabViewProps> = props =>
+{
+    const { openIssues = null } = props;
+
+    return (
+        <div>{openIssues.length}</div>
+    );
+}
diff --git a/src/views/mod-tools/views/tickets/open-issues/ModToolsOpenIssuesTabView.types.ts b/src/views/mod-tools/views/tickets/open-issues/ModToolsOpenIssuesTabView.types.ts
new file mode 100644
index 00000000..45a80d7d
--- /dev/null
+++ b/src/views/mod-tools/views/tickets/open-issues/ModToolsOpenIssuesTabView.types.ts
@@ -0,0 +1,6 @@
+import { IssueMessageData } from '@nitrots/nitro-renderer';
+
+export interface ModToolsOpenIssuesTabViewProps
+{
+    openIssues: IssueMessageData[];
+}

From 5ad80cadca6233560d9bc4571122f86bc9f5779b Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Wed, 20 Oct 2021 21:37:54 -0400
Subject: [PATCH 17/29] Fixed

---
 src/views/mod-tools/reducers/ModToolsReducer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/mod-tools/reducers/ModToolsReducer.tsx b/src/views/mod-tools/reducers/ModToolsReducer.tsx
index c2c9df87..e1515e76 100644
--- a/src/views/mod-tools/reducers/ModToolsReducer.tsx
+++ b/src/views/mod-tools/reducers/ModToolsReducer.tsx
@@ -49,9 +49,9 @@ export const ModToolsReducer: Reducer<IModToolsState, IModToolsAction> = (state,
     switch(action.type)
     {
         case ModToolsActions.SET_INIT_DATA: {
-            const data = (action.payload.settings || state.settings || null);
+            const settings = (action.payload.settings || state.settings || null);
 
-            return { ...state, data };
+            return { ...state, settings };
         }
         case ModToolsActions.SET_CURRENT_ROOM_ID: {
             const currentRoomId = (action.payload.currentRoomId || state.currentRoomId || null);

From cf17d152d4ccebc363f75469ba06443ccf27886d Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Wed, 20 Oct 2021 22:32:44 -0500
Subject: [PATCH 18/29] bill fix this again

---
 .../mod-tools/ModToolsMessageHandler.tsx      | 67 +++++++++++++++++++
 src/views/mod-tools/ModToolsView.tsx          | 26 ++-----
 .../mod-tools/reducers/ModToolsReducer.tsx    | 13 +++-
 .../views/tickets/ModToolsTicketsView.tsx     | 27 ++++++--
 4 files changed, 102 insertions(+), 31 deletions(-)
 create mode 100644 src/views/mod-tools/ModToolsMessageHandler.tsx

diff --git a/src/views/mod-tools/ModToolsMessageHandler.tsx b/src/views/mod-tools/ModToolsMessageHandler.tsx
new file mode 100644
index 00000000..b9bae911
--- /dev/null
+++ b/src/views/mod-tools/ModToolsMessageHandler.tsx
@@ -0,0 +1,67 @@
+import { IssueInfoMessageEvent, ModeratorInitMessageEvent } from '@nitrots/nitro-renderer';
+import { FC, useCallback } from 'react';
+import { CreateMessageHook } from '../../hooks';
+import { useModToolsContext } from './context/ModToolsContext';
+import { ModToolsActions } from './reducers/ModToolsReducer';
+
+export const ModToolsMessageHandler: FC<{}> = props =>
+{
+    const { modToolsState = null, dispatchModToolsState = null } = useModToolsContext();
+    const { tickets= null } = modToolsState;
+    
+    const onModeratorInitMessageEvent = useCallback((event: ModeratorInitMessageEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!parser) return;
+
+        const data = parser.data;
+
+        dispatchModToolsState({
+            type: ModToolsActions.SET_INIT_DATA,
+            payload: {
+                settings: data
+            }
+        });
+
+        dispatchModToolsState({
+            type: ModToolsActions.SET_TICKETS,
+            payload: {
+                tickets: data.issues
+            }
+        });
+        
+        console.log(parser);   
+    }, [dispatchModToolsState]);
+
+    const onIssueInfoMessageEvent = useCallback((event: IssueInfoMessageEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!parser) return;
+
+        const newTickets = tickets ? Array.from(tickets) : [];
+        const existingIndex = newTickets.findIndex( entry => entry.issueId === parser.issueData.issueId)
+        
+        if(existingIndex > -1)
+        {
+            newTickets[existingIndex] = parser.issueData;
+        }
+        else 
+        {
+            newTickets.push(parser.issueData);
+        }
+
+        dispatchModToolsState({
+            type: ModToolsActions.SET_TICKETS,
+            payload: {
+                tickets: newTickets
+            }
+        })
+    }, [dispatchModToolsState, tickets]);
+
+    CreateMessageHook(ModeratorInitMessageEvent, onModeratorInitMessageEvent);
+    CreateMessageHook(IssueInfoMessageEvent, onIssueInfoMessageEvent);
+
+    return null;
+}
diff --git a/src/views/mod-tools/ModToolsView.tsx b/src/views/mod-tools/ModToolsView.tsx
index 4f73d340..5f3ba8d5 100644
--- a/src/views/mod-tools/ModToolsView.tsx
+++ b/src/views/mod-tools/ModToolsView.tsx
@@ -1,4 +1,4 @@
-import { ModeratorInitMessageEvent, RoomEngineEvent, RoomEngineObjectEvent, RoomObjectCategory } from '@nitrots/nitro-renderer';
+import { RoomEngineEvent, RoomEngineObjectEvent, RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useReducer, useState } from 'react';
 import { GetRoomSession } from '../../api';
 import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
@@ -6,11 +6,11 @@ import { ModToolsOpenRoomChatlogEvent } from '../../events/mod-tools/ModToolsOpe
 import { ModToolsOpenRoomInfoEvent } from '../../events/mod-tools/ModToolsOpenRoomInfoEvent';
 import { ModToolsOpenUserChatlogEvent } from '../../events/mod-tools/ModToolsOpenUserChatlogEvent';
 import { ModToolsOpenUserInfoEvent } from '../../events/mod-tools/ModToolsOpenUserInfoEvent';
-import { CreateMessageHook } from '../../hooks';
 import { useRoomEngineEvent } from '../../hooks/events';
 import { dispatchUiEvent, useUiEvent } from '../../hooks/events/ui/ui-event';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
 import { ModToolsContextProvider } from './context/ModToolsContext';
+import { ModToolsMessageHandler } from './ModToolsMessageHandler';
 import { ModToolsViewProps } from './ModToolsView.types';
 import { initialModTools, ModToolsActions, ModToolsReducer } from './reducers/ModToolsReducer';
 import { ISelectedUser } from './utils/ISelectedUser';
@@ -24,7 +24,7 @@ export const ModToolsView: FC<ModToolsViewProps> = props =>
 {
     const [ isVisible, setIsVisible ] = useState(false);
     const [ modToolsState, dispatchModToolsState ] = useReducer(ModToolsReducer, initialModTools);
-    const { currentRoomId = null, openRooms = null, openRoomChatlogs = null, openUserChatlogs = null, openUserInfo = null } = modToolsState;
+    const { currentRoomId = null, openRooms = null, openRoomChatlogs = null, openUserChatlogs = null, openUserInfo = null, tickets = null } = modToolsState;
     const [ selectedUser, setSelectedUser] = useState<ISelectedUser>(null);
     const [ isTicketsVisible, setIsTicketsVisible ] = useState(false);
 
@@ -155,25 +155,6 @@ export const ModToolsView: FC<ModToolsViewProps> = props =>
     
     useRoomEngineEvent(RoomEngineObjectEvent.SELECTED, onRoomEngineObjectEvent);
 
-    const onModeratorInitMessageEvent = useCallback((event: ModeratorInitMessageEvent) =>
-    {
-        const parser = event.getParser();
-
-        if(!parser) return;
-
-        const data = parser.data;
-
-        dispatchModToolsState({
-            type: ModToolsActions.SET_INIT_DATA,
-            payload: {
-                settings: data
-            }
-        });
-        console.log(parser);   
-    }, []);
-
-    CreateMessageHook(ModeratorInitMessageEvent, onModeratorInitMessageEvent);
-
     const handleClick = useCallback((action: string, value?: string) =>
     {
         if(!action) return;
@@ -299,6 +280,7 @@ export const ModToolsView: FC<ModToolsViewProps> = props =>
 
     return (
         <ModToolsContextProvider value={ { modToolsState, dispatchModToolsState } }>
+            <ModToolsMessageHandler />
             { isVisible &&
                 <NitroCardView uniqueKey="mod-tools" className="nitro-mod-tools" simple={ false }>
                     <NitroCardHeaderView headerText={ 'Mod Tools' } onCloseClick={ event => setIsVisible(false) } />
diff --git a/src/views/mod-tools/reducers/ModToolsReducer.tsx b/src/views/mod-tools/reducers/ModToolsReducer.tsx
index e1515e76..ee94db45 100644
--- a/src/views/mod-tools/reducers/ModToolsReducer.tsx
+++ b/src/views/mod-tools/reducers/ModToolsReducer.tsx
@@ -1,4 +1,4 @@
-import { ModeratorInitData } from '@nitrots/nitro-renderer';
+import { IssueMessageData, ModeratorInitData } from '@nitrots/nitro-renderer';
 import { Reducer } from 'react';
 
 export interface IModToolsState
@@ -9,6 +9,7 @@ export interface IModToolsState
     openRoomChatlogs: number[];
     openUserInfo: number[];
     openUserChatlogs: number[];
+    tickets: IssueMessageData[]
 }
 
 export interface IModToolsAction
@@ -21,6 +22,7 @@ export interface IModToolsAction
         openRoomChatlogs?: number[];
         openUserInfo?: number[];
         openUserChatlogs?: number[];
+        tickets?: IssueMessageData[];
     }
 }
 
@@ -32,6 +34,7 @@ export class ModToolsActions
     public static SET_OPEN_USERINFO: string = 'MTA_SET_OPEN_USERINFO';
     public static SET_OPEN_ROOM_CHATLOGS: string = 'MTA_SET_OPEN_CHATLOGS';
     public static SET_OPEN_USER_CHATLOGS: string = 'MTA_SET_OPEN_USER_CHATLOGS';
+    public static SET_TICKETS: string = 'MTA_SET_TICKETS';
     public static RESET_STATE: string = 'MTA_RESET_STATE';
 }
 
@@ -41,7 +44,8 @@ export const initialModTools: IModToolsState = {
     openRooms: null,
     openRoomChatlogs: null,
     openUserChatlogs: null,
-    openUserInfo: null
+    openUserInfo: null,
+    tickets: null
 };
 
 export const ModToolsReducer: Reducer<IModToolsState, IModToolsAction> = (state, action) =>
@@ -78,6 +82,11 @@ export const ModToolsReducer: Reducer<IModToolsState, IModToolsAction> = (state,
 
             return { ...state, openUserChatlogs };
         }
+        case ModToolsActions.SET_TICKETS: {
+            const tickets = (action.payload.tickets || state.tickets || null);
+
+            return { ...state, tickets };
+        }
         case ModToolsActions.RESET_STATE: {
             return { ...initialModTools };
         }
diff --git a/src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx b/src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx
index 6f9471ae..38b7986b 100644
--- a/src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx
+++ b/src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx
@@ -1,5 +1,6 @@
 import { IssueMessageData } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useMemo, useState } from 'react';
+import { GetSessionDataManager } from '../../../../api';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
 import { useModToolsContext } from '../../context/ModToolsContext';
 import { ModToolsTicketsViewProps } from './ModToolsTicketsView.types';
@@ -15,15 +16,29 @@ export const ModToolsTicketsView: FC<ModToolsTicketsViewProps> = props =>
 {
     const { onCloseClick = null } = props;
     const { modToolsState = null } = useModToolsContext();
-    const { settings = null } = modToolsState;
+    const { tickets= null } = modToolsState;
     const [ currentTab, setCurrentTab ] = useState<number>(0);
 
     const openIssues = useMemo(() =>
     {
-        if(!settings) return [];
+        if(!tickets) return [];
         
-        return settings.issues.filter(issue => issue.state === IssueMessageData.STATE_OPEN)
-    }, [settings]);
+        return tickets.filter(issue => issue.state === IssueMessageData.STATE_OPEN);
+    }, [tickets]);
+
+    const myIssues = useMemo(() =>
+    {
+        if(!tickets) return [];
+
+        return tickets.filter(issue => (issue.state === IssueMessageData.STATE_PICKED) && (issue.pickerUserId === GetSessionDataManager().userId));
+    }, [tickets]);
+
+    const pickedIssues = useMemo(() =>
+    {
+        if(!tickets) return [];
+
+        return tickets.filter(issue => issue.state === IssueMessageData.STATE_PICKED);
+    }, [tickets]);
 
     const CurrentTabComponent = useCallback(() =>
     {
@@ -34,8 +49,6 @@ export const ModToolsTicketsView: FC<ModToolsTicketsViewProps> = props =>
         }
     }, [currentTab, openIssues]);
 
-    console.log(settings);
-
     return (
         <NitroCardView className="nitro-mod-tools-tickets" simple={ false }>
             <NitroCardHeaderView headerText={ 'Tickets' } onCloseClick={ onCloseClick } />
@@ -49,7 +62,7 @@ export const ModToolsTicketsView: FC<ModToolsTicketsViewProps> = props =>
                         }) }
                 </NitroCardTabsView>
                 <div className="p-2">
-                    {settings && <CurrentTabComponent /> }
+                    <CurrentTabComponent />
                 </div>
             </NitroCardContentView>
         </NitroCardView>

From 301cf3aa5a3dcac31d8efa1fa808636f10e87d9f Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Wed, 20 Oct 2021 22:45:21 -0500
Subject: [PATCH 19/29] moved stuff to message handler

---
 .../mod-tools/ModToolsMessageHandler.tsx      | 109 +++++++++++++++++-
 src/views/mod-tools/ModToolsView.tsx          | 101 +---------------
 2 files changed, 110 insertions(+), 100 deletions(-)

diff --git a/src/views/mod-tools/ModToolsMessageHandler.tsx b/src/views/mod-tools/ModToolsMessageHandler.tsx
index b9bae911..9b3fa5a4 100644
--- a/src/views/mod-tools/ModToolsMessageHandler.tsx
+++ b/src/views/mod-tools/ModToolsMessageHandler.tsx
@@ -1,13 +1,18 @@
-import { IssueInfoMessageEvent, ModeratorInitMessageEvent } from '@nitrots/nitro-renderer';
+import { IssueInfoMessageEvent, ModeratorInitMessageEvent, RoomEngineEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
-import { CreateMessageHook } from '../../hooks';
+import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
+import { ModToolsOpenRoomChatlogEvent } from '../../events/mod-tools/ModToolsOpenRoomChatlogEvent';
+import { ModToolsOpenRoomInfoEvent } from '../../events/mod-tools/ModToolsOpenRoomInfoEvent';
+import { ModToolsOpenUserChatlogEvent } from '../../events/mod-tools/ModToolsOpenUserChatlogEvent';
+import { ModToolsOpenUserInfoEvent } from '../../events/mod-tools/ModToolsOpenUserInfoEvent';
+import { CreateMessageHook, useRoomEngineEvent, useUiEvent } from '../../hooks';
 import { useModToolsContext } from './context/ModToolsContext';
 import { ModToolsActions } from './reducers/ModToolsReducer';
 
 export const ModToolsMessageHandler: FC<{}> = props =>
 {
     const { modToolsState = null, dispatchModToolsState = null } = useModToolsContext();
-    const { tickets= null } = modToolsState;
+    const { openRooms = null, openRoomChatlogs = null, openUserChatlogs = null, openUserInfo = null, tickets= null } = modToolsState;
     
     const onModeratorInitMessageEvent = useCallback((event: ModeratorInitMessageEvent) =>
     {
@@ -63,5 +68,103 @@ export const ModToolsMessageHandler: FC<{}> = props =>
     CreateMessageHook(ModeratorInitMessageEvent, onModeratorInitMessageEvent);
     CreateMessageHook(IssueInfoMessageEvent, onIssueInfoMessageEvent);
 
+    const onRoomEngineEvent = useCallback((event: RoomEngineEvent) =>
+    {
+        switch(event.type)
+        {
+            case RoomEngineEvent.INITIALIZED:
+                dispatchModToolsState({
+                    type: ModToolsActions.SET_CURRENT_ROOM_ID,
+                    payload: {
+                        currentRoomId: event.roomId
+                    }
+                });
+                return;
+            case RoomEngineEvent.DISPOSED:
+                dispatchModToolsState({
+                    type: ModToolsActions.SET_CURRENT_ROOM_ID,
+                    payload: {
+                        currentRoomId: null
+                    }
+                });
+                return;
+        }
+    }, [ dispatchModToolsState ]);
+
+    useRoomEngineEvent(RoomEngineEvent.INITIALIZED, onRoomEngineEvent);
+    useRoomEngineEvent(RoomEngineEvent.DISPOSED, onRoomEngineEvent);
+
+    const onModToolsEvent = useCallback((event: ModToolsEvent) =>
+    {
+        switch(event.type)
+        {
+            case ModToolsEvent.OPEN_ROOM_INFO: {
+                const castedEvent = (event as ModToolsOpenRoomInfoEvent);
+                
+                if(openRooms && openRooms.includes(castedEvent.roomId)) return;
+                
+                const rooms = openRooms || [];
+                
+                dispatchModToolsState({
+                    type: ModToolsActions.SET_OPEN_ROOMS,
+                    payload: {
+                        openRooms: [...rooms, castedEvent.roomId]
+                    }
+                });
+                return;
+            }
+            case ModToolsEvent.OPEN_ROOM_CHATLOG: {
+                const castedEvent = (event as ModToolsOpenRoomChatlogEvent); 
+
+                if(openRoomChatlogs && openRoomChatlogs.includes(castedEvent.roomId)) return;
+
+                const chatlogs = openRoomChatlogs || [];
+
+                dispatchModToolsState({
+                    type: ModToolsActions.SET_OPEN_ROOM_CHATLOGS,
+                    payload: {
+                        openRoomChatlogs: [...chatlogs, castedEvent.roomId]
+                    }
+                });
+                return;
+            }
+            case ModToolsEvent.OPEN_USER_INFO: {
+                const castedEvent = (event as ModToolsOpenUserInfoEvent);
+
+                if(openUserInfo && openUserInfo.includes(castedEvent.userId)) return;
+
+                const userInfo = openUserInfo || [];
+
+                dispatchModToolsState({
+                    type: ModToolsActions.SET_OPEN_USERINFO,
+                    payload: {
+                        openUserInfo: [...userInfo, castedEvent.userId]
+                    }
+                });
+                return;
+            }
+            case ModToolsEvent.OPEN_USER_CHATLOG: {
+                const castedEvent = (event as ModToolsOpenUserChatlogEvent);
+
+                if(openUserChatlogs && openUserChatlogs.includes(castedEvent.userId)) return;
+
+                const userChatlog = openUserChatlogs || [];
+
+                dispatchModToolsState({
+                    type: ModToolsActions.SET_OPEN_USER_CHATLOGS,
+                    payload: {
+                        openUserChatlogs: [...userChatlog, castedEvent.userId]
+                    }
+                });
+                return;
+            }
+        }
+    }, [openRooms, dispatchModToolsState, openRoomChatlogs, openUserInfo, openUserChatlogs]);
+    
+    useUiEvent(ModToolsEvent.OPEN_ROOM_INFO, onModToolsEvent);
+    useUiEvent(ModToolsEvent.OPEN_ROOM_CHATLOG, onModToolsEvent);
+    useUiEvent(ModToolsEvent.OPEN_USER_INFO, onModToolsEvent);
+    useUiEvent(ModToolsEvent.OPEN_USER_CHATLOG, onModToolsEvent);
+
     return null;
 }
diff --git a/src/views/mod-tools/ModToolsView.tsx b/src/views/mod-tools/ModToolsView.tsx
index 5f3ba8d5..902ec5b9 100644
--- a/src/views/mod-tools/ModToolsView.tsx
+++ b/src/views/mod-tools/ModToolsView.tsx
@@ -1,10 +1,9 @@
-import { RoomEngineEvent, RoomEngineObjectEvent, RoomObjectCategory } from '@nitrots/nitro-renderer';
+import { RoomEngineObjectEvent, RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useReducer, useState } from 'react';
 import { GetRoomSession } from '../../api';
 import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
 import { ModToolsOpenRoomChatlogEvent } from '../../events/mod-tools/ModToolsOpenRoomChatlogEvent';
 import { ModToolsOpenRoomInfoEvent } from '../../events/mod-tools/ModToolsOpenRoomInfoEvent';
-import { ModToolsOpenUserChatlogEvent } from '../../events/mod-tools/ModToolsOpenUserChatlogEvent';
 import { ModToolsOpenUserInfoEvent } from '../../events/mod-tools/ModToolsOpenUserInfoEvent';
 import { useRoomEngineEvent } from '../../hooks/events';
 import { dispatchUiEvent, useUiEvent } from '../../hooks/events/ui/ui-event';
@@ -24,7 +23,7 @@ export const ModToolsView: FC<ModToolsViewProps> = props =>
 {
     const [ isVisible, setIsVisible ] = useState(false);
     const [ modToolsState, dispatchModToolsState ] = useReducer(ModToolsReducer, initialModTools);
-    const { currentRoomId = null, openRooms = null, openRoomChatlogs = null, openUserChatlogs = null, openUserInfo = null, tickets = null } = modToolsState;
+    const { currentRoomId = null, openRooms = null, openRoomChatlogs = null, openUserChatlogs = null, openUserInfo = null } = modToolsState;
     const [ selectedUser, setSelectedUser] = useState<ISelectedUser>(null);
     const [ isTicketsVisible, setIsTicketsVisible ] = useState(false);
 
@@ -41,103 +40,13 @@ export const ModToolsView: FC<ModToolsViewProps> = props =>
             case ModToolsEvent.TOGGLE_MOD_TOOLS:
                 setIsVisible(value => !value);
                 return;
-            case ModToolsEvent.OPEN_ROOM_INFO: {
-                const castedEvent = (event as ModToolsOpenRoomInfoEvent);
-                
-                if(openRooms && openRooms.includes(castedEvent.roomId)) return;
-                
-                const rooms = openRooms || [];
-                
-                dispatchModToolsState({
-                    type: ModToolsActions.SET_OPEN_ROOMS,
-                    payload: {
-                        openRooms: [...rooms, castedEvent.roomId]
-                    }
-                });
-                return;
-            }
-            case ModToolsEvent.OPEN_ROOM_CHATLOG: {
-                const castedEvent = (event as ModToolsOpenRoomChatlogEvent); 
-
-                if(openRoomChatlogs && openRoomChatlogs.includes(castedEvent.roomId)) return;
-
-                const chatlogs = openRoomChatlogs || [];
-
-                dispatchModToolsState({
-                    type: ModToolsActions.SET_OPEN_ROOM_CHATLOGS,
-                    payload: {
-                        openRoomChatlogs: [...chatlogs, castedEvent.roomId]
-                    }
-                });
-                return;
-            }
-            case ModToolsEvent.OPEN_USER_INFO: {
-                const castedEvent = (event as ModToolsOpenUserInfoEvent);
-
-                if(openUserInfo && openUserInfo.includes(castedEvent.userId)) return;
-
-                const userInfo = openUserInfo || [];
-
-                dispatchModToolsState({
-                    type: ModToolsActions.SET_OPEN_USERINFO,
-                    payload: {
-                        openUserInfo: [...userInfo, castedEvent.userId]
-                    }
-                });
-                return;
-            }
-            case ModToolsEvent.OPEN_USER_CHATLOG: {
-                const castedEvent = (event as ModToolsOpenUserChatlogEvent);
-
-                if(openUserChatlogs && openUserChatlogs.includes(castedEvent.userId)) return;
-
-                const userChatlog = openUserChatlogs || [];
-
-                dispatchModToolsState({
-                    type: ModToolsActions.SET_OPEN_USER_CHATLOGS,
-                    payload: {
-                        openUserChatlogs: [...userChatlog, castedEvent.userId]
-                    }
-                });
-                return;
-            }
         }
-    }, [openRooms, openRoomChatlogs, openUserInfo, openUserChatlogs]);
+    }, []);
 
     useUiEvent(ModToolsEvent.SHOW_MOD_TOOLS, onModToolsEvent);
     useUiEvent(ModToolsEvent.HIDE_MOD_TOOLS, onModToolsEvent);
     useUiEvent(ModToolsEvent.TOGGLE_MOD_TOOLS, onModToolsEvent);
-    useUiEvent(ModToolsEvent.OPEN_ROOM_INFO, onModToolsEvent);
-    useUiEvent(ModToolsEvent.OPEN_ROOM_CHATLOG, onModToolsEvent);
-    useUiEvent(ModToolsEvent.OPEN_USER_INFO, onModToolsEvent);
-    useUiEvent(ModToolsEvent.OPEN_USER_CHATLOG, onModToolsEvent);
-
-    const onRoomEngineEvent = useCallback((event: RoomEngineEvent) =>
-    {
-        switch(event.type)
-        {
-            case RoomEngineEvent.INITIALIZED:
-                dispatchModToolsState({
-                    type: ModToolsActions.SET_CURRENT_ROOM_ID,
-                    payload: {
-                        currentRoomId: event.roomId
-                    }
-                });
-                return;
-            case RoomEngineEvent.DISPOSED:
-                dispatchModToolsState({
-                    type: ModToolsActions.SET_CURRENT_ROOM_ID,
-                    payload: {
-                        currentRoomId: null
-                    }
-                });
-                return;
-        }
-    }, [ dispatchModToolsState ]);
-
-    useRoomEngineEvent(RoomEngineEvent.INITIALIZED, onRoomEngineEvent);
-    useRoomEngineEvent(RoomEngineEvent.DISPOSED, onRoomEngineEvent);
-
+    
     const onRoomEngineObjectEvent = useCallback((event: RoomEngineObjectEvent) =>
     {
         if(event.category !== RoomObjectCategory.UNIT) return;
@@ -276,8 +185,6 @@ export const ModToolsView: FC<ModToolsViewProps> = props =>
         }
     }, [openRooms, currentRoomId, openRoomChatlogs, selectedUser, openUserInfo, openUserChatlogs]);
 
-    if(!isVisible) return null;
-
     return (
         <ModToolsContextProvider value={ { modToolsState, dispatchModToolsState } }>
             <ModToolsMessageHandler />

From 5bcca108584a1547e088a4aa566e460dea3b943a Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Wed, 20 Oct 2021 23:47:01 -0500
Subject: [PATCH 20/29] add packets

---
 .../mod-tools/ModToolsMessageHandler.tsx      | 86 ++++++++++++++++++-
 1 file changed, 84 insertions(+), 2 deletions(-)

diff --git a/src/views/mod-tools/ModToolsMessageHandler.tsx b/src/views/mod-tools/ModToolsMessageHandler.tsx
index 9b3fa5a4..1c5713d1 100644
--- a/src/views/mod-tools/ModToolsMessageHandler.tsx
+++ b/src/views/mod-tools/ModToolsMessageHandler.tsx
@@ -1,4 +1,4 @@
-import { IssueInfoMessageEvent, ModeratorInitMessageEvent, RoomEngineEvent } from '@nitrots/nitro-renderer';
+import { CfhSanctionMessageEvent, CfhTopicsInitEvent, IssueDeletedMessageEvent, IssueInfoMessageEvent, IssuePickFailedMessageEvent, ModeratorActionResultMessageEvent, ModeratorInitMessageEvent, ModeratorToolPreferencesEvent, RoomEngineEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
 import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
 import { ModToolsOpenRoomChatlogEvent } from '../../events/mod-tools/ModToolsOpenRoomChatlogEvent';
@@ -62,11 +62,93 @@ export const ModToolsMessageHandler: FC<{}> = props =>
             payload: {
                 tickets: newTickets
             }
-        })
+        });
+
+        //todo: play ticket sound
+        //GetNitroInstance().events.dispatchEvent(new NitroSoundEvent(NitroSoundEvent.PLAY_SOUND, sound)
     }, [dispatchModToolsState, tickets]);
 
+    const onModeratorToolPreferencesEvent = useCallback((event: ModeratorToolPreferencesEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!parser) return;
+
+        console.log(parser);
+    }, []);
+
+    const onIssuePickFailedMessageEvent = useCallback((event: IssuePickFailedMessageEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!parser) return;
+
+        // todo: let user know it failed
+    }, []);
+
+    const onIssueDeletedMessageEvent = useCallback((event: IssueDeletedMessageEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!parser) return;
+
+        const newTickets = tickets ? Array.from(tickets) : [];
+        const existingIndex = newTickets.findIndex( entry => entry.issueId === parser.issueId);
+
+        if(existingIndex === -1) return;
+
+        newTickets.splice(existingIndex, 1);
+
+        dispatchModToolsState({
+            type: ModToolsActions.SET_TICKETS,
+            payload: {
+                tickets: newTickets
+            }
+        });
+    }, [dispatchModToolsState, tickets]);
+
+    const onModeratorActionResultMessageEvent = useCallback((event: ModeratorActionResultMessageEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!parser) return;
+
+        if(parser.success)
+        {
+            // do something
+        }
+        else 
+        {
+            // let user know it was a failure
+        }
+    }, []);
+
+    const onCfhTopicsInitEvent = useCallback((event: CfhTopicsInitEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!parser) return;
+        
+        console.log(parser);
+    }, []);
+
+    const onCfhSanctionMessageEvent = useCallback((event: CfhSanctionMessageEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!parser) return;
+        
+        console.log(parser);
+    }, []);
+
     CreateMessageHook(ModeratorInitMessageEvent, onModeratorInitMessageEvent);
     CreateMessageHook(IssueInfoMessageEvent, onIssueInfoMessageEvent);
+    CreateMessageHook(ModeratorToolPreferencesEvent, onModeratorToolPreferencesEvent);
+    CreateMessageHook(IssuePickFailedMessageEvent, onIssuePickFailedMessageEvent);
+    CreateMessageHook(IssueDeletedMessageEvent, onIssueDeletedMessageEvent);
+    CreateMessageHook(ModeratorActionResultMessageEvent, onModeratorActionResultMessageEvent);
+    CreateMessageHook(CfhTopicsInitEvent, onCfhTopicsInitEvent);
+    CreateMessageHook(CfhSanctionMessageEvent, onCfhSanctionMessageEvent);
 
     const onRoomEngineEvent = useCallback((event: RoomEngineEvent) =>
     {

From 3ca58c81a4634462596c26ff09a0d9be35ea33ea Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Thu, 21 Oct 2021 02:06:12 -0500
Subject: [PATCH 21/29] finished mod action

---
 .../mod-tools/ModToolsMessageHandler.tsx      |  19 +-
 .../mod-tools/reducers/ModToolsReducer.tsx    |  13 +-
 .../mod-tools/utils/ModActionDefinition.ts    |  49 +++++
 .../ModToolsUserModActionView.tsx             | 181 +++++++++++++++++-
 .../ModToolsSendUserMessageView.tsx           |   4 +-
 5 files changed, 256 insertions(+), 10 deletions(-)
 create mode 100644 src/views/mod-tools/utils/ModActionDefinition.ts

diff --git a/src/views/mod-tools/ModToolsMessageHandler.tsx b/src/views/mod-tools/ModToolsMessageHandler.tsx
index 1c5713d1..0ffe0d0f 100644
--- a/src/views/mod-tools/ModToolsMessageHandler.tsx
+++ b/src/views/mod-tools/ModToolsMessageHandler.tsx
@@ -1,11 +1,12 @@
 import { CfhSanctionMessageEvent, CfhTopicsInitEvent, IssueDeletedMessageEvent, IssueInfoMessageEvent, IssuePickFailedMessageEvent, ModeratorActionResultMessageEvent, ModeratorInitMessageEvent, ModeratorToolPreferencesEvent, RoomEngineEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
+import { NotificationAlertEvent } from '../../events';
 import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
 import { ModToolsOpenRoomChatlogEvent } from '../../events/mod-tools/ModToolsOpenRoomChatlogEvent';
 import { ModToolsOpenRoomInfoEvent } from '../../events/mod-tools/ModToolsOpenRoomInfoEvent';
 import { ModToolsOpenUserChatlogEvent } from '../../events/mod-tools/ModToolsOpenUserChatlogEvent';
 import { ModToolsOpenUserInfoEvent } from '../../events/mod-tools/ModToolsOpenUserInfoEvent';
-import { CreateMessageHook, useRoomEngineEvent, useUiEvent } from '../../hooks';
+import { CreateMessageHook, dispatchUiEvent, useRoomEngineEvent, useUiEvent } from '../../hooks';
 import { useModToolsContext } from './context/ModToolsContext';
 import { ModToolsActions } from './reducers/ModToolsReducer';
 
@@ -84,6 +85,7 @@ export const ModToolsMessageHandler: FC<{}> = props =>
         if(!parser) return;
 
         // todo: let user know it failed
+        dispatchUiEvent(new NotificationAlertEvent(['Failed to pick issue'], null, null, null, 'Error', null));
     }, []);
 
     const onIssueDeletedMessageEvent = useCallback((event: IssueDeletedMessageEvent) =>
@@ -115,11 +117,11 @@ export const ModToolsMessageHandler: FC<{}> = props =>
 
         if(parser.success)
         {
-            // do something
+            dispatchUiEvent(new NotificationAlertEvent(['Moderation action was successfull'], null, null, null, 'Success', null));
         }
         else 
         {
-            // let user know it was a failure
+            dispatchUiEvent(new NotificationAlertEvent(['There was a problem applying that moderation action'], null, null, null, 'Error', null));
         }
     }, []);
 
@@ -128,9 +130,18 @@ export const ModToolsMessageHandler: FC<{}> = props =>
         const parser = event.getParser();
 
         if(!parser) return;
+
+        const categories = parser.callForHelpCategories;
+
+        dispatchModToolsState({
+            type: ModToolsActions.SET_CFH_CATEGORIES,
+            payload: {
+                cfhCategories: categories
+            }
+        });
         
         console.log(parser);
-    }, []);
+    }, [dispatchModToolsState]);
 
     const onCfhSanctionMessageEvent = useCallback((event: CfhSanctionMessageEvent) =>
     {
diff --git a/src/views/mod-tools/reducers/ModToolsReducer.tsx b/src/views/mod-tools/reducers/ModToolsReducer.tsx
index ee94db45..b6fcf343 100644
--- a/src/views/mod-tools/reducers/ModToolsReducer.tsx
+++ b/src/views/mod-tools/reducers/ModToolsReducer.tsx
@@ -1,4 +1,4 @@
-import { IssueMessageData, ModeratorInitData } from '@nitrots/nitro-renderer';
+import { CallForHelpCategoryData, IssueMessageData, ModeratorInitData } from '@nitrots/nitro-renderer';
 import { Reducer } from 'react';
 
 export interface IModToolsState
@@ -10,6 +10,7 @@ export interface IModToolsState
     openUserInfo: number[];
     openUserChatlogs: number[];
     tickets: IssueMessageData[]
+    cfhCategories: CallForHelpCategoryData[];
 }
 
 export interface IModToolsAction
@@ -23,6 +24,7 @@ export interface IModToolsAction
         openUserInfo?: number[];
         openUserChatlogs?: number[];
         tickets?: IssueMessageData[];
+        cfhCategories?: CallForHelpCategoryData[];
     }
 }
 
@@ -35,6 +37,7 @@ export class ModToolsActions
     public static SET_OPEN_ROOM_CHATLOGS: string = 'MTA_SET_OPEN_CHATLOGS';
     public static SET_OPEN_USER_CHATLOGS: string = 'MTA_SET_OPEN_USER_CHATLOGS';
     public static SET_TICKETS: string = 'MTA_SET_TICKETS';
+    public static SET_CFH_CATEGORIES: string = 'MTA_SET_CFH_CATEGORIES';
     public static RESET_STATE: string = 'MTA_RESET_STATE';
 }
 
@@ -45,7 +48,8 @@ export const initialModTools: IModToolsState = {
     openRoomChatlogs: null,
     openUserChatlogs: null,
     openUserInfo: null,
-    tickets: null
+    tickets: null,
+    cfhCategories: null
 };
 
 export const ModToolsReducer: Reducer<IModToolsState, IModToolsAction> = (state, action) =>
@@ -87,6 +91,11 @@ export const ModToolsReducer: Reducer<IModToolsState, IModToolsAction> = (state,
 
             return { ...state, tickets };
         }
+        case ModToolsActions.SET_CFH_CATEGORIES: {
+            const cfhCategories = (action.payload.cfhCategories || state.cfhCategories || null);
+
+            return { ...state, cfhCategories };
+        }
         case ModToolsActions.RESET_STATE: {
             return { ...initialModTools };
         }
diff --git a/src/views/mod-tools/utils/ModActionDefinition.ts b/src/views/mod-tools/utils/ModActionDefinition.ts
new file mode 100644
index 00000000..b8318afa
--- /dev/null
+++ b/src/views/mod-tools/utils/ModActionDefinition.ts
@@ -0,0 +1,49 @@
+export class ModActionDefinition
+{
+    public static ALERT:number = 1;
+    public static MUTE:number = 2;
+    public static BAN:number = 3;
+    public static KICK:number = 4;
+    public static TRADE_LOCK:number = 5;
+    public static MESSAGE:number = 6;
+
+    private readonly _actionId:number;
+    private readonly _name:string;
+    private readonly _actionType:number;
+    private readonly _sanctionTypeId:number;
+    private readonly _actionLengthHours:number;
+
+    constructor(actionId:number, actionName:string, actionType:number, sanctionTypeId:number, actionLengthHours:number)
+    {
+        this._actionId = actionId;
+        this._name = actionName;
+        this._actionType = actionType;
+        this._sanctionTypeId = sanctionTypeId;
+        this._actionLengthHours = actionLengthHours;
+    }
+
+    public get actionId():number
+    {
+        return this._actionId;
+    }
+
+    public get name():string
+    {
+        return this._name;
+    }
+
+    public get actionType():number
+    {
+        return this._actionType;
+    }
+
+    public get sanctionTypeId():number
+    {
+        return this._sanctionTypeId;
+    }
+
+    public get actionLengthHours():number
+    {
+        return this._actionLengthHours;
+    }
+}
diff --git a/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx b/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx
index 2a8495a2..59e244f8 100644
--- a/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx
+++ b/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx
@@ -1,16 +1,191 @@
-import { FC } from 'react';
+import { CallForHelpTopicData, DefaultSanctionMessageComposer, ModAlertMessageComposer, ModBanMessageComposer, ModKickMessageComposer, ModMessageMessageComposer, ModMuteMessageComposer, ModTradingLockMessageComposer } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useMemo, useState } from 'react';
+import { LocalizeText } from '../../../../../api';
+import { NotificationAlertEvent } from '../../../../../events';
+import { dispatchUiEvent, SendMessageHook } from '../../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
+import { useModToolsContext } from '../../../context/ModToolsContext';
+import { ModActionDefinition } from '../../../utils/ModActionDefinition';
 import { ModToolsUserModActionViewProps } from './ModToolsUserModActionView.types';
 
+const actions = [
+    new ModActionDefinition(1, 'Alert', ModActionDefinition.ALERT, 1, 0),
+    new ModActionDefinition(2, 'Mute 1h', ModActionDefinition.MUTE, 2, 0),
+    new ModActionDefinition(4, 'Ban 7 days', ModActionDefinition.BAN, 4, 0),
+    new ModActionDefinition(3, 'Ban 18h', ModActionDefinition.BAN, 3, 0),
+    new ModActionDefinition(5, 'Ban 30 days (step 1)', ModActionDefinition.BAN, 5, 0),
+    new ModActionDefinition(7, 'Ban 30 days (step 2)', ModActionDefinition.BAN, 7, 0),
+    new ModActionDefinition(6, 'Ban 100 years', ModActionDefinition.BAN, 6, 0),
+    new ModActionDefinition(106, 'Ban avatar-only 100 years', ModActionDefinition.BAN, 6, 0),
+    new ModActionDefinition(101, 'Kick', ModActionDefinition.KICK, 0, 0),
+    new ModActionDefinition(102, 'Lock trade 1 week', ModActionDefinition.TRADE_LOCK, 0, 168),
+    new ModActionDefinition(104, 'Lock trade permanent', ModActionDefinition.TRADE_LOCK, 0, 876000),
+    new ModActionDefinition(105, 'Message', ModActionDefinition.MESSAGE, 0, 0),
+];
+
 export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = props =>
 {
     const { user = null, onCloseClick = null } = props;
+    const { modToolsState = null, dispatchModToolsState = null } = useModToolsContext();
+    const { cfhCategories = null, settings = null } = modToolsState;
+    const [ selectedTopic, setSelectedTopic ] = useState(-1);
+    const [ selectedAction, setSelectedAction ] = useState(-1);
+    const [ message, setMessage ] = useState<string>('');
+
+    const topics = useMemo(() =>
+    {
+        const values: CallForHelpTopicData[] = [];
+
+        if(!cfhCategories) return values;
+
+        for(let category of cfhCategories)
+        {
+            for(let topic of category._Str_14841)
+            {
+                values.push(topic)
+            }
+        }
+
+        return values;
+    }, [cfhCategories]);
+
+    const sendSanction = useCallback(() =>
+    {
+        if(selectedTopic === -1)
+        {
+            dispatchUiEvent(new NotificationAlertEvent(['You must select a CFH topic'], null, null, null, 'Error', null));
+            return;
+        }
+        if(!settings || !settings.cfhPermission) 
+        {
+            dispatchUiEvent(new NotificationAlertEvent(['You do not have permission to do this'], null, null, null, 'Error', null));
+            return;
+        }
+
+        const category = topics[selectedTopic];
+        const sanction = actions[selectedAction];
+
+        if(!category)
+        {
+            dispatchUiEvent(new NotificationAlertEvent(['You must select a CFH topic'], null, null, null, 'Error', null));
+            return;
+        }
+
+        const messageOrDefault = message.trim().length === 0 ? LocalizeText('help.cfh.topic.' + category.id) : message;
+
+        if(!sanction) // send default sanction
+        {
+            SendMessageHook(new DefaultSanctionMessageComposer(user.userId, category.id, messageOrDefault));
+            onCloseClick(null);
+            return;
+        }
+
+        switch(sanction.actionType)
+        {
+            case ModActionDefinition.ALERT:
+            
+                    if(!settings.alertPermission)
+                    {
+                        dispatchUiEvent(new NotificationAlertEvent(['You have insufficient permissions.'], null, null, null, 'Error', null));
+                        return;
+                    }
+
+                    if(message.trim().length === 0)
+                    {
+                        dispatchUiEvent(new NotificationAlertEvent(['Please write a message to user.'], null, null, null, 'Error', null));
+                        return;
+                    }
+
+                    SendMessageHook(new ModAlertMessageComposer(user.userId, message, category.id));
+            
+                break;
+            case ModActionDefinition.MUTE: 
+                SendMessageHook(new ModMuteMessageComposer(user.userId, messageOrDefault, category.id));
+            
+                break;
+            case ModActionDefinition.BAN:
+                
+                    if(!settings.banPermission)
+                    {
+                        dispatchUiEvent(new NotificationAlertEvent(['You have insufficient permissions.'], null, null, null, 'Error', null));
+                        return;
+                    }
+
+                    SendMessageHook(new ModBanMessageComposer(user.userId, messageOrDefault, category.id, selectedAction, (sanction.actionId === 106)));
+                
+                break;
+
+            case ModActionDefinition.KICK:
+                
+                    if(!settings.kickPermission)
+                    {
+                        dispatchUiEvent(new NotificationAlertEvent(['You have insufficient permissions.'], null, null, null, 'Error', null));
+                        return;
+                    }
+
+                    SendMessageHook(new ModKickMessageComposer(user.userId, messageOrDefault, category.id));
+                
+                break;
+
+            case ModActionDefinition.TRADE_LOCK:
+                {
+                    const numSeconds = sanction.actionLengthHours * 60;
+                    SendMessageHook(new ModTradingLockMessageComposer(user.userId, messageOrDefault, numSeconds, category.id));
+                }
+                break;
+
+            case ModActionDefinition.MESSAGE:
+                
+                    if(message.trim().length === 0)
+                    {
+                        dispatchUiEvent(new NotificationAlertEvent(['Please write a message to user.'], null, null, null, 'Error', null));
+                        return;
+                    }
+
+                    SendMessageHook(new ModMessageMessageComposer(user.userId, message,  category.id));
+                
+                break;
+        }
+
+        onCloseClick(null);
+    }, [message, onCloseClick, selectedAction, selectedTopic, settings, topics, user.userId]);
 
     return (
         <NitroCardView className="nitro-mod-tools-user-action" simple={true}>
-            <NitroCardHeaderView headerText={'Mod Action'} onCloseClick={ onCloseClick } />
+            <NitroCardHeaderView headerText={'Mod Action: ' + (user ? user.username : '')} onCloseClick={ onCloseClick } />
             <NitroCardContentView className="text-black">
-                {user && <div></div>}
+                { user && 
+                    <>
+                        <div className="form-group mb-2">
+                            <select className="form-control form-control-sm" value={selectedTopic} onChange={event => setSelectedTopic(parseInt(event.target.value))}>
+                                <option value={-1}>CFH Topic:</option>
+                                { topics.map( (topic,index) =>
+                                {
+                                    return (<option key={index} value={index}>{LocalizeText('help.cfh.topic.' + topic.id)}</option>)
+                                })}
+                            </select>
+                        </div>
+
+                        <div className="form-group mb-2">
+                            <select className="form-control form-control-sm" value={selectedAction} onChange={event => setSelectedAction(parseInt(event.target.value))}>
+                                <option value={-1}>Sanction type:</option>
+                                { actions.map( (action, index) =>
+                                {
+                                    return (<option key={index} value={index}>{ action.name }</option>)
+                                })}
+                            </select>
+                        </div>
+
+                        <div className="form-group mb-2">
+                            <label>Optional message type, overrides default</label>
+                            <textarea className="form-control" value={message} onChange={event => setMessage(event.target.value)}/>
+                        </div>
+
+                        <div className="form-group mb-2">
+                            <button type="button" className="btn btn-primary" onClick={ () => sendSanction()}>Sanction</button>
+                        </div>
+                    </>
+                }
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessageView.tsx b/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessageView.tsx
index f1e5f01f..80742cbe 100644
--- a/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessageView.tsx
+++ b/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessageView.tsx
@@ -15,7 +15,9 @@ export const ModToolsSendUserMessageView: FC<ModToolsSendUserMessageViewProps> =
         if(message.trim().length === 0) return;
 
         SendMessageHook(new ModMessageMessageComposer(user.userId, message, -999));
-    }, [message, user.userId]);
+
+        onCloseClick(null);
+    }, [message, onCloseClick, user.userId]);
 
     return (
         <NitroCardView className="nitro-mod-tools-user-message" simple={true}>

From 700a890b1d2a824b78b6c4c09f7dae4fadd7cd0e Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Thu, 21 Oct 2021 14:30:36 -0500
Subject: [PATCH 22/29] changes

---
 .../views/tickets/ModToolsTicketsView.tsx     |  6 ++-
 .../my-issues/ModToolsMyIssuesTabView.tsx     | 53 +++++++++++++++++++
 .../ModToolsMyIssuesTabView.types.ts          |  6 +++
 .../open-issues/ModToolsOpenIssuesTabView.tsx | 44 ++++++++++++++-
 .../ModToolsPickedIssuesTabView.tsx           | 53 +++++++++++++++++++
 .../ModToolsPickedIssuesTabView.types.ts      |  6 +++
 .../views/user/user-info/ModToolsUserView.tsx |  8 +--
 .../ModToolsUserModActionView.tsx             | 29 ++++++----
 .../ModToolsUserModActionView.types.ts        |  3 +-
 .../ModToolsUserRoomVisitsView.tsx            |  2 +-
 .../ModToolsUserRoomVisitsView.types.ts       |  3 +-
 .../ModToolsSendUserMessage.types.ts          |  3 +-
 .../ModToolsSendUserMessageView.tsx           | 13 +++--
 13 files changed, 202 insertions(+), 27 deletions(-)
 create mode 100644 src/views/mod-tools/views/tickets/my-issues/ModToolsMyIssuesTabView.tsx
 create mode 100644 src/views/mod-tools/views/tickets/my-issues/ModToolsMyIssuesTabView.types.ts
 create mode 100644 src/views/mod-tools/views/tickets/picked-issues/ModToolsPickedIssuesTabView.tsx
 create mode 100644 src/views/mod-tools/views/tickets/picked-issues/ModToolsPickedIssuesTabView.types.ts

diff --git a/src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx b/src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx
index 38b7986b..970d4f6f 100644
--- a/src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx
+++ b/src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx
@@ -4,7 +4,9 @@ import { GetSessionDataManager } from '../../../../api';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
 import { useModToolsContext } from '../../context/ModToolsContext';
 import { ModToolsTicketsViewProps } from './ModToolsTicketsView.types';
+import { ModToolsMyIssuesTabView } from './my-issues/ModToolsMyIssuesTabView';
 import { ModToolsOpenIssuesTabView } from './open-issues/ModToolsOpenIssuesTabView';
+import { ModToolsPickedIssuesTabView } from './picked-issues/ModToolsPickedIssuesTabView';
 
 const TABS: string[] = [
     'Open Issues',
@@ -45,9 +47,11 @@ export const ModToolsTicketsView: FC<ModToolsTicketsViewProps> = props =>
         switch(currentTab)
         {
             case 0: return <ModToolsOpenIssuesTabView openIssues={openIssues}/>;
+            case 1: return <ModToolsMyIssuesTabView myIssues={myIssues} />;
+            case 2: return <ModToolsPickedIssuesTabView pickedIssues={pickedIssues}/>;
             default: return null;
         }
-    }, [currentTab, openIssues]);
+    }, [currentTab, myIssues, openIssues, pickedIssues]);
 
     return (
         <NitroCardView className="nitro-mod-tools-tickets" simple={ false }>
diff --git a/src/views/mod-tools/views/tickets/my-issues/ModToolsMyIssuesTabView.tsx b/src/views/mod-tools/views/tickets/my-issues/ModToolsMyIssuesTabView.tsx
new file mode 100644
index 00000000..784ed52f
--- /dev/null
+++ b/src/views/mod-tools/views/tickets/my-issues/ModToolsMyIssuesTabView.tsx
@@ -0,0 +1,53 @@
+import { FC } from 'react';
+import { AutoSizer, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
+import { ModToolsMyIssuesTabViewProps } from './ModToolsMyIssuesTabView.types';
+
+export const ModToolsMyIssuesTabView: FC<ModToolsMyIssuesTabViewProps> = props =>
+{
+    const { myIssues = null } = props;
+
+    const RowRenderer: ListRowRenderer = (props: ListRowProps) =>
+    {
+        const item = myIssues[props.index];
+
+        return (
+            <div key={props.key} style={props.style} className="row issue-entry justify-content-start">
+                    <div className="col-auto text-center">{item.categoryId}</div>
+                    <div className="col justify-content-start username"><span className="fw-bold cursor-pointer">{item.reportedUserName}</span></div>
+                    <div className="col-sm-2 justify-content-start"><span className="text-break text-wrap h-100">{item.getOpenTime(new Date().getTime())}</span></div>
+                    <div className="col-sm-2">
+                        <button className="btn btn-sm btn-primary">View Issue</button>
+                    </div>
+            </div>
+        );
+    };
+    
+    return (
+        <>
+        <div className="row align-items-start w-100">
+            <div className="col-auto text-center fw-bold">Type</div>
+            <div className="col fw-bold">Room/Player</div>
+            <div className="col-sm-2 fw-bold">Opened</div>
+            <div className="col-sm-2"></div>
+        </div>
+        <div className="row w-100 h-100 issues">
+            <AutoSizer defaultWidth={400} defaultHeight={200}>
+                {({ height, width }) => 
+                {
+                    return (
+                        <List
+                            width={width}
+                            height={height}
+                            rowCount={myIssues.length}
+                            rowHeight={25}
+                            className={'issues-container'}
+                            rowRenderer={RowRenderer}
+                            />
+                    )
+                }
+                }
+            </AutoSizer>
+        </div>
+        </>
+    );
+}
diff --git a/src/views/mod-tools/views/tickets/my-issues/ModToolsMyIssuesTabView.types.ts b/src/views/mod-tools/views/tickets/my-issues/ModToolsMyIssuesTabView.types.ts
new file mode 100644
index 00000000..15935fc9
--- /dev/null
+++ b/src/views/mod-tools/views/tickets/my-issues/ModToolsMyIssuesTabView.types.ts
@@ -0,0 +1,6 @@
+import { IssueMessageData } from '@nitrots/nitro-renderer';
+
+export interface ModToolsMyIssuesTabViewProps
+{
+    myIssues: IssueMessageData[];
+}
diff --git a/src/views/mod-tools/views/tickets/open-issues/ModToolsOpenIssuesTabView.tsx b/src/views/mod-tools/views/tickets/open-issues/ModToolsOpenIssuesTabView.tsx
index d6ebe1bc..76db3355 100644
--- a/src/views/mod-tools/views/tickets/open-issues/ModToolsOpenIssuesTabView.tsx
+++ b/src/views/mod-tools/views/tickets/open-issues/ModToolsOpenIssuesTabView.tsx
@@ -1,11 +1,53 @@
 import { FC } from 'react';
+import { AutoSizer, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
 import { ModToolsOpenIssuesTabViewProps } from './ModToolsOpenIssuesTabView.types';
 
 export const ModToolsOpenIssuesTabView: FC<ModToolsOpenIssuesTabViewProps> = props =>
 {
     const { openIssues = null } = props;
 
+    const RowRenderer: ListRowRenderer = (props: ListRowProps) =>
+    {
+        const item = openIssues[props.index];
+
+        return (
+            <div key={props.key} style={props.style} className="row issue-entry justify-content-start">
+                    <div className="col-auto text-center">{item.categoryId}</div>
+                    <div className="col justify-content-start username"><span className="fw-bold cursor-pointer">{item.reportedUserName}</span></div>
+                    <div className="col-sm-2 justify-content-start"><span className="text-break text-wrap h-100">{item.getOpenTime(new Date().getTime())}</span></div>
+                    <div className="col-sm-2">
+                        <button className="btn btn-sm btn-primary">Pick Issue</button>
+                    </div>
+            </div>
+        );
+    };
+    
     return (
-        <div>{openIssues.length}</div>
+        <>
+        <div className="row align-items-start w-100">
+            <div className="col-auto text-center fw-bold">Type</div>
+            <div className="col fw-bold">Room/Player</div>
+            <div className="col-sm-2 fw-bold">Opened</div>
+            <div className="col-sm-2"></div>
+        </div>
+        <div className="row w-100 h-100 issues">
+            <AutoSizer defaultWidth={400} defaultHeight={200}>
+                {({ height, width }) => 
+                {
+                    return (
+                        <List
+                            width={width}
+                            height={height}
+                            rowCount={openIssues.length}
+                            rowHeight={25}
+                            className={'issues-container'}
+                            rowRenderer={RowRenderer}
+                            />
+                    )
+                }
+                }
+            </AutoSizer>
+        </div>
+        </>
     );
 }
diff --git a/src/views/mod-tools/views/tickets/picked-issues/ModToolsPickedIssuesTabView.tsx b/src/views/mod-tools/views/tickets/picked-issues/ModToolsPickedIssuesTabView.tsx
new file mode 100644
index 00000000..00588ee0
--- /dev/null
+++ b/src/views/mod-tools/views/tickets/picked-issues/ModToolsPickedIssuesTabView.tsx
@@ -0,0 +1,53 @@
+import { FC } from 'react';
+import { AutoSizer, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
+import { ModToolsPickedIssuesTabViewProps } from './ModToolsPickedIssuesTabView.types';
+
+export const ModToolsPickedIssuesTabView: FC<ModToolsPickedIssuesTabViewProps> = props =>
+{
+    const { pickedIssues = null } = props;
+
+    const RowRenderer: ListRowRenderer = (props: ListRowProps) =>
+    {
+        const item = pickedIssues[props.index];
+
+        return (
+            <div key={props.key} style={props.style} className="row issue-entry justify-content-start">
+                    <div className="col-auto text-center">{item.categoryId}</div>
+                    <div className="col justify-content-start username"><span className="fw-bold cursor-pointer">{item.reportedUserName}</span></div>
+                    <div className="col-sm-2 justify-content-start"><span className="text-break text-wrap h-100">{item.getOpenTime(new Date().getTime())}</span></div>
+                    <div className="col-sm-2">
+                        {item.pickerUserName}
+                    </div>
+            </div>
+        );
+    };
+    
+    return (
+        <>
+        <div className="row align-items-start w-100">
+            <div className="col-auto text-center fw-bold">Type</div>
+            <div className="col fw-bold">Room/Player</div>
+            <div className="col-sm-2 fw-bold">Opened</div>
+            <div className="col-sm-2 fw-bold">Picker</div>
+        </div>
+        <div className="row w-100 h-100 issues">
+            <AutoSizer defaultWidth={400} defaultHeight={200}>
+                {({ height, width }) => 
+                {
+                    return (
+                        <List
+                            width={width}
+                            height={height}
+                            rowCount={pickedIssues.length}
+                            rowHeight={25}
+                            className={'issues-container'}
+                            rowRenderer={RowRenderer}
+                            />
+                    )
+                }
+                }
+            </AutoSizer>
+        </div>
+        </>
+    );
+}
diff --git a/src/views/mod-tools/views/tickets/picked-issues/ModToolsPickedIssuesTabView.types.ts b/src/views/mod-tools/views/tickets/picked-issues/ModToolsPickedIssuesTabView.types.ts
new file mode 100644
index 00000000..c69b1772
--- /dev/null
+++ b/src/views/mod-tools/views/tickets/picked-issues/ModToolsPickedIssuesTabView.types.ts
@@ -0,0 +1,6 @@
+import { IssueMessageData } from '@nitrots/nitro-renderer';
+
+export interface ModToolsPickedIssuesTabViewProps
+{
+    pickedIssues: IssueMessageData[];
+}
diff --git a/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx b/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx
index ab1fc54e..24f8c876 100644
--- a/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx
+++ b/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx
@@ -103,7 +103,7 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
     return (
         <>
             <NitroCardView className="nitro-mod-tools-user" simple={true}>
-                <NitroCardHeaderView headerText={ LocalizeText('modtools.userinfo.title', [ 'username' ], [ userInfo.userName ]) } onCloseClick={ onCloseClick } />
+                <NitroCardHeaderView headerText={ LocalizeText('modtools.userinfo.title', [ 'username' ], [ userInfo.userName ]) } onCloseClick={ () => onCloseClick() } />
                 <NitroCardContentView className="text-black">
                     <NitroLayoutGrid>
                         <NitroLayoutGridColumn size={ 8 }>
@@ -143,11 +143,11 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
                 </NitroCardContentView>
             </NitroCardView>
             { sendMessageVisible &&
-                <ModToolsSendUserMessageView user={ { userId: userId, username: userInfo.userName } } onCloseClick={ event => setSendMessageVisible(false) } /> }
+                <ModToolsSendUserMessageView user={ { userId: userId, username: userInfo.userName } } onCloseClick={ () => setSendMessageVisible(false) } /> }
             { modActionVisible &&
-                <ModToolsUserModActionView user={ { userId: userId, username: userInfo.userName } } onCloseClick={ event => setModActionVisible(false) } /> }
+                <ModToolsUserModActionView user={ { userId: userId, username: userInfo.userName } } onCloseClick={ () => setModActionVisible(false) } /> }
             { roomVisitsVisible &&
-                <ModToolsUserRoomVisitsView userId={ userId } onCloseClick={ event => setRoomVisitsVisible(false) } /> }
+                <ModToolsUserRoomVisitsView userId={ userId } onCloseClick={ () => setRoomVisitsVisible(false) } /> }
         </>
     );
 }
diff --git a/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx b/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx
index 59e244f8..0afe70cd 100644
--- a/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx
+++ b/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx
@@ -49,13 +49,20 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
         return values;
     }, [cfhCategories]);
 
+    const sendDefaultSanction = useCallback(() =>
+    {
+        SendMessageHook(new DefaultSanctionMessageComposer(user.userId, selectedTopic, message));
+        onCloseClick();
+    }, [message, onCloseClick, selectedTopic, user.userId]);
+
     const sendSanction = useCallback(() =>
     {
-        if(selectedTopic === -1)
+        if( (selectedTopic === -1) || (selectedAction === -1) )
         {
-            dispatchUiEvent(new NotificationAlertEvent(['You must select a CFH topic'], null, null, null, 'Error', null));
+            dispatchUiEvent(new NotificationAlertEvent(['You must select a CFH topic and Sanction'], null, null, null, 'Error', null));
             return;
         }
+
         if(!settings || !settings.cfhPermission) 
         {
             dispatchUiEvent(new NotificationAlertEvent(['You do not have permission to do this'], null, null, null, 'Error', null));
@@ -71,15 +78,14 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
             return;
         }
 
-        const messageOrDefault = message.trim().length === 0 ? LocalizeText('help.cfh.topic.' + category.id) : message;
-
-        if(!sanction) // send default sanction
+        if(!sanction)
         {
-            SendMessageHook(new DefaultSanctionMessageComposer(user.userId, category.id, messageOrDefault));
-            onCloseClick(null);
+            dispatchUiEvent(new NotificationAlertEvent(['You must select a sanction'], null, null, null, 'Error', null));
             return;
         }
 
+        const messageOrDefault = message.trim().length === 0 ? LocalizeText('help.cfh.topic.' + category.id) : message;
+
         switch(sanction.actionType)
         {
             case ModActionDefinition.ALERT:
@@ -147,12 +153,12 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
                 break;
         }
 
-        onCloseClick(null);
+        onCloseClick();
     }, [message, onCloseClick, selectedAction, selectedTopic, settings, topics, user.userId]);
 
     return (
         <NitroCardView className="nitro-mod-tools-user-action" simple={true}>
-            <NitroCardHeaderView headerText={'Mod Action: ' + (user ? user.username : '')} onCloseClick={ onCloseClick } />
+            <NitroCardHeaderView headerText={'Mod Action: ' + (user ? user.username : '')} onCloseClick={ () => onCloseClick() } />
             <NitroCardContentView className="text-black">
                 { user && 
                     <>
@@ -182,7 +188,10 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
                         </div>
 
                         <div className="form-group mb-2">
-                            <button type="button" className="btn btn-primary" onClick={ () => sendSanction()}>Sanction</button>
+                            <div className="d-flex justify-content-between">
+                                <button type="button" className="btn btn-danger w-100 me-2" onClick={ () => sendSanction()}>Sanction</button>
+                                <button className="btn btn-success w-100" onClick={ () => sendDefaultSanction()}>Default Sanction</button>
+                            </div>
                         </div>
                     </>
                 }
diff --git a/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.types.ts b/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.types.ts
index 28714abc..2025d10d 100644
--- a/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.types.ts
+++ b/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.types.ts
@@ -1,8 +1,7 @@
-import { MouseEvent } from 'react';
 import { ISelectedUser } from '../../../utils/ISelectedUser';
 
 export interface ModToolsUserModActionViewProps
 {
     user: ISelectedUser;
-    onCloseClick: (event: MouseEvent) => void;
+    onCloseClick: () => void;
 }
diff --git a/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx b/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx
index c79117dc..4f09828f 100644
--- a/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx
+++ b/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx
@@ -42,7 +42,7 @@ export const ModToolsUserRoomVisitsView: FC<ModToolsUserRoomVisitsViewProps> = p
 
     return (
         <NitroCardView className="nitro-mod-tools-user-visits" simple={true}>
-            <NitroCardHeaderView headerText={'User Visits'} onCloseClick={ onCloseClick } />
+            <NitroCardHeaderView headerText={'User Visits'} onCloseClick={ () => onCloseClick() } />
             <NitroCardContentView className="text-black">
                 {roomVisitData &&
                     <div className="row h-100 w-100 user-visits">
diff --git a/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.types.ts b/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.types.ts
index 4bbcaf40..a5188a3c 100644
--- a/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.types.ts
+++ b/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.types.ts
@@ -1,7 +1,6 @@
-import { MouseEvent } from 'react';
 
 export interface ModToolsUserRoomVisitsViewProps
 {
     userId: number;
-    onCloseClick: (event: MouseEvent) => void;
+    onCloseClick: () => void;
 }
diff --git a/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessage.types.ts b/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessage.types.ts
index e8f071d8..617945f0 100644
--- a/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessage.types.ts
+++ b/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessage.types.ts
@@ -1,8 +1,7 @@
-import { MouseEvent } from 'react';
 import { ISelectedUser } from '../../../utils/ISelectedUser';
 
 export interface ModToolsSendUserMessageViewProps
 {
     user: ISelectedUser;
-    onCloseClick: (event: MouseEvent) => void;
+    onCloseClick: () => void;
 }
diff --git a/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessageView.tsx b/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessageView.tsx
index 80742cbe..a332b426 100644
--- a/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessageView.tsx
+++ b/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessageView.tsx
@@ -1,6 +1,7 @@
 import { ModMessageMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
-import { SendMessageHook } from '../../../../../hooks';
+import { NotificationAlertEvent } from '../../../../../events';
+import { dispatchUiEvent, SendMessageHook } from '../../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
 import { ModToolsSendUserMessageViewProps } from './ModToolsSendUserMessage.types';
 
@@ -12,16 +13,20 @@ export const ModToolsSendUserMessageView: FC<ModToolsSendUserMessageViewProps> =
 
     const sendMessage = useCallback(() =>
     {
-        if(message.trim().length === 0) return;
+        if(message.trim().length === 0)
+        {
+            dispatchUiEvent(new NotificationAlertEvent(['Please write a message to user.'], null, null, null, 'Error', null));
+            return;
+        }
 
         SendMessageHook(new ModMessageMessageComposer(user.userId, message, -999));
 
-        onCloseClick(null);
+        onCloseClick();
     }, [message, onCloseClick, user.userId]);
 
     return (
         <NitroCardView className="nitro-mod-tools-user-message" simple={true}>
-            <NitroCardHeaderView headerText={'Send Message'} onCloseClick={ onCloseClick } />
+            <NitroCardHeaderView headerText={'Send Message'} onCloseClick={ () => onCloseClick() } />
             <NitroCardContentView className="text-black">
                 {user && <>
                     <div>Message To: {user.username}</div>

From 6be3567a0fcdb716fed63af8bf66b6ce2fb1b312 Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Thu, 21 Oct 2021 21:32:17 -0500
Subject: [PATCH 23/29] start chat history

---
 src/events/chat-history/ChatHistoryEvent.ts   |   9 ++
 src/views/Styles.scss                         |   1 +
 .../ChatHistoryMessageHandler.tsx             |  98 ++++++++++++++
 src/views/chat-history/ChatHistoryView.scss   |  32 +++++
 src/views/chat-history/ChatHistoryView.tsx    | 128 ++++++++++++++++++
 .../context/ChatHistoryContext.tsx            |  14 ++
 .../context/ChatHistoryContext.types.ts       |  13 ++
 .../reducers/ChatHistoryReducer.tsx           |  66 +++++++++
 src/views/chat-history/utils/Utilities.ts     |   5 +
 src/views/main/MainView.tsx                   |   2 +
 .../room-tools/RoomToolsWidgetView.tsx        |   3 +
 11 files changed, 371 insertions(+)
 create mode 100644 src/events/chat-history/ChatHistoryEvent.ts
 create mode 100644 src/views/chat-history/ChatHistoryMessageHandler.tsx
 create mode 100644 src/views/chat-history/ChatHistoryView.scss
 create mode 100644 src/views/chat-history/ChatHistoryView.tsx
 create mode 100644 src/views/chat-history/context/ChatHistoryContext.tsx
 create mode 100644 src/views/chat-history/context/ChatHistoryContext.types.ts
 create mode 100644 src/views/chat-history/reducers/ChatHistoryReducer.tsx
 create mode 100644 src/views/chat-history/utils/Utilities.ts

diff --git a/src/events/chat-history/ChatHistoryEvent.ts b/src/events/chat-history/ChatHistoryEvent.ts
new file mode 100644
index 00000000..bf057561
--- /dev/null
+++ b/src/events/chat-history/ChatHistoryEvent.ts
@@ -0,0 +1,9 @@
+import { NitroEvent } from '@nitrots/nitro-renderer';
+
+export class ChatHistoryEvent extends NitroEvent
+{
+    public static SHOW_CHAT_HISTORY: string = 'CHE_SHOW_CHAT_HISTORY';
+    public static HIDE_CHAT_HISTORY: string = 'CHE_HIDE_CHAT_HISTORY';
+    public static TOGGLE_CHAT_HISTORY: string = 'CHE_TOGGLE_CHAT_HISTORY';
+    public static CHAT_HISTORY_CHANGED: string = 'CHE_CHAT_HISTORY_CHANGED';
+}
diff --git a/src/views/Styles.scss b/src/views/Styles.scss
index 4f31d9e5..f66d2a1a 100644
--- a/src/views/Styles.scss
+++ b/src/views/Styles.scss
@@ -20,3 +20,4 @@
 @import './achievements/AchievementsView';
 @import './user-settings/UserSettingsView';
 @import './user-profile/UserProfileVew';
+@import './chat-history/ChatHistoryView';
diff --git a/src/views/chat-history/ChatHistoryMessageHandler.tsx b/src/views/chat-history/ChatHistoryMessageHandler.tsx
new file mode 100644
index 00000000..9a0da789
--- /dev/null
+++ b/src/views/chat-history/ChatHistoryMessageHandler.tsx
@@ -0,0 +1,98 @@
+import { RoomInfoEvent, RoomSessionChatEvent, RoomSessionEvent } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useState } from 'react';
+import { GetRoomSession } from '../../api';
+import { ChatHistoryEvent } from '../../events/chat-history/ChatHistoryEvent';
+import { CreateMessageHook, dispatchUiEvent, useRoomSessionManagerEvent } from '../../hooks';
+import { useChatHistoryContext } from './context/ChatHistoryContext';
+import { ChatEntryType, ChatHistoryAction, CHAT_HISTORY_MAX, IChatEntry } from './reducers/ChatHistoryReducer';
+import { currentDate } from './utils/Utilities';
+
+export const ChatHistoryMessageHandler: FC<{}> = props =>
+{
+    const { chatHistoryState = null, dispatchChatHistoryState = null } = useChatHistoryContext();
+    const { chats = null, roomHistory = null } = chatHistoryState;
+
+    const [needsRoomInsert, setNeedsRoomInsert ] = useState(false);
+
+    const addChatEntry = useCallback((entry: IChatEntry) =>
+    {
+        const newChats = [...chats];
+
+        newChats.push(entry);
+
+        //check for overflow
+        if(newChats.length > CHAT_HISTORY_MAX)
+        {
+            newChats.shift();
+        }
+
+        dispatchChatHistoryState({
+            type: ChatHistoryAction.SET_CHATS,
+            payload: {
+                chats: newChats
+            }
+        }); 
+       
+        dispatchUiEvent(new ChatHistoryEvent(ChatHistoryEvent.CHAT_HISTORY_CHANGED));
+        
+    }, [chats, dispatchChatHistoryState]);
+
+    const onChatEvent = useCallback((event: RoomSessionChatEvent) =>
+    {
+        const roomSession = GetRoomSession();
+
+        if(!roomSession) return;
+
+        const userData = roomSession.userDataManager.getUserDataByIndex(event.objectId);
+
+        if(!userData) return;
+         
+        const timeString = currentDate();
+
+        const entry: IChatEntry = { id: userData.webID, name: userData.name, look: userData.figure, message: event.message, timestamp: timeString, type: ChatEntryType.TYPE_CHAT };
+
+        addChatEntry(entry);
+    }, [addChatEntry]);
+    
+    useRoomSessionManagerEvent(RoomSessionChatEvent.CHAT_EVENT, onChatEvent);
+
+    const onRoomSessionEvent = useCallback((event: RoomSessionEvent) =>
+    {
+        switch(event.type)
+        {
+            case RoomSessionEvent.STARTED:
+                setNeedsRoomInsert(true);
+                break;
+            case RoomSessionEvent.ENDED:
+                //dispatchUiEvent(new ChatHistoryEvent(ChatHistoryEvent.HIDE_CHAT_HISTORY));
+                break;
+        }
+    }, []);
+
+    useRoomSessionManagerEvent(RoomSessionEvent.ENDED, onRoomSessionEvent);
+    useRoomSessionManagerEvent(RoomSessionEvent.STARTED, onRoomSessionEvent);
+
+    const onRoomInfoEvent = useCallback((event: RoomInfoEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!parser) return;
+
+        const session = GetRoomSession();
+
+        if(!session || (session.roomId !== parser.data.roomId)) return;
+
+        if(needsRoomInsert)
+        {
+            const chatEntry: IChatEntry = { id: parser.data.roomId, name: parser.data.roomName, timestamp: currentDate(), type: ChatEntryType.TYPE_ROOM_INFO };
+
+            addChatEntry(chatEntry);
+
+            setNeedsRoomInsert(false);
+        }
+    }, [addChatEntry, needsRoomInsert]);
+
+    CreateMessageHook(RoomInfoEvent, onRoomInfoEvent);
+    
+    return null;
+}
diff --git a/src/views/chat-history/ChatHistoryView.scss b/src/views/chat-history/ChatHistoryView.scss
new file mode 100644
index 00000000..ba3a4451
--- /dev/null
+++ b/src/views/chat-history/ChatHistoryView.scss
@@ -0,0 +1,32 @@
+.nitro-chat-history
+{
+    width: 250px;
+
+    padding: 2px;
+    background-color: #1C323F;
+    border: 2px solid rgba(255, 255, 255, 0.5);
+    border-radius: 0.25rem;
+
+    .container-fluid
+    {
+        .nitro-card-header
+        {
+            background-color: #3d5f6e;
+            color: #fff;
+        }
+
+        background-color: #1C323F;
+        
+    }
+
+    .chat-history-content
+    {
+        background-color: #1C323F;
+
+        .chat-history-container
+        {
+            background-color: #1C323F;
+            min-height: 200px;
+        }
+    }
+}
diff --git a/src/views/chat-history/ChatHistoryView.tsx b/src/views/chat-history/ChatHistoryView.tsx
new file mode 100644
index 00000000..a6f3ff3a
--- /dev/null
+++ b/src/views/chat-history/ChatHistoryView.tsx
@@ -0,0 +1,128 @@
+import { FC, useCallback, useEffect, useReducer, useRef, useState } from 'react';
+import { AutoSizer, CellMeasurer, CellMeasurerCache, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
+import { ChatHistoryEvent } from '../../events/chat-history/ChatHistoryEvent';
+import { useUiEvent } from '../../hooks';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
+import { ChatHistoryMessageHandler } from './ChatHistoryMessageHandler';
+import { ChatHistoryContextProvider } from './context/ChatHistoryContext';
+import { ChatEntryType, ChatHistoryReducer, initialChatHistory } from './reducers/ChatHistoryReducer';
+
+export const ChatHistoryView: FC<{}> = props =>
+{
+    const [ isVisible, setIsVisible ] = useState(false);
+    const [ chatHistoryState, dispatchChatHistoryState ] = useReducer(ChatHistoryReducer, initialChatHistory);
+    const { chats = null } = chatHistoryState;
+    const elementRef = useRef<List>(null);
+
+    const onChatHistoryEvent = useCallback((event: ChatHistoryEvent) =>
+    {
+        switch(event.type)
+        {
+            case ChatHistoryEvent.SHOW_CHAT_HISTORY:
+                setIsVisible(true);
+                break;
+            case ChatHistoryEvent.HIDE_CHAT_HISTORY:
+                setIsVisible(false);
+                break;
+            case ChatHistoryEvent.TOGGLE_CHAT_HISTORY:
+                setIsVisible(!isVisible);
+                break;
+            case ChatHistoryEvent.CHAT_HISTORY_CHANGED:
+                break;
+        }
+    }, [isVisible]);
+
+    useUiEvent(ChatHistoryEvent.HIDE_CHAT_HISTORY, onChatHistoryEvent);
+    useUiEvent(ChatHistoryEvent.SHOW_CHAT_HISTORY, onChatHistoryEvent);
+    useUiEvent(ChatHistoryEvent.TOGGLE_CHAT_HISTORY, onChatHistoryEvent);
+    useUiEvent(ChatHistoryEvent.CHAT_HISTORY_CHANGED, onChatHistoryEvent);
+
+    const cache = new CellMeasurerCache({
+        defaultHeight: 25,
+        fixedWidth: true
+    });
+
+    const RowRenderer: ListRowRenderer = (props: ListRowProps) =>
+    {
+        const item = chats[props.index];
+
+        return (
+            <CellMeasurer
+                cache={cache}
+                columnIndex={0}
+                key={props.key}
+                parent={props.parent}
+                rowIndex={props.index}
+            >
+                <div key={props.key} style={props.style} className="row chatlog-entry justify-content-start">
+                    {(item.type === ChatEntryType.TYPE_CHAT) &&
+                    <>
+                        <div className="col-auto text-center">{item.timestamp}</div>
+                        <div className="col-auto justify-content-start username">
+                            <span className="fw-bold cursor-pointer" dangerouslySetInnerHTML={ { __html: item.name }} />
+                        </div>
+                        <div className="col justify-content-start h-100">
+                            <span className="text-break text-wrap h-100">{item.message}</span>
+                        </div>
+                    </>
+                    }
+                    {(item.type === ChatEntryType.TYPE_ROOM_INFO) &&
+                    <>
+                        <div className="col-auto text-center">{item.timestamp}</div>
+                        <div className="col-auto justify-content-start username">
+                            <span className="fw-bold cursor-pointer">{item.name}</span>
+                        </div>
+                        <div className="col justify-content-start h-100">
+                            <span className="text-break text-wrap h-100">{item.message}</span>
+                        </div>
+                    </>
+                    }
+                    
+                </div>
+            </CellMeasurer>
+        );
+    };
+
+    useEffect(() =>
+    {
+        if(elementRef && elementRef.current && isVisible)
+        {
+            elementRef.current.scrollToRow(chats.length - 1);
+        }
+        console.log(chats.length);
+    }, [chats, isVisible])
+
+    return (
+        <ChatHistoryContextProvider value={ { chatHistoryState, dispatchChatHistoryState } }>
+            <ChatHistoryMessageHandler />
+            {isVisible &&
+            <NitroCardView uniqueKey="chat-history" className="nitro-chat-history" simple={ false }>
+                <NitroCardHeaderView headerText={ 'Chat History' } onCloseClick={ event => setIsVisible(false) } />
+                <NitroCardContentView className="chat-history-content" style={{ backgroundColor: '#1C323F !important' }}>
+                    <div className="row w-100 h-100 chat-history-container">
+                            <AutoSizer defaultWidth={250} defaultHeight={200}>
+                                {({ height, width }) => 
+                                {
+                                    cache.clearAll();
+                                    
+                                    return (
+                                        <List
+                                            ref={elementRef}
+                                            width={width}
+                                            height={height}
+                                            rowCount={chats.length}
+                                            rowHeight={cache.rowHeight}
+                                            className={'chat-history-list'}
+                                            rowRenderer={RowRenderer}
+                                            deferredMeasurementCache={cache} />
+                                    )
+                                }
+                                }
+                            </AutoSizer>
+                        </div>
+                </NitroCardContentView>
+            </NitroCardView>
+            }
+        </ChatHistoryContextProvider>
+    );
+}
diff --git a/src/views/chat-history/context/ChatHistoryContext.tsx b/src/views/chat-history/context/ChatHistoryContext.tsx
new file mode 100644
index 00000000..10c8ee3f
--- /dev/null
+++ b/src/views/chat-history/context/ChatHistoryContext.tsx
@@ -0,0 +1,14 @@
+import { createContext, FC, useContext } from 'react';
+import { ChatHistoryContextProps, IChatHistoryContext } from './ChatHistoryContext.types';
+
+const ChatHistoryContext = createContext<IChatHistoryContext>({
+    chatHistoryState: null,
+    dispatchChatHistoryState: null
+});
+
+export const ChatHistoryContextProvider: FC<ChatHistoryContextProps> = props =>
+{
+    return <ChatHistoryContext.Provider value={ props.value }>{ props.children }</ChatHistoryContext.Provider>
+}
+
+export const useChatHistoryContext = () => useContext(ChatHistoryContext);
diff --git a/src/views/chat-history/context/ChatHistoryContext.types.ts b/src/views/chat-history/context/ChatHistoryContext.types.ts
new file mode 100644
index 00000000..57cbbd91
--- /dev/null
+++ b/src/views/chat-history/context/ChatHistoryContext.types.ts
@@ -0,0 +1,13 @@
+import { Dispatch, ProviderProps } from 'react';
+import { IChatHistoryAction, IChatHistoryState } from '../reducers/ChatHistoryReducer';
+
+export interface IChatHistoryContext
+{
+    chatHistoryState: IChatHistoryState;
+    dispatchChatHistoryState: Dispatch<IChatHistoryAction>;
+}
+
+export interface ChatHistoryContextProps extends ProviderProps<IChatHistoryContext>
+{
+
+}
diff --git a/src/views/chat-history/reducers/ChatHistoryReducer.tsx b/src/views/chat-history/reducers/ChatHistoryReducer.tsx
new file mode 100644
index 00000000..4a51ff8c
--- /dev/null
+++ b/src/views/chat-history/reducers/ChatHistoryReducer.tsx
@@ -0,0 +1,66 @@
+import { Reducer } from 'react';
+
+export interface IChatHistoryState {
+    chats: IChatEntry[];
+    roomHistory: IRoomHistoryEntry[];
+}
+
+export interface IChatEntry {
+    id: number;
+    name: string;
+    look?: string;
+    message?: string;
+    timestamp: string;
+    type: number;
+}
+
+export interface IRoomHistoryEntry {
+    id: number;
+    name: string;
+}
+
+export class ChatEntryType
+{
+    public static TYPE_CHAT = 1;
+    public static TYPE_ROOM_INFO = 2;
+}
+
+export interface IChatHistoryAction
+{
+    type: string;
+    payload: {
+        chats?: IChatEntry[];
+        roomHistory?: IRoomHistoryEntry[];
+    }
+}
+
+export class ChatHistoryAction
+{
+    public static SET_CHATS: string = 'CHA_SET_CHATS';
+    public static SET_ROOM_HISTORY: string = 'CHA_SET_ROOM_HISTORY';
+}
+
+export const initialChatHistory: IChatHistoryState = {
+    chats: [],
+    roomHistory: []
+};
+
+export const CHAT_HISTORY_MAX = 1000;
+export const ROOM_HISTORY_MAX = 10;
+
+export const ChatHistoryReducer: Reducer<IChatHistoryState, IChatHistoryAction> = (state, action) =>
+{
+    switch(action.type)
+    {
+        case ChatHistoryAction.SET_CHATS: {
+            const chats = (action.payload.chats || state.chats || null);
+
+            return { ...state, chats };
+        }
+        case ChatHistoryAction.SET_ROOM_HISTORY: {
+            const roomHistory = (action.payload.roomHistory || state.roomHistory || null);
+
+            return { ...state, roomHistory };
+        }
+    }
+}
diff --git a/src/views/chat-history/utils/Utilities.ts b/src/views/chat-history/utils/Utilities.ts
new file mode 100644
index 00000000..4661146a
--- /dev/null
+++ b/src/views/chat-history/utils/Utilities.ts
@@ -0,0 +1,5 @@
+export const currentDate = () =>
+{
+    const currentTime = new Date();
+    return `${currentTime.getHours()}:${currentTime.getMinutes()}`;
+}
diff --git a/src/views/main/MainView.tsx b/src/views/main/MainView.tsx
index 49e28a61..2a7e1427 100644
--- a/src/views/main/MainView.tsx
+++ b/src/views/main/MainView.tsx
@@ -7,6 +7,7 @@ import { AchievementsView } from '../achievements/AchievementsView';
 import { AvatarEditorView } from '../avatar-editor/AvatarEditorView';
 import { CameraWidgetView } from '../camera/CameraWidgetView';
 import { CatalogView } from '../catalog/CatalogView';
+import { ChatHistoryView } from '../chat-history/ChatHistoryView';
 import { FriendsView } from '../friends/FriendsView';
 import { GroupsView } from '../groups/GroupsView';
 import { HelpView } from '../help/HelpView';
@@ -58,6 +59,7 @@ export const MainView: FC<MainViewProps> = props =>
             <ToolbarView isInRoom={ !landingViewVisible } />
             <ModToolsView />
             <RoomHostView />
+            <ChatHistoryView />
             <WiredView />
             <AvatarEditorView />
             <AchievementsView />
diff --git a/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx
index 250e979d..d52ef382 100644
--- a/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx
+++ b/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText, RoomWidgetZoomToggleMessage } from '../../../../api';
 import { NavigatorEvent } from '../../../../events';
+import { ChatHistoryEvent } from '../../../../events/chat-history/ChatHistoryEvent';
 import { dispatchUiEvent } from '../../../../hooks/events';
 import { SendMessageHook } from '../../../../hooks/messages';
 import { useRoomContext } from '../../context/RoomContext';
@@ -27,6 +28,8 @@ export const RoomToolsWidgetView: FC<{}> = props =>
                 setIsZoomedIn(value => !value);
                 return;
             case 'chat_history':
+                dispatchUiEvent(new ChatHistoryEvent(ChatHistoryEvent.TOGGLE_CHAT_HISTORY));
+                //setIsExpanded(false); close this ??
                 return;
             case 'like_room':
                 if(isLiked) return;

From 91e59fce047c0c8ef33037be84ed6912a0ac6877 Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Fri, 22 Oct 2021 17:37:54 -0500
Subject: [PATCH 24/29] refactored state

---
 .../ChatHistoryMessageHandler.tsx             | 55 ++++++++-------
 src/views/chat-history/ChatHistoryView.scss   | 22 +++++-
 src/views/chat-history/ChatHistoryView.tsx    | 69 +++++++++++++------
 .../context/ChatHistoryContext.tsx            |  2 +-
 .../context/ChatHistoryContext.types.ts       | 41 ++++++++++-
 .../reducers/ChatHistoryReducer.tsx           | 66 ------------------
 .../chat-history/utils/ChatHistoryState.ts    | 32 +++++++++
 .../chat-history/utils/RoomHistoryState.ts    | 32 +++++++++
 8 files changed, 204 insertions(+), 115 deletions(-)
 delete mode 100644 src/views/chat-history/reducers/ChatHistoryReducer.tsx
 create mode 100644 src/views/chat-history/utils/ChatHistoryState.ts
 create mode 100644 src/views/chat-history/utils/RoomHistoryState.ts

diff --git a/src/views/chat-history/ChatHistoryMessageHandler.tsx b/src/views/chat-history/ChatHistoryMessageHandler.tsx
index 9a0da789..f56702a4 100644
--- a/src/views/chat-history/ChatHistoryMessageHandler.tsx
+++ b/src/views/chat-history/ChatHistoryMessageHandler.tsx
@@ -1,41 +1,46 @@
 import { RoomInfoEvent, RoomSessionChatEvent, RoomSessionEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { GetRoomSession } from '../../api';
-import { ChatHistoryEvent } from '../../events/chat-history/ChatHistoryEvent';
-import { CreateMessageHook, dispatchUiEvent, useRoomSessionManagerEvent } from '../../hooks';
+import { CreateMessageHook, useRoomSessionManagerEvent } from '../../hooks';
 import { useChatHistoryContext } from './context/ChatHistoryContext';
-import { ChatEntryType, ChatHistoryAction, CHAT_HISTORY_MAX, IChatEntry } from './reducers/ChatHistoryReducer';
+import { ChatEntryType, CHAT_HISTORY_MAX, IChatEntry, IRoomHistoryEntry, ROOM_HISTORY_MAX } from './context/ChatHistoryContext.types';
 import { currentDate } from './utils/Utilities';
 
 export const ChatHistoryMessageHandler: FC<{}> = props =>
 {
-    const { chatHistoryState = null, dispatchChatHistoryState = null } = useChatHistoryContext();
-    const { chats = null, roomHistory = null } = chatHistoryState;
+    const { chatHistoryState = null, roomHistoryState = null } = useChatHistoryContext();
 
     const [needsRoomInsert, setNeedsRoomInsert ] = useState(false);
 
     const addChatEntry = useCallback((entry: IChatEntry) =>
     {
-        const newChats = [...chats];
-
-        newChats.push(entry);
+        entry.id = chatHistoryState.chats.length;
+        
+        chatHistoryState.chats.push(entry);
 
         //check for overflow
-        if(newChats.length > CHAT_HISTORY_MAX)
+        if(chatHistoryState.chats.length > CHAT_HISTORY_MAX)
         {
-            newChats.shift();
+            chatHistoryState.chats.shift();
+        }
+        chatHistoryState.notify();
+       
+        //dispatchUiEvent(new ChatHistoryEvent(ChatHistoryEvent.CHAT_HISTORY_CHANGED));
+        
+    }, [chatHistoryState]);
+
+    const addRoomHistoryEntry = useCallback((entry: IRoomHistoryEntry) =>
+    {
+        roomHistoryState.roomHistory.push(entry);
+
+        // check for overflow
+        if(roomHistoryState.roomHistory.length > ROOM_HISTORY_MAX)
+        {
+            roomHistoryState.roomHistory.shift();
         }
 
-        dispatchChatHistoryState({
-            type: ChatHistoryAction.SET_CHATS,
-            payload: {
-                chats: newChats
-            }
-        }); 
-       
-        dispatchUiEvent(new ChatHistoryEvent(ChatHistoryEvent.CHAT_HISTORY_CHANGED));
-        
-    }, [chats, dispatchChatHistoryState]);
+        roomHistoryState.notify();
+    }, [roomHistoryState]);
 
     const onChatEvent = useCallback((event: RoomSessionChatEvent) =>
     {
@@ -49,7 +54,7 @@ export const ChatHistoryMessageHandler: FC<{}> = props =>
          
         const timeString = currentDate();
 
-        const entry: IChatEntry = { id: userData.webID, name: userData.name, look: userData.figure, message: event.message, timestamp: timeString, type: ChatEntryType.TYPE_CHAT };
+        const entry: IChatEntry = { id: -1, entityId: userData.webID, name: userData.name, look: userData.figure, message: event.message, timestamp: timeString, type: ChatEntryType.TYPE_CHAT };
 
         addChatEntry(entry);
     }, [addChatEntry]);
@@ -84,13 +89,17 @@ export const ChatHistoryMessageHandler: FC<{}> = props =>
 
         if(needsRoomInsert)
         {
-            const chatEntry: IChatEntry = { id: parser.data.roomId, name: parser.data.roomName, timestamp: currentDate(), type: ChatEntryType.TYPE_ROOM_INFO };
+            const chatEntry: IChatEntry = { id: -1, entityId: parser.data.roomId, name: parser.data.roomName, timestamp: currentDate(), type: ChatEntryType.TYPE_ROOM_INFO };
 
             addChatEntry(chatEntry);
 
+            const roomEntry: IRoomHistoryEntry = { id: parser.data.roomId, name: parser.data.roomName };
+
+            addRoomHistoryEntry(roomEntry);
+
             setNeedsRoomInsert(false);
         }
-    }, [addChatEntry, needsRoomInsert]);
+    }, [addChatEntry, addRoomHistoryEntry, needsRoomInsert]);
 
     CreateMessageHook(RoomInfoEvent, onRoomInfoEvent);
     
diff --git a/src/views/chat-history/ChatHistoryView.scss b/src/views/chat-history/ChatHistoryView.scss
index ba3a4451..3d83a554 100644
--- a/src/views/chat-history/ChatHistoryView.scss
+++ b/src/views/chat-history/ChatHistoryView.scss
@@ -1,6 +1,6 @@
 .nitro-chat-history
 {
-    width: 250px;
+    width: 300px;
 
     padding: 2px;
     background-color: #1C323F;
@@ -27,6 +27,26 @@
         {
             background-color: #1C323F;
             min-height: 200px;
+
+            .chat-history-list
+            {
+                .chathistory-entry
+                {
+                    .head-container
+                    {
+                        height: 44px;
+                        width: 42px;
+                    }
+
+                    .friend-bar-item-head {
+                        top: -30px;
+                        left: 15px;
+                        pointer-events: none;
+                        height: 44px;
+                        width: 42px;
+                    }
+                }
+            }
         }
     }
 }
diff --git a/src/views/chat-history/ChatHistoryView.tsx b/src/views/chat-history/ChatHistoryView.tsx
index a6f3ff3a..442a6065 100644
--- a/src/views/chat-history/ChatHistoryView.tsx
+++ b/src/views/chat-history/ChatHistoryView.tsx
@@ -1,19 +1,37 @@
-import { FC, useCallback, useEffect, useReducer, useRef, useState } from 'react';
-import { AutoSizer, CellMeasurer, CellMeasurerCache, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { AutoSizer, CellMeasurer, CellMeasurerCache, List, ListRowProps, ListRowRenderer, Size } from 'react-virtualized';
 import { ChatHistoryEvent } from '../../events/chat-history/ChatHistoryEvent';
 import { useUiEvent } from '../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
 import { ChatHistoryMessageHandler } from './ChatHistoryMessageHandler';
 import { ChatHistoryContextProvider } from './context/ChatHistoryContext';
-import { ChatEntryType, ChatHistoryReducer, initialChatHistory } from './reducers/ChatHistoryReducer';
+import { ChatEntryType } from './context/ChatHistoryContext.types';
+import { ChatHistoryState } from './utils/ChatHistoryState';
+import { RoomHistoryState } from './utils/RoomHistoryState';
 
 export const ChatHistoryView: FC<{}> = props =>
 {
     const [ isVisible, setIsVisible ] = useState(false);
-    const [ chatHistoryState, dispatchChatHistoryState ] = useReducer(ChatHistoryReducer, initialChatHistory);
-    const { chats = null } = chatHistoryState;
+    const [ chatHistoryUpdateId, setChatHistoryUpdateId ] = useState(-1);
+    const [ roomHistoryUpdateId, setRoomHistoryUpdateId ] = useState(-1);
+    const [ chatHistoryState, setChatHistoryState ] = useState(new ChatHistoryState());
+    const [ roomHistoryState, setRoomHistoryState ] = useState(new RoomHistoryState());
     const elementRef = useRef<List>(null);
 
+    useEffect(() =>
+    {
+        const chatState = new ChatHistoryState();
+        const roomState = new RoomHistoryState();
+
+        chatState.notifier = () => setChatHistoryUpdateId(prevValue => (prevValue + 1));
+        roomState.notifier = () => setRoomHistoryUpdateId(prevValue => (prevValue + 1));
+
+        setChatHistoryState(chatState);
+        setRoomHistoryState(roomState);
+
+        return () => {chatState.notifier = null; roomState.notifier = null;};
+    }, []);
+    
     const onChatHistoryEvent = useCallback((event: ChatHistoryEvent) =>
     {
         switch(event.type)
@@ -37,15 +55,19 @@ export const ChatHistoryView: FC<{}> = props =>
     useUiEvent(ChatHistoryEvent.TOGGLE_CHAT_HISTORY, onChatHistoryEvent);
     useUiEvent(ChatHistoryEvent.CHAT_HISTORY_CHANGED, onChatHistoryEvent);
 
-    const cache = new CellMeasurerCache({
-        defaultHeight: 25,
-        fixedWidth: true
-    });
+    const cache = useMemo(() => 
+{
+        return new CellMeasurerCache({
+            defaultHeight: 25,
+            fixedWidth: true,
+            //keyMapper: (index) => chatHistoryState.chats[index].id
+        });
+    }, []);
 
     const RowRenderer: ListRowRenderer = (props: ListRowProps) =>
     {
-        const item = chats[props.index];
-
+        const item = chatHistoryState.chats[props.index];
+        console.log(props.index);
         return (
             <CellMeasurer
                 cache={cache}
@@ -54,7 +76,7 @@ export const ChatHistoryView: FC<{}> = props =>
                 parent={props.parent}
                 rowIndex={props.index}
             >
-                <div key={props.key} style={props.style} className="row chatlog-entry justify-content-start">
+                <div key={props.key} style={props.style} className="row chathistory-entry justify-content-start">
                     {(item.type === ChatEntryType.TYPE_CHAT) &&
                     <>
                         <div className="col-auto text-center">{item.timestamp}</div>
@@ -83,38 +105,43 @@ export const ChatHistoryView: FC<{}> = props =>
         );
     };
 
+    const onResize = useCallback((info: Size) =>
+    {
+        cache.clearAll();
+    }, [cache]);
+
     useEffect(() =>
     {
         if(elementRef && elementRef.current && isVisible)
         {
-            elementRef.current.scrollToRow(chats.length - 1);
+            //elementRef.current.measureAllRows();
+            elementRef.current.scrollToRow(chatHistoryState.chats.length - 1);
         }
-        console.log(chats.length);
-    }, [chats, isVisible])
+        //console.log(chatHistoryState.chats.length);
+    }, [chatHistoryState.chats, isVisible, chatHistoryUpdateId])
 
     return (
-        <ChatHistoryContextProvider value={ { chatHistoryState, dispatchChatHistoryState } }>
+        <ChatHistoryContextProvider value={ { chatHistoryState, roomHistoryState } }>
             <ChatHistoryMessageHandler />
             {isVisible &&
             <NitroCardView uniqueKey="chat-history" className="nitro-chat-history" simple={ false }>
                 <NitroCardHeaderView headerText={ 'Chat History' } onCloseClick={ event => setIsVisible(false) } />
                 <NitroCardContentView className="chat-history-content" style={{ backgroundColor: '#1C323F !important' }}>
                     <div className="row w-100 h-100 chat-history-container">
-                            <AutoSizer defaultWidth={250} defaultHeight={200}>
+                            <AutoSizer defaultWidth={300} defaultHeight={200} onResize={onResize}>
                                 {({ height, width }) => 
                                 {
-                                    cache.clearAll();
-                                    
                                     return (
                                         <List
                                             ref={elementRef}
                                             width={width}
                                             height={height}
-                                            rowCount={chats.length}
+                                            rowCount={chatHistoryState.chats.length}
                                             rowHeight={cache.rowHeight}
                                             className={'chat-history-list'}
                                             rowRenderer={RowRenderer}
-                                            deferredMeasurementCache={cache} />
+                                            deferredMeasurementCache={cache}
+                                        />
                                     )
                                 }
                                 }
diff --git a/src/views/chat-history/context/ChatHistoryContext.tsx b/src/views/chat-history/context/ChatHistoryContext.tsx
index 10c8ee3f..981d6007 100644
--- a/src/views/chat-history/context/ChatHistoryContext.tsx
+++ b/src/views/chat-history/context/ChatHistoryContext.tsx
@@ -3,7 +3,7 @@ import { ChatHistoryContextProps, IChatHistoryContext } from './ChatHistoryConte
 
 const ChatHistoryContext = createContext<IChatHistoryContext>({
     chatHistoryState: null,
-    dispatchChatHistoryState: null
+    roomHistoryState: null
 });
 
 export const ChatHistoryContextProvider: FC<ChatHistoryContextProps> = props =>
diff --git a/src/views/chat-history/context/ChatHistoryContext.types.ts b/src/views/chat-history/context/ChatHistoryContext.types.ts
index 57cbbd91..e691d471 100644
--- a/src/views/chat-history/context/ChatHistoryContext.types.ts
+++ b/src/views/chat-history/context/ChatHistoryContext.types.ts
@@ -1,12 +1,47 @@
-import { Dispatch, ProviderProps } from 'react';
-import { IChatHistoryAction, IChatHistoryState } from '../reducers/ChatHistoryReducer';
+import { ProviderProps } from 'react';
 
 export interface IChatHistoryContext
 {
     chatHistoryState: IChatHistoryState;
-    dispatchChatHistoryState: Dispatch<IChatHistoryAction>;
+    roomHistoryState: IRoomHistoryState;
 }
 
+export interface IChatHistoryState {
+    chats: IChatEntry[];
+    notifier: () => void
+    notify(): void;
+}
+
+export interface IRoomHistoryState {
+    roomHistory: IRoomHistoryEntry[];
+    notifier: () => void
+    notify(): void;
+}
+
+export interface IChatEntry {
+    id: number;
+    entityId: number;
+    name: string;
+    look?: string;
+    message?: string;
+    timestamp: string;
+    type: number;
+}
+
+export interface IRoomHistoryEntry {
+    id: number;
+    name: string;
+}
+
+export class ChatEntryType
+{
+    public static TYPE_CHAT = 1;
+    public static TYPE_ROOM_INFO = 2;
+}
+
+export const CHAT_HISTORY_MAX = 1000;
+export const ROOM_HISTORY_MAX = 10;
+
 export interface ChatHistoryContextProps extends ProviderProps<IChatHistoryContext>
 {
 
diff --git a/src/views/chat-history/reducers/ChatHistoryReducer.tsx b/src/views/chat-history/reducers/ChatHistoryReducer.tsx
deleted file mode 100644
index 4a51ff8c..00000000
--- a/src/views/chat-history/reducers/ChatHistoryReducer.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Reducer } from 'react';
-
-export interface IChatHistoryState {
-    chats: IChatEntry[];
-    roomHistory: IRoomHistoryEntry[];
-}
-
-export interface IChatEntry {
-    id: number;
-    name: string;
-    look?: string;
-    message?: string;
-    timestamp: string;
-    type: number;
-}
-
-export interface IRoomHistoryEntry {
-    id: number;
-    name: string;
-}
-
-export class ChatEntryType
-{
-    public static TYPE_CHAT = 1;
-    public static TYPE_ROOM_INFO = 2;
-}
-
-export interface IChatHistoryAction
-{
-    type: string;
-    payload: {
-        chats?: IChatEntry[];
-        roomHistory?: IRoomHistoryEntry[];
-    }
-}
-
-export class ChatHistoryAction
-{
-    public static SET_CHATS: string = 'CHA_SET_CHATS';
-    public static SET_ROOM_HISTORY: string = 'CHA_SET_ROOM_HISTORY';
-}
-
-export const initialChatHistory: IChatHistoryState = {
-    chats: [],
-    roomHistory: []
-};
-
-export const CHAT_HISTORY_MAX = 1000;
-export const ROOM_HISTORY_MAX = 10;
-
-export const ChatHistoryReducer: Reducer<IChatHistoryState, IChatHistoryAction> = (state, action) =>
-{
-    switch(action.type)
-    {
-        case ChatHistoryAction.SET_CHATS: {
-            const chats = (action.payload.chats || state.chats || null);
-
-            return { ...state, chats };
-        }
-        case ChatHistoryAction.SET_ROOM_HISTORY: {
-            const roomHistory = (action.payload.roomHistory || state.roomHistory || null);
-
-            return { ...state, roomHistory };
-        }
-    }
-}
diff --git a/src/views/chat-history/utils/ChatHistoryState.ts b/src/views/chat-history/utils/ChatHistoryState.ts
new file mode 100644
index 00000000..895c00a1
--- /dev/null
+++ b/src/views/chat-history/utils/ChatHistoryState.ts
@@ -0,0 +1,32 @@
+import { IChatEntry, IChatHistoryState } from '../context/ChatHistoryContext.types';
+
+export class ChatHistoryState implements IChatHistoryState
+{
+    private _chats: IChatEntry[];
+    private _notifier: () => void;
+
+    constructor()
+    {
+        this._chats = [];
+    }
+
+    public get chats(): IChatEntry[]
+    {
+        return this._chats;
+    }
+
+    public get notifier(): () => void
+    {
+        return this._notifier;
+    }
+
+    public set notifier(notifier: () => void)
+    {
+        this._notifier = notifier;
+    }
+
+    notify(): void
+    {
+        if(this._notifier) this._notifier();
+    }
+}
diff --git a/src/views/chat-history/utils/RoomHistoryState.ts b/src/views/chat-history/utils/RoomHistoryState.ts
new file mode 100644
index 00000000..d3002b81
--- /dev/null
+++ b/src/views/chat-history/utils/RoomHistoryState.ts
@@ -0,0 +1,32 @@
+import { IRoomHistoryEntry, IRoomHistoryState } from '../context/ChatHistoryContext.types';
+
+export class RoomHistoryState implements IRoomHistoryState
+{
+    private _roomHistory: IRoomHistoryEntry[];
+    private _notifier: () => void;
+
+    constructor()
+    {
+        this._roomHistory = [];
+    }
+
+    public get roomHistory(): IRoomHistoryEntry[]
+    {
+        return this._roomHistory;
+    }
+
+    public get notifier(): () => void
+    {
+        return this._notifier;
+    }
+
+    public set notifier(notifier: () => void)
+    {
+        this._notifier = notifier;
+    }
+
+    notify(): void
+    {
+        if(this._notifier) this._notifier();
+    }
+}

From feac3cc959bd3fb5654ca898dc054ca787309b3e Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Fri, 22 Oct 2021 19:56:51 -0500
Subject: [PATCH 25/29] fix scrolling

---
 src/views/chat-history/ChatHistoryView.tsx | 26 ++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/views/chat-history/ChatHistoryView.tsx b/src/views/chat-history/ChatHistoryView.tsx
index 442a6065..2628bddb 100644
--- a/src/views/chat-history/ChatHistoryView.tsx
+++ b/src/views/chat-history/ChatHistoryView.tsx
@@ -1,5 +1,6 @@
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AutoSizer, CellMeasurer, CellMeasurerCache, List, ListRowProps, ListRowRenderer, Size } from 'react-virtualized';
+import { RenderedRows } from 'react-virtualized/dist/es/List';
 import { ChatHistoryEvent } from '../../events/chat-history/ChatHistoryEvent';
 import { useUiEvent } from '../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
@@ -12,6 +13,7 @@ import { RoomHistoryState } from './utils/RoomHistoryState';
 export const ChatHistoryView: FC<{}> = props =>
 {
     const [ isVisible, setIsVisible ] = useState(false);
+    const [ needsScroll, setNeedsScroll ] = useState(false);
     const [ chatHistoryUpdateId, setChatHistoryUpdateId ] = useState(-1);
     const [ roomHistoryUpdateId, setRoomHistoryUpdateId ] = useState(-1);
     const [ chatHistoryState, setChatHistoryState ] = useState(new ChatHistoryState());
@@ -67,7 +69,7 @@ export const ChatHistoryView: FC<{}> = props =>
     const RowRenderer: ListRowRenderer = (props: ListRowProps) =>
     {
         const item = chatHistoryState.chats[props.index];
-        console.log(props.index);
+
         return (
             <CellMeasurer
                 cache={cache}
@@ -110,15 +112,30 @@ export const ChatHistoryView: FC<{}> = props =>
         cache.clearAll();
     }, [cache]);
 
+    const onRowsRendered = useCallback((info: RenderedRows) =>
+    {
+        if(elementRef && elementRef.current && isVisible && needsScroll)
+        {
+            console.log('stop ' + info.stopIndex);
+            //if(chatHistoryState.chats.length > 0) elementRef.current.measureAllRows();
+            elementRef.current.scrollToRow(chatHistoryState.chats.length);
+            console.log('scroll')
+            setNeedsScroll(false);
+        }
+    }, [chatHistoryState.chats.length, isVisible, needsScroll]);
+
     useEffect(() =>
     {
+        
         if(elementRef && elementRef.current && isVisible)
         {
-            //elementRef.current.measureAllRows();
-            elementRef.current.scrollToRow(chatHistoryState.chats.length - 1);
+            //if(chatHistoryState.chats.length > 0) elementRef.current.measureAllRows();
+            elementRef.current.scrollToRow(chatHistoryState.chats.length);
         }
         //console.log(chatHistoryState.chats.length);
-    }, [chatHistoryState.chats, isVisible, chatHistoryUpdateId])
+        
+       setNeedsScroll(true);
+    }, [chatHistoryState.chats, isVisible, chatHistoryUpdateId]);
 
     return (
         <ChatHistoryContextProvider value={ { chatHistoryState, roomHistoryState } }>
@@ -140,6 +157,7 @@ export const ChatHistoryView: FC<{}> = props =>
                                             rowHeight={cache.rowHeight}
                                             className={'chat-history-list'}
                                             rowRenderer={RowRenderer}
+                                            onRowsRendered={onRowsRendered}
                                             deferredMeasurementCache={cache}
                                         />
                                     )

From ec03987c27536a68e3926b7f52beaad60db717ed Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Sat, 23 Oct 2021 15:02:42 -0500
Subject: [PATCH 26/29] move chat input on small screens

---
 src/views/room/widgets/chat-input/ChatInputView.scss | 8 ++++++++
 src/views/toolbar/ToolbarView.scss                   | 5 +++++
 2 files changed, 13 insertions(+)

diff --git a/src/views/room/widgets/chat-input/ChatInputView.scss b/src/views/room/widgets/chat-input/ChatInputView.scss
index d2814d44..650a2e73 100644
--- a/src/views/room/widgets/chat-input/ChatInputView.scss
+++ b/src/views/room/widgets/chat-input/ChatInputView.scss
@@ -10,6 +10,14 @@
     padding-right: 10px;
     width: 100%;
 
+    @include media-breakpoint-down(sm) {
+        display: flex;
+        position: absolute;
+        bottom: 70px;
+        left: calc(100% / 3);
+        width: 200px;
+    }
+
     &:before {
         content: "";
         position: absolute;
diff --git a/src/views/toolbar/ToolbarView.scss b/src/views/toolbar/ToolbarView.scss
index 57401e81..779b8160 100644
--- a/src/views/toolbar/ToolbarView.scss
+++ b/src/views/toolbar/ToolbarView.scss
@@ -14,6 +14,11 @@
 
         #toolbar-chat-input-container {
             margin: 0 10px;
+
+            @include media-breakpoint-down(sm) {
+                 width: 0px;
+                 height: 0px
+            }
         }
 
         .navigation-items {

From 0d57e407aa788f701629877c132883b34851b3ec Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Sat, 23 Oct 2021 19:00:48 -0500
Subject: [PATCH 27/29] style changes

---
 src/layout/card/NitroCardView.scss            | 15 +++++---
 .../card/content/NitroCardContentView.scss    |  4 +++
 .../card/content/NitroCardContentView.tsx     |  4 +--
 .../content/NitroCardContextView.types.ts     |  4 ++-
 .../card/header/NitroCardHeaderView.scss      |  5 +++
 .../card/header/NitroCardHeaderView.tsx       |  4 +--
 .../card/header/NitroCardHeaderView.types.ts  |  1 +
 src/views/chat-history/ChatHistoryView.scss   | 33 +++--------------
 src/views/chat-history/ChatHistoryView.tsx    | 35 ++++++++-----------
 src/views/chat-history/utils/Utilities.ts     |  2 +-
 .../mod-tools/views/chatlog/ChatlogView.scss  |  4 +++
 .../mod-tools/views/chatlog/ChatlogView.tsx   |  2 +-
 12 files changed, 52 insertions(+), 61 deletions(-)

diff --git a/src/layout/card/NitroCardView.scss b/src/layout/card/NitroCardView.scss
index b604cd44..2ba6ec2e 100644
--- a/src/layout/card/NitroCardView.scss
+++ b/src/layout/card/NitroCardView.scss
@@ -4,6 +4,17 @@ $nitro-card-tabs-height: 33px;
 .nitro-card {
     pointer-events: all;
     resize: both;
+
+    &.theme-dark {
+        padding: 2px;
+        background-color: #1C323F;
+        border: 2px solid rgba(255, 255, 255, 0.5);
+        border-radius: 0.25rem;
+    }
+
+    &.theme-primary {
+        border: $border-width solid $border-color;
+    }
 }
 
 .nitro-card-responsive {
@@ -15,10 +26,6 @@ $nitro-card-tabs-height: 33px;
     pointer-events: none;
     overflow: hidden;
 
-    .theme-primary {
-        border: $border-width solid $border-color;
-    }
-
     @include media-breakpoint-down(lg) {
         
         .draggable-window {
diff --git a/src/layout/card/content/NitroCardContentView.scss b/src/layout/card/content/NitroCardContentView.scss
index c56cad8c..a3ec273d 100644
--- a/src/layout/card/content/NitroCardContentView.scss
+++ b/src/layout/card/content/NitroCardContentView.scss
@@ -3,6 +3,10 @@
     padding-top: $container-padding-x;
     padding-bottom: $container-padding-x;
     overflow: auto;
+
+    &.theme-dark {
+        background-color: #1C323F !important;
+    }
 }
 
 @include media-breakpoint-down(lg) {
diff --git a/src/layout/card/content/NitroCardContentView.tsx b/src/layout/card/content/NitroCardContentView.tsx
index 8565b3ab..4553d7dc 100644
--- a/src/layout/card/content/NitroCardContentView.tsx
+++ b/src/layout/card/content/NitroCardContentView.tsx
@@ -4,11 +4,11 @@ import { NitroCardContentViewProps } from './NitroCardContextView.types';
 
 export const NitroCardContentView: FC<NitroCardContentViewProps> = props =>
 {
-    const { children = null, className = '', ...rest } = props;
+    const { theme = 'primary',  children = null, className = '', ...rest } = props;
     const { simple = false } = useNitroCardContext();
     
     return (
-        <div className={ `container-fluid bg-light content-area d-flex flex-column overflow-auto ${ (simple ? 'simple' : '') } ${ className || '' }` } { ...rest }>
+        <div className={ `container-fluid ${ theme === 'primary' ? 'bg-light' : ''} content-area d-flex flex-column overflow-auto theme-${theme} ${ (simple ? 'simple' : '') } ${ className || '' }` } { ...rest }>
             { children }
         </div>
     );
diff --git a/src/layout/card/content/NitroCardContextView.types.ts b/src/layout/card/content/NitroCardContextView.types.ts
index 120cd9d3..21b1d68d 100644
--- a/src/layout/card/content/NitroCardContextView.types.ts
+++ b/src/layout/card/content/NitroCardContextView.types.ts
@@ -2,4 +2,6 @@ import { DetailsHTMLAttributes } from 'react';
 
 
 export interface NitroCardContentViewProps extends DetailsHTMLAttributes<HTMLDivElement>
-{}
+{
+    theme?: string;
+}
diff --git a/src/layout/card/header/NitroCardHeaderView.scss b/src/layout/card/header/NitroCardHeaderView.scss
index b81b748e..86b81a48 100644
--- a/src/layout/card/header/NitroCardHeaderView.scss
+++ b/src/layout/card/header/NitroCardHeaderView.scss
@@ -15,6 +15,11 @@
         }
     }
 
+    &.theme-dark {
+        background-color: #3d5f6e !important;
+        color: #fff;
+    }
+
     .bg-tertiary-split {
         position: relative;
         border-bottom: 2px solid darken($quaternary, 5);
diff --git a/src/layout/card/header/NitroCardHeaderView.tsx b/src/layout/card/header/NitroCardHeaderView.tsx
index 2f314be7..c87585f1 100644
--- a/src/layout/card/header/NitroCardHeaderView.tsx
+++ b/src/layout/card/header/NitroCardHeaderView.tsx
@@ -4,7 +4,7 @@ import { NitroCardHeaderViewProps } from './NitroCardHeaderView.types';
 
 export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
 {
-    const { headerText = null, onCloseClick = null } = props;
+    const { headerText = null, onCloseClick = null, theme= 'primary' } = props;
     const { simple = false } = useNitroCardContext();
 
     const onMouseDown = useCallback((event: MouseEvent<HTMLDivElement>) =>
@@ -31,7 +31,7 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
 
     return (
         <div className="drag-handler container-fluid bg-primary">
-            <div className="row nitro-card-header overflow-hidden">
+            <div className={`row nitro-card-header overflow-hidden theme-${theme}`}>
                 <div className="d-flex justify-content-center align-items-center w-100 position-relative">
                     <div className="h4 text-white text-shadow header-text">{ headerText }</div>
                     <div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
diff --git a/src/layout/card/header/NitroCardHeaderView.types.ts b/src/layout/card/header/NitroCardHeaderView.types.ts
index d1d78d29..7a5c7e88 100644
--- a/src/layout/card/header/NitroCardHeaderView.types.ts
+++ b/src/layout/card/header/NitroCardHeaderView.types.ts
@@ -3,5 +3,6 @@ import { MouseEvent } from 'react';
 export interface NitroCardHeaderViewProps
 {
     headerText: string;
+    theme?: string;
     onCloseClick: (event: MouseEvent) => void;
 }
diff --git a/src/views/chat-history/ChatHistoryView.scss b/src/views/chat-history/ChatHistoryView.scss
index 3d83a554..d103ad8c 100644
--- a/src/views/chat-history/ChatHistoryView.scss
+++ b/src/views/chat-history/ChatHistoryView.scss
@@ -2,48 +2,23 @@
 {
     width: 300px;
 
-    padding: 2px;
-    background-color: #1C323F;
-    border: 2px solid rgba(255, 255, 255, 0.5);
-    border-radius: 0.25rem;
-
-    .container-fluid
-    {
-        .nitro-card-header
-        {
-            background-color: #3d5f6e;
-            color: #fff;
-        }
-
-        background-color: #1C323F;
-        
-    }
-
     .chat-history-content
     {
-        background-color: #1C323F;
 
         .chat-history-container
         {
-            background-color: #1C323F;
             min-height: 200px;
 
             .chat-history-list
             {
                 .chathistory-entry
                 {
-                    .head-container
-                    {
-                        height: 44px;
-                        width: 42px;
+                    .light {
+                        background-color: #121f27;
                     }
 
-                    .friend-bar-item-head {
-                        top: -30px;
-                        left: 15px;
-                        pointer-events: none;
-                        height: 44px;
-                        width: 42px;
+                    .dark {
+                        background-color: #0d171d;
                     }
                 }
             }
diff --git a/src/views/chat-history/ChatHistoryView.tsx b/src/views/chat-history/ChatHistoryView.tsx
index 2628bddb..d1121e9e 100644
--- a/src/views/chat-history/ChatHistoryView.tsx
+++ b/src/views/chat-history/ChatHistoryView.tsx
@@ -70,6 +70,8 @@ export const ChatHistoryView: FC<{}> = props =>
     {
         const item = chatHistoryState.chats[props.index];
 
+        const isDark = (props.index % 2 === 0);
+
         return (
             <CellMeasurer
                 cache={cache}
@@ -80,26 +82,17 @@ export const ChatHistoryView: FC<{}> = props =>
             >
                 <div key={props.key} style={props.style} className="row chathistory-entry justify-content-start">
                     {(item.type === ChatEntryType.TYPE_CHAT) &&
-                    <>
-                        <div className="col-auto text-center">{item.timestamp}</div>
-                        <div className="col-auto justify-content-start username">
-                            <span className="fw-bold cursor-pointer" dangerouslySetInnerHTML={ { __html: item.name }} />
-                        </div>
-                        <div className="col justify-content-start h-100">
-                            <span className="text-break text-wrap h-100">{item.message}</span>
-                        </div>
-                    </>
+                    <div className={`col d-flex flex-wrap text-break text-wrap ${isDark ? 'dark' : 'light'}`}>
+                        <div className="p-1">{item.timestamp}</div>
+                        <div className="p-1 fw-bold cursor-pointer" dangerouslySetInnerHTML={ { __html: (item.name + ':') }} />
+                        <div className="p-1 text-break text-wrap">{item.message}</div>
+                    </div>
                     }
                     {(item.type === ChatEntryType.TYPE_ROOM_INFO) &&
-                    <>
-                        <div className="col-auto text-center">{item.timestamp}</div>
-                        <div className="col-auto justify-content-start username">
-                            <span className="fw-bold cursor-pointer">{item.name}</span>
-                        </div>
-                        <div className="col justify-content-start h-100">
-                            <span className="text-break text-wrap h-100">{item.message}</span>
-                        </div>
-                    </>
+                    <div className={`col d-flex flex-wrap text-break text-wrap ${isDark ? 'dark' : 'light'}`}>
+                        <div className="p-1">{item.timestamp}</div>
+                        <div className="p-1 fw-bold cursor-pointer">{item.name}</div>
+                    </div>
                     }
                     
                 </div>
@@ -141,9 +134,9 @@ export const ChatHistoryView: FC<{}> = props =>
         <ChatHistoryContextProvider value={ { chatHistoryState, roomHistoryState } }>
             <ChatHistoryMessageHandler />
             {isVisible &&
-            <NitroCardView uniqueKey="chat-history" className="nitro-chat-history" simple={ false }>
-                <NitroCardHeaderView headerText={ 'Chat History' } onCloseClick={ event => setIsVisible(false) } />
-                <NitroCardContentView className="chat-history-content" style={{ backgroundColor: '#1C323F !important' }}>
+            <NitroCardView uniqueKey="chat-history" className="nitro-chat-history" simple={ false }  theme={'dark'} >
+                <NitroCardHeaderView headerText={ 'Chat History' } onCloseClick={ event => setIsVisible(false) } theme={'dark'}/>
+                <NitroCardContentView className="chat-history-content" theme={'dark'}>
                     <div className="row w-100 h-100 chat-history-container">
                             <AutoSizer defaultWidth={300} defaultHeight={200} onResize={onResize}>
                                 {({ height, width }) => 
diff --git a/src/views/chat-history/utils/Utilities.ts b/src/views/chat-history/utils/Utilities.ts
index 4661146a..29b00cfa 100644
--- a/src/views/chat-history/utils/Utilities.ts
+++ b/src/views/chat-history/utils/Utilities.ts
@@ -1,5 +1,5 @@
 export const currentDate = () =>
 {
     const currentTime = new Date();
-    return `${currentTime.getHours()}:${currentTime.getMinutes()}`;
+    return `${currentTime.getHours().toString().padStart(2, '0')}:${currentTime.getMinutes().toString().padStart(2, '0')}`;
 }
diff --git a/src/views/mod-tools/views/chatlog/ChatlogView.scss b/src/views/mod-tools/views/chatlog/ChatlogView.scss
index 0b61e1d1..5d5f7d04 100644
--- a/src/views/mod-tools/views/chatlog/ChatlogView.scss
+++ b/src/views/mod-tools/views/chatlog/ChatlogView.scss
@@ -22,6 +22,10 @@
                     width: $username-col-width;
                 }
 
+                &.highlighted {
+                    border: 1px solid $red;
+                }
+
                 .message {
                     word-break: break-all;
                 }
diff --git a/src/views/mod-tools/views/chatlog/ChatlogView.tsx b/src/views/mod-tools/views/chatlog/ChatlogView.tsx
index 1eedefe8..c20839cd 100644
--- a/src/views/mod-tools/views/chatlog/ChatlogView.tsx
+++ b/src/views/mod-tools/views/chatlog/ChatlogView.tsx
@@ -22,7 +22,7 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
                 parent={props.parent}
                 rowIndex={props.index}
             >
-                <div key={props.key} style={props.style} className="row chatlog-entry justify-content-start">
+                <div key={props.key} style={props.style} className={'row chatlog-entry justify-content-start ' + (item.hasHighlighting ? 'highlighted' : '')}>
                     <div className="col-auto text-center">{item.timestamp}</div>
                     <div className="col-sm-2 justify-content-start username"><span className="fw-bold cursor-pointer" onClick={() => SendMessageHook(new UserProfileComposer(item.userId))}>{item.userName}</span></div>
                     <div className="col justify-content-start h-100"><span className="text-break text-wrap h-100">{item.message}</span></div>

From 4603e5271d6708b6f365f661bd33abfbf70918cd Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Sun, 24 Oct 2021 21:54:54 -0500
Subject: [PATCH 28/29] added help center

---
 src/assets/images/help/help_index.png         | Bin 0 -> 2569 bytes
 src/events/help/HelpEvent.ts                  |   8 ++
 src/events/help/HelpReportUserEvent.ts        |  27 ++++++
 src/views/Styles.scss                         |   1 +
 .../ChatHistoryMessageHandler.tsx             |   4 +-
 src/views/chat-history/ChatHistoryView.tsx    |   9 +-
 .../{utils => common}/ChatHistoryState.ts     |   0
 .../chat-history/common/GetChatHistory.ts     |   7 ++
 .../{utils => common}/RoomHistoryState.ts     |   0
 .../context/ChatHistoryContext.types.ts       |   2 +
 src/views/help/HelpMessageHandler.tsx         |   4 +-
 src/views/help/HelpView.scss                  |  10 +++
 src/views/help/HelpView.tsx                   |  74 ++++++++++++++++-
 src/views/help/common/IUser.ts                |   5 ++
 src/views/help/context/HelpContext.tsx        |  14 ++++
 src/views/help/context/HelpContext.types.ts   |  33 ++++++++
 src/views/help/views/DescribeReportView.tsx   |  50 +++++++++++
 src/views/help/views/HelpIndexView.tsx        |  36 ++++++++
 .../help/views/SelectReportedChatsView.tsx    |  73 ++++++++++++++++
 .../help/views/SelectReportedUserView.tsx     |  78 ++++++++++++++++++
 src/views/help/views/SelectTopicView.tsx      |  53 ++++++++++++
 .../mod-tools/ModToolsMessageHandler.tsx      |   4 +
 src/views/mod-tools/ModToolsView.scss         |  12 +++
 .../mod-tools/common/GetCFHCategories.ts      |   7 ++
 .../views/tickets/ModToolsTicketsView.tsx     |   1 +
 .../my-issues/ModToolsMyIssuesTabView.tsx     |   2 +-
 .../open-issues/ModToolsOpenIssuesTabView.tsx |   2 +-
 .../ModToolsPickedIssuesTabView.tsx           |   2 +-
 .../ModToolsUserModActionView.tsx             |   2 +-
 src/views/purse/PurseView.tsx                 |   8 +-
 30 files changed, 513 insertions(+), 15 deletions(-)
 create mode 100644 src/assets/images/help/help_index.png
 create mode 100644 src/events/help/HelpEvent.ts
 create mode 100644 src/events/help/HelpReportUserEvent.ts
 rename src/views/chat-history/{utils => common}/ChatHistoryState.ts (100%)
 create mode 100644 src/views/chat-history/common/GetChatHistory.ts
 rename src/views/chat-history/{utils => common}/RoomHistoryState.ts (100%)
 create mode 100644 src/views/help/HelpView.scss
 create mode 100644 src/views/help/common/IUser.ts
 create mode 100644 src/views/help/context/HelpContext.tsx
 create mode 100644 src/views/help/context/HelpContext.types.ts
 create mode 100644 src/views/help/views/DescribeReportView.tsx
 create mode 100644 src/views/help/views/HelpIndexView.tsx
 create mode 100644 src/views/help/views/SelectReportedChatsView.tsx
 create mode 100644 src/views/help/views/SelectReportedUserView.tsx
 create mode 100644 src/views/help/views/SelectTopicView.tsx
 create mode 100644 src/views/mod-tools/common/GetCFHCategories.ts

diff --git a/src/assets/images/help/help_index.png b/src/assets/images/help/help_index.png
new file mode 100644
index 0000000000000000000000000000000000000000..2844f41e11f70f4f07c486f4221b242c15aac4bb
GIT binary patch
literal 2569
zcmV+k3ikDhP)<h;3K|Lk000e1NJLTq004df003zS1^@s6{P35n000TlNkl<Zc-rlq
zJ&q+s49EK(T!8@TC7go;AVh*hP68riLxi+iiG%<N5ZY{kXfLpQ2=)wwLonKqWcAn{
zrh43N+hx04)nC<;H8XGC>waCoe|^~H>Kcaijw@mPIPh@?`TBTiT>uA$K7oGm*3#wz
z=*KCbBLQ^yM+5%`?CtICvZ+V4zQaFQZHLfrK6o(dwGRGB%{&17)7uY5z23ne419t+
z*8b6+K7Bf?>Eqv{b?^rQpWu$bheyxuEH(f5^$z|d;L{kOgFi6%u_;eYJ?!gY7tq0P
z5aeJBxrzfj*uTTqhaT457IX-TaKEmaQ9TBpv+mb#1U%)Q5dxUm6sUPj*LDed2fsC+
z97Ws4zoix-y$AQ}5^yK<Yp`|j3+VVKXa!(vfZvPZXZm*&+<(7_wJr)~N|mbllnAK*
zao}%m{+_G_++b0htj5F17A%I0N#g`40w@Fu#OohpO#_|#en%3)4E$a2MVMao!lw$8
zvQ)UyuyaD-fJ@(T?;==CrHb&0M2m$Wh;BiG|LWC03u_5~ycWE+2L2I5Fzc@qbTxdX
zI52n$_8RapbZkx$?9-300Uy?S4Ri{A>7dOD{pbQ9{cLi8hx>X5d{1H5a_1}pJfZ;D
zAj<->Mid3$bA=cQT|3q|vH)h#sqii9=NpXzZz;Um;5{O62w=zXoy|Q2Zz-@y_*$3E
zB7i-^=bQUL_!fVDE8w*PI0yW~KHdwy6n^Qoa{|~ad~r6d7=8ixpI`nq+4%WCKl0i5
zS$M7p0eEHxcLSdlffhdU<DWnO#RR(+_!1FFp=IqP&~e~XA|Rkk;5jh0!D|J8CzCuA
zLBuTJ_S3N}E+3wqd+{+}<8we-ftLhenLTt&18)buBmj#g=*e(DuZ7VPJcgeeRF=Ts
z9QXvuD}eM_2z@j-!nS~D4L-rwcoIhdPr~wyUhz2+ba=yC2XAp71DgBQ1aQ6n`aTN{
z+aHhSmU};SvswUO{_yRcji34cJ)e!AP3PGn_*C}op}+opy7>5IqQFZxs|6knUMqms
z;70~6;V+<5rUh@gSuOBd;Bx|K1%55~cNa|kp!Y^SD%S$94W1K#wmeG9B9+I;pjDIq
zzsl~dC3p<KCUg({HOd0BXja>;lOS9ko5eKHTY^vUt@lv^9ggf<)%r#3*b6?L$1_va
z0=fmhb}|X)2POfO%pSJL++6_hz=yy~rYW}q-UFQyfERl0>05Hj)6%!WmLf7YEeCyY
zE|ko{w=AmA+^<Cdu<WVGVJLX2AJc-T3Me``5kpU}zw`NbF2e$V*C+)p-J`ZVB_374
z<B(?Vi%Nx5BRe%g@&cy>0EN^d^-5Ew5|3u!$G>Z4sCt(vML>@P9+4?bl|2Fe8Zv^1
zCxz~u1m2Q16_uWh3u`ERAVO5j<q<FkpDO$0&ZXDh{pK&10HzNon}G-6TCBR-*{M<?
z4nv!@@U<6INcTn6ZWy+O;2}E|boe3S1S0qZzcfSDx>TtJ^xA9aa^R^cV<KKJv9m*m
zC%}<AY92e{hAjf15*ecxO<KT5-9Lm+l{0SYGnLi{eF6_^Jokl4(~&I#X#HRW34S#2
z6g!c?!y3<V`{d=7g&zVwG8bJdg0;cdxJS(zfe7$-|4@S$ntE#Lv}VDq0X=f1jb*I>
z2R_%-k8H!hPc{C-Pf1@gViAJZ-D&mkqgvoK`Gc_RArH2;fA)18c&fRNScI^~Qs_0;
z*LfC)%$j)t{8ZZ|@Da^@=^}(Pg7;($Ynpk;^#1*qWx(c*A}rw31)={~l8b&u@ZMB$
z98XEFQQ(m~$AfqG^$zej9BdWA9>GiZZU(RD+a>73{fq8e55J7|MyLb=&w|7~fcM;c
zuA<<w&#_X0FKzNIH-OiFM=VO*0(gz!sYx(Rx#gO8Yq)j+Un2mn=I3sl%jBuGT&X5_
z>vxtiXL8UjHC+q;0^wT(Fsu1Q)6dOmQ&YZC>*AsTN3E};GG}s6>E_B;3te05FVh8)
z05tGn)1SU14DsR{!~>pI3nHV;3m)ai&B`T}A61qf=vMeM0p#GrY?WLg!PzEQ5N87q
z%Rrip!M^)g)*kRy`05cqm9E4MV7Qc_mP?><Q`!<d7xa?KE|sqrx+N)N244#v=d4L;
z$7x(Gzz@vE0xj3jbN7yar^>VhyaoO=;@6y1N?4TOw*rrwRjT`G0bYVGC5o0pw}Kx^
zz)M{K9{jZc&pbb_33xnslbZBhfzQFm0w`(jy`U%$BfZuFJQwlQR21)sUXzJa3|<2t
zdjU98v<7&bJw&-so^zUNJBqq-HGCNO$HJAsw}N+F#Ik6?Tk|!ba;*zj3!|aqYe?lm
zJ^XRn0i*za6YyU6*0_HTI1YkPt|h*{luT*?&&AhsWs!E@g!}ML+rT)%ODS04;N9?*
zv41fM5k?P%SwwEkLFF50p-Z7wO*y1(*5Q`xc%NNYZD%rZs(`ol`#AI~#r`Rqg*#EG
zlj{Pg_rT9X0cZ?*EAZUvvCpGtQ|%sqroZ9N+OFEZ26*eJKNtHa{|9o=B*5A+0d-FD
znwi+T20C=NM#yl>)$#AK=9hp6&@Zci_X?miEbFz>>sx@Q{vGeIonGUbddcl0YWuq2
zJ$}E%BG<>)xc(xQjd+STh7U*evtShSY~T{;ru6F;<A6PzBBC~{_0S;n#pB_Lt=|$i
z1bv&}k0=6fSak-Sc(y;gM=xv@3ZR?w?$0iQh)}B(xzq0M39jve?n=KtlNhwXEDKX-
zyLwPtvNQYnBo`2XcSCojUmr~rrdrBvu>4q`6+3Inl?I`MjUU|5-Rak7vjjc?m`38@
zclE<3a?tVri7`Ob)303V*JlKu3LXYs((jai4Q;CJiY?l58#_gUXVb5{2p+&E&{WtJ
z4wNTX3z`<Z06!ACn0`%(ptWrce41FnVb_^&{oraXf-xn~Yk;TIuaO8^TPqRdTr}9!
zOJP@Zjzvau7Cau|H-OHiUtgl);x1!E5Di`0GHsd}yoZ9JQ+x1Y@K2t6bsbF&pND=a
z9nE_Lu!dbdtAAVrH&p8=Awc-ph}zD!rZb^1HJuRQr3LuyiXgc5&%iUGQfezz0{W1F
zvbY!RMvZGgU;DUltAC;dAo|u!pG!sVDs`jOXHIuqa*IDb1_y3rR1WvOgdmIqFK>%?
z`r{(GpJqexa}hoxh=LJ!hh11;McxCs9l8`o<!8+Lv7><}4PFugVYU72e$)|w3}4aY
zckuf>7D1R^<2!s+Ki|RcyQ`4l=b`t}_?}%vD*jIS@N0)u`%x)A&_k-{^$dDQwY!Er
f%GO1&Vc7ox%|VtsUkD)j00000NkvXXu0mjfTyEtL

literal 0
HcmV?d00001

diff --git a/src/events/help/HelpEvent.ts b/src/events/help/HelpEvent.ts
new file mode 100644
index 00000000..1403f20f
--- /dev/null
+++ b/src/events/help/HelpEvent.ts
@@ -0,0 +1,8 @@
+import { NitroEvent } from '@nitrots/nitro-renderer';
+
+export class HelpEvent extends NitroEvent
+{
+    public static SHOW_HELP_CENTER: string = 'HCE_SHOW_HELP_CENTER';
+    public static HIDE_HELP_CENTER: string = 'HCE_HIDE_HELP_CENTER';
+    public static TOGGLE_HELP_CENTER: string = 'HCE_TOGGLE_HELP_CENTER';
+}
diff --git a/src/events/help/HelpReportUserEvent.ts b/src/events/help/HelpReportUserEvent.ts
new file mode 100644
index 00000000..4af418af
--- /dev/null
+++ b/src/events/help/HelpReportUserEvent.ts
@@ -0,0 +1,27 @@
+import { HelpEvent } from './HelpEvent';
+
+export class HelpReportUserEvent extends HelpEvent
+{
+    public static REPORT_USER: string = 'HCE_HELP_CENTER_REPORT_USER';
+    
+    private _reportedUserId: number;
+    private _reportedUsername: string;
+
+    constructor(userId: number, username: string)
+    {
+        super(HelpReportUserEvent.REPORT_USER);
+
+        this._reportedUserId = userId;
+        this._reportedUsername = username;
+    }
+
+    public get reportedUserId(): number
+    {
+        return this._reportedUserId;
+    }
+
+    public get reportedUsername(): string
+    {
+        return this._reportedUsername;
+    }
+}
diff --git a/src/views/Styles.scss b/src/views/Styles.scss
index f66d2a1a..77dc121f 100644
--- a/src/views/Styles.scss
+++ b/src/views/Styles.scss
@@ -21,3 +21,4 @@
 @import './user-settings/UserSettingsView';
 @import './user-profile/UserProfileVew';
 @import './chat-history/ChatHistoryView';
+@import './help/HelpView';
diff --git a/src/views/chat-history/ChatHistoryMessageHandler.tsx b/src/views/chat-history/ChatHistoryMessageHandler.tsx
index f56702a4..d1165d39 100644
--- a/src/views/chat-history/ChatHistoryMessageHandler.tsx
+++ b/src/views/chat-history/ChatHistoryMessageHandler.tsx
@@ -54,7 +54,7 @@ export const ChatHistoryMessageHandler: FC<{}> = props =>
          
         const timeString = currentDate();
 
-        const entry: IChatEntry = { id: -1, entityId: userData.webID, name: userData.name, look: userData.figure, message: event.message, timestamp: timeString, type: ChatEntryType.TYPE_CHAT };
+        const entry: IChatEntry = { id: -1, entityId: userData.webID, name: userData.name, look: userData.figure, entityType: userData.type, message: event.message, timestamp: timeString, type: ChatEntryType.TYPE_CHAT, roomId: roomSession.roomId };
 
         addChatEntry(entry);
     }, [addChatEntry]);
@@ -89,7 +89,7 @@ export const ChatHistoryMessageHandler: FC<{}> = props =>
 
         if(needsRoomInsert)
         {
-            const chatEntry: IChatEntry = { id: -1, entityId: parser.data.roomId, name: parser.data.roomName, timestamp: currentDate(), type: ChatEntryType.TYPE_ROOM_INFO };
+            const chatEntry: IChatEntry = { id: -1, entityId: parser.data.roomId, name: parser.data.roomName, timestamp: currentDate(), type: ChatEntryType.TYPE_ROOM_INFO, roomId: parser.data.roomId };
 
             addChatEntry(chatEntry);
 
diff --git a/src/views/chat-history/ChatHistoryView.tsx b/src/views/chat-history/ChatHistoryView.tsx
index d1121e9e..2a29cdd8 100644
--- a/src/views/chat-history/ChatHistoryView.tsx
+++ b/src/views/chat-history/ChatHistoryView.tsx
@@ -5,10 +5,13 @@ import { ChatHistoryEvent } from '../../events/chat-history/ChatHistoryEvent';
 import { useUiEvent } from '../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
 import { ChatHistoryMessageHandler } from './ChatHistoryMessageHandler';
+import { ChatHistoryState } from './common/ChatHistoryState';
+import { SetChatHistory } from './common/GetChatHistory';
+import { RoomHistoryState } from './common/RoomHistoryState';
 import { ChatHistoryContextProvider } from './context/ChatHistoryContext';
 import { ChatEntryType } from './context/ChatHistoryContext.types';
-import { ChatHistoryState } from './utils/ChatHistoryState';
-import { RoomHistoryState } from './utils/RoomHistoryState';
+
+
 
 export const ChatHistoryView: FC<{}> = props =>
 {
@@ -25,6 +28,8 @@ export const ChatHistoryView: FC<{}> = props =>
         const chatState = new ChatHistoryState();
         const roomState = new RoomHistoryState();
 
+        SetChatHistory(chatState);
+
         chatState.notifier = () => setChatHistoryUpdateId(prevValue => (prevValue + 1));
         roomState.notifier = () => setRoomHistoryUpdateId(prevValue => (prevValue + 1));
 
diff --git a/src/views/chat-history/utils/ChatHistoryState.ts b/src/views/chat-history/common/ChatHistoryState.ts
similarity index 100%
rename from src/views/chat-history/utils/ChatHistoryState.ts
rename to src/views/chat-history/common/ChatHistoryState.ts
diff --git a/src/views/chat-history/common/GetChatHistory.ts b/src/views/chat-history/common/GetChatHistory.ts
new file mode 100644
index 00000000..d39ef584
--- /dev/null
+++ b/src/views/chat-history/common/GetChatHistory.ts
@@ -0,0 +1,7 @@
+import { IChatHistoryState } from '../context/ChatHistoryContext.types';
+
+let GLOBAL_CHATS: IChatHistoryState = null;
+
+export const SetChatHistory = (chatHistory: IChatHistoryState) => (GLOBAL_CHATS = chatHistory);
+
+export const GetChatHistory = () => GLOBAL_CHATS; 
diff --git a/src/views/chat-history/utils/RoomHistoryState.ts b/src/views/chat-history/common/RoomHistoryState.ts
similarity index 100%
rename from src/views/chat-history/utils/RoomHistoryState.ts
rename to src/views/chat-history/common/RoomHistoryState.ts
diff --git a/src/views/chat-history/context/ChatHistoryContext.types.ts b/src/views/chat-history/context/ChatHistoryContext.types.ts
index e691d471..51cd19cf 100644
--- a/src/views/chat-history/context/ChatHistoryContext.types.ts
+++ b/src/views/chat-history/context/ChatHistoryContext.types.ts
@@ -24,6 +24,8 @@ export interface IChatEntry {
     name: string;
     look?: string;
     message?: string;
+    entityType?: number;
+    roomId: number;
     timestamp: string;
     type: number;
 }
diff --git a/src/views/help/HelpMessageHandler.tsx b/src/views/help/HelpMessageHandler.tsx
index f71634b7..959abdb9 100644
--- a/src/views/help/HelpMessageHandler.tsx
+++ b/src/views/help/HelpMessageHandler.tsx
@@ -1,12 +1,10 @@
-import { CallForHelpResultMessageEvent, FurnitureListItemParser, PetData } from '@nitrots/nitro-renderer';
+import { CallForHelpResultMessageEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
 import { LocalizeText } from '../../api';
 import { CreateMessageHook } from '../../hooks/messages/message-event';
 import { NotificationAlertType } from '../notification-center/common/NotificationAlertType';
 import { NotificationUtilities } from '../notification-center/common/NotificationUtilities';
 import { GetCloseReasonKey } from './common/GetCloseReasonKey';
-let furniMsgFragments: Map<number, FurnitureListItemParser>[] = null;
-let petMsgFragments: Map<number, PetData>[] = null;
  
 export const HelpMessageHandler: FC<{}> = props =>
 {
diff --git a/src/views/help/HelpView.scss b/src/views/help/HelpView.scss
new file mode 100644
index 00000000..927c1cdc
--- /dev/null
+++ b/src/views/help/HelpView.scss
@@ -0,0 +1,10 @@
+.nitro-help {
+    height: 400px;
+    width: 300px;
+
+    .index-image {
+        background: url('../../assets/images/help/help_index.png');
+        width: 126px;
+        height: 105px;
+    }
+}
diff --git a/src/views/help/HelpView.tsx b/src/views/help/HelpView.tsx
index 4917c713..630d41d1 100644
--- a/src/views/help/HelpView.tsx
+++ b/src/views/help/HelpView.tsx
@@ -1,11 +1,79 @@
-import { FC } from 'react';
+import { FC, useCallback, useState } from 'react';
+import { LocalizeText } from '../../api';
+import { HelpEvent } from '../../events/help/HelpEvent';
+import { HelpReportUserEvent } from '../../events/help/HelpReportUserEvent';
+import { useUiEvent } from '../../hooks';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
+import { HelpContextProvider } from './context/HelpContext';
+import { IHelpReportState, initialReportState } from './context/HelpContext.types';
 import { HelpMessageHandler } from './HelpMessageHandler';
+import { DescribeReportView } from './views/DescribeReportView';
+import { HelpIndexView } from './views/HelpIndexView';
+import { SelectReportedChatsView } from './views/SelectReportedChatsView';
+import { SelectReportedUserView } from './views/SelectReportedUserView';
+import { SelectTopicView } from './views/SelectTopicView';
 
 export const HelpView: FC<{}> = props =>
 {
+    const [isVisible, setIsVisible] = useState(false);
+    const [ helpReportState, setHelpReportState ] = useState<IHelpReportState>(initialReportState);
+
+    const onHelpEvent = useCallback((event: HelpEvent) =>
+    {
+        setHelpReportState(initialReportState);
+
+        switch(event.type)
+        {
+            case HelpEvent.SHOW_HELP_CENTER:
+                setIsVisible(true);
+                break;
+            case HelpEvent.HIDE_HELP_CENTER:
+                setIsVisible(false);
+                break;
+            case HelpEvent.TOGGLE_HELP_CENTER:
+                setIsVisible(!isVisible);
+                break;
+            case HelpReportUserEvent.REPORT_USER:
+                const reportEvent = event as HelpReportUserEvent;
+                const reportState = Object.assign({}, helpReportState );
+                reportState.reportedUserId = reportEvent.reportedUserId;
+                reportState.currentStep = 2;
+                setHelpReportState(reportState);
+                setIsVisible(true);
+                break;
+        }
+    }, [helpReportState, isVisible]);
+
+    useUiEvent(HelpEvent.TOGGLE_HELP_CENTER, onHelpEvent);
+    useUiEvent(HelpEvent.SHOW_HELP_CENTER, onHelpEvent);
+    useUiEvent(HelpEvent.HIDE_HELP_CENTER, onHelpEvent);
+    useUiEvent(HelpReportUserEvent.REPORT_USER, onHelpEvent);
+
+    const CurrentStepView = useCallback(() =>
+    {
+        switch(helpReportState.currentStep)
+        {
+            case 0: return <HelpIndexView />
+            case 1: return <SelectReportedUserView />
+            case 2: return <SelectReportedChatsView />
+            case 3: return <SelectTopicView />
+            case 4: return <DescribeReportView />
+        }
+
+        return null;
+    }, [helpReportState.currentStep]);
+
     return (
-        <>
+        <HelpContextProvider value={ { helpReportState, setHelpReportState } }>
             <HelpMessageHandler />
-        </>
+            {isVisible &&
+                <NitroCardView className="nitro-help">
+                    <NitroCardHeaderView headerText={LocalizeText('help.button.cfh')} onCloseClick={() => setIsVisible(false)} />
+                    <NitroCardContentView className="text-black">
+                        <CurrentStepView />
+                    </NitroCardContentView>
+                </NitroCardView>
+            }
+        </HelpContextProvider>
     );
 }
diff --git a/src/views/help/common/IUser.ts b/src/views/help/common/IUser.ts
new file mode 100644
index 00000000..bd3852ab
--- /dev/null
+++ b/src/views/help/common/IUser.ts
@@ -0,0 +1,5 @@
+export interface IUser
+{
+    id: number;
+    username: string;
+}
diff --git a/src/views/help/context/HelpContext.tsx b/src/views/help/context/HelpContext.tsx
new file mode 100644
index 00000000..2cad4a52
--- /dev/null
+++ b/src/views/help/context/HelpContext.tsx
@@ -0,0 +1,14 @@
+import { createContext, FC, useContext } from 'react';
+import { HelpContextProps, IHelpContext } from './HelpContext.types';
+
+const HelpContext = createContext<IHelpContext>({
+    helpReportState: null,
+    setHelpReportState: null
+});
+
+export const HelpContextProvider: FC<HelpContextProps> = props =>
+{
+    return <HelpContext.Provider value={ props.value }>{ props.children }</HelpContext.Provider>
+}
+
+export const useHelpContext = () => useContext(HelpContext);
diff --git a/src/views/help/context/HelpContext.types.ts b/src/views/help/context/HelpContext.types.ts
new file mode 100644
index 00000000..9368308b
--- /dev/null
+++ b/src/views/help/context/HelpContext.types.ts
@@ -0,0 +1,33 @@
+import { ProviderProps } from 'react';
+import { IChatEntry } from '../../chat-history/context/ChatHistoryContext.types';
+
+export interface IHelpContext
+{
+    helpReportState: IHelpReportState;
+    setHelpReportState: React.Dispatch<React.SetStateAction<IHelpReportState>>;
+}
+
+export interface IHelpReportState {
+    reportedUserId: number;
+    reportedChats: IChatEntry[];
+    cfhCategory: number;
+    cfhTopic: number;
+    roomId: number;
+    message: string;
+    currentStep: number;
+}
+
+export const initialReportState: IHelpReportState =  {
+    reportedUserId: -1,
+    reportedChats: [],
+    cfhCategory: -1,
+    cfhTopic: -1,
+    roomId: -1,
+    message: '',
+    currentStep: 0
+}
+
+export interface HelpContextProps extends ProviderProps<IHelpContext>
+{
+
+}
diff --git a/src/views/help/views/DescribeReportView.tsx b/src/views/help/views/DescribeReportView.tsx
new file mode 100644
index 00000000..f936d225
--- /dev/null
+++ b/src/views/help/views/DescribeReportView.tsx
@@ -0,0 +1,50 @@
+import { CallForHelpMessageComposer } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useState } from 'react';
+import { LocalizeText } from '../../../api';
+import { HelpEvent } from '../../../events/help/HelpEvent';
+import { dispatchUiEvent, SendMessageHook } from '../../../hooks';
+import { useHelpContext } from '../context/HelpContext';
+
+export const DescribeReportView: FC<{}> = props =>
+{
+    const { helpReportState = null, setHelpReportState = null } = useHelpContext();
+    const [message, setMessage] = useState('');
+
+    const submitReport = useCallback(() =>
+    {
+        if(message.length < 15) return;
+        
+        const reportState = Object.assign({}, helpReportState);
+
+        reportState.message = message;
+
+        setHelpReportState(reportState);
+
+        const roomId = reportState.reportedChats[0].roomId;
+        const chats: (string | number )[] = []; 
+        reportState.reportedChats.forEach(entry =>
+        {
+            chats.push(entry.entityId);
+            chats.push(entry.message);
+        });
+
+        SendMessageHook(new CallForHelpMessageComposer(message, reportState.cfhTopic, reportState.reportedUserId, roomId, chats));
+
+        dispatchUiEvent(new HelpEvent(HelpEvent.HIDE_HELP_CENTER));
+    }, [helpReportState, message, setHelpReportState]);
+
+    return (
+        <>
+            <div className="d-grid col-12 mx-auto justify-content-center">
+                <div className="col-12"><h3 className="fw-bold">{LocalizeText('help.emergency.chat_report.subtitle')}</h3></div>
+                <div className="text-wrap">{LocalizeText('help.cfh.input.text')}</div>
+            </div>
+
+            <div className="form-group mb-2">
+                <textarea className="form-control" value={message} onChange={event => setMessage(event.target.value)} />
+            </div>
+
+            <button className="btn btn-danger mt-2" type="button" disabled={message.length < 15} onClick={submitReport}>{LocalizeText('help.bully.submit')}</button>
+        </>
+    );
+}
diff --git a/src/views/help/views/HelpIndexView.tsx b/src/views/help/views/HelpIndexView.tsx
new file mode 100644
index 00000000..35d85270
--- /dev/null
+++ b/src/views/help/views/HelpIndexView.tsx
@@ -0,0 +1,36 @@
+import { FC, useCallback } from 'react';
+import { LocalizeText } from '../../../api';
+import { useHelpContext } from '../context/HelpContext';
+
+export const HelpIndexView: FC<{}> = props =>
+{
+    const { helpReportState = null, setHelpReportState = null } = useHelpContext();
+    
+    const onReportClick = useCallback(() =>
+    {
+        const reportState = Object.assign({}, helpReportState );
+        reportState.currentStep = 1;
+        setHelpReportState(reportState);
+    },[helpReportState, setHelpReportState]);
+
+    return (
+        <>
+            <div className="d-grid col-12 mx-auto justify-content-center">
+                <div className="col-12"><h3>{LocalizeText('help.main.frame.title')}</h3></div>
+                <div className="index-image align-self-center"></div>
+                <p className="text-center">{LocalizeText('help.main.self.description')}</p>
+            </div>
+
+            <div className="d-grid gap-2 col-8 mx-auto">
+                <button className="btn btn-primary" type="button" onClick={onReportClick}>{LocalizeText('help.main.bully.subtitle')}</button>
+                <button className="btn btn-primary" type="button">{LocalizeText('help.main.help.title')}</button>
+                <button className="btn btn-primary" type="button">{LocalizeText('help.main.self.tips.title')}</button>
+            </div>
+
+            <div className="d-grid gap-2 col-8 mx-auto">
+                <button className="btn btn-link" type="button">{LocalizeText('help.main.my.sanction.status')}</button>
+            </div>
+
+        </>
+    )
+}
diff --git a/src/views/help/views/SelectReportedChatsView.tsx b/src/views/help/views/SelectReportedChatsView.tsx
new file mode 100644
index 00000000..67658015
--- /dev/null
+++ b/src/views/help/views/SelectReportedChatsView.tsx
@@ -0,0 +1,73 @@
+import { RoomObjectType } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useMemo, useState } from 'react';
+import { LocalizeText } from '../../../api';
+import { NitroCardGridItemView, NitroCardGridView } from '../../../layout';
+import { GetChatHistory } from '../../chat-history/common/GetChatHistory';
+import { ChatEntryType, IChatEntry } from '../../chat-history/context/ChatHistoryContext.types';
+import { useHelpContext } from '../context/HelpContext';
+
+export const SelectReportedChatsView: FC<{}> = props =>
+{
+    const { helpReportState = null, setHelpReportState = null } = useHelpContext();
+    const [ selectedChats, setSelectedChats ] = useState<Map<number, IChatEntry>>(new Map());
+
+    const userChats = useMemo(() =>
+    {
+        return GetChatHistory().chats.filter(chat => (chat.type === ChatEntryType.TYPE_CHAT) && (chat.entityId === helpReportState.reportedUserId) && (chat.entityType === RoomObjectType.USER))
+    }, [helpReportState.reportedUserId]);
+
+    const selectChat = useCallback((chatEntry: IChatEntry) =>
+    {
+        const chats = new Map(selectedChats);
+
+        if(chats.has(chatEntry.id))
+        {
+            chats.delete(chatEntry.id);
+        }
+
+        else
+        {
+            chats.set(chatEntry.id, chatEntry);
+        }
+
+        setSelectedChats(chats);
+
+    }, [selectedChats]);
+
+    const submitChats = useCallback(() =>
+    {
+        if(!selectedChats || selectedChats.size <= 0) return;
+
+        const reportState = Object.assign({}, helpReportState);
+
+        reportState.reportedChats = Array.from(selectedChats.values());
+        reportState.currentStep = 3;
+        setHelpReportState(reportState);
+
+    }, [helpReportState, selectedChats, setHelpReportState]);
+    
+    return (
+        <>
+            <div className="d-grid col-12 mx-auto justify-content-center">
+                <div className="col-12"><h3 className="fw-bold">{LocalizeText('help.emergency.chat_report.subtitle')}</h3></div>
+                <div className="text-wrap">{LocalizeText('help.emergency.chat_report.description')}</div>
+            </div>
+            
+            { userChats.length > 0 &&
+                <>
+                    <NitroCardGridView columns={1}>
+                        {userChats.map((chat, index) =>
+                        {
+                            return (
+                                <NitroCardGridItemView key={chat.id} onClick={() => selectChat(chat)} itemActive={selectedChats.has(chat.id)}>
+                                    <span>{chat.message}</span>
+                                </NitroCardGridItemView>
+                            )
+                        })}
+                    </NitroCardGridView>
+                    <button className="btn btn-secondary mt-2" type="button" disabled={selectedChats.size <= 0} onClick={submitChats}>{LocalizeText('help.emergency.main.submit.button')}</button>
+                </>
+            }
+        </>
+    );
+}
diff --git a/src/views/help/views/SelectReportedUserView.tsx b/src/views/help/views/SelectReportedUserView.tsx
new file mode 100644
index 00000000..456558f6
--- /dev/null
+++ b/src/views/help/views/SelectReportedUserView.tsx
@@ -0,0 +1,78 @@
+import { RoomObjectType } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useMemo, useState } from 'react';
+import { LocalizeText } from '../../../api';
+import { NitroCardGridItemView, NitroCardGridView } from '../../../layout';
+import { GetChatHistory } from '../../chat-history/common/GetChatHistory';
+import { ChatEntryType } from '../../chat-history/context/ChatHistoryContext.types';
+import { IUser } from '../common/IUser';
+import { useHelpContext } from '../context/HelpContext';
+
+export const SelectReportedUserView: FC<{}> = props =>
+{
+    const { helpReportState = null, setHelpReportState = null } = useHelpContext();
+    const [selectedUserId, setSelectedUserId] = useState(-1);
+
+    const availableUsers = useMemo(() =>
+    {
+        const users: Map<number, IUser> = new Map();
+
+        GetChatHistory().chats
+            .forEach(chat =>
+            {
+                if((chat.type === ChatEntryType.TYPE_CHAT) && (chat.entityType === RoomObjectType.USER))//todo: remove own chats
+                {
+                    if(!users.has(chat.entityId))
+                    {
+                        users.set(chat.entityId, { id: chat.entityId, username: chat.name })
+                    }
+                }
+            });
+
+        return Array.from(users.values());
+    }, []);
+
+    const submitUser = useCallback(() =>
+    {
+        if(selectedUserId <= 0) return;
+
+        const reportState = Object.assign({}, helpReportState);
+        reportState.reportedUserId = selectedUserId;
+        reportState.currentStep = 2;
+        setHelpReportState(reportState);
+    }, [helpReportState, selectedUserId, setHelpReportState]);
+
+    const selectUser = useCallback((userId: number) =>
+    {
+        if(selectedUserId === userId) setSelectedUserId(-1);
+        else setSelectedUserId(userId);
+    }, [selectedUserId]);
+
+    return (
+        <>
+            <div className="d-grid col-12 mx-auto justify-content-center">
+                <h3 className="fw-bold">{LocalizeText('help.emergency.main.step.two.title')}</h3>
+                <p>{(availableUsers.length > 0) ? LocalizeText('report.user.pick.user') : ''}</p>
+            </div>
+            {
+                (availableUsers.length <= 0) && <div>{LocalizeText('report.user.error.nolist')}</div>
+            }
+            {
+                (availableUsers.length > 0) &&
+                <>
+                    <NitroCardGridView columns={1}>
+                        {availableUsers.map((user, index) =>
+                        {
+                            return (
+                                <NitroCardGridItemView key={user.id} onClick={() => selectUser(user.id)} itemActive={( selectedUserId === user.id)}>
+                                    <span dangerouslySetInnerHTML={{ __html: (user.username) }} />
+                                </NitroCardGridItemView>
+                            )
+                        })}
+                    </NitroCardGridView>
+
+                    <button className="btn btn-secondary mt-2" type="button" disabled={selectedUserId <= 0} onClick={submitUser}>{LocalizeText('help.emergency.main.submit.button')}</button>
+                </>
+            }
+        </>
+    )
+}
diff --git a/src/views/help/views/SelectTopicView.tsx b/src/views/help/views/SelectTopicView.tsx
new file mode 100644
index 00000000..da0dec3b
--- /dev/null
+++ b/src/views/help/views/SelectTopicView.tsx
@@ -0,0 +1,53 @@
+import { FC, useCallback, useMemo, useState } from 'react';
+import { LocalizeText } from '../../../api';
+import { GetCfhCategories } from '../../mod-tools/common/GetCFHCategories';
+import { useHelpContext } from '../context/HelpContext';
+
+export const SelectTopicView: FC<{}> = props =>
+{
+    const { helpReportState = null, setHelpReportState = null } = useHelpContext();
+    const [ selectedCategory, setSelectedCategory ] = useState(-1);
+    const [ selectedTopic, setSelectedTopic ] = useState(-1);
+
+    const cfhCategories = useMemo(() =>
+    {
+        return GetCfhCategories();
+    }, []);
+
+    const submitTopic = useCallback(() =>
+    {
+        if(selectedCategory < 0) return;
+        if(selectedTopic < 0 ) return;
+
+        const reportState = Object.assign({}, helpReportState);
+        reportState.cfhCategory = selectedCategory;
+        reportState.cfhTopic = cfhCategories[selectedCategory].topics[selectedTopic].id;
+        reportState.currentStep = 4;
+        setHelpReportState(reportState);
+    }, [cfhCategories, helpReportState, selectedCategory, selectedTopic, setHelpReportState]);
+    
+    return (
+        <>
+            <div className="d-grid col-12 mx-auto justify-content-center">
+                <div className="col-12"><h3 className="fw-bold">{LocalizeText('help.emergency.chat_report.subtitle')}</h3></div>
+                <div className="text-wrap">{LocalizeText('help.cfh.pick.topic')}</div>
+            </div>
+            <div className="d-grid gap-2 col-8 mx-auto overflow-auto">
+            {   (selectedCategory < 0) &&
+                cfhCategories.map((category, index) => 
+                    {
+                        return <button key={index} className="btn btn-danger" type="button" onClick={() => setSelectedCategory(index)}>{LocalizeText(`help.cfh.reason.${category.name}`)}</button>
+                    })
+            }
+            { (selectedCategory >= 0 ) &&
+                cfhCategories[selectedCategory].topics.map((topic, index) =>
+                {
+                    return <button key={index} className="btn btn-danger" type="button" onClick={() => setSelectedTopic(index)}>{LocalizeText('help.cfh.topic.' + topic.id)}</button>
+                })
+            }
+            </div>
+            
+            <button className="btn btn-secondary mt-2" type="button" disabled={selectedTopic < 0} onClick={submitTopic}>{LocalizeText('help.emergency.main.submit.button')}</button>
+        </>
+    );
+}
diff --git a/src/views/mod-tools/ModToolsMessageHandler.tsx b/src/views/mod-tools/ModToolsMessageHandler.tsx
index 0ffe0d0f..b810aa13 100644
--- a/src/views/mod-tools/ModToolsMessageHandler.tsx
+++ b/src/views/mod-tools/ModToolsMessageHandler.tsx
@@ -7,6 +7,7 @@ import { ModToolsOpenRoomInfoEvent } from '../../events/mod-tools/ModToolsOpenRo
 import { ModToolsOpenUserChatlogEvent } from '../../events/mod-tools/ModToolsOpenUserChatlogEvent';
 import { ModToolsOpenUserInfoEvent } from '../../events/mod-tools/ModToolsOpenUserInfoEvent';
 import { CreateMessageHook, dispatchUiEvent, useRoomEngineEvent, useUiEvent } from '../../hooks';
+import { SetCfhCategories } from './common/GetCFHCategories';
 import { useModToolsContext } from './context/ModToolsContext';
 import { ModToolsActions } from './reducers/ModToolsReducer';
 
@@ -67,6 +68,7 @@ export const ModToolsMessageHandler: FC<{}> = props =>
 
         //todo: play ticket sound
         //GetNitroInstance().events.dispatchEvent(new NitroSoundEvent(NitroSoundEvent.PLAY_SOUND, sound)
+        console.log(parser);
     }, [dispatchModToolsState, tickets]);
 
     const onModeratorToolPreferencesEvent = useCallback((event: ModeratorToolPreferencesEvent) =>
@@ -139,6 +141,8 @@ export const ModToolsMessageHandler: FC<{}> = props =>
                 cfhCategories: categories
             }
         });
+
+        SetCfhCategories(categories);
         
         console.log(parser);
     }, [dispatchModToolsState]);
diff --git a/src/views/mod-tools/ModToolsView.scss b/src/views/mod-tools/ModToolsView.scss
index be84aaef..58b133ef 100644
--- a/src/views/mod-tools/ModToolsView.scss
+++ b/src/views/mod-tools/ModToolsView.scss
@@ -1,5 +1,17 @@
 .nitro-mod-tools {
     width: 200px;
+
+    
+}
+
+.nitro-mod-tools-tickets
+{
+    width: 400px;
+    
+    .issues
+    {
+        height: 200px;
+    }
 }
 
 @import './views/room/room-tools/ModToolsRoomView';
diff --git a/src/views/mod-tools/common/GetCFHCategories.ts b/src/views/mod-tools/common/GetCFHCategories.ts
new file mode 100644
index 00000000..a9e8a57f
--- /dev/null
+++ b/src/views/mod-tools/common/GetCFHCategories.ts
@@ -0,0 +1,7 @@
+import { CallForHelpCategoryData } from '@nitrots/nitro-renderer';
+
+let cfhCategories: CallForHelpCategoryData[] = [];
+
+export const SetCfhCategories = (categories: CallForHelpCategoryData[]) => (cfhCategories = categories);
+
+export const GetCfhCategories = () => cfhCategories;
diff --git a/src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx b/src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx
index 970d4f6f..2a542f13 100644
--- a/src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx
+++ b/src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx
@@ -24,6 +24,7 @@ export const ModToolsTicketsView: FC<ModToolsTicketsViewProps> = props =>
     const openIssues = useMemo(() =>
     {
         if(!tickets) return [];
+        console.log(tickets);
         
         return tickets.filter(issue => issue.state === IssueMessageData.STATE_OPEN);
     }, [tickets]);
diff --git a/src/views/mod-tools/views/tickets/my-issues/ModToolsMyIssuesTabView.tsx b/src/views/mod-tools/views/tickets/my-issues/ModToolsMyIssuesTabView.tsx
index 784ed52f..63ab7546 100644
--- a/src/views/mod-tools/views/tickets/my-issues/ModToolsMyIssuesTabView.tsx
+++ b/src/views/mod-tools/views/tickets/my-issues/ModToolsMyIssuesTabView.tsx
@@ -30,7 +30,7 @@ export const ModToolsMyIssuesTabView: FC<ModToolsMyIssuesTabViewProps> = props =
             <div className="col-sm-2 fw-bold">Opened</div>
             <div className="col-sm-2"></div>
         </div>
-        <div className="row w-100 h-100 issues">
+        <div className="row w-100 issues">
             <AutoSizer defaultWidth={400} defaultHeight={200}>
                 {({ height, width }) => 
                 {
diff --git a/src/views/mod-tools/views/tickets/open-issues/ModToolsOpenIssuesTabView.tsx b/src/views/mod-tools/views/tickets/open-issues/ModToolsOpenIssuesTabView.tsx
index 76db3355..3452aba5 100644
--- a/src/views/mod-tools/views/tickets/open-issues/ModToolsOpenIssuesTabView.tsx
+++ b/src/views/mod-tools/views/tickets/open-issues/ModToolsOpenIssuesTabView.tsx
@@ -30,7 +30,7 @@ export const ModToolsOpenIssuesTabView: FC<ModToolsOpenIssuesTabViewProps> = pro
             <div className="col-sm-2 fw-bold">Opened</div>
             <div className="col-sm-2"></div>
         </div>
-        <div className="row w-100 h-100 issues">
+        <div className="row w-100 issues">
             <AutoSizer defaultWidth={400} defaultHeight={200}>
                 {({ height, width }) => 
                 {
diff --git a/src/views/mod-tools/views/tickets/picked-issues/ModToolsPickedIssuesTabView.tsx b/src/views/mod-tools/views/tickets/picked-issues/ModToolsPickedIssuesTabView.tsx
index 00588ee0..dc7f79b1 100644
--- a/src/views/mod-tools/views/tickets/picked-issues/ModToolsPickedIssuesTabView.tsx
+++ b/src/views/mod-tools/views/tickets/picked-issues/ModToolsPickedIssuesTabView.tsx
@@ -30,7 +30,7 @@ export const ModToolsPickedIssuesTabView: FC<ModToolsPickedIssuesTabViewProps> =
             <div className="col-sm-2 fw-bold">Opened</div>
             <div className="col-sm-2 fw-bold">Picker</div>
         </div>
-        <div className="row w-100 h-100 issues">
+        <div className="row w-100 issues">
             <AutoSizer defaultWidth={400} defaultHeight={200}>
                 {({ height, width }) => 
                 {
diff --git a/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx b/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx
index 0afe70cd..09454bdc 100644
--- a/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx
+++ b/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx
@@ -40,7 +40,7 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
 
         for(let category of cfhCategories)
         {
-            for(let topic of category._Str_14841)
+            for(let topic of category.topics)
             {
                 values.push(topic)
             }
diff --git a/src/views/purse/PurseView.tsx b/src/views/purse/PurseView.tsx
index 7a2f8028..bfab90ea 100644
--- a/src/views/purse/PurseView.tsx
+++ b/src/views/purse/PurseView.tsx
@@ -1,6 +1,7 @@
 import { FriendlyTime, HabboClubLevelEnum, UserCurrencyComposer, UserSubscriptionComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { GetConfiguration, LocalizeText } from '../../api';
+import { HelpEvent } from '../../events/help/HelpEvent';
 import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent';
 import { dispatchUiEvent } from '../../hooks';
 import { SendMessageHook } from '../../hooks/messages/message-event';
@@ -24,6 +25,11 @@ export const PurseView: FC<{}> = props =>
         dispatchUiEvent(new UserSettingsUIEvent(UserSettingsUIEvent.TOGGLE_USER_SETTINGS));
     }, []);
 
+    const handleHelpCenterClick = useCallback(() =>
+    {
+        dispatchUiEvent(new HelpEvent(HelpEvent.TOGGLE_HELP_CENTER));
+    }, []);
+
     const displayedCurrencies = useMemo(() =>
     {
         return GetConfiguration<number[]>('system.currency.types', []);
@@ -140,7 +146,7 @@ export const PurseView: FC<{}> = props =>
                     </div>
                     <div className="col-2 px-0">
                         <div className="d-flex flex-column nitro-purse-buttons h-100 justify-content-center">
-                            <div className="nitro-purse-button text-white h-100 text-center d-flex align-items-center justify-content-center cursor-pointer"><i className="icon icon-help"/></div>
+                            <div className="nitro-purse-button text-white h-100 text-center d-flex align-items-center justify-content-center cursor-pointer" onClick={ handleHelpCenterClick }><i className="icon icon-help"/></div>
                             <div className="nitro-purse-button text-white h-100 text-center d-flex align-items-center justify-content-center cursor-pointer" onClick={ handleUserSettingsClick } ><i className="fas fa-cogs"/></div>
                         </div>
                     </div>

From 710f0f1e01b0b07b6b91897b46588baa6617fc2e Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Tue, 26 Oct 2021 00:40:14 -0500
Subject: [PATCH 29/29] added user reporting and issue handling

---
 .../handlers/RoomWidgetInfostandHandler.ts    |  2 +
 src/events/help/HelpReportUserEvent.ts        |  9 +--
 src/views/help/HelpView.scss                  |  2 +-
 .../help/views/SelectReportedChatsView.tsx    | 21 ++++-
 .../help/views/SelectReportedUserView.tsx     | 18 ++++-
 src/views/help/views/SelectTopicView.tsx      | 41 ++++++----
 src/views/mod-tools/ModToolsView.scss         | 13 +---
 .../mod-tools/common/IssueCategoryNames.ts    | 35 +++++++++
 .../views/tickets/ModToolsTicketView.scss     | 11 +++
 .../views/tickets/ModToolsTicketsView.tsx     | 37 ++++++++-
 .../tickets/issue-info/CfhChatlogView.tsx     | 37 +++++++++
 .../issue-info/CfhChatlogView.types.ts        |  5 ++
 .../tickets/issue-info/IssueInfoView.tsx      | 72 +++++++++++++++++
 .../tickets/issue-info/IssueInfoView.types.ts |  5 ++
 .../my-issues/ModToolsMyIssuesTabView.tsx     | 78 +++++++++----------
 .../ModToolsMyIssuesTabView.types.ts          |  1 +
 .../open-issues/ModToolsOpenIssuesTabView.tsx | 69 +++++++---------
 .../ModToolsPickedIssuesTabView.tsx           | 64 ++++++---------
 18 files changed, 350 insertions(+), 170 deletions(-)
 create mode 100644 src/views/mod-tools/common/IssueCategoryNames.ts
 create mode 100644 src/views/mod-tools/views/tickets/ModToolsTicketView.scss
 create mode 100644 src/views/mod-tools/views/tickets/issue-info/CfhChatlogView.tsx
 create mode 100644 src/views/mod-tools/views/tickets/issue-info/CfhChatlogView.types.ts
 create mode 100644 src/views/mod-tools/views/tickets/issue-info/IssueInfoView.tsx
 create mode 100644 src/views/mod-tools/views/tickets/issue-info/IssueInfoView.types.ts

diff --git a/src/api/nitro/room/widgets/handlers/RoomWidgetInfostandHandler.ts b/src/api/nitro/room/widgets/handlers/RoomWidgetInfostandHandler.ts
index e86aba4e..be1d8608 100644
--- a/src/api/nitro/room/widgets/handlers/RoomWidgetInfostandHandler.ts
+++ b/src/api/nitro/room/widgets/handlers/RoomWidgetInfostandHandler.ts
@@ -2,6 +2,7 @@ import { IFurnitureData, NitroEvent, ObjectDataFactory, PetFigureData, PetRespec
 import { GetNitroInstance, GetRoomEngine, GetSessionDataManager, IsOwnerOfFurniture } from '../../../..';
 import { InventoryTradeRequestEvent, WiredSelectObjectEvent } from '../../../../../events';
 import { FriendsSendFriendRequestEvent } from '../../../../../events/friends/FriendsSendFriendRequestEvent';
+import { HelpReportUserEvent } from '../../../../../events/help/HelpReportUserEvent';
 import { dispatchUiEvent } from '../../../../../hooks/events';
 import { SendMessageHook } from '../../../../../hooks/messages';
 import { PetSupplementEnum } from '../../../../../views/room/widgets/avatar-info/common/PetSupplementEnum';
@@ -164,6 +165,7 @@ export class RoomWidgetInfostandHandler extends RoomWidgetHandler
             case RoomWidgetUserActionMessage.REPORT:
                 return;
             case RoomWidgetUserActionMessage.REPORT_CFH_OTHER:
+                dispatchUiEvent(new HelpReportUserEvent(userId));
                 return;
             case RoomWidgetUserActionMessage.AMBASSADOR_ALERT_USER:
                 this.container.roomSession.sendAmbassadorAlertMessage(userId);
diff --git a/src/events/help/HelpReportUserEvent.ts b/src/events/help/HelpReportUserEvent.ts
index 4af418af..b4711b76 100644
--- a/src/events/help/HelpReportUserEvent.ts
+++ b/src/events/help/HelpReportUserEvent.ts
@@ -5,23 +5,16 @@ export class HelpReportUserEvent extends HelpEvent
     public static REPORT_USER: string = 'HCE_HELP_CENTER_REPORT_USER';
     
     private _reportedUserId: number;
-    private _reportedUsername: string;
 
-    constructor(userId: number, username: string)
+    constructor(userId: number)
     {
         super(HelpReportUserEvent.REPORT_USER);
 
         this._reportedUserId = userId;
-        this._reportedUsername = username;
     }
 
     public get reportedUserId(): number
     {
         return this._reportedUserId;
     }
-
-    public get reportedUsername(): string
-    {
-        return this._reportedUsername;
-    }
 }
diff --git a/src/views/help/HelpView.scss b/src/views/help/HelpView.scss
index 927c1cdc..f7f513f8 100644
--- a/src/views/help/HelpView.scss
+++ b/src/views/help/HelpView.scss
@@ -1,5 +1,5 @@
 .nitro-help {
-    height: 400px;
+    height: 430px;
     width: 300px;
 
     .index-image {
diff --git a/src/views/help/views/SelectReportedChatsView.tsx b/src/views/help/views/SelectReportedChatsView.tsx
index 67658015..ce1080b1 100644
--- a/src/views/help/views/SelectReportedChatsView.tsx
+++ b/src/views/help/views/SelectReportedChatsView.tsx
@@ -45,14 +45,25 @@ export const SelectReportedChatsView: FC<{}> = props =>
         setHelpReportState(reportState);
 
     }, [helpReportState, selectedChats, setHelpReportState]);
+
+    const back = useCallback(() =>
+    {
+        const reportState = Object.assign({}, helpReportState);
+        reportState.currentStep = --reportState.currentStep;
+        setHelpReportState(reportState);
+    }, [helpReportState, setHelpReportState]);
     
     return (
         <>
             <div className="d-grid col-12 mx-auto justify-content-center">
                 <div className="col-12"><h3 className="fw-bold">{LocalizeText('help.emergency.chat_report.subtitle')}</h3></div>
-                <div className="text-wrap">{LocalizeText('help.emergency.chat_report.description')}</div>
+                { userChats.length > 0 &&
+                    <div className="text-wrap">{LocalizeText('help.emergency.chat_report.description')}</div>
+                }
             </div>
-            
+            {
+                (userChats.length === 0) && <div>{LocalizeText('help.cfh.error.no_user_data')}</div>
+            }
             { userChats.length > 0 &&
                 <>
                     <NitroCardGridView columns={1}>
@@ -65,7 +76,11 @@ export const SelectReportedChatsView: FC<{}> = props =>
                             )
                         })}
                     </NitroCardGridView>
-                    <button className="btn btn-secondary mt-2" type="button" disabled={selectedChats.size <= 0} onClick={submitChats}>{LocalizeText('help.emergency.main.submit.button')}</button>
+
+                    <div className="d-flex gap-2 justify-content-between mt-auto">
+                        <button className="btn btn-secondary mt-2" type="button" onClick={back}>{LocalizeText('generic.back')}</button>
+                        <button className="btn btn-primary mt-2" type="button" disabled={selectedChats.size <= 0} onClick={submitChats}>{LocalizeText('help.emergency.main.submit.button')}</button>
+                    </div>
                 </>
             }
         </>
diff --git a/src/views/help/views/SelectReportedUserView.tsx b/src/views/help/views/SelectReportedUserView.tsx
index 456558f6..7f9aefdb 100644
--- a/src/views/help/views/SelectReportedUserView.tsx
+++ b/src/views/help/views/SelectReportedUserView.tsx
@@ -1,6 +1,6 @@
 import { RoomObjectType } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useMemo, useState } from 'react';
-import { LocalizeText } from '../../../api';
+import { GetSessionDataManager, LocalizeText } from '../../../api';
 import { NitroCardGridItemView, NitroCardGridView } from '../../../layout';
 import { GetChatHistory } from '../../chat-history/common/GetChatHistory';
 import { ChatEntryType } from '../../chat-history/context/ChatHistoryContext.types';
@@ -19,7 +19,7 @@ export const SelectReportedUserView: FC<{}> = props =>
         GetChatHistory().chats
             .forEach(chat =>
             {
-                if((chat.type === ChatEntryType.TYPE_CHAT) && (chat.entityType === RoomObjectType.USER))//todo: remove own chats
+                if((chat.type === ChatEntryType.TYPE_CHAT) && (chat.entityType === RoomObjectType.USER) && (chat.entityId !== GetSessionDataManager().userId))
                 {
                     if(!users.has(chat.entityId))
                     {
@@ -47,6 +47,13 @@ export const SelectReportedUserView: FC<{}> = props =>
         else setSelectedUserId(userId);
     }, [selectedUserId]);
 
+    const back = useCallback(() =>
+    {
+        const reportState = Object.assign({}, helpReportState);
+        reportState.currentStep = --reportState.currentStep;
+        setHelpReportState(reportState);
+    }, [helpReportState, setHelpReportState]);
+
     return (
         <>
             <div className="d-grid col-12 mx-auto justify-content-center">
@@ -63,14 +70,17 @@ export const SelectReportedUserView: FC<{}> = props =>
                         {availableUsers.map((user, index) =>
                         {
                             return (
-                                <NitroCardGridItemView key={user.id} onClick={() => selectUser(user.id)} itemActive={( selectedUserId === user.id)}>
+                                <NitroCardGridItemView key={user.id} onClick={() => selectUser(user.id)} itemActive={(selectedUserId === user.id)}>
                                     <span dangerouslySetInnerHTML={{ __html: (user.username) }} />
                                 </NitroCardGridItemView>
                             )
                         })}
                     </NitroCardGridView>
 
-                    <button className="btn btn-secondary mt-2" type="button" disabled={selectedUserId <= 0} onClick={submitUser}>{LocalizeText('help.emergency.main.submit.button')}</button>
+                    <div className="d-flex gap-2 justify-content-between mt-auto">
+                        <button className="btn btn-secondary mt-2" type="button" onClick={back}>{LocalizeText('generic.back')}</button>
+                        <button className="btn btn-primary mt-2" type="button" disabled={selectedUserId <= 0} onClick={submitUser}>{LocalizeText('help.emergency.main.submit.button')}</button>
+                    </div>
                 </>
             }
         </>
diff --git a/src/views/help/views/SelectTopicView.tsx b/src/views/help/views/SelectTopicView.tsx
index da0dec3b..654f6cc3 100644
--- a/src/views/help/views/SelectTopicView.tsx
+++ b/src/views/help/views/SelectTopicView.tsx
@@ -6,8 +6,8 @@ import { useHelpContext } from '../context/HelpContext';
 export const SelectTopicView: FC<{}> = props =>
 {
     const { helpReportState = null, setHelpReportState = null } = useHelpContext();
-    const [ selectedCategory, setSelectedCategory ] = useState(-1);
-    const [ selectedTopic, setSelectedTopic ] = useState(-1);
+    const [selectedCategory, setSelectedCategory] = useState(-1);
+    const [selectedTopic, setSelectedTopic] = useState(-1);
 
     const cfhCategories = useMemo(() =>
     {
@@ -17,7 +17,7 @@ export const SelectTopicView: FC<{}> = props =>
     const submitTopic = useCallback(() =>
     {
         if(selectedCategory < 0) return;
-        if(selectedTopic < 0 ) return;
+        if(selectedTopic < 0) return;
 
         const reportState = Object.assign({}, helpReportState);
         reportState.cfhCategory = selectedCategory;
@@ -25,29 +25,40 @@ export const SelectTopicView: FC<{}> = props =>
         reportState.currentStep = 4;
         setHelpReportState(reportState);
     }, [cfhCategories, helpReportState, selectedCategory, selectedTopic, setHelpReportState]);
-    
+
+    const back = useCallback(() =>
+    {
+        const reportState = Object.assign({}, helpReportState);
+        reportState.currentStep = --reportState.currentStep;
+        setHelpReportState(reportState);
+    }, [helpReportState, setHelpReportState]);
+
     return (
         <>
             <div className="d-grid col-12 mx-auto justify-content-center">
                 <div className="col-12"><h3 className="fw-bold">{LocalizeText('help.emergency.chat_report.subtitle')}</h3></div>
                 <div className="text-wrap">{LocalizeText('help.cfh.pick.topic')}</div>
             </div>
-            <div className="d-grid gap-2 col-8 mx-auto overflow-auto">
-            {   (selectedCategory < 0) &&
-                cfhCategories.map((category, index) => 
+            <div className="d-grid gap-2 col-8 mx-auto">
+                {(selectedCategory < 0) &&
+                    cfhCategories.map((category, index) => 
                     {
                         return <button key={index} className="btn btn-danger" type="button" onClick={() => setSelectedCategory(index)}>{LocalizeText(`help.cfh.reason.${category.name}`)}</button>
                     })
-            }
-            { (selectedCategory >= 0 ) &&
-                cfhCategories[selectedCategory].topics.map((topic, index) =>
-                {
-                    return <button key={index} className="btn btn-danger" type="button" onClick={() => setSelectedTopic(index)}>{LocalizeText('help.cfh.topic.' + topic.id)}</button>
-                })
-            }
+                }
+                {(selectedCategory >= 0) &&
+                    cfhCategories[selectedCategory].topics.map((topic, index) =>
+                    {
+                        return <button key={index} className="btn btn-danger" type="button" onClick={() => setSelectedTopic(index)}>{LocalizeText('help.cfh.topic.' + topic.id)}</button>
+                    })
+                }
+            </div>
+
+            <div className="d-flex gap-2 justify-content-between mt-auto">
+                <button className="btn btn-secondary mt-2" type="button" onClick={back}>{LocalizeText('generic.back')}</button>
+                <button className="btn btn-primary mt-2" type="button" disabled={selectedTopic < 0} onClick={submitTopic}>{LocalizeText('help.emergency.main.submit.button')}</button>
             </div>
             
-            <button className="btn btn-secondary mt-2" type="button" disabled={selectedTopic < 0} onClick={submitTopic}>{LocalizeText('help.emergency.main.submit.button')}</button>
         </>
     );
 }
diff --git a/src/views/mod-tools/ModToolsView.scss b/src/views/mod-tools/ModToolsView.scss
index 58b133ef..e8fb9e18 100644
--- a/src/views/mod-tools/ModToolsView.scss
+++ b/src/views/mod-tools/ModToolsView.scss
@@ -1,20 +1,9 @@
 .nitro-mod-tools {
     width: 200px;
-
-    
-}
-
-.nitro-mod-tools-tickets
-{
-    width: 400px;
-    
-    .issues
-    {
-        height: 200px;
-    }
 }
 
 @import './views/room/room-tools/ModToolsRoomView';
 @import './views/chatlog/ChatlogView';
 @import './views/user/user-info/ModToolsUserView';
 @import './views/user/user-room-visits/ModToolsUserRoomVisitsView';
+@import './views/tickets/ModToolsTicketView';
diff --git a/src/views/mod-tools/common/IssueCategoryNames.ts b/src/views/mod-tools/common/IssueCategoryNames.ts
new file mode 100644
index 00000000..bb1ca2c5
--- /dev/null
+++ b/src/views/mod-tools/common/IssueCategoryNames.ts
@@ -0,0 +1,35 @@
+export const getSourceName = (categoryId: number): string =>
+{
+    switch(categoryId)
+    {
+        case 1:
+        case 2:
+            return 'Normal';
+        case 3:
+            return 'Automatic';
+        case 4:
+            return 'Automatic IM';
+        case 5:
+            return 'Guide System';
+        case 6:
+            return 'IM';
+        case 7:
+            return 'Room';
+        case 8:
+            return 'Panic';
+        case 9:
+            return 'Guardian';
+        case 10:
+            return 'Automatic Helper';
+        case 11:
+            return 'Discussion';
+        case 12:
+            return 'Selfie';
+        case 14:
+            return 'Photo';
+        case 15:
+            return 'Ambassador';
+        default:
+            return 'Unknown';
+    }
+}
diff --git a/src/views/mod-tools/views/tickets/ModToolsTicketView.scss b/src/views/mod-tools/views/tickets/ModToolsTicketView.scss
new file mode 100644
index 00000000..f2459483
--- /dev/null
+++ b/src/views/mod-tools/views/tickets/ModToolsTicketView.scss
@@ -0,0 +1,11 @@
+.nitro-mod-tools-tickets
+{
+    width: 400px;
+    height: 200px;
+}
+
+.nitro-mod-tools-handle-issue
+{
+    width: 400px;
+    height: 300px;
+}
diff --git a/src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx b/src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx
index 2a542f13..e2ccea90 100644
--- a/src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx
+++ b/src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx
@@ -3,6 +3,7 @@ import { FC, useCallback, useMemo, useState } from 'react';
 import { GetSessionDataManager } from '../../../../api';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
 import { useModToolsContext } from '../../context/ModToolsContext';
+import { IssueInfoView } from './issue-info/IssueInfoView';
 import { ModToolsTicketsViewProps } from './ModToolsTicketsView.types';
 import { ModToolsMyIssuesTabView } from './my-issues/ModToolsMyIssuesTabView';
 import { ModToolsOpenIssuesTabView } from './open-issues/ModToolsOpenIssuesTabView';
@@ -20,11 +21,11 @@ export const ModToolsTicketsView: FC<ModToolsTicketsViewProps> = props =>
     const { modToolsState = null } = useModToolsContext();
     const { tickets= null } = modToolsState;
     const [ currentTab, setCurrentTab ] = useState<number>(0);
+    const [ issueInfoWindows, setIssueInfoWindows ] = useState<number[]>([]);
 
     const openIssues = useMemo(() =>
     {
         if(!tickets) return [];
-        console.log(tickets);
         
         return tickets.filter(issue => issue.state === IssueMessageData.STATE_OPEN);
     }, [tickets]);
@@ -43,18 +44,44 @@ export const ModToolsTicketsView: FC<ModToolsTicketsViewProps> = props =>
         return tickets.filter(issue => issue.state === IssueMessageData.STATE_PICKED);
     }, [tickets]);
 
+    const onIssueInfoClosed = useCallback((issueId: number) =>
+    {
+        const indexOfValue = issueInfoWindows.indexOf(issueId);
+
+        if(indexOfValue === -1) return;
+
+        const newValues = Array.from(issueInfoWindows);
+        newValues.splice(indexOfValue, 1);
+        setIssueInfoWindows(newValues);
+    }, [issueInfoWindows]);
+    
+    const onIssueHandleClicked = useCallback((issueId: number) =>
+    {
+        if(issueInfoWindows.indexOf(issueId) === -1)
+        {
+            const newValues = Array.from(issueInfoWindows);
+            newValues.push(issueId);
+            setIssueInfoWindows(newValues);
+        }
+        else 
+        {
+            onIssueInfoClosed(issueId);
+        }
+    }, [issueInfoWindows, onIssueInfoClosed]);
+
     const CurrentTabComponent = useCallback(() =>
     {
         switch(currentTab)
         {
             case 0: return <ModToolsOpenIssuesTabView openIssues={openIssues}/>;
-            case 1: return <ModToolsMyIssuesTabView myIssues={myIssues} />;
+            case 1: return <ModToolsMyIssuesTabView myIssues={myIssues} onIssueHandleClick={onIssueHandleClicked}/>;
             case 2: return <ModToolsPickedIssuesTabView pickedIssues={pickedIssues}/>;
             default: return null;
         }
-    }, [currentTab, myIssues, openIssues, pickedIssues]);
+    }, [currentTab, myIssues, onIssueHandleClicked, openIssues, pickedIssues]);
 
     return (
+        <>
         <NitroCardView className="nitro-mod-tools-tickets" simple={ false }>
             <NitroCardHeaderView headerText={ 'Tickets' } onCloseClick={ onCloseClick } />
             <NitroCardContentView className="p-0 text-black">
@@ -71,5 +98,9 @@ export const ModToolsTicketsView: FC<ModToolsTicketsViewProps> = props =>
                 </div>
             </NitroCardContentView>
         </NitroCardView>
+        {
+            issueInfoWindows && issueInfoWindows.map(issueId => <IssueInfoView key={issueId} issueId={issueId} onIssueInfoClosed={onIssueInfoClosed}/>)
+        }
+        </>
     );
 }
diff --git a/src/views/mod-tools/views/tickets/issue-info/CfhChatlogView.tsx b/src/views/mod-tools/views/tickets/issue-info/CfhChatlogView.tsx
new file mode 100644
index 00000000..fdb4c28e
--- /dev/null
+++ b/src/views/mod-tools/views/tickets/issue-info/CfhChatlogView.tsx
@@ -0,0 +1,37 @@
+import { CfhChatlogData, CfhChatlogEvent, GetCfhChatlogMessageComposer } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { CreateMessageHook, SendMessageHook } from '../../../../../hooks';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
+import { ChatlogView } from '../../chatlog/ChatlogView';
+import { CfhChatlogViewProps } from './CfhChatlogView.types';
+
+export const CfhChatlogView: FC<CfhChatlogViewProps> = props =>
+{
+    const { onCloseClick = null, issueId = null } = props;
+    const [ chatlogData, setChatlogData ] = useState<CfhChatlogData>(null);
+
+    useEffect(() =>
+    {
+        SendMessageHook(new GetCfhChatlogMessageComposer(issueId));
+    }, [issueId]);
+
+    const onCfhChatlogEvent = useCallback((event: CfhChatlogEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!parser || parser.data.issueId !== issueId) return;
+
+        setChatlogData(parser.data);
+    }, [issueId]);
+
+    CreateMessageHook(CfhChatlogEvent, onCfhChatlogEvent);
+
+    return (
+        <NitroCardView className="nitro-mod-tools-cfh-chatlog" simple={true}>
+            <NitroCardHeaderView headerText={'Issue Chatlog'} onCloseClick={onCloseClick} />
+            <NitroCardContentView className="text-black">
+                { chatlogData && <ChatlogView records={[chatlogData.chatRecord]} />}
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}
diff --git a/src/views/mod-tools/views/tickets/issue-info/CfhChatlogView.types.ts b/src/views/mod-tools/views/tickets/issue-info/CfhChatlogView.types.ts
new file mode 100644
index 00000000..c40c18ad
--- /dev/null
+++ b/src/views/mod-tools/views/tickets/issue-info/CfhChatlogView.types.ts
@@ -0,0 +1,5 @@
+export interface CfhChatlogViewProps
+{
+    issueId: number;
+    onCloseClick(): void;
+}
diff --git a/src/views/mod-tools/views/tickets/issue-info/IssueInfoView.tsx b/src/views/mod-tools/views/tickets/issue-info/IssueInfoView.tsx
new file mode 100644
index 00000000..61a9784a
--- /dev/null
+++ b/src/views/mod-tools/views/tickets/issue-info/IssueInfoView.tsx
@@ -0,0 +1,72 @@
+import { CloseIssuesMessageComposer, ReleaseIssuesMessageComposer } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useMemo, useState } from 'react';
+import { LocalizeText } from '../../../../../api';
+import { ModToolsOpenUserInfoEvent } from '../../../../../events/mod-tools/ModToolsOpenUserInfoEvent';
+import { dispatchUiEvent, SendMessageHook } from '../../../../../hooks';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
+import { getSourceName } from '../../../common/IssueCategoryNames';
+import { useModToolsContext } from '../../../context/ModToolsContext';
+import { CfhChatlogView } from './CfhChatlogView';
+import { IssueInfoViewProps } from './IssueInfoView.types';
+
+export const IssueInfoView: FC<IssueInfoViewProps> = props =>
+{
+    const { issueId = null, onIssueInfoClosed = null } = props;
+    const { modToolsState = null } = useModToolsContext();
+    const { tickets= null } = modToolsState;
+    const [ cfhChatlogOpen, setcfhChatlogOpen ] = useState(false);
+
+    const ticket = useMemo(() =>
+    {
+        return tickets.find( issue => issue.issueId === issueId);
+    }, [issueId, tickets]);
+
+    const onReleaseIssue = useCallback((issueId: number) =>
+    {
+        SendMessageHook(new ReleaseIssuesMessageComposer([issueId]));
+        onIssueInfoClosed(issueId);
+    }, [onIssueInfoClosed]);
+
+    const openUserInfo = useCallback((userId: number) =>
+    {
+        dispatchUiEvent(new ModToolsOpenUserInfoEvent(userId));
+    }, []); 
+
+    const closeIssue = useCallback((resolutionType: number) =>
+    {
+        SendMessageHook(new CloseIssuesMessageComposer([issueId], resolutionType));
+        onIssueInfoClosed(issueId)
+    }, [issueId, onIssueInfoClosed]);
+    
+    return (
+        <>
+        <NitroCardView className="nitro-mod-tools-handle-issue" simple={true}>
+            <NitroCardHeaderView headerText={'Resolving issue ' + issueId} onCloseClick={() => onIssueInfoClosed(issueId)} />
+            <NitroCardContentView className="text-black">
+                <div className="row">
+                    <div className="col-8">
+                        <h3>Issue Information</h3>
+                        <div><span className="fw-bold">Source: </span>{getSourceName(ticket.categoryId)}</div>
+                        <div><span className="fw-bold">Category: </span>{LocalizeText('help.cfh.topic.' + ticket.reportedCategoryId)}</div>
+                        <div><span className="fw-bold">Description: </span>{ticket.message}</div>
+                        <div><span className="fw-bold">Caller: </span><button className="btn btn-link fw-bold" onClick={() => openUserInfo(ticket.reporterUserId)}>{ticket.reporterUserName}</button></div>
+                        <div><span className="fw-bold">Reported User: </span><button className="btn btn-link fw-bold" onClick={() => openUserInfo(ticket.reportedUserId)}>{ticket.reportedUserName}</button></div>
+                    </div>
+                    <div className="col-4">
+                        <div className="d-grid gap-2 mb-4">
+                            <button className="btn btn-secondary" onClick={() => setcfhChatlogOpen(!cfhChatlogOpen)}>Chatlog</button>
+                        </div>
+                        <div className="d-grid gap-2">
+                            <button className="btn btn-primary" onClick={() => closeIssue(CloseIssuesMessageComposer.RESOLUTION_USELESS)}>Close as useless</button>
+                            <button className="btn btn-danger" onClick={() => closeIssue(CloseIssuesMessageComposer.RESOLUTION_ABUSIVE)}>Close as abusive</button>
+                            <button className="btn btn-success" onClick={() => closeIssue(CloseIssuesMessageComposer.RESOLUTION_RESOLVED)}>Close as resolved</button> 
+                            <button className="btn btn-secondary" onClick={() => onReleaseIssue(issueId)}>Release</button>
+                        </div>
+                    </div>
+                </div>
+            </NitroCardContentView>
+        </NitroCardView>
+        { cfhChatlogOpen && <CfhChatlogView issueId={issueId} onCloseClick={() => setcfhChatlogOpen(false) }/>}
+        </>
+    );
+}
diff --git a/src/views/mod-tools/views/tickets/issue-info/IssueInfoView.types.ts b/src/views/mod-tools/views/tickets/issue-info/IssueInfoView.types.ts
new file mode 100644
index 00000000..1b28d803
--- /dev/null
+++ b/src/views/mod-tools/views/tickets/issue-info/IssueInfoView.types.ts
@@ -0,0 +1,5 @@
+export interface IssueInfoViewProps
+{
+    issueId: number;
+    onIssueInfoClosed(issueId: number): void;
+}
diff --git a/src/views/mod-tools/views/tickets/my-issues/ModToolsMyIssuesTabView.tsx b/src/views/mod-tools/views/tickets/my-issues/ModToolsMyIssuesTabView.tsx
index 63ab7546..1a3fcde3 100644
--- a/src/views/mod-tools/views/tickets/my-issues/ModToolsMyIssuesTabView.tsx
+++ b/src/views/mod-tools/views/tickets/my-issues/ModToolsMyIssuesTabView.tsx
@@ -1,53 +1,45 @@
-import { FC } from 'react';
-import { AutoSizer, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
+import { ReleaseIssuesMessageComposer } from '@nitrots/nitro-renderer';
+import { FC, useCallback } from 'react';
+import { SendMessageHook } from '../../../../../hooks';
 import { ModToolsMyIssuesTabViewProps } from './ModToolsMyIssuesTabView.types';
 
 export const ModToolsMyIssuesTabView: FC<ModToolsMyIssuesTabViewProps> = props =>
 {
-    const { myIssues = null } = props;
-
-    const RowRenderer: ListRowRenderer = (props: ListRowProps) =>
-    {
-        const item = myIssues[props.index];
-
-        return (
-            <div key={props.key} style={props.style} className="row issue-entry justify-content-start">
-                    <div className="col-auto text-center">{item.categoryId}</div>
-                    <div className="col justify-content-start username"><span className="fw-bold cursor-pointer">{item.reportedUserName}</span></div>
-                    <div className="col-sm-2 justify-content-start"><span className="text-break text-wrap h-100">{item.getOpenTime(new Date().getTime())}</span></div>
-                    <div className="col-sm-2">
-                        <button className="btn btn-sm btn-primary">View Issue</button>
-                    </div>
-            </div>
-        );
-    };
+    const { myIssues = null, onIssueHandleClick = null } = props;
     
+
+    const onReleaseIssue = useCallback((issueId: number) =>
+    {
+        SendMessageHook(new ReleaseIssuesMessageComposer([issueId]));
+    }, []);
+
     return (
         <>
-        <div className="row align-items-start w-100">
-            <div className="col-auto text-center fw-bold">Type</div>
-            <div className="col fw-bold">Room/Player</div>
-            <div className="col-sm-2 fw-bold">Opened</div>
-            <div className="col-sm-2"></div>
-        </div>
-        <div className="row w-100 issues">
-            <AutoSizer defaultWidth={400} defaultHeight={200}>
-                {({ height, width }) => 
-                {
-                    return (
-                        <List
-                            width={width}
-                            height={height}
-                            rowCount={myIssues.length}
-                            rowHeight={25}
-                            className={'issues-container'}
-                            rowRenderer={RowRenderer}
-                            />
-                    )
-                }
-                }
-            </AutoSizer>
-        </div>
+        <table className="table text-black table-striped">
+                <thead>
+                    <tr>
+                        <th scope="col">Type</th>
+                        <th scope="col">Room/Player</th>
+                        <th scope="col">Opened</th>
+                        <th scope="col"></th>
+                        <th scope="col"></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {myIssues.map(issue =>
+                        {
+                            return (
+                            <tr className="text-black" key={issue.issueId}>
+                                <td>{issue.categoryId}</td>
+                                <td>{issue.reportedUserName}</td>
+                                <td>{new Date(Date.now() - issue.issueAgeInMilliseconds).toLocaleTimeString()}</td>
+                                <td><button className="btn btn-sm btn-primary" onClick={() => onIssueHandleClick(issue.issueId)}>Handle</button></td>
+                                <td><button className="btn btn-sm btn-danger" onClick={() => onReleaseIssue(issue.issueId)}>Release</button></td>
+                            </tr>)
+                        })
+                    }
+                </tbody>
+            </table>
         </>
     );
 }
diff --git a/src/views/mod-tools/views/tickets/my-issues/ModToolsMyIssuesTabView.types.ts b/src/views/mod-tools/views/tickets/my-issues/ModToolsMyIssuesTabView.types.ts
index 15935fc9..6d03fbf8 100644
--- a/src/views/mod-tools/views/tickets/my-issues/ModToolsMyIssuesTabView.types.ts
+++ b/src/views/mod-tools/views/tickets/my-issues/ModToolsMyIssuesTabView.types.ts
@@ -3,4 +3,5 @@ import { IssueMessageData } from '@nitrots/nitro-renderer';
 export interface ModToolsMyIssuesTabViewProps
 {
     myIssues: IssueMessageData[];
+    onIssueHandleClick(issueId: number): void;
 }
diff --git a/src/views/mod-tools/views/tickets/open-issues/ModToolsOpenIssuesTabView.tsx b/src/views/mod-tools/views/tickets/open-issues/ModToolsOpenIssuesTabView.tsx
index 3452aba5..4f8bb6d6 100644
--- a/src/views/mod-tools/views/tickets/open-issues/ModToolsOpenIssuesTabView.tsx
+++ b/src/views/mod-tools/views/tickets/open-issues/ModToolsOpenIssuesTabView.tsx
@@ -1,53 +1,42 @@
-import { FC } from 'react';
-import { AutoSizer, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
+import { PickIssuesMessageComposer } from '@nitrots/nitro-renderer';
+import { FC, useCallback } from 'react';
+import { SendMessageHook } from '../../../../../hooks';
 import { ModToolsOpenIssuesTabViewProps } from './ModToolsOpenIssuesTabView.types';
 
 export const ModToolsOpenIssuesTabView: FC<ModToolsOpenIssuesTabViewProps> = props =>
 {
     const { openIssues = null } = props;
 
-    const RowRenderer: ListRowRenderer = (props: ListRowProps) =>
+    const onPickIssue = useCallback((issueId: number) =>
     {
-        const item = openIssues[props.index];
+        SendMessageHook(new PickIssuesMessageComposer([issueId], false, 0, 'pick issue button'));
+    }, []);
 
-        return (
-            <div key={props.key} style={props.style} className="row issue-entry justify-content-start">
-                    <div className="col-auto text-center">{item.categoryId}</div>
-                    <div className="col justify-content-start username"><span className="fw-bold cursor-pointer">{item.reportedUserName}</span></div>
-                    <div className="col-sm-2 justify-content-start"><span className="text-break text-wrap h-100">{item.getOpenTime(new Date().getTime())}</span></div>
-                    <div className="col-sm-2">
-                        <button className="btn btn-sm btn-primary">Pick Issue</button>
-                    </div>
-            </div>
-        );
-    };
-    
     return (
         <>
-        <div className="row align-items-start w-100">
-            <div className="col-auto text-center fw-bold">Type</div>
-            <div className="col fw-bold">Room/Player</div>
-            <div className="col-sm-2 fw-bold">Opened</div>
-            <div className="col-sm-2"></div>
-        </div>
-        <div className="row w-100 issues">
-            <AutoSizer defaultWidth={400} defaultHeight={200}>
-                {({ height, width }) => 
-                {
-                    return (
-                        <List
-                            width={width}
-                            height={height}
-                            rowCount={openIssues.length}
-                            rowHeight={25}
-                            className={'issues-container'}
-                            rowRenderer={RowRenderer}
-                            />
-                    )
-                }
-                }
-            </AutoSizer>
-        </div>
+            <table className="table text-black table-striped">
+                <thead>
+                    <tr>
+                        <th scope="col">Type</th>
+                        <th scope="col">Room/Player</th>
+                        <th scope="col">Opened</th>
+                        <th scope="col"></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {openIssues.map(issue =>
+                        {
+                            return (
+                            <tr className="text-black" key={issue.issueId}>
+                                <td>{issue.categoryId}</td>
+                                <td>{issue.reportedUserName}</td>
+                                <td>{new Date(Date.now() - issue.issueAgeInMilliseconds).toLocaleTimeString()}</td>
+                                <td><button className="btn btn-sm btn-success" onClick={() => onPickIssue(issue.issueId)}>Pick Issue</button></td>
+                            </tr>)
+                        })
+                    }
+                </tbody>
+            </table>
         </>
     );
 }
diff --git a/src/views/mod-tools/views/tickets/picked-issues/ModToolsPickedIssuesTabView.tsx b/src/views/mod-tools/views/tickets/picked-issues/ModToolsPickedIssuesTabView.tsx
index dc7f79b1..988a0fd9 100644
--- a/src/views/mod-tools/views/tickets/picked-issues/ModToolsPickedIssuesTabView.tsx
+++ b/src/views/mod-tools/views/tickets/picked-issues/ModToolsPickedIssuesTabView.tsx
@@ -1,53 +1,35 @@
 import { FC } from 'react';
-import { AutoSizer, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
 import { ModToolsPickedIssuesTabViewProps } from './ModToolsPickedIssuesTabView.types';
 
 export const ModToolsPickedIssuesTabView: FC<ModToolsPickedIssuesTabViewProps> = props =>
 {
     const { pickedIssues = null } = props;
-
-    const RowRenderer: ListRowRenderer = (props: ListRowProps) =>
-    {
-        const item = pickedIssues[props.index];
-
-        return (
-            <div key={props.key} style={props.style} className="row issue-entry justify-content-start">
-                    <div className="col-auto text-center">{item.categoryId}</div>
-                    <div className="col justify-content-start username"><span className="fw-bold cursor-pointer">{item.reportedUserName}</span></div>
-                    <div className="col-sm-2 justify-content-start"><span className="text-break text-wrap h-100">{item.getOpenTime(new Date().getTime())}</span></div>
-                    <div className="col-sm-2">
-                        {item.pickerUserName}
-                    </div>
-            </div>
-        );
-    };
     
     return (
         <>
-        <div className="row align-items-start w-100">
-            <div className="col-auto text-center fw-bold">Type</div>
-            <div className="col fw-bold">Room/Player</div>
-            <div className="col-sm-2 fw-bold">Opened</div>
-            <div className="col-sm-2 fw-bold">Picker</div>
-        </div>
-        <div className="row w-100 issues">
-            <AutoSizer defaultWidth={400} defaultHeight={200}>
-                {({ height, width }) => 
-                {
-                    return (
-                        <List
-                            width={width}
-                            height={height}
-                            rowCount={pickedIssues.length}
-                            rowHeight={25}
-                            className={'issues-container'}
-                            rowRenderer={RowRenderer}
-                            />
-                    )
-                }
-                }
-            </AutoSizer>
-        </div>
+        <table className="table text-black table-striped">
+                <thead>
+                    <tr>
+                        <th scope="col">Type</th>
+                        <th scope="col">Room/Player</th>
+                        <th scope="col">Opened</th>
+                        <th scope="col">Picker</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {pickedIssues.map(issue =>
+                        {
+                            return (
+                            <tr className="text-black" key={issue.issueId}>
+                                <td>{issue.categoryId}</td>
+                                <td>{issue.reportedUserName}</td>
+                                <td>{new Date(Date.now() - issue.issueAgeInMilliseconds).toLocaleTimeString()}</td>
+                                <td>{issue.pickerUserName}</td>
+                            </tr>)
+                        })
+                    }
+                </tbody>
+            </table>
         </>
     );
 }