From 731f91122bc1d5c9ece4d83bae34b17522b7e78a Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 9 Mar 2023 13:20:01 +0800
Subject: [PATCH] Fix toggle values for settings for translation

---
 src/pages/settings.jsx | 79 +++++++++++++++++++++++-------------------
 src/utils/states.js    | 42 +++++++++++-----------
 2 files changed, 66 insertions(+), 55 deletions(-)

diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx
index ead82cd5..b8be2c6d 100644
--- a/src/pages/settings.jsx
+++ b/src/pages/settings.jsx
@@ -159,46 +159,55 @@ function Settings({ onClose }) {
                   type="checkbox"
                   checked={snapStates.settings.contentTranslation}
                   onChange={(e) => {
-                    states.settings.contentTranslation = e.target.checked;
+                    const { checked } = e.target;
+                    states.settings.contentTranslation = checked;
+                    if (!checked) {
+                      states.settings.contentTranslationTargetLanguage = null;
+                    }
                   }}
                 />{' '}
                 Post translation
               </label>
-              {snapStates.settings.contentTranslation && (
-                <div class="sub-section">
-                  <label>
-                    Translate to{' '}
-                    <select
-                      value={targetLanguage}
-                      onChange={(e) => {
-                        states.settings.contentTranslationTargetLanguage =
-                          e.target.value || null;
-                      }}
+              <div
+                class={`sub-section ${
+                  !snapStates.settings.contentTranslation
+                    ? 'more-insignificant'
+                    : ''
+                }`}
+              >
+                <label>
+                  Translate to{' '}
+                  <select
+                    value={targetLanguage || ''}
+                    disabled={!snapStates.settings.contentTranslation}
+                    onChange={(e) => {
+                      states.settings.contentTranslationTargetLanguage =
+                        e.target.value || null;
+                    }}
+                  >
+                    <option value="">
+                      System language ({systemTargetLanguageText})
+                    </option>
+                    <option disabled>──────────</option>
+                    {targetLanguages.map((lang) => (
+                      <option value={lang.code}>{lang.name}</option>
+                    ))}
+                  </select>
+                </label>
+                <p>
+                  <small>
+                    Note: This feature uses an external API to translate,
+                    powered by{' '}
+                    <a
+                      href="https://github.com/thedaviddelta/lingva-translate"
+                      target="_blank"
                     >
-                      <option value="">
-                        System language ({systemTargetLanguageText})
-                      </option>
-                      <option disabled>──────────</option>
-                      {targetLanguages.map((lang) => (
-                        <option value={lang.code}>{lang.name}</option>
-                      ))}
-                    </select>
-                  </label>
-                  <p>
-                    <small>
-                      Note: This feature uses an external API to translate,
-                      powered by{' '}
-                      <a
-                        href="https://github.com/thedaviddelta/lingva-translate"
-                        target="_blank"
-                      >
-                        Lingva Translate
-                      </a>
-                      .
-                    </small>
-                  </p>
-                </div>
-              )}
+                      Lingva Translate
+                    </a>
+                    .
+                  </small>
+                </p>
+              </div>
             </li>
             <li>
               <button
diff --git a/src/utils/states.js b/src/utils/states.js
index c1bf0006..bedb2999 100644
--- a/src/utils/states.js
+++ b/src/utils/states.js
@@ -56,26 +56,28 @@ subscribeKey(states, 'notificationsLast', (v) => {
   console.log('CHANGE', v);
   store.account.set('notificationsLast', states.notificationsLast);
 });
-subscribe(states, (v) => {
-  console.debug('STATES change', v);
-  const [action, path, value, prevValue] = v[0];
-  if (path.join('.') === 'settings.boostsCarousel') {
-    store.account.set('settings-boostsCarousel', !!value);
-  }
-  if (path.join('.') === 'settings.shortcutsColumnsMode') {
-    store.account.set('settings-shortcutsColumnsMode', !!value);
-  }
-  if (path.join('.') === 'settings.shortcutsViewMode') {
-    store.account.set('settings-shortcutsViewMode', value);
-  }
-  if (path.join('.') === 'settings.contentTranslation') {
-    store.account.set('settings-contentTranslation', !!value);
-  }
-  if (path.join('.') === 'settings.contentTranslationTargetLanguage') {
-    store.account.set('settings-contentTranslationTargetLanguage', value);
-  }
-  if (path?.[0] === 'shortcuts') {
-    store.account.set('shortcuts', states.shortcuts);
+subscribe(states, (changes) => {
+  console.debug('STATES change', changes);
+  for (const [action, path, value, prevValue] of changes) {
+    if (path.join('.') === 'settings.boostsCarousel') {
+      store.account.set('settings-boostsCarousel', !!value);
+    }
+    if (path.join('.') === 'settings.shortcutsColumnsMode') {
+      store.account.set('settings-shortcutsColumnsMode', !!value);
+    }
+    if (path.join('.') === 'settings.shortcutsViewMode') {
+      store.account.set('settings-shortcutsViewMode', value);
+    }
+    if (path.join('.') === 'settings.contentTranslation') {
+      store.account.set('settings-contentTranslation', !!value);
+    }
+    if (path.join('.') === 'settings.contentTranslationTargetLanguage') {
+      console.log('SET', value);
+      store.account.set('settings-contentTranslationTargetLanguage', value);
+    }
+    if (path?.[0] === 'shortcuts') {
+      store.account.set('shortcuts', states.shortcuts);
+    }
   }
 });