rename the "Disable chat" switch to a simple "Chat" (#286)

* change chat config lable

* reverse the chat enable UI

* add reversed to toggle switch props

web/components/config/form-toggleswitch.tsx

@@ -22,6 +22,7 @@ interface ToggleSwitchProps {
 
   apiPath?: string;
   checked?: boolean;
+  reversed?: boolean;
   configPath?: string;
   disabled?: boolean;
   label?: string;
@@ -40,6 +41,7 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
   const {
     apiPath,
     checked,
+    reversed = false,
     configPath = '',
     disabled = false,
     fieldName,
@@ -58,12 +60,13 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
   const handleChange = async (isChecked: boolean) => {
     if (useSubmit) {
       setSubmitStatus(createInputStatus(STATUS_PROCESSING));
+      const isCheckedSend = reversed ? !isChecked : isChecked;
 
       await postConfigUpdateToAPI({
         apiPath,
-        data: { value: isChecked },
+        data: { value: isCheckedSend },
         onSuccess: () => {
-          setFieldInConfigState({ fieldName, value: isChecked, path: configPath });
+          setFieldInConfigState({ fieldName, value: isCheckedSend, path: configPath });
           setSubmitStatus(createInputStatus(STATUS_SUCCESS));
         },
         onError: (message: string) => {
@@ -109,6 +112,7 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
 ToggleSwitch.defaultProps = {
   apiPath: '',
   checked: false,
+  reversed: false,
   configPath: '',
   disabled: false,
   label: '',

web/pages/config-chat.tsx

@@ -36,7 +36,7 @@ export default function ConfigChat() {
   };
 
   function handleChatDisableChange(disabled: boolean) {
-    handleFieldChange({ fieldName: 'chatDisabled', value: disabled });
+    handleFieldChange({ fieldName: 'chatDisabled', value: !disabled });
   }
 
   function resetForbiddenUsernameState() {
@@ -95,7 +95,8 @@ export default function ConfigChat() {
         <ToggleSwitch
           fieldName="chatDisabled"
           {...FIELD_PROPS_DISABLE_CHAT}
-          checked={formDataValues.chatDisabled}
+          checked={!formDataValues.chatDisabled}
+          reversed
           onChange={handleChatDisableChange}
         />
         <TextFieldWithSubmit

web/utils/config-constants.tsx

@@ -178,8 +178,8 @@ export const DEFAULT_VARIANT_STATE: VideoVariant = {
 export const FIELD_PROPS_DISABLE_CHAT = {
   apiPath: API_CHAT_DISABLE,
   configPath: '',
-  label: 'Disable chat',
-  tip: 'Disable chat functionality from your Owncast server.',
+  label: 'Chat',
+  tip: 'Turn the chat functionality on/off on your Owncast server.',
   useSubmit: true,
 };