From 9589c8e11a5aa638042c69a70dde6eec8dfa538d Mon Sep 17 00:00:00 2001
From: Meisam <39205857+MFTabriz@users.noreply.github.com>
Date: Sat, 11 Sep 2021 00:08:15 +0200
Subject: [PATCH] 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 | 8 ++++++--
 web/pages/config-chat.tsx                   | 5 +++--
 web/utils/config-constants.tsx              | 4 ++--
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/web/components/config/form-toggleswitch.tsx b/web/components/config/form-toggleswitch.tsx
index 1a05ad65b..f162d0a57 100644
--- a/web/components/config/form-toggleswitch.tsx
+++ b/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: '',
diff --git a/web/pages/config-chat.tsx b/web/pages/config-chat.tsx
index 9da4134c1..bc22ef5a7 100644
--- a/web/pages/config-chat.tsx
+++ b/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
diff --git a/web/utils/config-constants.tsx b/web/utils/config-constants.tsx
index 035e0e570..df4cbc3d1 100644
--- a/web/utils/config-constants.tsx
+++ b/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,
 };