mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-10-23 19:33:04 +02:00
118 lines
4.1 KiB
TypeScript
118 lines
4.1 KiB
TypeScript
import { ILinkEventTracker } from '@nitrots/nitro-renderer';
|
|
import { FC, useEffect, useState } from 'react';
|
|
import { AddEventLinkTracker, LocalizeText, RemoveLinkEventTracker, ReportState } from '../../api';
|
|
import { Base, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
|
|
import { useHelp } from '../../hooks';
|
|
import { DescribeReportView } from './views/DescribeReportView';
|
|
import { HelpIndexView } from './views/HelpIndexView';
|
|
import { NameChangeView } from './views/name-change/NameChangeView';
|
|
import { ReportSummaryView } from './views/ReportSummaryView';
|
|
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 { activeReport = null, setActiveReport = null, report = null } = useHelp();
|
|
|
|
const onClose = () =>
|
|
{
|
|
setActiveReport(null);
|
|
setIsVisible(false);
|
|
}
|
|
|
|
useEffect(() =>
|
|
{
|
|
const linkTracker: ILinkEventTracker = {
|
|
linkReceived: (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;
|
|
case 'tour':
|
|
// todo: launch tour
|
|
return;
|
|
case 'report':
|
|
if((parts.length >= 5) && (parts[2] === 'room'))
|
|
{
|
|
const roomId = parseInt(parts[3]);
|
|
const unknown = unescape(parts.splice(4).join('/'));
|
|
//this.reportRoom(roomId, unknown, "");
|
|
}
|
|
return;
|
|
}
|
|
},
|
|
eventUrlPrefix: 'help/'
|
|
};
|
|
|
|
AddEventLinkTracker(linkTracker);
|
|
|
|
return () => RemoveLinkEventTracker(linkTracker);
|
|
}, []);
|
|
|
|
useEffect(() =>
|
|
{
|
|
if(!activeReport) return;
|
|
|
|
setIsVisible(true);
|
|
}, [ activeReport ]);
|
|
|
|
if(!isVisible && !activeReport) return null;
|
|
|
|
const CurrentStepView = () =>
|
|
{
|
|
if(activeReport)
|
|
{
|
|
switch(activeReport.currentStep)
|
|
{
|
|
case ReportState.SELECT_USER:
|
|
return <SelectReportedUserView />;
|
|
case ReportState.SELECT_CHATS:
|
|
return <SelectReportedChatsView />;
|
|
case ReportState.SELECT_TOPICS:
|
|
return <SelectTopicView />;
|
|
case ReportState.INPUT_REPORT_MESSAGE:
|
|
return <DescribeReportView />;
|
|
case ReportState.REPORT_SUMMARY:
|
|
return <ReportSummaryView />;
|
|
}
|
|
}
|
|
|
|
return <HelpIndexView />;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<NitroCardView className="nitro-help" theme="primary-slim">
|
|
<NitroCardHeaderView headerText={ LocalizeText('help.button.cfh') } onCloseClick={ onClose } />
|
|
<NitroCardContentView className="text-black">
|
|
<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 />
|
|
<NameChangeView />
|
|
</>
|
|
);
|
|
}
|