From c7719b7ad0668d629725613d5137d74d1404973c Mon Sep 17 00:00:00 2001
From: Manuel Ruwe <manuel.ruwe@bluewin.ch>
Date: Sun, 11 Dec 2022 20:46:18 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20conditional=20useEffect=20?=
 =?UTF-8?q?causing=20crash?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../IconSelector/IconSelector.tsx             | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/Dashboard/Modals/EditService/Tabs/AppereanceTab/IconSelector/IconSelector.tsx b/src/components/Dashboard/Modals/EditService/Tabs/AppereanceTab/IconSelector/IconSelector.tsx
index d61ae220c..4d4e10b2d 100644
--- a/src/components/Dashboard/Modals/EditService/Tabs/AppereanceTab/IconSelector/IconSelector.tsx
+++ b/src/components/Dashboard/Modals/EditService/Tabs/AppereanceTab/IconSelector/IconSelector.tsx
@@ -45,6 +45,24 @@ export const IconSelector = ({
   const [searchTerm, setSearchTerm] = useState<string>('');
   const { classes } = useStyles();
 
+  const [debouncedValue] = useDebouncedValue(form.values.name, 500);
+
+  useEffect(() => {
+    if (allowServiceNamePropagation !== true) {
+      return;
+    }
+
+    const matchingDebouncedIcon = data?.find(
+      (x) => replaceCharacters(x.fileName.split('.')[0]) === replaceCharacters(form.values.name)
+    );
+
+    if (!matchingDebouncedIcon) {
+      return;
+    }
+
+    form.setFieldValue('appearance.iconUrl', matchingDebouncedIcon.url);
+  }, [form.values.name]);
+
   if (isLoading || !data) {
     return <Loader />;
   }
@@ -58,24 +76,6 @@ export const IconSelector = ({
   const isTruncated =
     slicedFilteredItems.length > 0 && slicedFilteredItems.length !== filteredItems.length;
 
-  const [debouncedValue] = useDebouncedValue(form.values.name, 500);
-
-  useEffect(() => {
-    if (allowServiceNamePropagation !== true) {
-      return;
-    }
-
-    const matchingDebouncedIcon = data.find(
-      (x) => replaceCharacters(x.fileName.split('.')[0]) === replaceCharacters(debouncedValue)
-    );
-
-    if (!matchingDebouncedIcon) {
-      return;
-    }
-
-    form.setFieldValue('appearance.iconUrl', matchingDebouncedIcon.url);
-  }, [debouncedValue]);
-
   return (
     <Popover width={310}>
       <Popover.Target>