Update help component

src/components/help/HelpView.tsx

@@ -1,6 +1,7 @@
 import { ILinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { AddEventLinkTracker, LocalizeText, RemoveLinkEventTracker } from '../../api';
+import { Base, Column, Grid } from '../../common';
 import { HelpReportUserEvent } from '../../events/help/HelpReportUserEvent';
 import { useUiEvent } from '../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
@@ -112,7 +113,14 @@ export const HelpView: FC<{}> = props =>
                 <NitroCardView className="nitro-help">
                     <NitroCardHeaderView headerText={ LocalizeText('help.button.cfh') } onCloseClick={ event => setIsVisible(false) } />
                     <NitroCardContentView className="text-black">
-                        <CurrentStepView />
+                        <Grid>
+                            <Column center size={ 5 } overflow="hidden">
+                                <Base className="index-image" />
+                            </Column>
+                            <Column justifyContent="between" size={ 7 } overflow="hidden">
+                                <CurrentStepView />
+                            </Column>
+                        </Grid>
                     </NitroCardContentView>
                 </NitroCardView> }
             <SanctionSatusView />

src/components/help/views/DescribeReportView.tsx

@@ -1,49 +1,44 @@
 import { CallForHelpMessageComposer } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useState } from 'react';
+import { FC, useState } from 'react';
 import { CreateLinkEvent, LocalizeText } from '../../../api';
+import { Button, Column, Text } from '../../../common';
 import { SendMessageHook } from '../../../hooks';
 import { useHelpContext } from '../HelpContext';
 
 export const DescribeReportView: FC<{}> = props =>
 {
+    const [ message, setMessage ] = useState('');
     const { helpReportState = null, setHelpReportState = null } = useHelpContext();
-    const [message, setMessage] = useState('');
+    const { reportedChats, cfhTopic, reportedUserId } = helpReportState;
 
-    const submitReport = useCallback(() =>
+    const submitReport = () =>
     {
         if(message.length < 15) return;
 
-        const reportState = Object.assign({}, helpReportState);
+        const roomId = reportedChats[0].roomId;
-
-        reportState.message = message;
-
-        setHelpReportState(reportState);
-
-        const roomId = reportState.reportedChats[0].roomId;
         const chats: (string | number )[] = [];
-        reportState.reportedChats.forEach(entry =>
+
+        reportedChats.forEach(entry =>
         {
             chats.push(entry.entityId);
             chats.push(entry.message);
         });
 
-        SendMessageHook(new CallForHelpMessageComposer(message, reportState.cfhTopic, reportState.reportedUserId, roomId, chats));
+        SendMessageHook(new CallForHelpMessageComposer(message, cfhTopic, reportedUserId, roomId, chats));
 
         CreateLinkEvent('help/hide');
-    }, [helpReportState, message, setHelpReportState]);
+    }
 
     return (
         <>
-            <div className="d-grid col-12 mx-auto justify-content-center">
+            <Column gap={ 1 }>
-                <div className="col-12"><h3 className="fw-bold">{LocalizeText('help.emergency.chat_report.subtitle')}</h3></div>
+                <Text fontSize={ 3 }>{ LocalizeText('help.emergency.chat_report.subtitle') }</Text>
-                <div className="text-wrap">{LocalizeText('help.cfh.input.text')}</div>
+                <Text>{ LocalizeText('help.cfh.input.text') }</Text>
-            </div>
+            </Column>
-
+            <textarea className="form-control" value={ message } onChange={ event => setMessage(event.target.value) } />
-            <div className="form-group mb-2">
+            <Button variant="success" disabled={ (message.length < 15) } onClick={ submitReport }>
-                <textarea className="form-control" value={message} onChange={event => setMessage(event.target.value)} />
+                { LocalizeText('help.bully.submit') }
-            </div>
+            </Button>
-
-            <button className="btn btn-danger mt-2" type="button" disabled={message.length < 15} onClick={submitReport}>{LocalizeText('help.bully.submit')}</button>
         </>
     );
 }

src/components/help/views/HelpIndexView.tsx

@@ -3,7 +3,6 @@ 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';
@@ -25,22 +24,17 @@ export const HelpIndexView: FC<{}> = props =>
     }, []);
 
     return (
-        <Grid>
+        <>
-            <Column center size={ 5 } overflow="hidden">
+            <Column gap={ 1 }>
-                <div className="index-image" />
+                <Text fontSize={ 3 }>{ LocalizeText('help.main.frame.title') }</Text>
+                <Text>{ LocalizeText('help.main.self.description') }</Text>
             </Column>
-            <Column justifyContent="center" size={ 7 } overflow="hidden">
+            <Column gap={ 1 }>
-                <Column gap={ 1 }>
+                <Button onClick={ onReportClick }>{ LocalizeText('help.main.bully.subtitle') }</Button>
-                    <Text fontSize={ 3 }>{ LocalizeText('help.main.frame.title') }</Text>
+                <Button disabled={ true }>{ LocalizeText('help.main.help.title') }</Button>
-                    <Text>{ LocalizeText('help.main.self.description') }</Text>
+                <Button disabled={ true }>{ LocalizeText('help.main.self.tips.title') }</Button>
-                </Column>
+                <Button variant="link" className="text-black" onClick={ onRequestMySanctionStatusClick }>{ LocalizeText('help.main.my.sanction.status') }</Button>
-                <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/SanctionStatusView.tsx

@@ -1,6 +1,7 @@
 import { SanctionStatusEvent, SanctionStatusMessageParser } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText } from '../../../api';
+import { Base, Button, Column, Grid } from '../../../common';
 import { CreateMessageHook } from '../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../layout';
 
@@ -49,36 +50,39 @@ export const SanctionSatusView:FC<{}> = props =>
     if(!sanctionInfo) return null;
     
     return (
-        <NitroCardView className="nitro-cfh-sanction-status">
+        <NitroCardView className="nitro-help">
             <NitroCardHeaderView headerText={LocalizeText('help.sanction.info.title')} onCloseClick={() => setSanctionInfo(null)} />
             <NitroCardContentView className="text-black">
-                <div className="d-grid gap-2 col-12 mx-auto justify-content-start">
+                <Grid>
-                    {(sanctionInfo.sanctionReason === 'cfh.reason.EMPTY') 
+                    <Column center size={ 5 } overflow="hidden">
-                        ? <div className="col-12 fw-bold">{LocalizeText('help.sanction.current.none')}</div>
+                        <Base className="index-image" />
-                        : <>
+                    </Column>
-                            {((sanctionInfo.probationHoursLeft > 0) || (sanctionInfo.isSanctionActive)) &&
+                    <Column justifyContent="between" size={ 7 } overflow="hidden">
-                                <div className="col-12 fw-bold">{LocalizeText('help.sanction.probation.reminder')}</div>
+                        { (sanctionInfo.sanctionReason === 'cfh.reason.EMPTY') 
-                            }
+                            ? <div className="col-12 fw-bold">{LocalizeText('help.sanction.current.none')}</div>
-                            <div className={`col-12 fw-bold ${sanctionInfo.isSanctionNew ? 'text-danger' : ''}`}>
+                            : <>
-                                {LocalizeText('help.sanction.last.sanction')} {sanctionLocalization('current', sanctionInfo.sanctionName, sanctionInfo.sanctionLengthHours)}
+                                {((sanctionInfo.probationHoursLeft > 0) || (sanctionInfo.isSanctionActive)) &&
-                            </div>
+                                    <div className="col-12 fw-bold">{LocalizeText('help.sanction.probation.reminder')}</div>
-                            <div className="col-12">{LocalizeText('generic.start.time')} {sanctionInfo.sanctionCreationTime}</div>
+                                }
-                            <div className="col-12">{LocalizeText('generic.reason')} {sanctionInfo.sanctionReason}</div>
+                                <div className={`col-12 fw-bold ${sanctionInfo.isSanctionNew ? 'text-danger' : ''}`}>
-                            <div className="col-12">{LocalizeText('help.sanction.probation.days.left')} {Math.trunc((sanctionInfo.probationHoursLeft / 24)) + 1}</div>
+                                    {LocalizeText('help.sanction.last.sanction')} {sanctionLocalization('current', sanctionInfo.sanctionName, sanctionInfo.sanctionLengthHours)}
-                        </>
+                                </div>
-                    }
+                                <div className="col-12">{LocalizeText('generic.start.time')} {sanctionInfo.sanctionCreationTime}</div>
-                    { ((sanctionInfo.hasCustomMute) && (!(sanctionInfo.isSanctionActive))) &&
+                                <div className="col-12">{LocalizeText('generic.reason')} {sanctionInfo.sanctionReason}</div>
+                                <div className="col-12">{LocalizeText('help.sanction.probation.days.left')} {Math.trunc((sanctionInfo.probationHoursLeft / 24)) + 1}</div>
+                            </>
+                        }
+                        { ((sanctionInfo.hasCustomMute) && (!(sanctionInfo.isSanctionActive))) &&
                         <div className="col-12 fw-bold">{LocalizeText('help.sanction.custom.mute')}</div>
-                    }
+                        }
-                    { (sanctionInfo.tradeLockExpiryTime && sanctionInfo.tradeLockExpiryTime.length > 0) &&
+                        { (sanctionInfo.tradeLockExpiryTime && sanctionInfo.tradeLockExpiryTime.length > 0) &&
-                        <div className="col-12 fw-bold">{LocalizeText('trade.locked.until')} {sanctionInfo.tradeLockExpiryTime}</div>
+                            <div className="col-12 fw-bold">{LocalizeText('trade.locked.until')} {sanctionInfo.tradeLockExpiryTime}</div>
-                    }
+                        }
 
-                    <div className="col-12">{sanctionLocalization('next', sanctionInfo.nextSanctionName, sanctionInfo.nextSanctionLengthHours)}</div>
+                        <div className="col-12">{sanctionLocalization('next', sanctionInfo.nextSanctionName, sanctionInfo.nextSanctionLengthHours)}</div>
-                </div>
+                        <Button variant="success" onClick={ event => setSanctionInfo(null) }>{LocalizeText('habbo.way.ok.button')}</Button>
-                <div className="d-grid gap-2 col-8 mx-auto mt-2">
+                    </Column>
-                    <button className="btn btn-success" type="button" onClick={() => setSanctionInfo(null)}>{LocalizeText('habbo.way.ok.button')}</button>
+                </Grid>
-                </div>
             </NitroCardContentView>
         </NitroCardView>
     )

src/components/help/views/SelectReportedChatsView.tsx

@@ -1,88 +1,84 @@
 import { RoomObjectType } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useMemo, useState } from 'react';
+import { FC, useMemo, useState } from 'react';
 import { LocalizeText } from '../../../api';
-import { NitroCardGridItemView, NitroCardGridView } from '../../../layout';
+import { Button, Column, Flex, Grid, LayoutGridItem, Text } from '../../../common';
 import { GetChatHistory } from '../../../views/chat-history/common/GetChatHistory';
 import { ChatEntryType, IChatEntry } from '../../../views/chat-history/context/ChatHistoryContext.types';
 import { useHelpContext } from '../HelpContext';
 
 export const SelectReportedChatsView: FC<{}> = props =>
 {
-    const { helpReportState = null, setHelpReportState = null } = useHelpContext();
     const [ selectedChats, setSelectedChats ] = useState<Map<number, IChatEntry>>(new Map());
+    const { helpReportState = null, setHelpReportState = null } = useHelpContext();
+    const { reportedUserId = -1 } = helpReportState;
 
     const userChats = useMemo(() =>
     {
-        return GetChatHistory().chats.filter(chat => (chat.type === ChatEntryType.TYPE_CHAT) && (chat.entityId === helpReportState.reportedUserId) && (chat.entityType === RoomObjectType.USER))
+        return GetChatHistory().chats.filter(chat => (chat.type === ChatEntryType.TYPE_CHAT) && (chat.entityId === reportedUserId) && (chat.entityType === RoomObjectType.USER));
-    }, [helpReportState.reportedUserId]);
+    }, [ reportedUserId ]);
 
-    const selectChat = useCallback((chatEntry: IChatEntry) =>
+    const selectChat = (chatEntry: IChatEntry) =>
     {
         const chats = new Map(selectedChats);
 
-        if(chats.has(chatEntry.id))
+        if(chats.has(chatEntry.id)) chats.delete(chatEntry.id);
-        {
+        else chats.set(chatEntry.id, chatEntry);
-            chats.delete(chatEntry.id);
-        }
-
-        else
-        {
-            chats.set(chatEntry.id, chatEntry);
-        }
 
         setSelectedChats(chats);
+    }
 
-    }, [selectedChats]);
+    const submitChats = () =>
-
-    const submitChats = useCallback(() =>
     {
-        if(!selectedChats || selectedChats.size <= 0) return;
+        if(!selectedChats || (selectedChats.size <= 0)) return;
 
-        const reportState = Object.assign({}, helpReportState);
+        setHelpReportState(prevValue =>
+            {
+                const reportedChats = Array.from(selectedChats.values());
+                const currentStep = 3;
 
-        reportState.reportedChats = Array.from(selectedChats.values());
+                return { ...prevValue, reportedChats, currentStep };
-        reportState.currentStep = 3;
+            });
-        setHelpReportState(reportState);
+    }
 
-    }, [helpReportState, selectedChats, setHelpReportState]);
+    const back = () =>
-
-    const back = useCallback(() =>
     {
-        const reportState = Object.assign({}, helpReportState);
+        setHelpReportState(prevValue =>
-        reportState.currentStep = --reportState.currentStep;
+            {
-        setHelpReportState(reportState);
+                const currentStep = (prevValue.currentStep - 1);
-    }, [helpReportState, setHelpReportState]);
+
+                return { ...prevValue, currentStep };
+            });
+    }
 
     return (
         <>
-            <div className="d-grid col-12 mx-auto justify-content-center">
+            <Column gap={ 1 }>
-                <div className="col-12"><h3 className="fw-bold">{LocalizeText('help.emergency.chat_report.subtitle')}</h3></div>
+                <Text fontSize={ 3 }>{ LocalizeText('help.emergency.chat_report.subtitle') }</Text>
-                { userChats.length > 0 &&
+                <Text>{ LocalizeText('help.emergency.chat_report.description') }</Text>
-                    <div className="text-wrap">{LocalizeText('help.emergency.chat_report.description')}</div>
+            </Column>
-                }
+            <Column gap={ 1 }>
-            </div>
+                { !!!userChats.length &&
-            {
+                    <Text>{ LocalizeText('help.cfh.error.no_user_data') }</Text> }
-                (userChats.length === 0) && <div>{LocalizeText('help.cfh.error.no_user_data')}</div>
+                { (userChats.length > 0) &&
-            }
+                    <Grid gap={ 1 } columnCount={ 1 } overflow="auto">
-            { userChats.length > 0 &&
+                        { userChats.map((chat, index) =>
-                <>
+                            {
-                    <NitroCardGridView columns={1}>
+                                return (
-                        {userChats.map((chat, index) =>
+                                    <LayoutGridItem key={ chat.id } onClick={ event => selectChat(chat) } itemActive={ selectedChats.has(chat.id) }>
-                        {
+                                        <Text>{ chat.message }</Text>
-                            return (
+                                    </LayoutGridItem>
-                                <NitroCardGridItemView key={chat.id} onClick={() => selectChat(chat)} itemActive={selectedChats.has(chat.id)}>
+                                );
-                                    <span>{chat.message}</span>
+                            }) }
-                                </NitroCardGridItemView>
+                    </Grid> }
-                            )
+            </Column>
-                        })}
+            <Flex gap={ 2 } justifyContent="between">
-                    </NitroCardGridView>
+                <Button variant="secondary" onClick={ back }>
-
+                    { LocalizeText('generic.back') }
-                    <div className="d-flex gap-2 justify-content-between mt-auto">
+                </Button>
-                        <button className="btn btn-secondary mt-2" type="button" onClick={back}>{LocalizeText('generic.back')}</button>
+                <Button disabled={ (selectedChats.size <= 0) } onClick={ submitChats }>
-                        <button className="btn btn-primary mt-2" type="button" disabled={selectedChats.size <= 0} onClick={submitChats}>{LocalizeText('help.emergency.main.submit.button')}</button>
+                    { LocalizeText('help.emergency.main.submit.button') }
-                    </div>
+                </Button>
-                </>
+            </Flex>
-            }
         </>
     );
 }

src/components/help/views/SelectReportedUserView.tsx

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

src/components/help/views/SelectTopicView.tsx

@@ -1,64 +1,61 @@
-import { FC, useCallback, useMemo, useState } from 'react';
+import { FC, useMemo, useState } from 'react';
 import { LocalizeText } from '../../../api';
+import { Button, Column, Flex, Text } from '../../../common';
 import { GetCfhCategories } from '../../../views/mod-tools/common/GetCFHCategories';
 import { useHelpContext } from '../HelpContext';
 
 export const SelectTopicView: FC<{}> = props =>
 {
-    const { helpReportState = null, setHelpReportState = null } = useHelpContext();
+    const { setHelpReportState = null } = useHelpContext();
-    const [selectedCategory, setSelectedCategory] = useState(-1);
+    const [ selectedCategory, setSelectedCategory ] = useState(-1);
-    const [selectedTopic, setSelectedTopic] = useState(-1);
+    const [ selectedTopic, setSelectedTopic ] = useState(-1);
 
-    const cfhCategories = useMemo(() =>
+    const cfhCategories = useMemo(() => GetCfhCategories(), []);
+
+    const submitTopic = () =>
     {
-        return GetCfhCategories();
+        if((selectedCategory < 0) || (selectedTopic < 0)) return;
-    }, []);
 
-    const submitTopic = useCallback(() =>
+        setHelpReportState(prevValue =>
+            {
+                const cfhCategory = selectedCategory;
+                const cfhTopic = cfhCategories[selectedCategory].topics[selectedTopic].id;
+                const currentStep = 4;
+
+                return { ...prevValue, cfhCategory, cfhTopic, currentStep };
+            });
+    }
+
+    const back = () =>
     {
-        if(selectedCategory < 0) return;
+        setHelpReportState(prevValue =>
-        if(selectedTopic < 0) return;
+            {
+                const currentStep = (prevValue.currentStep - 1);
 
-        const reportState = Object.assign({}, helpReportState);
+                return { ...prevValue, currentStep };
-        reportState.cfhCategory = selectedCategory;
+            });
-        reportState.cfhTopic = cfhCategories[selectedCategory].topics[selectedTopic].id;
+    }
-        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">
+            <Column gap={ 1 }>
-                <div className="col-12"><h3 className="fw-bold">{LocalizeText('help.emergency.chat_report.subtitle')}</h3></div>
+                <Text fontSize={ 3 }>{ LocalizeText('help.emergency.chat_report.subtitle') }</Text>
-                <div className="text-wrap">{LocalizeText('help.cfh.pick.topic')}</div>
+                <Text>{ LocalizeText('help.cfh.pick.topic') }</Text>
-            </div>
+            </Column>
-            <div className="d-grid gap-2 col-8 mx-auto">
+            <Column gap={ 1 } overflow="auto">
-                {(selectedCategory < 0) &&
+                { (selectedCategory < 0) &&
-                    cfhCategories.map((category, index) => 
+                    cfhCategories.map((category, index) => <Button key={ index } variant="danger" onClick={ event => setSelectedCategory(index) }>{ LocalizeText(`help.cfh.reason.${ category.name }`) }</Button>) }
-                    {
+                { (selectedCategory >= 0) &&
-                        return <button key={index} className="btn btn-danger" type="button" onClick={() => setSelectedCategory(index)}>{LocalizeText(`help.cfh.reason.${category.name}`)}</button>
+                    cfhCategories[selectedCategory].topics.map((topic, index) => <Button key={ index } variant="danger" onClick={ event => setSelectedTopic(index) } active={ (selectedTopic === index) }>{ LocalizeText(`help.cfh.topic.${ topic.id }`) }</Button>) }
-                    })
+            </Column>
-                }
+            <Flex gap={ 2 } justifyContent="between">
-                {(selectedCategory >= 0) &&
+                <Button variant="secondary" onClick={ back }>
-                    cfhCategories[selectedCategory].topics.map((topic, index) =>
+                    { LocalizeText('generic.back') }
-                    {
+                </Button>
-                        return <button key={index} className="btn btn-danger" type="button" onClick={() => setSelectedTopic(index)}>{LocalizeText('help.cfh.topic.' + topic.id)}</button>
+                <Button disabled={ (selectedTopic < 0) } onClick={ submitTopic }>
-                    })
+                    { LocalizeText('help.emergency.main.submit.button') }
-                }
+                </Button>
-            </div>
+            </Flex>
-
-            <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>
-            
         </>
     );
 }