owncast/web/pages/config-public-details.tsx

100 lines
2.9 KiB
TypeScript
Raw Normal View History

import React, { useContext, useEffect } from 'react';
import { Typography, Form } from 'antd';
2020-12-27 06:44:09 +03:00
import TextField, { TEXTFIELD_TYPE_TEXTAREA } from './components/config/form-textfield';
2020-12-27 05:04:23 +03:00
import EditInstanceTags from './components/config/edit-tags';
import EditDirectoryDetails from './components/config/edit-directory';
import { ServerStatusContext } from '../utils/server-status-context';
import { TEXTFIELD_DEFAULTS, postConfigUpdateToAPI } from './components/config/constants';
2020-12-27 05:04:23 +03:00
const { Title } = Typography;
export default function PublicFacingDetails() {
const [form] = Form.useForm();
2020-12-27 05:04:23 +03:00
const serverStatusData = useContext(ServerStatusContext);
const { serverConfig } = serverStatusData || {};
2020-12-27 05:04:23 +03:00
const { instanceDetails, yp } = serverConfig;
const { instanceDetails: instanceDetailsDefaults, yp: ypDefaults } = TEXTFIELD_DEFAULTS;
const initialValues = {
...instanceDetails,
...yp,
};
const defaultFields = {
...instanceDetailsDefaults,
...ypDefaults,
};
useEffect(() => {
form.setFieldsValue(initialValues);
}, [instanceDetails]);
const handleResetValue = (fieldName: string) => {
const defaultValue = defaultFields[fieldName] && defaultFields[fieldName].defaultValue || '';
form.setFieldsValue({ [fieldName]: initialValues[fieldName] || defaultValue });
}
// if instanceUrl is empty, we should also turn OFF the `enabled` field of directory.
const handleSubmitInstanceUrl = () => {
if (form.getFieldValue('instanceUrl') === '') {
if (yp.enabled === true) {
const { apiPath } = TEXTFIELD_DEFAULTS.yp.enabled;
postConfigUpdateToAPI({
apiPath,
data: { value: false },
});
}
}
}
const extraProps = {
handleResetValue,
initialValues,
configPath: 'instanceDetails',
};
2020-12-27 05:04:23 +03:00
return (
<div className="config-public-details-form">
2020-12-27 05:04:23 +03:00
<Title level={2}>Edit your public facing instance details</Title>
2020-12-27 05:04:23 +03:00
<div className="config-public-details-container">
2020-12-27 06:44:09 +03:00
<div className="text-fields">
<Form
form={form}
layout="vertical"
>
<TextField
fieldName="instanceUrl"
{...extraProps}
configPath="yp"
onSubmit={handleSubmitInstanceUrl}
/>
<TextField fieldName="title" {...extraProps} />
<TextField fieldName="streamTitle" {...extraProps} />
<TextField fieldName="name" {...extraProps} />
<TextField fieldName="summary" type={TEXTFIELD_TYPE_TEXTAREA} {...extraProps} />
<TextField fieldName="logo" {...extraProps} />
2020-12-27 06:44:09 +03:00
</Form>
2020-12-27 05:04:23 +03:00
</div>
2020-12-30 01:47:31 +03:00
<div className="misc-fields">
{/* add social handles comp
2020-12-27 05:04:23 +03:00
<br/>
add tags comp */}
<EditInstanceTags />
2021-01-03 12:54:04 +03:00
<EditDirectoryDetails />
2020-12-27 05:04:23 +03:00
</div>
</div>
</div>
2020-12-27 05:04:23 +03:00
);
}