ts cleanup on some config components

web/pages/components/config/constants.tsx

@@ -4,10 +4,6 @@ import { CheckCircleFilled, ExclamationCircleFilled } from '@ant-design/icons';
 import { fetchData, SERVER_CONFIG_UPDATE_URL } from '../../../utils/apis';
 import { ApiPostArgs, VideoVariant, SocialHandle } from '../../../types/config-section';
 
-export const DEFAULT_NAME = 'Owncast User';
-export const DEFAULT_TITLE = 'Owncast Server';
-export const DEFAULT_SUMMARY = '';
-
 export const TEXT_MAXLENGTH = 255;
 
 export const RESET_TIMEOUT = 3000;

web/pages/components/config/edit-instance-details.tsx

@@ -5,6 +5,7 @@ import { ServerStatusContext } from '../../../utils/server-status-context';
 import { postConfigUpdateToAPI, TEXTFIELD_PROPS_USERNAME, TEXTFIELD_PROPS_INSTANCE_URL, TEXTFIELD_PROPS_SERVER_TITLE, TEXTFIELD_PROPS_STREAM_TITLE, TEXTFIELD_PROPS_SERVER_SUMMARY, TEXTFIELD_PROPS_LOGO, API_YP_SWITCH } from './constants';
 
 import configStyles from '../../../styles/config-pages.module.scss';
+import { UpdateArgs } from '../../../types/config-section';
 
 export default function EditInstanceDetails() {
   const [formDataValues, setFormDataValues] = useState(null);
@@ -36,7 +37,7 @@ export default function EditInstanceDetails() {
     }
   }
 
-  const handleFieldChange = (fieldName: string, value: string) => {
+  const handleFieldChange = ({ fieldName, value }: UpdateArgs) => {
     setFormDataValues({
       ...formDataValues,
       [fieldName]: value,

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

@@ -1,11 +1,10 @@
-
 import React, { useState, useContext } from 'react';
 import { Button, Input, InputNumber } from 'antd';
 import { FormItemProps } from 'antd/es/form';
 
 import { RESET_TIMEOUT, postConfigUpdateToAPI } from './constants';
 
-import { TextFieldProps } from '../../../types/config-section';
+import { FieldUpdaterFunc } from '../../../types/config-section';
 import { ServerStatusContext } from '../../../utils/server-status-context';
 import InfoTip from '../info-tip';
 
@@ -15,6 +14,25 @@ export const TEXTFIELD_TYPE_NUMBER = 'numeric';
 export const TEXTFIELD_TYPE_TEXTAREA = 'textarea';
 export const TEXTFIELD_TYPE_URL = 'url';
 
+interface TextFieldProps {
+  apiPath: string;
+  fieldName: string;
+
+  configPath?: string;
+  disabled?: boolean;
+  initialValue?: string;
+  label?: string;
+  maxLength?: number;
+  placeholder?: string;
+  required?: boolean;
+  tip?: string;
+  type?: string;
+  value?: string | number;
+  onSubmit?: () => void;
+  onBlur?: () => void;
+  onChange?: FieldUpdaterFunc;
+}
+
 
 export default function TextField(props: TextFieldProps) {
   const [submitStatus, setSubmitStatus] = useState<FormItemProps['validateStatus']>('');
@@ -45,7 +63,6 @@ export default function TextField(props: TextFieldProps) {
     value,
   } = props;
 
-
   // Clear out any validation states and messaging
   const resetStates = () => {
     setSubmitStatus('');
@@ -71,7 +88,7 @@ export default function TextField(props: TextFieldProps) {
     }
     // if an extra onChange handler was sent in as a prop, let's run that too.
     if (onChange) {
-      onChange(fieldName, val);
+      onChange({ fieldName, value: val });
     }
   };
 
@@ -82,7 +99,7 @@ export default function TextField(props: TextFieldProps) {
     }
     const val = e.target.value;
     if (required && val === '') {
-      onChange(fieldName, initialValue);
+      onChange({ fieldName, value: initialValue });
     }
     // if an extra onBlur handler was sent in as a prop, let's run that too.
     if (onBlur) {
@@ -176,3 +193,19 @@ export default function TextField(props: TextFieldProps) {
     </div>
   ); 
 }
+
+TextField.defaultProps = {
+  configPath: '',
+  disabled: false,
+  initialValue: '',
+  label: '',
+  maxLength: null,
+  placeholder: '',
+  required: false,
+  tip: '',
+  type: TEXTFIELD_TYPE_TEXT,
+  value: '',
+  onSubmit: () => {},
+  onBlur: () => {},
+  onChange: () => {},
+};

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

@@ -4,10 +4,19 @@ import { FormItemProps } from 'antd/es/form';
 
 import { RESET_TIMEOUT, SUCCESS_STATES, postConfigUpdateToAPI } from './constants';
 
-import { ToggleSwitchProps } from '../../../types/config-section';
 import { ServerStatusContext } from '../../../utils/server-status-context';
 import InfoTip from '../info-tip';
 
+interface ToggleSwitchProps {
+  apiPath: string;
+  fieldName: string;
+
+  checked?: boolean;
+  configPath?: string;
+  disabled?: boolean;
+  label?: string;
+  tip?: string;
+}
 
 export default function ToggleSwitch(props: ToggleSwitchProps) {
   const [submitStatus, setSubmitStatus] = useState<FormItemProps['validateStatus']>('');
@@ -34,7 +43,7 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
     resetTimer = null;
   }
 
-  const handleChange = async isChecked => {
+  const handleChange = async (isChecked: boolean) => {
     setSubmitStatus('validating');
     await postConfigUpdateToAPI({
       apiPath,
@@ -64,6 +73,7 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
           loading={submitStatus === 'validating'}
           onChange={handleChange}
           defaultChecked={checked}
+          checked={checked}
           checkedChildren="ON"  
           unCheckedChildren="OFF"
           disabled={disabled}
@@ -77,3 +87,11 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
     </div>
   ); 
 }
+
+ToggleSwitch.defaultProps = {
+  checked: false,
+  configPath: '',
+  disabled: false,
+  label: '',
+  tip: '',
+};

web/types/config-section.ts

@@ -1,24 +1,33 @@
 // TS types for elements on the Config pages
 
 export interface TextFieldProps {
-  handleResetValue?: (fieldName: string) => void;
+  apiPath: string;
   fieldName: string;
-  initialValues?: any;
+
-  placeholder?: string;
-  type?: string;
   configPath?: string;
-  required?: boolean;
   disabled?: boolean;
+  initialValue?: string;
+  label?: string;
+  maxLength?: number;
+  placeholder?: string;
+  required?: boolean;
+  tip?: string;
+  type?: string;
+  value?: string;
   onSubmit?: () => void;
   onBlur?: () => void;
   onChange?: () => void;
 }
 
 export interface ToggleSwitchProps {
+  apiPath: string;
   fieldName: string;
-  initialValues?: any;
+
+  checked?: boolean;
   configPath?: string;
   disabled?: boolean;
+  label?: string;
+  tip?: string;
 }
 
 // for dropdown

web/utils/server-status-context.tsx

@@ -1,7 +1,7 @@
 // TODO: add a notication after updating info that changes will take place either on a new stream or server restart. may be different for each field.
 
 import React, { useState, useEffect } from 'react';
-import PropTypes, { any } from 'prop-types';
+import PropTypes from 'prop-types';
 
 import { STATUS, fetchData, FETCH_INTERVAL, SERVER_CONFIG } from './apis';
 import { ConfigDetails, UpdateArgs } from '../types/config-section';
@@ -50,7 +50,7 @@ export const ServerStatusContext = React.createContext({
   ...initialServerStatusState,
   serverConfig: initialServerConfigState,
 
-  setFieldInConfigState: any,
+  setFieldInConfigState: (args: UpdateArgs) => { return args },
 });
 
 const ServerStatusProvider = ({ children }) => {
@@ -88,7 +88,6 @@ const ServerStatusProvider = ({ children }) => {
       ...config,
       [fieldName]: value,
     };
-    console.log({updatedConfig, fieldName, value, path})
     setConfig(updatedConfig);
   };