From 97b2e00eee2e14bd0cbd6bac7f4d714ddb10ef58 Mon Sep 17 00:00:00 2001 From: gingervitis Date: Fri, 29 Jan 2021 10:26:55 -0800 Subject: [PATCH] ts cleanup on some config components --- web/pages/components/config/constants.tsx | 4 -- .../config/edit-instance-details.tsx | 3 +- .../components/config/form-textfield.tsx | 43 ++++++++++++++++--- .../components/config/form-toggleswitch.tsx | 22 +++++++++- web/types/config-section.ts | 21 ++++++--- web/utils/server-status-context.tsx | 5 +-- 6 files changed, 77 insertions(+), 21 deletions(-) diff --git a/web/pages/components/config/constants.tsx b/web/pages/components/config/constants.tsx index 875b26700..401dd1fb8 100644 --- a/web/pages/components/config/constants.tsx +++ b/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; diff --git a/web/pages/components/config/edit-instance-details.tsx b/web/pages/components/config/edit-instance-details.tsx index eef32c3b9..3ec5129d2 100644 --- a/web/pages/components/config/edit-instance-details.tsx +++ b/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, diff --git a/web/pages/components/config/form-textfield.tsx b/web/pages/components/config/form-textfield.tsx index 75ecbe0f1..a8e3f94c4 100644 --- a/web/pages/components/config/form-textfield.tsx +++ b/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(''); @@ -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) { ); } + +TextField.defaultProps = { + configPath: '', + disabled: false, + initialValue: '', + label: '', + maxLength: null, + placeholder: '', + required: false, + tip: '', + type: TEXTFIELD_TYPE_TEXT, + value: '', + onSubmit: () => {}, + onBlur: () => {}, + onChange: () => {}, +}; diff --git a/web/pages/components/config/form-toggleswitch.tsx b/web/pages/components/config/form-toggleswitch.tsx index 24145abc0..bcf5427b5 100644 --- a/web/pages/components/config/form-toggleswitch.tsx +++ b/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(''); @@ -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) { ); } + +ToggleSwitch.defaultProps = { + checked: false, + configPath: '', + disabled: false, + label: '', + tip: '', +}; diff --git a/web/types/config-section.ts b/web/types/config-section.ts index f4d3e11dc..b82f34b06 100644 --- a/web/types/config-section.ts +++ b/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 diff --git a/web/utils/server-status-context.tsx b/web/utils/server-status-context.tsx index 1b27dedab..265942759 100644 --- a/web/utils/server-status-context.tsx +++ b/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); };