From 4253ec944fc8aa338b55a06ae1d2fbf604642365 Mon Sep 17 00:00:00 2001
From: Gleb Surinov <glebovsky@gmail.com>
Date: Mon, 29 Jul 2024 05:20:15 +0600
Subject: [PATCH] Fidgets live update (#260)

---
 .../organisms/FidgetSettingsEditor.tsx          | 17 ++++++++++++-----
 src/common/fidgets/FidgetWrapper.tsx            |  9 +++++++--
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/common/components/organisms/FidgetSettingsEditor.tsx b/src/common/components/organisms/FidgetSettingsEditor.tsx
index 1bc33e4f..c0e9b178 100644
--- a/src/common/components/organisms/FidgetSettingsEditor.tsx
+++ b/src/common/components/organisms/FidgetSettingsEditor.tsx
@@ -28,7 +28,7 @@ export type FidgetSettingsEditorProps = {
   fidgetId: string;
   readonly properties: FidgetProperties;
   settings: FidgetSettings;
-  onSave: (settings: FidgetSettings) => void;
+  onSave: (settings: FidgetSettings, shouldUnselect?: boolean) => void;
   unselect: () => void;
   removeFidget: (fidgetId: string) => void;
 };
@@ -97,7 +97,8 @@ const FidgetSettingsGroup: React.FC<{
   fields: FidgetFieldConfig[];
   state: FidgetSettings;
   setState: (state: FidgetSettings) => void;
-}> = ({ fields, state, setState, fidgetId }) => {
+  onSave: (state: FidgetSettings) => void;
+}> = ({ fields, state, setState, onSave, fidgetId }) => {
   return (
     <>
       {fields.map((field, i) => (
@@ -107,10 +108,13 @@ const FidgetSettingsGroup: React.FC<{
           id={`${fidgetId}-${i}-${field.fieldName}`}
           value={state[field.fieldName]}
           onChange={(val) => {
-            setState({
+            const data = {
               ...state,
               [field.fieldName]: val,
-            });
+            };
+
+            setState(data);
+            onSave(data);
           }}
           hide={field.disabledIf && field.disabledIf(state)}
         />
@@ -136,7 +140,7 @@ export const FidgetSettingsEditor: React.FC<FidgetSettingsEditorProps> = ({
 
   const _onSave = (e) => {
     e.preventDefault();
-    onSave(state);
+    onSave(state, true);
     analytics.track(AnalyticsEvent.EDIT_FIDGET, {
       fidgetType: properties.fidgetName,
     });
@@ -194,6 +198,7 @@ export const FidgetSettingsEditor: React.FC<FidgetSettingsEditorProps> = ({
                 fields={groupedFields.settings}
                 state={state}
                 setState={setState}
+                onSave={onSave}
               />
             </TabsContent>
             {groupedFields.style.length > 0 && (
@@ -203,6 +208,7 @@ export const FidgetSettingsEditor: React.FC<FidgetSettingsEditorProps> = ({
                   fields={groupedFields.style}
                   state={state}
                   setState={setState}
+                  onSave={onSave}
                 />
               </TabsContent>
             )}
@@ -213,6 +219,7 @@ export const FidgetSettingsEditor: React.FC<FidgetSettingsEditorProps> = ({
                   fields={groupedFields.code}
                   state={state}
                   setState={setState}
+                  onSave={onSave}
                 />
               </TabsContent>
             )}
diff --git a/src/common/fidgets/FidgetWrapper.tsx b/src/common/fidgets/FidgetWrapper.tsx
index eefae89d..412e17ae 100644
--- a/src/common/fidgets/FidgetWrapper.tsx
+++ b/src/common/fidgets/FidgetWrapper.tsx
@@ -88,7 +88,10 @@ export function FidgetWrapper({
 
   const [doubleCheck, setDoubleCheck] = useState(false);
 
-  const onSave = async (newSettings: FidgetSettings) => {
+  const onSave = async (
+    newSettings: FidgetSettings,
+    shouldUnselect?: boolean,
+  ) => {
     try {
       await saveConfig({
         ...bundle.config,
@@ -98,7 +101,9 @@ export function FidgetWrapper({
       toast.error("Failed to save fidget settings", { duration: 1000 });
     }
 
-    unselect();
+    if (shouldUnselect) {
+      unselect();
+    }
   };
 
   function unselect() {