have forms call predefine post function

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,

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 => {

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}
         >
         <Field
-            className="field"
+            className={`field field-${fieldName}`}
             allowClear
             placeholder={placeholder}
             maxLength={maxLength}

web/pages/components/config/form-toggleswitch.tsx

@@ -4,10 +4,9 @@ import { FormItemProps } from 'antd/es/form';
 
 import { InfoCircleOutlined } from '@ant-design/icons';
 
-import { TEXTFIELD_DEFAULTS, RESET_TIMEOUT, SUCCESS_STATES } from './constants';
+import { TEXTFIELD_DEFAULTS, RESET_TIMEOUT, SUCCESS_STATES, postConfigUpdateToAPI } from './constants';
 
 import { ToggleSwitchProps } 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';
@@ -48,26 +47,21 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
     resetTimer = null;
   }
 
-  const postUpdateToAPI = async (postValue: any) => {
+  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}
         >
           <Switch
-            className="switch"
+            className={`switch field-${fieldName}`}
             loading={submitStatus === 'validating'}
             onChange={handleChange}
             checked={initialValue}

web/types/config-section.ts

@@ -27,8 +27,8 @@ export interface UpdateArgs {
 export interface ApiPostArgs {
   apiPath: string,
   data: object,
-  onSuccess?: () => {},
-  onError?: () => {},
+  onSuccess?: (arg: any) => {},
+  onError?: (arg: any) => {},
 }
 
 export interface ConfigDirectoryFields {