mirror of
https://git.sr.ht/~ashkeel/strimertul
synced 2024-09-20 02:00:49 +00:00
Missed some i18n stuff
This commit is contained in:
parent
3cf570542b
commit
ac7808757d
4 changed files with 150 additions and 70 deletions
|
@ -139,5 +139,48 @@
|
||||||
"minutes": "minutes",
|
"minutes": "minutes",
|
||||||
"hours": "hours"
|
"hours": "hours"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"twitch": {
|
||||||
|
"config": {
|
||||||
|
"header": "Twitch module configuration",
|
||||||
|
"enable": "Enable twitch integration",
|
||||||
|
"apiguide-1": "You will need to create an application, here's how:",
|
||||||
|
"apiguide-2": "Go to <1>https://dev.twitch.tv/console/apps/create</1>",
|
||||||
|
"apiguide-3": "Use the following data for the required fields:",
|
||||||
|
"oauth-redir-uri": "OAuth Redirect URLs",
|
||||||
|
"apiguide-4": "Once created, create a <1>New Secret</1>, then copy both fields below!",
|
||||||
|
"app-client-id": "App Client ID",
|
||||||
|
"app-client-secret": "App Client Secret"
|
||||||
|
},
|
||||||
|
"bot": {
|
||||||
|
"header": "Twitch bot configuration",
|
||||||
|
"enable": "Enable twitch bot",
|
||||||
|
"err-module-disabled": "(Twitch integration must be enabled for this!)",
|
||||||
|
"channel-name": "Twitch channel name",
|
||||||
|
"username": "Bot username",
|
||||||
|
"username-expl": "must be a valid Twitch account",
|
||||||
|
"oauth-token": "Bot OAuth token",
|
||||||
|
"oauth-help": "You can get this by logging in with the bot account and going here: <1>https://twitchapps.com/tmi/</1>",
|
||||||
|
"chat-keys": "Enable chat keys (for 3rd party chat integration)",
|
||||||
|
"chat-history": "Chat history",
|
||||||
|
"suf-messages": "messages"
|
||||||
|
},
|
||||||
|
"commands": {
|
||||||
|
"command": "Command",
|
||||||
|
"response": "Response",
|
||||||
|
"response-help": "What does the bot reply to this command?",
|
||||||
|
"description": "Description",
|
||||||
|
"description-help": "What does this command do?",
|
||||||
|
"access-level": "Access level",
|
||||||
|
"access-everyone": "Everyone",
|
||||||
|
"access-vips": "VIPs",
|
||||||
|
"access-moderators": "Moderators",
|
||||||
|
"access-streamer": "Streamer only",
|
||||||
|
"access-level-help": "This specifies the minimum level, eg. if you choose VIPs, moderators and streamer can still use the command",
|
||||||
|
"header": "Bot commands",
|
||||||
|
"new-command": "New command",
|
||||||
|
"search": "Search by name",
|
||||||
|
"modify-command": "Modify command"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import { RouteComponentProps } from '@reach/router';
|
import { RouteComponentProps } from '@reach/router';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { Trans, useTranslation } from 'react-i18next';
|
||||||
import { useDispatch } from 'react-redux';
|
import { useDispatch } from 'react-redux';
|
||||||
import { useModule } from '../../../lib/react-utils';
|
import { useModule } from '../../../lib/react-utils';
|
||||||
import apiReducer, { modules } from '../../../store/api/reducer';
|
import apiReducer, { modules } from '../../../store/api/reducer';
|
||||||
|
@ -9,6 +10,7 @@ export default function TwitchBotSettingsPage(
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
params: RouteComponentProps<unknown>,
|
params: RouteComponentProps<unknown>,
|
||||||
): React.ReactElement {
|
): React.ReactElement {
|
||||||
|
const { t } = useTranslation();
|
||||||
const [moduleConfig, setModuleConfig] = useModule(modules.moduleConfig);
|
const [moduleConfig, setModuleConfig] = useModule(modules.moduleConfig);
|
||||||
const [twitchConfig, setTwitchConfig] = useModule(modules.twitchConfig);
|
const [twitchConfig, setTwitchConfig] = useModule(modules.twitchConfig);
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
@ -18,7 +20,7 @@ export default function TwitchBotSettingsPage(
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h1 className="title is-4">Twitch module configuration</h1>
|
<h1 className="title is-4">{t('twitch.config.header')}</h1>
|
||||||
<Field>
|
<Field>
|
||||||
<label className="checkbox">
|
<label className="checkbox">
|
||||||
<input
|
<input
|
||||||
|
@ -34,34 +36,42 @@ export default function TwitchBotSettingsPage(
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
/>{' '}
|
/>{' '}
|
||||||
Enable twitch integration
|
{t('twitch.config.enable')}
|
||||||
</label>
|
</label>
|
||||||
</Field>
|
</Field>
|
||||||
<div className="copyblock">
|
<div className="copyblock">
|
||||||
<p>You will need to create an application, here's how:</p>
|
<p>{t('twitch.config.apiguide-1')}</p>
|
||||||
<p>
|
<p>
|
||||||
- Go to{' '}
|
{'- '}
|
||||||
|
<Trans i18nKey="twitch.config.apiguide-2">
|
||||||
|
{'Go to '}
|
||||||
<a href="https://dev.twitch.tv/console/apps/create">
|
<a href="https://dev.twitch.tv/console/apps/create">
|
||||||
https://dev.twitch.tv/console/apps/create
|
https://dev.twitch.tv/console/apps/create
|
||||||
</a>
|
</a>
|
||||||
.
|
</Trans>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
{'- '}
|
||||||
|
{t('twitch.config.apiguide-3')}
|
||||||
</p>
|
</p>
|
||||||
<p>- Use the following data for the required fields:</p>
|
|
||||||
<dl className="inline-dl">
|
<dl className="inline-dl">
|
||||||
<dt>OAuth Redirect URLs</dt>
|
<dt>OAuth Redirect URLs</dt>
|
||||||
<dd>http://localhost:4337/oauth</dd>
|
<dd>http://localhost:4337/oauth</dd>
|
||||||
<dt>Category</dt>
|
<dt>Category</dt>
|
||||||
<dd>Broadcasting Suite</dd>
|
<dd>Broadcasting Suite</dd>
|
||||||
</dl>
|
</dl>
|
||||||
- Once created, create a <b>New Secret</b>, then copy both fields below!
|
{'- '}
|
||||||
|
<Trans i18nKey="twitch.config.apiguide-4">
|
||||||
|
Once created, create a <b>New Secret</b>, then copy both fields below!
|
||||||
|
</Trans>
|
||||||
</div>
|
</div>
|
||||||
<Field name="App Client ID">
|
<Field name={t('twitch.config.app-client-id')}>
|
||||||
<p className="control">
|
<p className="control">
|
||||||
<input
|
<input
|
||||||
disabled={!active}
|
disabled={!active}
|
||||||
className="input"
|
className="input"
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="App Client ID"
|
placeholder={t('twitch.config.app-client-id')}
|
||||||
value={twitchConfig?.api_client_id ?? ''}
|
value={twitchConfig?.api_client_id ?? ''}
|
||||||
onChange={(ev) =>
|
onChange={(ev) =>
|
||||||
dispatch(
|
dispatch(
|
||||||
|
@ -74,13 +84,13 @@ export default function TwitchBotSettingsPage(
|
||||||
/>
|
/>
|
||||||
</p>
|
</p>
|
||||||
</Field>
|
</Field>
|
||||||
<Field name="App Client Secret">
|
<Field name={t('twitch.config.app-client-secret')}>
|
||||||
<p className="control">
|
<p className="control">
|
||||||
<input
|
<input
|
||||||
disabled={!active}
|
disabled={!active}
|
||||||
className="input"
|
className="input"
|
||||||
type="password"
|
type="password"
|
||||||
placeholder="App Client Secret"
|
placeholder={t('twitch.config.app-client-secret')}
|
||||||
value={twitchConfig?.api_client_secret ?? ''}
|
value={twitchConfig?.api_client_secret ?? ''}
|
||||||
onChange={(ev) =>
|
onChange={(ev) =>
|
||||||
dispatch(
|
dispatch(
|
||||||
|
@ -100,7 +110,7 @@ export default function TwitchBotSettingsPage(
|
||||||
dispatch(setTwitchConfig(twitchConfig));
|
dispatch(setTwitchConfig(twitchConfig));
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Save
|
{t('actions.save')}
|
||||||
</button>
|
</button>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import { RouteComponentProps } from '@reach/router';
|
import { RouteComponentProps } from '@reach/router';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { Trans, useTranslation } from 'react-i18next';
|
||||||
import { useDispatch } from 'react-redux';
|
import { useDispatch } from 'react-redux';
|
||||||
import { useModule } from '../../../lib/react-utils';
|
import { useModule } from '../../../lib/react-utils';
|
||||||
import apiReducer, { modules } from '../../../store/api/reducer';
|
import apiReducer, { modules } from '../../../store/api/reducer';
|
||||||
|
@ -14,6 +15,7 @@ export default function TwitchBotSettingsPage(
|
||||||
const [twitchBotConfig, setTwitchBotConfig] = useModule(
|
const [twitchBotConfig, setTwitchBotConfig] = useModule(
|
||||||
modules.twitchBotConfig,
|
modules.twitchBotConfig,
|
||||||
);
|
);
|
||||||
|
const { t } = useTranslation();
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
const busy = moduleConfig === null;
|
const busy = moduleConfig === null;
|
||||||
|
@ -23,7 +25,7 @@ export default function TwitchBotSettingsPage(
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h1 className="title is-4">Twitch module configuration</h1>
|
<h1 className="title is-4">{t('twitch.bot.header')}</h1>
|
||||||
<Field>
|
<Field>
|
||||||
<label className="checkbox">
|
<label className="checkbox">
|
||||||
<input
|
<input
|
||||||
|
@ -39,17 +41,17 @@ export default function TwitchBotSettingsPage(
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
/>{' '}
|
/>{' '}
|
||||||
Enable twitch bot
|
{t('twitch.bot.enable')}
|
||||||
{twitchActive ? '' : '(Twitch integration must be enabled for this!)'}
|
{twitchActive ? '' : t('twitch.bot.err-module-disabled')}
|
||||||
</label>
|
</label>
|
||||||
</Field>
|
</Field>
|
||||||
<Field name="Twitch channel">
|
<Field name={t('twitch.bot.channel-name')}>
|
||||||
<p className="control">
|
<p className="control">
|
||||||
<input
|
<input
|
||||||
disabled={!active}
|
disabled={!active}
|
||||||
className="input"
|
className="input"
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Twitch channel name"
|
placeholder={t('twitch.bot.channel-name')}
|
||||||
value={twitchBotConfig?.channel ?? ''}
|
value={twitchBotConfig?.channel ?? ''}
|
||||||
onChange={(ev) =>
|
onChange={(ev) =>
|
||||||
dispatch(
|
dispatch(
|
||||||
|
@ -62,13 +64,15 @@ export default function TwitchBotSettingsPage(
|
||||||
/>
|
/>
|
||||||
</p>
|
</p>
|
||||||
</Field>
|
</Field>
|
||||||
<Field name="Bot username (must be a valid Twitch account)">
|
<Field
|
||||||
|
name={`${t('twitch.bot.username')} (${t('twitch.bot.username-expl')})`}
|
||||||
|
>
|
||||||
<p className="control">
|
<p className="control">
|
||||||
<input
|
<input
|
||||||
disabled={!active}
|
disabled={!active}
|
||||||
className="input"
|
className="input"
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Bot username"
|
placeholder={t('twitch.bot.username')}
|
||||||
value={twitchBotConfig?.username ?? ''}
|
value={twitchBotConfig?.username ?? ''}
|
||||||
onChange={(ev) =>
|
onChange={(ev) =>
|
||||||
dispatch(
|
dispatch(
|
||||||
|
@ -81,13 +85,13 @@ export default function TwitchBotSettingsPage(
|
||||||
/>
|
/>
|
||||||
</p>
|
</p>
|
||||||
</Field>
|
</Field>
|
||||||
<Field name="Bot OAuth token">
|
<Field name={t('twitch.bot.oauth-token')}>
|
||||||
<p className="control">
|
<p className="control">
|
||||||
<input
|
<input
|
||||||
disabled={!active}
|
disabled={!active}
|
||||||
className="input"
|
className="input"
|
||||||
type="password"
|
type="password"
|
||||||
placeholder="Bot OAuth token"
|
placeholder={t('twitch.bot.oauth-token')}
|
||||||
value={twitchBotConfig?.oauth ?? ''}
|
value={twitchBotConfig?.oauth ?? ''}
|
||||||
onChange={(ev) =>
|
onChange={(ev) =>
|
||||||
dispatch(
|
dispatch(
|
||||||
|
@ -100,8 +104,14 @@ export default function TwitchBotSettingsPage(
|
||||||
/>
|
/>
|
||||||
</p>
|
</p>
|
||||||
<p className="help">
|
<p className="help">
|
||||||
You can get this by logging in with the bot account and going here:{' '}
|
<Trans i18nKey="twitch.bot.oauth-help">
|
||||||
<a href="https://twitchapps.com/tmi/">https://twitchapps.com/tmi/</a>
|
{
|
||||||
|
'You can get this by logging in with the bot account and going here: '
|
||||||
|
}
|
||||||
|
<a href="https://twitchapps.com/tmi/">
|
||||||
|
https://twitchapps.com/tmi/
|
||||||
|
</a>
|
||||||
|
</Trans>
|
||||||
</p>
|
</p>
|
||||||
</Field>
|
</Field>
|
||||||
<Field>
|
<Field>
|
||||||
|
@ -119,10 +129,12 @@ export default function TwitchBotSettingsPage(
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
/>{' '}
|
/>{' '}
|
||||||
Enable chat keys (for 3rd party chat integration)
|
{t('twitch.bot.chat-keys')}
|
||||||
</label>
|
</label>
|
||||||
</Field>
|
</Field>
|
||||||
<Field name="Chat history">
|
<Field name={t('twitch.bot.chat-history')}>
|
||||||
|
<div className="field-body">
|
||||||
|
<div className="field has-addons">
|
||||||
<p className="control">
|
<p className="control">
|
||||||
<input
|
<input
|
||||||
className="input"
|
className="input"
|
||||||
|
@ -140,6 +152,11 @@ export default function TwitchBotSettingsPage(
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</p>
|
</p>
|
||||||
|
<p className="control">
|
||||||
|
<a className="button is-static">{t('twitch.bot.suf-messages')}</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</Field>
|
</Field>
|
||||||
<button
|
<button
|
||||||
className="button"
|
className="button"
|
||||||
|
@ -149,7 +166,7 @@ export default function TwitchBotSettingsPage(
|
||||||
dispatch(setTwitchBotConfig(twitchBotConfig));
|
dispatch(setTwitchBotConfig(twitchBotConfig));
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Save
|
{t('actions.save')}
|
||||||
</button>
|
</button>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import { RouteComponentProps } from '@reach/router';
|
import { RouteComponentProps } from '@reach/router';
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
import { useDispatch } from 'react-redux';
|
import { useDispatch } from 'react-redux';
|
||||||
import { useModule } from '../../../lib/react-utils';
|
import { useModule } from '../../../lib/react-utils';
|
||||||
import { modules, TwitchBotCustomCommand } from '../../../store/api/reducer';
|
import { modules, TwitchBotCustomCommand } from '../../../store/api/reducer';
|
||||||
|
@ -19,6 +20,7 @@ function CommandItem({
|
||||||
onEdit,
|
onEdit,
|
||||||
onDelete,
|
onDelete,
|
||||||
}: CommandItemProps) {
|
}: CommandItemProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
const [expanded, setExpanded] = useState(false);
|
const [expanded, setExpanded] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -46,16 +48,17 @@ function CommandItem({
|
||||||
</header>
|
</header>
|
||||||
{expanded ? (
|
{expanded ? (
|
||||||
<div className="content">
|
<div className="content">
|
||||||
Response: <blockquote>{item.response}</blockquote>
|
{t('twitch.commands.response')}:{' '}
|
||||||
|
<blockquote>{item.response}</blockquote>
|
||||||
<div style={{ marginTop: '1rem' }}>
|
<div style={{ marginTop: '1rem' }}>
|
||||||
<a className="button is-small" onClick={onToggleState}>
|
<a className="button is-small" onClick={onToggleState}>
|
||||||
{item.enabled ? 'Disable' : 'Enable'}
|
{item.enabled ? 'Disable' : 'Enable'}
|
||||||
</a>{' '}
|
</a>{' '}
|
||||||
<a className="button is-small" onClick={onEdit}>
|
<a className="button is-small" onClick={onEdit}>
|
||||||
Edit
|
{t('actions.edit')}
|
||||||
</a>{' '}
|
</a>{' '}
|
||||||
<a className="button is-small" onClick={onDelete}>
|
<a className="button is-small" onClick={onDelete}>
|
||||||
Delete
|
{t('actions.delete')}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -89,6 +92,7 @@ function CommandModal({
|
||||||
);
|
);
|
||||||
const [response, setResponse] = useState(initialData?.response ?? '');
|
const [response, setResponse] = useState(initialData?.response ?? '');
|
||||||
|
|
||||||
|
const { t } = useTranslation();
|
||||||
const slugify = (str: string) =>
|
const slugify = (str: string) =>
|
||||||
str.toLowerCase().replace(/[^a-zA-Z0-9!.-_@:;'"<>]/gi, '-');
|
str.toLowerCase().replace(/[^a-zA-Z0-9!.-_@:;'"<>]/gi, '-');
|
||||||
const validForm = name !== '' && response !== '';
|
const validForm = name !== '' && response !== '';
|
||||||
|
@ -118,7 +122,7 @@ function CommandModal({
|
||||||
>
|
>
|
||||||
<div className="field is-horizontal">
|
<div className="field is-horizontal">
|
||||||
<div className="field-label is-normal">
|
<div className="field-label is-normal">
|
||||||
<label className="label">Command</label>
|
<label className="label">{t('twitch.commands.command')}</label>
|
||||||
</div>
|
</div>
|
||||||
<div className="field-body">
|
<div className="field-body">
|
||||||
<div className="field">
|
<div className="field">
|
||||||
|
@ -136,14 +140,14 @@ function CommandModal({
|
||||||
</div>
|
</div>
|
||||||
<div className="field is-horizontal">
|
<div className="field is-horizontal">
|
||||||
<div className="field-label is-normal">
|
<div className="field-label is-normal">
|
||||||
<label className="label">Description</label>
|
<label className="label">{t('twitch.commands.description')}</label>
|
||||||
</div>
|
</div>
|
||||||
<div className="field-body">
|
<div className="field-body">
|
||||||
<div className="field">
|
<div className="field">
|
||||||
<p className="control">
|
<p className="control">
|
||||||
<textarea
|
<textarea
|
||||||
className="textarea"
|
className="textarea"
|
||||||
placeholder="What does this command do?"
|
placeholder={t('twitch.commands.description-help')}
|
||||||
rows={1}
|
rows={1}
|
||||||
onChange={(ev) => setDescription(ev.target.value)}
|
onChange={(ev) => setDescription(ev.target.value)}
|
||||||
value={description}
|
value={description}
|
||||||
|
@ -154,14 +158,14 @@ function CommandModal({
|
||||||
</div>
|
</div>
|
||||||
<div className="field is-horizontal">
|
<div className="field is-horizontal">
|
||||||
<div className="field-label is-normal">
|
<div className="field-label is-normal">
|
||||||
<label className="label">Response</label>
|
<label className="label">{t('twitch.commands.response')}</label>
|
||||||
</div>
|
</div>
|
||||||
<div className="field-body">
|
<div className="field-body">
|
||||||
<div className="field">
|
<div className="field">
|
||||||
<p className="control">
|
<p className="control">
|
||||||
<textarea
|
<textarea
|
||||||
className={response !== '' ? 'textarea' : 'textarea is-danger'}
|
className={response !== '' ? 'textarea' : 'textarea is-danger'}
|
||||||
placeholder="What does the bot reply to this command?"
|
placeholder={t('twitch.commands.response-help')}
|
||||||
onChange={(ev) => setResponse(ev.target.value)}
|
onChange={(ev) => setResponse(ev.target.value)}
|
||||||
value={response}
|
value={response}
|
||||||
></textarea>
|
></textarea>
|
||||||
|
@ -171,24 +175,29 @@ function CommandModal({
|
||||||
</div>
|
</div>
|
||||||
<div className="field is-horizontal">
|
<div className="field is-horizontal">
|
||||||
<div className="field-label is-normal">
|
<div className="field-label is-normal">
|
||||||
<label className="label">Access level</label>
|
<label className="label">{t('twitch.commands.access-level')}</label>
|
||||||
</div>
|
</div>
|
||||||
<div className="field-body">
|
<div className="field-body">
|
||||||
<div className="field">
|
<div className="field">
|
||||||
<p className="control">
|
<p className="control">
|
||||||
<span className="select">
|
<span className="select">
|
||||||
<select>
|
<select>
|
||||||
<option value="everyone">Everyone</option>
|
<option value="everyone">
|
||||||
<option value="vip">VIPs</option>
|
{t('twitch.commands.access-everyone')}
|
||||||
<option value="moderators">Moderators</option>
|
</option>
|
||||||
<option value="streamer">Streamer only</option>
|
<option value="vip">
|
||||||
|
{t('twitch.commands.access-vips')}
|
||||||
|
</option>
|
||||||
|
<option value="moderators">
|
||||||
|
{t('twitch.commands.access-moderators')}
|
||||||
|
</option>
|
||||||
|
<option value="streamer">
|
||||||
|
{t('twitch.commands.access-streamer')}
|
||||||
|
</option>
|
||||||
</select>
|
</select>
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<p className="help">
|
<p className="help">{t('twitch.commands.access-level-help')}</p>
|
||||||
This specifies the minimum level, eg. if you choose VIPs,
|
|
||||||
moderators and streamer can still use the command
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -201,6 +210,7 @@ export default function TwitchBotCommandsPage(
|
||||||
): React.ReactElement {
|
): React.ReactElement {
|
||||||
const [commands, setCommands] = useModule(modules.twitchBotCommands);
|
const [commands, setCommands] = useModule(modules.twitchBotCommands);
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
const [createModal, setCreateModal] = useState(false);
|
const [createModal, setCreateModal] = useState(false);
|
||||||
const [showModifyCommand, setShowModifyCommand] = useState(null);
|
const [showModifyCommand, setShowModifyCommand] = useState(null);
|
||||||
|
@ -258,11 +268,11 @@ export default function TwitchBotCommandsPage(
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h1 className="title is-4">Bot commands</h1>
|
<h1 className="title is-4">{t('twitch.commands.header')}</h1>
|
||||||
<div className="field is-grouped">
|
<div className="field is-grouped">
|
||||||
<p className="control">
|
<p className="control">
|
||||||
<button className="button" onClick={() => setCreateModal(true)}>
|
<button className="button" onClick={() => setCreateModal(true)}>
|
||||||
New command
|
{t('twitch.commands.new-command')}
|
||||||
</button>
|
</button>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
@ -270,7 +280,7 @@ export default function TwitchBotCommandsPage(
|
||||||
<input
|
<input
|
||||||
className="input"
|
className="input"
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Search by name"
|
placeholder={t('twitch.commands.search')}
|
||||||
value={commandFilter}
|
value={commandFilter}
|
||||||
onChange={(ev) => setCommandFilter(ev.target.value)}
|
onChange={(ev) => setCommandFilter(ev.target.value)}
|
||||||
/>
|
/>
|
||||||
|
@ -278,16 +288,16 @@ export default function TwitchBotCommandsPage(
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<CommandModal
|
<CommandModal
|
||||||
title="New command"
|
title={t('twitch.commands.new-command')}
|
||||||
confirmText="Create"
|
confirmText={t('actions.create')}
|
||||||
active={createModal}
|
active={createModal}
|
||||||
onConfirm={createCommand}
|
onConfirm={createCommand}
|
||||||
onClose={() => setCreateModal(false)}
|
onClose={() => setCreateModal(false)}
|
||||||
/>
|
/>
|
||||||
{showModifyCommand ? (
|
{showModifyCommand ? (
|
||||||
<CommandModal
|
<CommandModal
|
||||||
title="Modify command"
|
title={t('twitch.commands.modify-command')}
|
||||||
confirmText="Edit"
|
confirmText={t('actions.edit')}
|
||||||
active={true}
|
active={true}
|
||||||
onConfirm={(newName, cmdData) =>
|
onConfirm={(newName, cmdData) =>
|
||||||
modifyCommand(showModifyCommand, newName, cmdData)
|
modifyCommand(showModifyCommand, newName, cmdData)
|
||||||
|
|
Loading…
Reference in a new issue