This commit is contained in:
gingervitis 2021-01-31 01:55:19 -08:00
parent 9812f4c874
commit add2f1329b
3 changed files with 19 additions and 61 deletions

View File

@ -1,6 +1,6 @@
/* eslint-disable react/no-array-index-key */ /* eslint-disable react/no-array-index-key */
import React, { useContext, useState, useEffect } from 'react'; import React, { useContext, useState, useEffect } from 'react';
import { Typography, Tag, Input } from 'antd'; import { Typography, Tag } from 'antd';
import { ServerStatusContext } from '../../../utils/server-status-context'; import { ServerStatusContext } from '../../../utils/server-status-context';
import { FIELD_PROPS_TAGS, RESET_TIMEOUT, postConfigUpdateToAPI } from './constants'; import { FIELD_PROPS_TAGS, RESET_TIMEOUT, postConfigUpdateToAPI } from './constants';
@ -18,10 +18,9 @@ import {
const { Title } = Typography; const { Title } = Typography;
export default function EditInstanceTags() { export default function EditInstanceTags() {
const [newTagInput, setNewTagInput] = useState(''); const [newTagInput, setNewTagInput] = useState<string | number>('');
const [fieldStatus, setFieldStatus] = useState<StatusState>(null); const [fieldStatus, setFieldStatus] = useState<StatusState>(null);
// const [submitStatus, setSubmitStatus] = useState(null);
// const [submitStatusMessage, setSubmitStatusMessage] = useState('');
const serverStatusData = useContext(ServerStatusContext); const serverStatusData = useContext(ServerStatusContext);
const { serverConfig, setFieldInConfigState } = serverStatusData || {}; const { serverConfig, setFieldInConfigState } = serverStatusData || {};
@ -39,8 +38,6 @@ export default function EditInstanceTags() {
}, []); }, []);
const resetStates = () => { const resetStates = () => {
// setSubmitStatus(null);
// setSubmitStatusMessage('');
setFieldStatus(null); setFieldStatus(null);
resetTimer = null; resetTimer = null;
clearTimeout(resetTimer); clearTimeout(resetTimer);
@ -56,17 +53,11 @@ export default function EditInstanceTags() {
onSuccess: () => { onSuccess: () => {
setFieldInConfigState({ fieldName: 'tags', value: postValue, path: configPath }); setFieldInConfigState({ fieldName: 'tags', value: postValue, path: configPath });
setFieldStatus(createInputStatus(STATUS_SUCCESS, 'Tags updated.')); setFieldStatus(createInputStatus(STATUS_SUCCESS, 'Tags updated.'));
// setSubmitStatus('success');
// setSubmitStatusMessage('Tags updated.');
setNewTagInput(''); setNewTagInput('');
resetTimer = setTimeout(resetStates, RESET_TIMEOUT); resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
}, },
onError: (message: string) => { onError: (message: string) => {
setFieldStatus(createInputStatus(STATUS_ERROR, message)); setFieldStatus(createInputStatus(STATUS_ERROR, message));
// setSubmitStatus('error');
// setSubmitStatusMessage(message);
resetTimer = setTimeout(resetStates, RESET_TIMEOUT); resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
}, },
}); });
@ -76,9 +67,6 @@ export default function EditInstanceTags() {
if (!fieldStatus) { if (!fieldStatus) {
setFieldStatus(null); setFieldStatus(null);
} }
// if (submitStatusMessage !== '') {
// setSubmitStatusMessage('');
// }
setNewTagInput(value); setNewTagInput(value);
}; };
@ -88,14 +76,10 @@ export default function EditInstanceTags() {
const newTag = newTagInput.trim(); const newTag = newTagInput.trim();
if (newTag === '') { if (newTag === '') {
setFieldStatus(createInputStatus(STATUS_WARNING, 'Please enter a tag')); setFieldStatus(createInputStatus(STATUS_WARNING, 'Please enter a tag'));
// setSubmitStatusMessage('Please enter a tag');
return; return;
} }
if (tags.some(tag => tag.toLowerCase() === newTag.toLowerCase())) { if (tags.some(tag => tag.toLowerCase() === newTag.toLowerCase())) {
setFieldStatus(createInputStatus(STATUS_WARNING, 'This tag is already used!')); setFieldStatus(createInputStatus(STATUS_WARNING, 'This tag is already used!'));
// setSubmitStatusMessage('This tag is already used!');
return; return;
} }
@ -110,11 +94,6 @@ export default function EditInstanceTags() {
postUpdateToAPI(updatedTags); postUpdateToAPI(updatedTags);
}; };
// const {
// icon: newStatusIcon = null,
// message: newStatusMessage = '',
// } = fieldStatus || {};
return ( return (
<div className="tag-editor-container"> <div className="tag-editor-container">
<Title level={3}>Add Tags</Title> <Title level={3}>Add Tags</Title>
@ -132,9 +111,7 @@ export default function EditInstanceTags() {
); );
})} })}
</div> </div>
{/* <div className={`status-message ${submitStatus || ''}`}>
{newStatusIcon} {newStatusMessage} {submitStatusMessage}
</div> */}
<div className="add-new-tag-section"> <div className="add-new-tag-section">
<TextField <TextField
fieldName="tag-input" fieldName="tag-input"
@ -145,7 +122,6 @@ export default function EditInstanceTags() {
maxLength={maxLength} maxLength={maxLength}
placeholder={placeholder} placeholder={placeholder}
status={fieldStatus} status={fieldStatus}
// message={`${newStatusIcon} ${newStatusMessage} ${submitStatusMessage}`}
/> />
</div> </div>
</div> </div>

View File

@ -30,7 +30,7 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
const [fieldStatus, setFieldStatus] = useState<StatusState>(null); const [fieldStatus, setFieldStatus] = useState<StatusState>(null);
const [hasChanged, setHasChanged] = useState(false); const [hasChanged, setHasChanged] = useState(false);
const [fieldValueForSubmit, setFieldValueForSubmit] = useState<string | number>(''); // const [fieldValueForSubmit, setFieldValueForSubmit] = useState<string | number>('');
const serverStatusData = useContext(ServerStatusContext); const serverStatusData = useContext(ServerStatusContext);
const { setFieldInConfigState } = serverStatusData || {}; const { setFieldInConfigState } = serverStatusData || {};
@ -44,16 +44,7 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
...textFieldProps // rest of props ...textFieldProps // rest of props
} = props; } = props;
const { const { fieldName, required, status, value, onChange, onSubmit } = textFieldProps;
fieldName,
required,
status,
// type,
value,
onChange,
// onBlur,
onSubmit,
} = textFieldProps;
// Clear out any validation states and messaging // Clear out any validation states and messaging
const resetStates = () => { const resetStates = () => {
@ -73,7 +64,7 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
// show submit button // show submit button
resetStates(); resetStates();
setHasChanged(true); setHasChanged(true);
setFieldValueForSubmit(value); // setFieldValueForSubmit(value);
} }
}, [value]); }, [value]);
@ -93,24 +84,18 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
// how to get current value of input // how to get current value of input
const handleSubmit = async () => { const handleSubmit = async () => {
if ((required && fieldValueForSubmit !== '') || fieldValueForSubmit !== initialValue) { if ((required && value !== '') || value !== initialValue) {
setFieldStatus(createInputStatus(STATUS_PROCESSING)); setFieldStatus(createInputStatus(STATUS_PROCESSING));
// setSubmitStatus('validating');
await postConfigUpdateToAPI({ await postConfigUpdateToAPI({
apiPath, apiPath,
data: { value: fieldValueForSubmit }, data: { value },
onSuccess: () => { onSuccess: () => {
setFieldInConfigState({ fieldName, value: fieldValueForSubmit, path: configPath }); setFieldInConfigState({ fieldName, value, path: configPath });
setFieldStatus(createInputStatus(STATUS_SUCCESS)); setFieldStatus(createInputStatus(STATUS_SUCCESS));
// setSubmitStatus('success');
}, },
onError: (message: string) => { onError: (message: string) => {
setFieldStatus(createInputStatus(STATUS_ERROR, `There was an error: ${message}`)); setFieldStatus(createInputStatus(STATUS_ERROR, `There was an error: ${message}`));
// setSubmitStatus('error');
// setSubmitStatusMessage(`There was an error: ${message}`);
}, },
}); });
resetTimer = setTimeout(resetStates, RESET_TIMEOUT); resetTimer = setTimeout(resetStates, RESET_TIMEOUT);

View File

@ -1,6 +1,5 @@
// TS types for elements on the Config pages // TS types for elements on the Config pages
// for dropdown // for dropdown
export interface SocialHandleDropdownItem { export interface SocialHandleDropdownItem {
icon: string; icon: string;
@ -17,15 +16,15 @@ export interface UpdateArgs {
} }
export interface ApiPostArgs { export interface ApiPostArgs {
apiPath: string, apiPath: string;
data: object, data: object;
onSuccess?: (arg: any) => void, onSuccess?: (arg: any) => void;
onError?: (arg: any) => void, onError?: (arg: any) => void;
} }
export interface ConfigDirectoryFields { export interface ConfigDirectoryFields {
enabled: boolean; enabled: boolean;
instanceUrl: string, instanceUrl: string;
} }
export interface ConfigInstanceDetailsFields { export interface ConfigInstanceDetailsFields {
@ -33,14 +32,13 @@ export interface ConfigInstanceDetailsFields {
logo: string; logo: string;
name: string; name: string;
nsfw: boolean; nsfw: boolean;
socialHandles: SocialHandle[], socialHandles: SocialHandle[];
streamTitle: string; streamTitle: string;
summary: string; summary: string;
tags: string[]; tags: string[];
title: string; title: string;
} }
export type CpuUsageLevel = 1 | 2 | 3 | 4 | 5; export type CpuUsageLevel = 1 | 2 | 3 | 4 | 5;
// from data // from data
@ -51,7 +49,7 @@ export interface SocialHandle {
export interface VideoVariant { export interface VideoVariant {
key?: number; // unique identifier generated on client side just for ant table rendering key?: number; // unique identifier generated on client side just for ant table rendering
cpuUsageLevel: CpuUsageLevel, cpuUsageLevel: CpuUsageLevel;
framerate: number; framerate: number;
audioPassthrough: boolean; audioPassthrough: boolean;
@ -61,11 +59,10 @@ export interface VideoVariant {
} }
export interface VideoSettingsFields { export interface VideoSettingsFields {
latencyLevel: number; latencyLevel: number;
videoQualityVariants: VideoVariant[], videoQualityVariants: VideoVariant[];
cpuUsageLevel: CpuUsageLevel, cpuUsageLevel: CpuUsageLevel;
} }
export interface ConfigDetails { export interface ConfigDetails {
ffmpegPath: string; ffmpegPath: string;
instanceDetails: ConfigInstanceDetailsFields; instanceDetails: ConfigInstanceDetailsFields;