Move help component

src/App.scss

@@ -50,8 +50,8 @@ $chat-history-height: 300px;
 $friends-list-width: 250px;
 $friends-list-height: 300px;
 
-$help-width: 275px;
+$help-width: 450px;
-$help-height: 450px;
+$help-height: 250px;
 
 $nitropedia-width: 400px;
 $nitropedia-height: 400px;

src/components/help/HelpContext.tsx

@@ -0,0 +1,20 @@
+import { createContext, Dispatch, FC, ProviderProps, SetStateAction, useContext } from 'react';
+import { IHelpReportState } from './common/IHelpReportState';
+
+interface IHelpContext
+{
+    helpReportState: IHelpReportState;
+    setHelpReportState: Dispatch<SetStateAction<IHelpReportState>>;
+}
+
+const HelpContext = createContext<IHelpContext>({
+    helpReportState: null,
+    setHelpReportState: null
+});
+
+export const HelpContextProvider: FC<ProviderProps<IHelpContext>> = props =>
+{
+    return <HelpContext.Provider value={ props.value }>{ props.children }</HelpContext.Provider>
+}
+
+export const useHelpContext = () => useContext(HelpContext);

src/components/help/HelpMessageHandler.tsx

@@ -2,8 +2,8 @@ import { CallForHelpResultMessageEvent, GetPendingCallsForHelpMessageComposer, I
 import { FC, useCallback } from 'react';
 import { LocalizeText } from '../../api';
 import { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event';
-import { NotificationAlertType } from '../notification-center/common/NotificationAlertType';
+import { NotificationAlertType } from '../../views/notification-center/common/NotificationAlertType';
-import { NotificationUtilities } from '../notification-center/common/NotificationUtilities';
+import { NotificationUtilities } from '../../views/notification-center/common/NotificationUtilities';
 import { CallForHelpResult } from './common/CallForHelpResult';
 import { GetCloseReasonKey } from './common/GetCloseReasonKey';
  

src/components/help/HelpView.scss

@@ -1,6 +1,6 @@
 .nitro-help {
-    height: 430px;
+    height: $help-height;
-    width: 300px;
+    width: $help-width;
 
     .index-image {
         background: url('../../assets/images/help/help_index.png');

src/components/help/HelpView.tsx

@@ -0,0 +1,121 @@
+import { ILinkEventTracker } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { AddEventLinkTracker, LocalizeText, RemoveLinkEventTracker } from '../../api';
+import { HelpReportUserEvent } from '../../events/help/HelpReportUserEvent';
+import { useUiEvent } from '../../hooks';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
+import { IHelpReportState } from './common/IHelpReportState';
+import { HelpContextProvider } from './HelpContext';
+import { HelpMessageHandler } from './HelpMessageHandler';
+import { DescribeReportView } from './views/DescribeReportView';
+import { HelpIndexView } from './views/HelpIndexView';
+import { SanctionSatusView } from './views/SanctionStatusView';
+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>({
+        reportedUserId: -1,
+        reportedChats: [],
+        cfhCategory: -1,
+        cfhTopic: -1,
+        roomId: -1,
+        message: '',
+        currentStep: 0
+    });
+
+    const linkReceived = useCallback((url: string) =>
+    {
+        const parts = url.split('/');
+
+        if(parts.length < 2) return;
+
+        switch(parts[1])
+        {
+            case 'show':
+                setIsVisible(true);
+                return;
+            case 'hide':
+                setIsVisible(false);
+                return;
+            case 'toggle':
+                setIsVisible(prevValue => !prevValue);
+                return;
+        }
+    }, []);
+
+    const onHelpReportUserEvent = useCallback((event: HelpReportUserEvent) =>
+    {
+        setHelpReportState({
+            reportedUserId: event.reportedUserId,
+            reportedChats: [],
+            cfhCategory: -1,
+            cfhTopic: -1,
+            roomId: -1,
+            message: '',
+            currentStep: 2
+        });
+        
+        setIsVisible(true);
+    }, []);
+
+    useUiEvent(HelpReportUserEvent.REPORT_USER, onHelpReportUserEvent);
+
+    useEffect(() =>
+    {
+        const linkTracker: ILinkEventTracker = {
+            linkReceived,
+            eventUrlPrefix: 'help/'
+        };
+
+        AddEventLinkTracker(linkTracker);
+
+        return () => RemoveLinkEventTracker(linkTracker);
+    }, [ linkReceived ]);
+
+    useEffect(() =>
+    {
+        if(!isVisible) return;
+
+        setHelpReportState({
+            reportedUserId: -1,
+            reportedChats: [],
+            cfhCategory: -1,
+            cfhTopic: -1,
+            roomId: -1,
+            message: '',
+            currentStep: 0
+        });
+    }, [ isVisible ]);
+
+    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={ event => setIsVisible(false) } />
+                    <NitroCardContentView className="text-black">
+                        <CurrentStepView />
+                    </NitroCardContentView>
+                </NitroCardView> }
+            <SanctionSatusView />
+        </HelpContextProvider>
+    );
+}

src/components/help/common/IHelpReportState.ts

@@ -0,0 +1,11 @@
+import { IChatEntry } from '../../../views/chat-history/context/ChatHistoryContext.types';
+
+export interface IHelpReportState {
+    reportedUserId: number;
+    reportedChats: IChatEntry[];
+    cfhCategory: number;
+    cfhTopic: number;
+    roomId: number;
+    message: string;
+    currentStep: number;
+}

src/components/help/common/IReportedUser.ts

@@ -1,4 +1,4 @@
-export interface IUser
+export interface IReportedUser
 {
     id: number;
     username: string;

src/components/help/views/DescribeReportView.tsx

@@ -1,9 +1,8 @@
 import { CallForHelpMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
-import { LocalizeText } from '../../../api';
+import { CreateLinkEvent, LocalizeText } from '../../../api';
-import { HelpEvent } from '../../../events/help/HelpEvent';
+import { SendMessageHook } from '../../../hooks';
-import { dispatchUiEvent, SendMessageHook } from '../../../hooks';
+import { useHelpContext } from '../HelpContext';
-import { useHelpContext } from '../context/HelpContext';
 
 export const DescribeReportView: FC<{}> = props =>
 {
@@ -30,7 +29,7 @@ export const DescribeReportView: FC<{}> = props =>
 
         SendMessageHook(new CallForHelpMessageComposer(message, reportState.cfhTopic, reportState.reportedUserId, roomId, chats));
 
-        dispatchUiEvent(new HelpEvent(HelpEvent.HIDE_HELP_CENTER));
+        CreateLinkEvent('help/hide');
     }, [helpReportState, message, setHelpReportState]);
 
     return (

src/components/help/views/HelpIndexView.tsx

@@ -0,0 +1,46 @@
+import { GetCfhStatusMessageComposer } from '@nitrots/nitro-renderer';
+import { FC, useCallback } from 'react';
+import { LocalizeText } from '../../../api';
+import { Button } from '../../../common/Button';
+import { Column } from '../../../common/Column';
+import { Grid } from '../../../common/Grid';
+import { Text } from '../../../common/Text';
+import { SendMessageHook } from '../../../hooks';
+import { useHelpContext } from '../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]);
+
+    const onRequestMySanctionStatusClick = useCallback(() =>
+    {
+        SendMessageHook(new GetCfhStatusMessageComposer(false));
+    }, []);
+
+    return (
+        <Grid>
+            <Column center size={ 5 } overflow="hidden">
+                <div className="index-image" />
+            </Column>
+            <Column justifyContent="center" size={ 7 } overflow="hidden">
+                <Column gap={ 1 }>
+                    <Text fontSize={ 3 }>{ LocalizeText('help.main.frame.title') }</Text>
+                    <Text>{ LocalizeText('help.main.self.description') }</Text>
+                </Column>
+                <Column gap={ 1 }>
+                    <Button onClick={ onReportClick }>{ LocalizeText('help.main.bully.subtitle') }</Button>
+                    <Button disabled={ true }>{ LocalizeText('help.main.help.title') }</Button>
+                    <Button disabled={ true }>{ LocalizeText('help.main.self.tips.title') }</Button>
+                    <Button variant="link" className="text-black" onClick={ onRequestMySanctionStatusClick }>{ LocalizeText('help.main.my.sanction.status') }</Button>
+                </Column>
+            </Column>
+        </Grid>
+    )
+}

src/components/help/views/SelectReportedChatsView.tsx

@@ -2,9 +2,9 @@ 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 { GetChatHistory } from '../../../views/chat-history/common/GetChatHistory';
-import { ChatEntryType, IChatEntry } from '../../chat-history/context/ChatHistoryContext.types';
+import { ChatEntryType, IChatEntry } from '../../../views/chat-history/context/ChatHistoryContext.types';
-import { useHelpContext } from '../context/HelpContext';
+import { useHelpContext } from '../HelpContext';
 
 export const SelectReportedChatsView: FC<{}> = props =>
 {

src/components/help/views/SelectReportedUserView.tsx

@@ -0,0 +1,100 @@
+import { RoomObjectType } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useMemo, useState } from 'react';
+import { GetSessionDataManager, LocalizeText } from '../../../api';
+import { Base } from '../../../common/Base';
+import { Button } from '../../../common/Button';
+import { Column } from '../../../common/Column';
+import { Flex } from '../../../common/Flex';
+import { Grid } from '../../../common/Grid';
+import { LayoutGridItem } from '../../../common/layout/LayoutGridItem';
+import { Text } from '../../../common/Text';
+import { GetChatHistory } from '../../../views/chat-history/common/GetChatHistory';
+import { ChatEntryType } from '../../../views/chat-history/context/ChatHistoryContext.types';
+import { IReportedUser } from '../common/IReportedUser';
+import { useHelpContext } from '../HelpContext';
+
+export const SelectReportedUserView: FC<{}> = props =>
+{
+    const [ selectedUserId, setSelectedUserId ] = useState(-1);
+    const { helpReportState = null, setHelpReportState = null } = useHelpContext();
+
+    const availableUsers = useMemo(() =>
+    {
+        const users: Map<number, IReportedUser> = new Map();
+
+        GetChatHistory().chats
+            .forEach(chat =>
+            {
+                if((chat.type === ChatEntryType.TYPE_CHAT) && (chat.entityType === RoomObjectType.USER) && (chat.entityId !== GetSessionDataManager().userId))
+                {
+                    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]);
+
+    const back = useCallback(() =>
+    {
+        const reportState = Object.assign({}, helpReportState);
+        reportState.currentStep = --reportState.currentStep;
+        setHelpReportState(reportState);
+    }, [helpReportState, setHelpReportState]);
+
+    return (
+        <Grid>
+            <Column center size={ 5 } overflow="hidden">
+                <Base className="index-image" />
+            </Column>
+            <Column justifyContent="center" size={ 7 } overflow="hidden">
+                <Column gap={ 1 }>
+                    <Text fontSize={ 3 }>{ LocalizeText('help.emergency.main.step.two.title') }</Text>
+                    { (availableUsers.length > 0) &&
+                        <Text>{ LocalizeText('report.user.pick.user') }</Text> }
+                </Column>
+                <Column gap={ 1 }>
+                    { !!!availableUsers.length &&
+                        <Text>{ LocalizeText('report.user.error.nolist') }</Text> }
+                    { (availableUsers.length > 0) &&
+                        <Grid grow columnCount={ 1 } gap={ 1 } overflow="auto">
+                            { availableUsers.map((user, index) =>
+                                {
+                                    return (
+                                        <LayoutGridItem key={ user.id } onClick={ event => selectUser(user.id) } itemActive={ (selectedUserId === user.id) }>
+                                            <span dangerouslySetInnerHTML={{ __html: (user.username) }} />
+                                        </LayoutGridItem>
+                                    );
+                                }) }
+                        </Grid> }
+                </Column>
+                <Flex gap={ 2 } justifyContent="between">
+                    <Button variant="secondary" onClick={ back }>
+                        { LocalizeText('generic.back') }
+                    </Button>
+                    <Button disabled={ (selectedUserId <= 0) } onClick={ submitUser }>
+                        { LocalizeText('help.emergency.main.submit.button') }
+                    </Button>
+                </Flex>
+            </Column>
+        </Grid>
+    )
+}

src/components/help/views/SelectTopicView.tsx

@@ -1,7 +1,7 @@
 import { FC, useCallback, useMemo, useState } from 'react';
 import { LocalizeText } from '../../../api';
-import { GetCfhCategories } from '../../mod-tools/common/GetCFHCategories';
+import { GetCfhCategories } from '../../../views/mod-tools/common/GetCFHCategories';
-import { useHelpContext } from '../context/HelpContext';
+import { useHelpContext } from '../HelpContext';
 
 export const SelectTopicView: FC<{}> = props =>
 {

src/components/index.scss

@@ -2,6 +2,7 @@
 @import './avatar-editor/AvatarEditorView';
 @import './camera/CameraWidgetView';
 @import './catalog/CatalogView';
+@import './help/HelpView';
 @import './inventory/InventoryView';
 @import './navigator/NavigatorView';
 @import './toolbar/ToolbarView';

src/events/help/HelpEvent.ts

@@ -1,8 +0,0 @@
-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';
-}

src/events/help/HelpReportUserEvent.ts

@@ -1,6 +1,6 @@
-import { HelpEvent } from './HelpEvent';
+import { NitroEvent } from '@nitrots/nitro-renderer';
 
-export class HelpReportUserEvent extends HelpEvent
+export class HelpReportUserEvent extends NitroEvent
 {
     public static REPORT_USER: string = 'HCE_HELP_CENTER_REPORT_USER';
     

src/views/Styles.scss

@@ -13,7 +13,6 @@
 @import "./user-settings/UserSettingsView";
 @import "./user-profile/UserProfileVew";
 @import "./chat-history/ChatHistoryView";
-@import "./help/HelpView";
 @import "./floorplan-editor/FloorplanEditorView";
 @import "./nitropedia/NitropediaView";
 @import "./hc-center/HcCenterView.scss";

src/views/help/HelpView.tsx

@@ -1,81 +0,0 @@
-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 { SanctionSatusView } from './views/SanctionStatusView';
-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>
-            }
-            <SanctionSatusView />
-        </HelpContextProvider>
-    );
-}

src/views/help/context/HelpContext.tsx

@@ -1,14 +0,0 @@
-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);

src/views/help/context/HelpContext.types.ts

@@ -1,33 +0,0 @@
-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>
-{
-
-}

src/views/help/views/HelpIndexView.tsx

@@ -1,43 +0,0 @@
-import { GetCfhStatusMessageComposer } from '@nitrots/nitro-renderer';
-import { FC, useCallback } from 'react';
-import { LocalizeText } from '../../../api';
-import { SendMessageHook } from '../../../hooks';
-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]);
-
-    const onRequestMySanctionStatusClick = useCallback(() =>
-    {
-        SendMessageHook(new GetCfhStatusMessageComposer(false));
-    }, []);
-
-    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" disabled={true}>{LocalizeText('help.main.help.title')}</button>
-                <button className="btn btn-primary" type="button" disabled={true}>{LocalizeText('help.main.self.tips.title')}</button>
-            </div>
-
-            <div className="d-grid gap-2 col-8 mx-auto">
-                <button className="btn btn-link text-primary fw-bold" type="button" onClick={onRequestMySanctionStatusClick}>{LocalizeText('help.main.my.sanction.status')}</button>
-            </div>
-
-        </>
-    )
-}

src/views/help/views/SelectReportedUserView.tsx

@@ -1,88 +0,0 @@
-import { RoomObjectType } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useMemo, useState } from 'react';
-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';
-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) && (chat.entityId !== GetSessionDataManager().userId))
-                {
-                    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]);
-
-    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">
-                <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>
-
-                    <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>
-                </>
-            }
-        </>
-    )
-}

src/views/main/MainView.tsx

@@ -5,6 +5,7 @@ import { AchievementsView } from '../../components/achievements/AchievementsView
 import { AvatarEditorView } from '../../components/avatar-editor/AvatarEditorView';
 import { CameraWidgetView } from '../../components/camera/CameraWidgetView';
 import { CatalogView } from '../../components/catalog/CatalogView';
+import { HelpView } from '../../components/help/HelpView';
 import { InventoryView } from '../../components/inventory/InventoryView';
 import { NavigatorView } from '../../components/navigator/NavigatorView';
 import { ToolbarView } from '../../components/toolbar/ToolbarView';
@@ -17,7 +18,6 @@ import { FloorplanEditorView } from '../floorplan-editor/FloorplanEditorView';
 import { FriendsView } from '../friends/FriendsView';
 import { GroupsView } from '../groups/GroupsView';
 import { HcCenterView } from '../hc-center/HcCenterView';
-import { HelpView } from '../help/HelpView';
 import { HotelView } from '../hotel-view/HotelView';
 import { ModToolsView } from '../mod-tools/ModToolsView';
 import { NitropediaView } from '../nitropedia/NitropediaView';

src/views/purse/PurseView.tsx

@@ -1,8 +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 { CreateLinkEvent, GetConfiguration, LocalizeText } from '../../api';
 import { HcCenterEvent } from '../../events/hc-center/HcCenterEvent';
-import { HelpEvent } from '../../events/help/HelpEvent';
 import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent';
 import { dispatchUiEvent } from '../../hooks';
 import { SendMessageHook } from '../../hooks/messages/message-event';
@@ -28,7 +27,7 @@ export const PurseView: FC<{}> = props =>
 
     const handleHelpCenterClick = useCallback(() =>
     {
-        dispatchUiEvent(new HelpEvent(HelpEvent.TOGGLE_HELP_CENTER));
+        CreateLinkEvent('help/show');
     }, []);
 
     const handleHcCenterClick = useCallback(() =>