owncast/web/components/config/notification/discord.tsx

154 lines
4.2 KiB
TypeScript
Raw Normal View History

Mange outbound notification settings (#458) * ActivityPub admin pages for configuration * Fix dev build * Add support for requiring follow approval. Closes https://github.com/owncast/owncast/issues/1208 * Point at admin version of followers endpoint * Add setting for toggling displaying fediverse engagement in admin. https://github.com/owncast/owncast/issues/1404 * Add instance URL textfield to federation config and disable federation if it is empty * If instance URL is not https disable federation * Tweak federation toggle text. Make go live message optional * Add federation info modal. Closes https://github.com/owncast/owncast/issues/1544 * Add support for blocked federated domains. For https://github.com/owncast/owncast/issues/1209 * Simplify fediverse post input * Add placeholder Fediverse icon * Tweak federation logo in admin menu. Closes https://github.com/owncast/owncast/issues/1603 * Add global button for composing a fediverse post. Closes https://github.com/owncast/owncast/issues/1610 * Federation -> Social * Add page for listing federated actions. Closes https://github.com/owncast/owncast/issues/1573 * Auto-close social post modal after success * Make user modal action buttons look nicer * Center and reduce width and center count column. Closes https://github.com/owncast/owncast/issues/1580 * Update the followers table to be clearer * Fix exception thrown when passing undefined * Disable federation settings if feature is disabled * Update enable social modal. For https://github.com/owncast/owncast/issues/1594 * Fix type props * Quiet, linter * Move compose button to the left * Add tooltip for compose button * Add NSFW toggle to federation config. Closes https://github.com/owncast/owncast/issues/1628 * Add support for blocking/removing followers. For https://github.com/owncast/owncast/issues/1630 * Allow editing the server url field even when federation is disabled * Continue to update the copy around the social features * Use relative path to action images. Fixes https://github.com/owncast/owncast/issues/1646 * Link IRIs and make action verbse present tense * Update caniuse * Notifications configuration UI * Remove twilio add email notifications * WIP email support * Add support for managing twitter notifications * Mark fields as passwords * Continued WIP * Post merge cleanup * Cleanup * Remove email config. Handle disabled notifications state * Remove email related components * Remove email related settings properties
2022-03-23 18:57:09 +03:00
import { Button, Typography } from 'antd';
import React, { useState, useContext, useEffect } from 'react';
import { ServerStatusContext } from '../../../utils/server-status-context';
import TextField from '../form-textfield';
import FormStatusIndicator from '../form-status-indicator';
import {
postConfigUpdateToAPI,
RESET_TIMEOUT,
DISCORD_CONFIG_FIELDS,
} from '../../../utils/config-constants';
import ToggleSwitch from '../form-toggleswitch';
import {
createInputStatus,
StatusState,
STATUS_ERROR,
STATUS_SUCCESS,
} from '../../../utils/input-statuses';
import { UpdateArgs } from '../../../types/config-section';
const { Title } = Typography;
export default function ConfigNotify() {
const serverStatusData = useContext(ServerStatusContext);
const { serverConfig, setFieldInConfigState } = serverStatusData || {};
const { notifications } = serverConfig || {};
const { discord } = notifications || {};
const { enabled, webhook, goLiveMessage } = discord || {};
const [formDataValues, setFormDataValues] = useState<any>({});
const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
const [enableSaveButton, setEnableSaveButton] = useState<boolean>(false);
useEffect(() => {
setFormDataValues({
enabled,
webhook,
goLiveMessage,
});
}, [notifications, discord]);
const canSave = (): boolean => {
if (webhook === '' || goLiveMessage === '') {
return false;
}
return true;
};
// update individual values in state
const handleFieldChange = ({ fieldName, value }: UpdateArgs) => {
setFormDataValues({
...formDataValues,
[fieldName]: value,
});
setEnableSaveButton(canSave());
};
let resetTimer = null;
const resetStates = () => {
setSubmitStatus(null);
resetTimer = null;
clearTimeout(resetTimer);
};
const save = async () => {
const postValue = formDataValues;
await postConfigUpdateToAPI({
apiPath: '/notifications/discord',
data: { value: postValue },
onSuccess: () => {
setFieldInConfigState({
fieldName: 'discord',
value: postValue,
path: 'notifications',
});
setSubmitStatus(createInputStatus(STATUS_SUCCESS, 'Updated.'));
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
},
onError: (message: string) => {
setSubmitStatus(createInputStatus(STATUS_ERROR, message));
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
},
});
};
// toggle switch.
const handleSwitchChange = (switchEnabled: boolean) => {
// setShouldDisplayForm(storageEnabled);
handleFieldChange({ fieldName: 'enabled', value: switchEnabled });
};
return (
<>
<Title>Discord</Title>
<p className="description reduced-margins">
Let your Discord channel know each time you go live.
</p>
<p className="description reduced-margins">
<a
href="https://support.discord.com/hc/en-us/articles/228383668"
target="_blank"
rel="noreferrer"
>
Create a webhook
</a>{' '}
under <i>Edit Channel / Integrations</i> on your Discord channel and provide it below.
</p>
<ToggleSwitch
apiPath=""
fieldName="discordEnabled"
label="Enable Discord"
checked={formDataValues.enabled}
onChange={handleSwitchChange}
/>
<div style={{ display: formDataValues.enabled ? 'block' : 'none' }}>
<TextField
{...DISCORD_CONFIG_FIELDS.webhookUrl}
required
value={formDataValues.webhook}
onChange={handleFieldChange}
/>
</div>
<div style={{ display: formDataValues.enabled ? 'block' : 'none' }}>
<TextField
{...DISCORD_CONFIG_FIELDS.goLiveMessage}
required
value={formDataValues.goLiveMessage}
onChange={handleFieldChange}
/>
</div>
<Button
type="primary"
onClick={save}
style={{
display: enableSaveButton ? 'inline-block' : 'none',
position: 'relative',
marginLeft: 'auto',
right: '0',
marginTop: '20px',
}}
>
Save
</Button>
<FormStatusIndicator status={submitStatus} />
</>
);
}