owncast/web/pages/config-chat.tsx
2021-06-22 03:20:17 +00:00

70 lines
2.2 KiB
TypeScript

import React, { useState, useContext, useEffect } from 'react';
import { Typography } from 'antd';
import {
FIELD_PROPS_DISABLE_CHAT,
TEXTFIELD_PROPS_CHAT_USERNAME_BLOCKLIST,
} from '../utils/config-constants';
import { ServerStatusContext } from '../utils/server-status-context';
import ToggleSwitch from '../components/config/form-toggleswitch';
import { UpdateArgs } from '../types/config-section';
import { TEXTFIELD_TYPE_TEXTAREA } from '../components/config/form-textfield';
import TextFieldWithSubmit from '../components/config/form-textfield-with-submit';
export default function ConfigChat() {
const { Title } = Typography;
const [formDataValues, setFormDataValues] = useState(null);
const serverStatusData = useContext(ServerStatusContext);
const { serverConfig } = serverStatusData || {};
const { chatDisabled } = serverConfig;
const { usernameBlocklist } = serverConfig;
function handleChatDisableChange(disabled: boolean) {
handleFieldChange({ fieldName: 'chatDisabled', value: disabled });
}
function handleChatUsernameBlockListChange(args: UpdateArgs) {
handleFieldChange({ fieldName: 'usernameBlocklist', value: args.value });
}
useEffect(() => {
setFormDataValues({
chatDisabled,
usernameBlocklist,
});
}, [serverConfig]);
if (!formDataValues) {
return null;
}
const handleFieldChange = ({ fieldName, value }: UpdateArgs) => {
setFormDataValues({
...formDataValues,
[fieldName]: value,
});
};
return (
<div className="config-server-details-form">
<Title>Chat Settings</Title>
<div className="form-module config-server-details-container">
<ToggleSwitch
fieldName="chatDisabled"
{...FIELD_PROPS_DISABLE_CHAT}
checked={formDataValues.chatDisabled}
onChange={handleChatDisableChange}
/>
<TextFieldWithSubmit
fieldName="usernameBlocklist"
{...TEXTFIELD_PROPS_CHAT_USERNAME_BLOCKLIST}
type={TEXTFIELD_TYPE_TEXTAREA}
value={formDataValues.usernameBlocklist}
initialValue={usernameBlocklist}
onChange={handleChatUsernameBlockListChange}
/>
</div>
</div>
);
}