cleanup

web/pages/components/config/edit-tags.tsx

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

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

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

web/types/config-section.ts

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