owncast/web/pages/admin/config-notify.tsx
James Young d1f3fffe2f
reafctor: normalize component formatting (#2082)
* refactor: move/rename BanUserButton file

* refactor: move/rename Chart file

* refactor: update generic component filenames to PascalCase

* refactor: update config component filenames to PascalCase

* refactor: update AdminLayout component filename to PascalCase

* refactor: update/move VideoJS component

* chore(eslint): disable bad react/require-default-props rule

* refactor: normalize ActionButton component

* refactor: normalize ActionButtonRow component

* refactor: normalize FollowButton component

* refactor: normalize NotifyButton component

* refactor: normalize ChatActionMessage component

* refactor: normalize ChatContainer component

* refactor: normalize ChatJoinMessage component

* refactor: normalize ChatModerationActionMenu component

* refactor: normalize ChatModerationDetailsModal component

* refactor: normalize ChatModeratorNotification component

* refactor: normalize ChatSocialMessage component

* refactor: normalize ChatSystemMessage component

* refactor: normalize ChatTextField component

* refactor: normalize ChatUserBadge component

* refactor: normalize ChatUserMessage component

* refactor: normalize ContentHeader component

* refactor: normalize OwncastLogo component

* refactor: normalize UserDropdown component

* chore(eslint): modify react/function-component-definition rule

* refactor: normalize CodecSelector component

* refactor: update a bunch of functional components using eslint

* refactor: update a bunch of functional components using eslint, pt2

* refactor: update a bunch of functional components using eslint, pt3

* refactor: replace all component->component default imports with named imports

* refactor: replace all component-stories->component default imports with named imports

* refactor: remove default exports from most components

* chore(eslint): add eslint config files for the components and pages dirs

* fix: use-before-define error in ChatContainer

* Fix ChatContainer import

* Only process .tsx files in Next builds

Co-authored-by: Gabe Kangas <gabek@real-ity.com>
2022-09-07 00:00:28 -07:00

149 lines
4.2 KiB
TypeScript

import { Alert, Button, Col, Row, Typography } from 'antd';
import React, { useContext, useEffect, useState } from 'react';
import Link from 'next/link';
import Discord from '../../components/config/notification/discord';
import Browser from '../../components/config/notification/browser';
import Twitter from '../../components/config/notification/twitter';
import Federation from '../../components/config/notification/federation';
import {
TextFieldWithSubmit,
TEXTFIELD_TYPE_URL,
} from '../../components/config/TextFieldWithSubmit';
import { TEXTFIELD_PROPS_FEDERATION_INSTANCE_URL } from '../../utils/config-constants';
import { ServerStatusContext } from '../../utils/server-status-context';
import { UpdateArgs } from '../../types/config-section';
import isValidUrl from '../../utils/urls';
const { Title } = Typography;
export default function ConfigNotify() {
const [formDataValues, setFormDataValues] = useState(null);
const serverStatusData = useContext(ServerStatusContext);
const { serverConfig } = serverStatusData || {};
const { yp } = serverConfig;
const { instanceUrl } = yp;
const [urlValid, setUrlValid] = useState(false);
useEffect(() => {
setFormDataValues({
instanceUrl,
});
}, [yp]);
const handleSubmitInstanceUrl = () => {
if (!urlValid) {
return;
}
setFormDataValues({
...formDataValues,
enabled: false,
});
};
const handleFieldChange = ({ fieldName, value }: UpdateArgs) => {
setUrlValid(isValidUrl(value));
setFormDataValues({
...formDataValues,
[fieldName]: value,
});
};
const enabled = instanceUrl !== '';
const configurationWarning = !enabled && (
<>
<Alert
message="You must set your server URL before you can enable this feature."
type="warning"
showIcon
/>
<br />
<TextFieldWithSubmit
fieldName="instanceUrl"
{...TEXTFIELD_PROPS_FEDERATION_INSTANCE_URL}
value={formDataValues?.instanceUrl || ''}
initialValue={yp.instanceUrl}
type={TEXTFIELD_TYPE_URL}
onChange={handleFieldChange}
onSubmit={handleSubmitInstanceUrl}
required
/>
</>
);
return (
<>
<Title>Notifications</Title>
<p className="description">
Let your viewers know when you go live by supporting any of the below notification channels.{' '}
<a
href="https://owncast.online/docs/notifications/?source=admin"
target="_blank"
rel="noopener noreferrer"
>
Learn more about live notifications.
</a>
</p>
{configurationWarning}
<Row>
<Col
span={10}
className={`form-module ${enabled ? '' : 'disabled'}`}
style={{ margin: '5px', display: 'flex', flexDirection: 'column' }}
>
<Browser />
</Col>
<Col
span={10}
className={`form-module ${enabled ? '' : 'disabled'}`}
style={{ margin: '5px', display: 'flex', flexDirection: 'column' }}
>
<Twitter />
</Col>
<Col
span={10}
className={`form-module ${enabled ? '' : 'disabled'}`}
style={{ margin: '5px', display: 'flex', flexDirection: 'column' }}
>
<Discord />
</Col>
<Col
span={10}
className={`form-module ${enabled ? '' : 'disabled'}`}
style={{ margin: '5px', display: 'flex', flexDirection: 'column' }}
>
<Federation />
</Col>
<Col
span={10}
className={`form-module ${enabled ? '' : 'disabled'}`}
style={{ margin: '5px', display: 'flex', flexDirection: 'column' }}
>
<Title>Custom</Title>
<p className="description">Build your own notifications by using custom webhooks.</p>
<Link passHref href="/webhooks">
<Button
type="primary"
style={{
position: 'relative',
marginLeft: 'auto',
right: '0',
marginTop: '20px',
}}
>
Create
</Button>
</Link>
</Col>
</Row>
</>
);
}