nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-27 08:00:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update help component

Browse Source
This commit is contained in:
Bill 2022-02-16 04:06:50 -05:00
parent 88853ada48
commit 2d5afea712
7 changed files with 217 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/help/HelpView.tsx
View File

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

39
src/components/help/views/DescribeReportView.tsx
View File

@ -1,49 +1,44 @@
import { CallForHelpMessageComposer } from '@nitrots/nitro-renderer'; import { CallForHelpMessageComposer } from '@nitrots/nitro-renderer';
import { FC, useCallback, useState } from 'react'; import { FC, useState } from 'react';
import { CreateLinkEvent, LocalizeText } from '../../../api'; import { CreateLinkEvent, LocalizeText } from '../../../api';
import { Button, Column, Text } from '../../../common';
import { SendMessageHook } from '../../../hooks'; import { SendMessageHook } from '../../../hooks';
import { useHelpContext } from '../HelpContext'; import { useHelpContext } from '../HelpContext';
export const DescribeReportView: FC<{}> = props => export const DescribeReportView: FC<{}> = props =>
{ {
const { helpReportState = null, setHelpReportState = null } = useHelpContext();
const [ message, setMessage ] = useState(''); const [ message, setMessage ] = useState('');
const { helpReportState = null, setHelpReportState = null } = useHelpContext();
const { reportedChats, cfhTopic, reportedUserId } = helpReportState;
const submitReport = useCallback(() => const submitReport = () =>
{ {
if(message.length < 15) return; 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 )[] = []; const chats: (string | number )[] = [];
reportState.reportedChats.forEach(entry =>
reportedChats.forEach(entry =>
{ {
chats.push(entry.entityId); chats.push(entry.entityId);
chats.push(entry.message); 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'); CreateLinkEvent('help/hide');
}, [helpReportState, message, setHelpReportState]); }
return ( 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>
<div className="form-group mb-2">
<textarea className="form-control" value={ message } onChange={ event => setMessage(event.target.value) } /> <textarea className="form-control" value={ message } onChange={ event => setMessage(event.target.value) } />
</div> <Button variant="success" disabled={ (message.length < 15) } onClick={ submitReport }>
{ LocalizeText('help.bully.submit') }
<button className="btn btn-danger mt-2" type="button" disabled={message.length < 15} onClick={submitReport}>{LocalizeText('help.bully.submit')}</button> </Button>
</> </>
); );
} }

10
src/components/help/views/HelpIndexView.tsx
View File

@ -3,7 +3,6 @@ import { FC, useCallback } from 'react';
import { LocalizeText } from '../../../api'; import { LocalizeText } from '../../../api';
import { Button } from '../../../common/Button'; import { Button } from '../../../common/Button';
import { Column } from '../../../common/Column'; import { Column } from '../../../common/Column';
import { Grid } from '../../../common/Grid';
import { Text } from '../../../common/Text'; import { Text } from '../../../common/Text';
import { SendMessageHook } from '../../../hooks'; import { SendMessageHook } from '../../../hooks';
import { useHelpContext } from '../HelpContext'; import { useHelpContext } from '../HelpContext';
@ -25,11 +24,7 @@ export const HelpIndexView: FC<{}> = props =>
}, []); }, []);
return ( return (
<Grid> <>
<Column center size={ 5 } overflow="hidden">
<div className="index-image" />
</Column>
<Column justifyContent="center" size={ 7 } overflow="hidden">
<Column gap={ 1 }> <Column gap={ 1 }>
<Text fontSize={ 3 }>{ LocalizeText('help.main.frame.title') }</Text> <Text fontSize={ 3 }>{ LocalizeText('help.main.frame.title') }</Text>
<Text>{ LocalizeText('help.main.self.description') }</Text> <Text>{ LocalizeText('help.main.self.description') }</Text>
@ -40,7 +35,6 @@ export const HelpIndexView: FC<{}> = props =>
<Button disabled={ true }>{ LocalizeText('help.main.self.tips.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> <Button variant="link" className="text-black" onClick={ onRequestMySanctionStatusClick }>{ LocalizeText('help.main.my.sanction.status') }</Button>
</Column> </Column>
</Column> </>
</Grid>
) )
} }

16
src/components/help/views/SanctionStatusView.tsx
View File

@ -1,6 +1,7 @@
import { SanctionStatusEvent, SanctionStatusMessageParser } from '@nitrots/nitro-renderer'; import { SanctionStatusEvent, SanctionStatusMessageParser } from '@nitrots/nitro-renderer';
import { FC, useCallback, useState } from 'react'; import { FC, useCallback, useState } from 'react';
import { LocalizeText } from '../../../api'; import { LocalizeText } from '../../../api';
import { Base, Button, Column, Grid } from '../../../common';
import { CreateMessageHook } from '../../../hooks'; import { CreateMessageHook } from '../../../hooks';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../layout'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../layout';
@ -49,10 +50,14 @@ export const SanctionSatusView:FC<{}> = props =>
if(!sanctionInfo) return null; if(!sanctionInfo) return null;
return ( return (
<NitroCardView className="nitro-cfh-sanction-status"> <NitroCardView className="nitro-help">
<NitroCardHeaderView headerText={LocalizeText('help.sanction.info.title')} onCloseClick={() => setSanctionInfo(null)} /> <NitroCardHeaderView headerText={LocalizeText('help.sanction.info.title')} onCloseClick={() => setSanctionInfo(null)} />
<NitroCardContentView className="text-black"> <NitroCardContentView className="text-black">
<div className="d-grid gap-2 col-12 mx-auto justify-content-start"> <Grid>
<Column center size={ 5 } overflow="hidden">
<Base className="index-image" />
</Column>
<Column justifyContent="between" size={ 7 } overflow="hidden">
{ (sanctionInfo.sanctionReason === 'cfh.reason.EMPTY') { (sanctionInfo.sanctionReason === 'cfh.reason.EMPTY')
? <div className="col-12 fw-bold">{LocalizeText('help.sanction.current.none')}</div> ? <div className="col-12 fw-bold">{LocalizeText('help.sanction.current.none')}</div>
: <> : <>
@ -75,10 +80,9 @@ export const SanctionSatusView:FC<{}> = props =>
} }
<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> </NitroCardContentView>
</NitroCardView> </NitroCardView>
) )

108
src/components/help/views/SelectReportedChatsView.tsx
View File

@ -1,88 +1,84 @@
import { RoomObjectType } from '@nitrots/nitro-renderer'; import { RoomObjectType } from '@nitrots/nitro-renderer';
import { FC, useCallback, useMemo, useState } from 'react'; import { FC, useMemo, useState } from 'react';
import { LocalizeText } from '../../../api'; 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 { GetChatHistory } from '../../../views/chat-history/common/GetChatHistory';
import { ChatEntryType, IChatEntry } from '../../../views/chat-history/context/ChatHistoryContext.types'; import { ChatEntryType, IChatEntry } from '../../../views/chat-history/context/ChatHistoryContext.types';
import { useHelpContext } from '../HelpContext'; import { useHelpContext } from '../HelpContext';
export const SelectReportedChatsView: FC<{}> = props => export const SelectReportedChatsView: FC<{}> = props =>
{ {
const { helpReportState = null, setHelpReportState = null } = useHelpContext();
const [ selectedChats, setSelectedChats ] = useState<Map<number, IChatEntry>>(new Map()); const [ selectedChats, setSelectedChats ] = useState<Map<number, IChatEntry>>(new Map());
const { helpReportState = null, setHelpReportState = null } = useHelpContext();
const { reportedUserId = -1 } = helpReportState;
const userChats = useMemo(() => 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); 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); 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 =>
reportState.reportedChats = Array.from(selectedChats.values());
reportState.currentStep = 3;
setHelpReportState(reportState);
}, [helpReportState, selectedChats, setHelpReportState]);
const back = useCallback(() =>
{ {
const reportState = Object.assign({}, helpReportState); const reportedChats = Array.from(selectedChats.values());
reportState.currentStep = --reportState.currentStep; const currentStep = 3;
setHelpReportState(reportState);
}, [helpReportState, setHelpReportState]); return { ...prevValue, reportedChats, currentStep };
});
}
const back = () =>
{
setHelpReportState(prevValue =>
{
const currentStep = (prevValue.currentStep - 1);
return { ...prevValue, currentStep };
});
}
return ( 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 &&
<>
<NitroCardGridView columns={1}>
{ userChats.map((chat, index) => { userChats.map((chat, index) =>
{ {
return ( return (
<NitroCardGridItemView key={chat.id} onClick={() => selectChat(chat)} itemActive={selectedChats.has(chat.id)}> <LayoutGridItem key={ chat.id } onClick={ event => selectChat(chat) } itemActive={ selectedChats.has(chat.id) }>
<span>{chat.message}</span> <Text>{ chat.message }</Text>
</NitroCardGridItemView> </LayoutGridItem>
) );
}) } }) }
</NitroCardGridView> </Grid> }
</Column>
<div className="d-flex gap-2 justify-content-between mt-auto"> <Flex gap={ 2 } justifyContent="between">
<button className="btn btn-secondary mt-2" type="button" onClick={back}>{LocalizeText('generic.back')}</button> <Button variant="secondary" onClick={ back }>
<button className="btn btn-primary mt-2" type="button" disabled={selectedChats.size <= 0} onClick={submitChats}>{LocalizeText('help.emergency.main.submit.button')}</button> { LocalizeText('generic.back') }
</div> </Button>
</> <Button disabled={ (selectedChats.size <= 0) } onClick={ submitChats }>
} { LocalizeText('help.emergency.main.submit.button') }
</Button>
</Flex>
</> </>
); );
} }

58
src/components/help/views/SelectReportedUserView.tsx
View File

@ -1,13 +1,7 @@
import { RoomObjectType } from '@nitrots/nitro-renderer'; 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 { 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 { GetChatHistory } from '../../../views/chat-history/common/GetChatHistory';
import { ChatEntryType } from '../../../views/chat-history/context/ChatHistoryContext.types'; import { ChatEntryType } from '../../../views/chat-history/context/ChatHistoryContext.types';
import { IReportedUser } from '../common/IReportedUser'; import { IReportedUser } from '../common/IReportedUser';
@ -22,8 +16,7 @@ export const SelectReportedUserView: FC<{}> = props =>
{ {
const users: Map<number, IReportedUser> = new Map(); 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)) if((chat.type === ChatEntryType.TYPE_CHAT) && (chat.entityType === RoomObjectType.USER) && (chat.entityId !== GetSessionDataManager().userId))
{ {
@ -37,35 +30,37 @@ export const SelectReportedUserView: FC<{}> = props =>
return Array.from(users.values()); return Array.from(users.values());
}, []); }, []);
const submitUser = useCallback(() => const submitUser = () =>
{ {
if(selectedUserId <= 0) return; 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); if(selectedUserId === userId) setSelectedUserId(-1);
else setSelectedUserId(userId); 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 ( return (
<Grid> <>
<Column center size={ 5 } overflow="hidden">
<Base className="index-image" />
</Column>
<Column justifyContent="center" size={ 7 } overflow="hidden">
<Column gap={ 1 }> <Column gap={ 1 }>
<Text fontSize={ 3 }>{ LocalizeText('help.emergency.main.step.two.title') }</Text> <Text fontSize={ 3 }>{ LocalizeText('help.emergency.main.step.two.title') }</Text>
{ (availableUsers.length > 0) && { (availableUsers.length > 0) &&
@ -75,7 +70,7 @@ export const SelectReportedUserView: FC<{}> = props =>
{ !!!availableUsers.length && { !!!availableUsers.length &&
<Text>{ LocalizeText('report.user.error.nolist') }</Text> } <Text>{ LocalizeText('report.user.error.nolist') }</Text> }
{ (availableUsers.length > 0) && { (availableUsers.length > 0) &&
<Grid grow columnCount={ 1 } gap={ 1 } overflow="auto"> <Grid gap={ 1 } columnCount={ 1 } overflow="auto">
{ availableUsers.map((user, index) => { availableUsers.map((user, index) =>
{ {
return ( return (
@ -94,7 +89,6 @@ export const SelectReportedUserView: FC<{}> = props =>
{ LocalizeText('help.emergency.main.submit.button') } { LocalizeText('help.emergency.main.submit.button') }
</Button> </Button>
</Flex> </Flex>
</Column> </>
</Grid> );
)
} }

83
src/components/help/views/SelectTopicView.tsx
View File

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