From 3af107e5a5f6ef8fd285931554c987b9b2dccdfa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0t=C4=9Bp=C3=A1n=20Gran=C3=A1t?=
 <granat.stepan@gmail.com>
Date: Fri, 12 Apr 2024 15:08:31 +0200
Subject: [PATCH] feat: show error when page is not responding

---
 .DS_Store                     | Bin 6148 -> 6148 bytes
 src/content/contentScript.ts  |   2 ++
 src/popup/TolgeeDetector.tsx  |   4 +++-
 src/popup/sendMessage.ts      |  13 +++++++++++--
 src/popup/useDetectorForm.tsx |  35 +++++++++++++++++-----------------
 5 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/.DS_Store b/.DS_Store
index 7cf018a83bf131817a380832783ca2aa4860cfcb..eb44a19a0abe9b08ac6f63ff5432668623e443a0 100644
GIT binary patch
delta 48
zcmZoMXfc@JFUrioz`)4BAi%(&%TUFT$xu)hT$H!jk$E{IBlBhrru(cD8)P=KbNuB8
E0R4Xp`2YX_

delta 73
zcmZoMXfc@JFUrEez`)4BAi%&-!cbfmT$GoSpO?N_k$E|zEJ%utA(5dN2vd=zL0UHR
NFx_X}%+B$b9{^(^5x4*V

diff --git a/src/content/contentScript.ts b/src/content/contentScript.ts
index 9b7c6ee..dd9691f 100644
--- a/src/content/contentScript.ts
+++ b/src/content/contentScript.ts
@@ -56,6 +56,8 @@ messages.startRuntimeListening();
 messages.listenRuntime('DETECT_TOLGEE', async () => {
   if (configuration) {
     messages.sendToPlugin('TOLGEE_CONFIG_LOADED', configuration);
+  } else {
+    messages.sendToPlugin('TOLGEE_CONFIG_NOT_LOADED');
   }
 });
 
diff --git a/src/popup/TolgeeDetector.tsx b/src/popup/TolgeeDetector.tsx
index fe4cb66..03deb90 100644
--- a/src/popup/TolgeeDetector.tsx
+++ b/src/popup/TolgeeDetector.tsx
@@ -47,7 +47,9 @@ export const TolgeeDetector = () => {
   if (error) {
     return (
       <Box width={POPUP_WIDTH} p={1} color="red">
-        <Typography variant="body2">Error: {error}</Typography>
+        <Typography variant="body2" fontWeight="bold">
+          Error: {error}
+        </Typography>
       </Box>
     );
   } else if (tolgeePresent === 'loading') {
diff --git a/src/popup/sendMessage.ts b/src/popup/sendMessage.ts
index faafcd6..e62d7fe 100644
--- a/src/popup/sendMessage.ts
+++ b/src/popup/sendMessage.ts
@@ -1,7 +1,16 @@
 export const sendMessage = (type: string, data?: any) => {
-  return new Promise((resolve) => {
+  return new Promise((resolve, reject) => {
     chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      chrome.tabs.sendMessage(tabs[0].id as number, { type, data }, resolve);
+      chrome.tabs.sendMessage(
+        tabs[0].id as number,
+        { type, data },
+        (response) => {
+          if (chrome.runtime.lastError) {
+            reject(chrome.runtime.lastError);
+          }
+          resolve(response);
+        }
+      );
     });
   });
 };
diff --git a/src/popup/useDetectorForm.tsx b/src/popup/useDetectorForm.tsx
index fde9662..df68cbb 100644
--- a/src/popup/useDetectorForm.tsx
+++ b/src/popup/useDetectorForm.tsx
@@ -34,6 +34,7 @@ type Action =
       type: 'CHANGE_LIB_CONFIG';
       payload: { libData: LibConfig | null; frameId: number | null };
     }
+  | { type: 'SET_ERROR'; payload: string }
   | { type: 'SET_APPLIED_VALUES'; payload: Values | null }
   | { type: 'SET_CREDENTIALS_CHECK'; payload: CredentialsCheck }
   | { type: 'LOAD_STORED_VALUES'; payload: Values | null }
@@ -73,6 +74,12 @@ export const useDetectorForm = () => {
               : 'present',
         };
       }
+      case 'SET_ERROR':
+        return {
+          ...state,
+          tolgeePresent: 'not_present',
+          error: action.payload,
+        };
       case 'SET_APPLIED_VALUES':
         return {
           ...state,
@@ -152,25 +159,14 @@ export const useDetectorForm = () => {
   }, [appliedValues]);
 
   useEffect(() => {
-    sendMessage('DETECT_TOLGEE');
+    sendMessage('DETECT_TOLGEE').catch(() => {
+      dispatch({
+        type: 'SET_ERROR',
+        payload: 'No access to this page, try to refresh',
+      });
+    });
   }, []);
 
-  // timeout when Tolgee is not detected
-  useEffect(() => {
-    if (!state.libConfig) {
-      const timer = setTimeout(
-        () =>
-          dispatch({
-            type: 'CHANGE_LIB_CONFIG',
-            payload: { frameId: null, libData: null },
-          }),
-        300
-      );
-      return () => clearTimeout(timer);
-    }
-    return undefined;
-  }, [state.libConfig]);
-
   // after tolgee config is loaded
   // get applied values and stored values
   const onLibConfigChange = async () => {
@@ -203,6 +199,11 @@ export const useDetectorForm = () => {
           type: 'CHANGE_LIB_CONFIG',
           payload: { libData: data, frameId: frameId || null },
         });
+      } else if (type === 'TOLGEE_CONFIG_NOT_LOADED') {
+        dispatch({
+          type: 'CHANGE_LIB_CONFIG',
+          payload: { libData: null, frameId: null },
+        });
       }
     };
     chrome.runtime.onMessage.addListener(listener);