LogalDeveloper/owncast
0
Fork 0
Code Activity

refactor forms to not use ant Form component; split server and instance details forms into their own components

Browse Source
This commit is contained in:
gingervitis
2021-01-28 03:08:57 -08:00
parent 04926d53e1
commit 5f70c77458
13 changed files with 403 additions and 392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
web/pages/config-public-details.tsx
View File

@@ -1,76 +1,21 @@
import React, { useContext, useEffect } from 'react';
import { Typography, Form } from 'antd';
import React from 'react';
import { Typography } from 'antd';
import Link from 'next/link';
import TextField, { TEXTFIELD_TYPE_TEXTAREA, TEXTFIELD_TYPE_URL } from './components/config/form-textfield';
import { ServerStatusContext } from '../utils/server-status-context';
import { TEXTFIELD_DEFAULTS, postConfigUpdateToAPI } from './components/config/constants';
import configStyles from '../styles/config-pages.module.scss';
import EditInstanceDetails from './components/config/edit-instance-details';
const { Title } = Typography;
export default function PublicFacingDetails() {
const [form] = Form.useForm();
const serverStatusData = useContext(ServerStatusContext);
const { serverConfig } = serverStatusData || {};
const { instanceDetails, yp } = serverConfig;
const initialValues = {
...instanceDetails,
...yp,
};
useEffect(() => {
form.setFieldsValue(initialValues);
}, [instanceDetails]);
// 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 = {
initialValues,
configPath: 'instanceDetails',
};
return (
<>
<Title level={2}>Edit your public facing instance details</Title>
<div className={configStyles.publicDetailsContainer}>
<div className={configStyles.textFieldsSection}>
<Form
form={form}
layout="vertical"
>
<TextField
fieldName="instanceUrl"
{...extraProps}
configPath="yp"
type={TEXTFIELD_TYPE_URL}
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} />
</Form>
<EditInstanceDetails />
<Link href="/admin/config-page-content">
<a>Edit your extra page content here.</a>