From a7758e0bd15b441ef93a787d7ec3af0aa5f49f65 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Wed, 12 Aug 2020 16:50:43 +0300
Subject: [PATCH] move communication with core in useProfileSettingsInputs

---
 src/routes/Settings/Settings.js               | 58 ++++++++-----------
 .../Settings/useProfileSettingsInputs.js      | 18 +++++-
 2 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js
index 0b3999ede..941ecb131 100644
--- a/src/routes/Settings/Settings.js
+++ b/src/routes/Settings/Settings.js
@@ -21,24 +21,28 @@ const Settings = () => {
     const { routeFocused } = useRouteFocused();
     const profile = useProfile();
     const streamingServer = useStreamingServer();
+    const {
+        interfaceLanguageSelect,
+        subtitlesLanguageSelect,
+        subtitlesSizeSelect,
+        subtitlesTextColorInput,
+        subtitlesBackgroundColorInput,
+        subtitlesOutlineColorInput,
+        bingeWatchingCheckbox,
+        playInBackgroundCheckbox,
+        playInExternalPlayerCheckbox,
+        hardwareDecodingCheckbox,
+        streamingServerUrlInput
+    } = useProfileSettingsInputs(profile);
+    const {
+        cacheSizeSelect,
+        torrentProfileSelect
+    } = useStreamingServerSettingsInputs(streamingServer);
     const [editServerUrlModalOpen, openEditServerUrlModal, closeEditServerUrlModal] = useBinaryState(false);
     const editServerUrlInputRef = React.useRef(null);
     const editServerUrlOnSubmit = React.useCallback(() => {
-        if (editServerUrlInputRef.current !== null) {
-            core.dispatch({
-                action: 'Ctx',
-                args: {
-                    action: 'UpdateSettings',
-                    args: {
-                        ...profile.settings,
-                        streaming_server_url: editServerUrlInputRef.current.value
-                    }
-                }
-            });
-            if (typeof closeEditServerUrlModal === 'function') {
-                closeEditServerUrlModal();
-            }
-        }
+        streamingServerUrlInput.onChange(editServerUrlInputRef.current.value);
+        closeEditServerUrlModal();
     }, []);
     const editServerUrlModalButtons = React.useMemo(() => {
         return [
@@ -50,29 +54,13 @@ const Settings = () => {
                 }
             },
             {
-                label: 'Edit',
+                label: 'Submit',
                 props: {
                     onClick: editServerUrlOnSubmit,
                 }
             }
         ];
-    }, [editServerUrlOnSubmit]);
-    const {
-        interfaceLanguageSelect,
-        subtitlesLanguageSelect,
-        subtitlesSizeSelect,
-        subtitlesTextColorInput,
-        subtitlesBackgroundColorInput,
-        subtitlesOutlineColorInput,
-        bingeWatchingCheckbox,
-        playInBackgroundCheckbox,
-        playInExternalPlayerCheckbox,
-        hardwareDecodingCheckbox
-    } = useProfileSettingsInputs(profile);
-    const {
-        cacheSizeSelect,
-        torrentProfileSelect
-    } = useStreamingServerSettingsInputs(streamingServer);
+    }, []);
     const logoutButtonOnClick = React.useCallback(() => {
         core.dispatch({
             action: 'Ctx',
@@ -392,7 +380,7 @@ const Settings = () => {
                                 <div className={styles['label']}>Url</div>
                             </div>
                             <div className={classnames(styles['option-input-container'], styles['edit-container'])}>
-                                <div className={styles['label']}>{profile.settings.streaming_server_url}</div>
+                                <div className={styles['label']}>{streamingServerUrlInput.value}</div>
                                 <Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Edit'} onClick={openEditServerUrlModal}>
                                     <Icon className={styles['icon']} icon={'ic_settings'} />
                                 </Button>
@@ -441,7 +429,7 @@ const Settings = () => {
                             ref={editServerUrlInputRef}
                             className={styles['server-url-input']}
                             type={'text'}
-                            defaultValue={profile.settings.streaming_server_url}
+                            defaultValue={streamingServerUrlInput.value}
                             placeholder={'Enter a streaming server url'}
                             onSubmit={editServerUrlOnSubmit}
                         />
diff --git a/src/routes/Settings/useProfileSettingsInputs.js b/src/routes/Settings/useProfileSettingsInputs.js
index dc89c2a2a..1ee839453 100644
--- a/src/routes/Settings/useProfileSettingsInputs.js
+++ b/src/routes/Settings/useProfileSettingsInputs.js
@@ -182,6 +182,21 @@ const useProfileSettingsInputs = (profile) => {
             });
         }
     }), [profile.settings]);
+    const streamingServerUrlInput = useDeepEqualMemo(() => ({
+        value: profile.settings.streaming_server_url,
+        onChange: (value) => {
+            core.transport.dispatch({
+                action: 'Ctx',
+                args: {
+                    action: 'UpdateSettings',
+                    args: {
+                        ...profile.settings,
+                        streaming_server_url: value
+                    }
+                }
+            });
+        }
+    }), [profile.settings]);
     return {
         interfaceLanguageSelect,
         subtitlesLanguageSelect,
@@ -192,7 +207,8 @@ const useProfileSettingsInputs = (profile) => {
         bingeWatchingCheckbox,
         playInBackgroundCheckbox,
         playInExternalPlayerCheckbox,
-        hardwareDecodingCheckbox
+        hardwareDecodingCheckbox,
+        streamingServerUrlInput
     };
 };