From 19ae6205c5bbbf6f6517abf5489013b16389c327 Mon Sep 17 00:00:00 2001 From: gingervitis Date: Sun, 3 Jan 2021 01:10:38 -0800 Subject: [PATCH] have forms call predefine post function --- web/pages/components/config/constants.tsx | 8 ++-- web/pages/components/config/edit-tags.tsx | 31 +++++++------- .../components/config/form-textfield.tsx | 42 +++++++++---------- .../components/config/form-toggleswitch.tsx | 34 +++++++-------- web/types/config-section.ts | 4 +- 5 files changed, 55 insertions(+), 64 deletions(-) diff --git a/web/pages/components/config/constants.tsx b/web/pages/components/config/constants.tsx index 5dc54a834..ddb09a52d 100644 --- a/web/pages/components/config/constants.tsx +++ b/web/pages/components/config/constants.tsx @@ -128,7 +128,7 @@ export const TEXTFIELD_DEFAULTS = { streamKey: { apiPath: '/key', - defaultValue: DEFAULT_NAME, + defaultValue: 'abc123', maxLength: TEXT_MAXLENGTH, placeholder: 'abc123', label: 'Stream Key', @@ -138,7 +138,7 @@ export const TEXTFIELD_DEFAULTS = { ffmpegPath: { apiPath: '/ffmpegpath', - defaultValue: DEFAULT_NAME, + defaultValue: '', maxLength: TEXT_MAXLENGTH, placeholder: '/usr/local/bin/ffmpeg', label: 'FFmpeg Path', @@ -148,7 +148,7 @@ export const TEXTFIELD_DEFAULTS = { webServerPort: { apiPath: '/webserverport', - defaultValue: '', + defaultValue: '8080', maxLength: 6, placeholder: '8080', label: 'Owncast Server port', @@ -159,7 +159,7 @@ export const TEXTFIELD_DEFAULTS = { apiPath: '/rtmpserverport', defaultValue: '1935', maxLength: 6, - placeholder: DEFAULT_NAME, + placeholder: '1935', label: 'RTMP port', tip: 'What port are you receiving RTMP?', required: true, diff --git a/web/pages/components/config/edit-tags.tsx b/web/pages/components/config/edit-tags.tsx index 1b56f541c..568eadf79 100644 --- a/web/pages/components/config/edit-tags.tsx +++ b/web/pages/components/config/edit-tags.tsx @@ -3,8 +3,7 @@ import React, { useContext, useState, useEffect } from 'react'; import { Typography, Tag, Input } from 'antd'; import { ServerStatusContext } from '../../../utils/server-status-context'; -import { fetchData, SERVER_CONFIG_UPDATE_URL } from '../../../utils/apis'; -import { TEXTFIELD_DEFAULTS, RESET_TIMEOUT, SUCCESS_STATES } from './constants'; +import { TEXTFIELD_DEFAULTS, RESET_TIMEOUT, SUCCESS_STATES, postConfigUpdateToAPI } from './constants'; const { Title } = Typography; @@ -44,22 +43,22 @@ export default function EditInstanceTags() { // posts all the tags at once as an array obj const postUpdateToAPI = async (postValue: any) => { - const result = await fetchData(`${SERVER_CONFIG_UPDATE_URL}${apiPath}`, { + await postConfigUpdateToAPI({ + apiPath, data: { value: postValue }, - method: 'POST', - auth: true, + onSuccess: () => { + setConfigField({ fieldName: 'tags', value: postValue, path: configPath }); + setSubmitStatus('success'); + setSubmitStatusMessage('Tags updated.'); + setNewTagInput(''); + resetTimer = setTimeout(resetStates, RESET_TIMEOUT); + }, + onError: (message: string) => { + setSubmitStatus('error'); + setSubmitStatusMessage(message); + resetTimer = setTimeout(resetStates, RESET_TIMEOUT); + }, }); - - if (result.success) { - setConfigField({ fieldName: 'tags', value: postValue, path: configPath }); - setSubmitStatus('success'); - setSubmitStatusMessage('Tags updated.'); - setNewTagInput(''); - } else { - setSubmitStatus('error'); - setSubmitStatusMessage(result.message); - } - resetTimer = setTimeout(resetStates, RESET_TIMEOUT); }; const handleInputChange = e => { diff --git a/web/pages/components/config/form-textfield.tsx b/web/pages/components/config/form-textfield.tsx index 63d69347e..30f2992db 100644 --- a/web/pages/components/config/form-textfield.tsx +++ b/web/pages/components/config/form-textfield.tsx @@ -22,10 +22,9 @@ import { FormItemProps } from 'antd/es/form'; import { InfoCircleOutlined } from '@ant-design/icons'; -import { TEXTFIELD_DEFAULTS, TEXT_MAXLENGTH, RESET_TIMEOUT } from './constants'; +import { TEXTFIELD_DEFAULTS, TEXT_MAXLENGTH, RESET_TIMEOUT, postConfigUpdateToAPI } from './constants'; import { TextFieldProps } from '../../../types/config-section'; -import { fetchData, SERVER_CONFIG_UPDATE_URL } from '../../../utils/apis'; import { ServerStatusContext } from '../../../utils/server-status-context'; export const TEXTFIELD_TYPE_TEXT = 'default'; @@ -78,23 +77,6 @@ export default function TextField(props: TextFieldProps) { resetTimer = null; } - const postUpdateToAPI = async (postValue: any) => { - setSubmitStatus('validating'); - const result = await fetchData(`${SERVER_CONFIG_UPDATE_URL}${apiPath}`, { - data: { value: postValue }, - method: 'POST', - auth: true, - }); - if (result.success) { - setConfigField({ fieldName, value: postValue, path: configPath }); - setSubmitStatus('success'); - } else { - setSubmitStatus('error'); - setSubmitStatusMessage(`There was an error: ${result.message}`); - } - resetTimer = setTimeout(resetStates, RESET_TIMEOUT); - }; - // if field is required but value is empty, or equals initial value, then don't show submit/update button. otherwise clear out any result messaging and display button. const handleChange = (e: any) => { const val = type === TEXTFIELD_TYPE_NUMBER ? e : e.target.value; @@ -116,9 +98,25 @@ export default function TextField(props: TextFieldProps) { }; // how to get current value of input - const handleSubmit = () => { + const handleSubmit = async () => { if ((required && fieldValueForSubmit !== '') || fieldValueForSubmit !== initialValue) { - postUpdateToAPI(fieldValueForSubmit); + // postUpdateToAPI(fieldValueForSubmit); + setSubmitStatus('validating'); + + await postConfigUpdateToAPI({ + apiPath, + data: { value: fieldValueForSubmit }, + onSuccess: () => { + setConfigField({ fieldName, value: fieldValueForSubmit, path: configPath }); + setSubmitStatus('success'); + }, + onError: (message: string) => { + setSubmitStatus('error'); + setSubmitStatusMessage(`There was an error: ${message}`); + }, + }); + resetTimer = setTimeout(resetStates, RESET_TIMEOUT); + // if an extra onSubmit handler was sent in as a prop, let's run that too. if (onSubmit) { onSubmit(); @@ -160,7 +158,7 @@ export default function TextField(props: TextFieldProps) { required={required} > { + const handleChange = async checked => { setSubmitStatus('validating'); - const result = await fetchData(`${SERVER_CONFIG_UPDATE_URL}${apiPath}`, { - data: { value: postValue }, - method: 'POST', - auth: true, + await postConfigUpdateToAPI({ + apiPath, + data: { value: checked }, + onSuccess: () => { + setConfigField({ fieldName, value: checked, path: configPath }); + setSubmitStatus('success'); + }, + onError: (message: string) => { + setSubmitStatus('error'); + setSubmitStatusMessage(`There was an error: ${message}`); + }, }); - - if (result.success) { - setConfigField({ fieldName, value: postValue, path: configPath }); - setSubmitStatus('success'); - } else { - setSubmitStatus('error'); - setSubmitStatusMessage(`There was an error: ${result.message}`); - } resetTimer = setTimeout(resetStates, RESET_TIMEOUT); - }; - - const handleChange = checked => { - postUpdateToAPI(checked); } const { @@ -91,7 +85,7 @@ export default function ToggleSwitch(props: ToggleSwitchProps) { validateStatus={submitStatus} > {}, - onError?: () => {}, + onSuccess?: (arg: any) => {}, + onError?: (arg: any) => {}, } export interface ConfigDirectoryFields {