From 72468e78e656fd7d76a5e1c855e8e947130528fc Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Sun, 9 Oct 2022 19:11:33 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20Improve=20Error=20Handling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/settings/InactiveSettingsCard.tsx |  2 +-
 src/components/settings/RefreshIntervalCard.tsx  |  2 +-
 src/components/useAuth.tsx                       |  9 ++++++++-
 src/components/useFeature.tsx                    | 11 +++++++++--
 src/components/user/UserList.tsx                 |  2 +-
 src/views/HomeView.tsx                           |  2 +-
 src/views/TickerView.tsx                         |  2 +-
 7 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/components/settings/InactiveSettingsCard.tsx b/src/components/settings/InactiveSettingsCard.tsx
index 6aba75f2..19efab5d 100644
--- a/src/components/settings/InactiveSettingsCard.tsx
+++ b/src/components/settings/InactiveSettingsCard.tsx
@@ -31,7 +31,7 @@ const InactiveSettingsCard: FC = () => {
     )
   }
 
-  if (error || data === undefined) {
+  if (error || data === undefined || data.status === 'error') {
     return <ErrorView>Unable to fetch inactive settings from server.</ErrorView>
   }
 
diff --git a/src/components/settings/RefreshIntervalCard.tsx b/src/components/settings/RefreshIntervalCard.tsx
index 040f7a1b..4272ff82 100644
--- a/src/components/settings/RefreshIntervalCard.tsx
+++ b/src/components/settings/RefreshIntervalCard.tsx
@@ -22,7 +22,7 @@ const RefreshIntervalCard: FC = () => {
     )
   }
 
-  if (error || data === undefined) {
+  if (error || data === undefined || data.status === 'error') {
     return (
       <ErrorView>
         Unable to fetch refresh interval setting from server.
diff --git a/src/components/useAuth.tsx b/src/components/useAuth.tsx
index bbcf9265..4684fac4 100644
--- a/src/components/useAuth.tsx
+++ b/src/components/useAuth.tsx
@@ -55,7 +55,14 @@ export function AuthProvider({
       return
     }
 
-    const user = decode(token) as User
+    let user: User
+    try {
+      user = decode(token) as User
+    } catch (error) {
+      setError(error)
+      setLoadingInitial(false)
+      return
+    }
     const now = Math.floor(new Date().getTime() / 1000)
 
     if (user.exp > now) {
diff --git a/src/components/useFeature.tsx b/src/components/useFeature.tsx
index fbb72ec6..be959bcd 100644
--- a/src/components/useFeature.tsx
+++ b/src/components/useFeature.tsx
@@ -27,15 +27,22 @@ export function FeatureProvider({
   const { getFeatures } = useFeatureApi(token)
 
   useEffect(() => {
+    if (token === '') {
+      setLoadingInitial(false)
+      return
+    }
+
     getFeatures()
       .then(response => {
-        setFeatures(response.data.features)
+        if (response.status === 'success') {
+          setFeatures(response.data.features)
+        }
       })
       .finally(() => {
         setLoadingInitial(false)
       })
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [token])
 
   const memoedValue = useMemo(
     () => ({
diff --git a/src/components/user/UserList.tsx b/src/components/user/UserList.tsx
index 05afcd41..756c2529 100644
--- a/src/components/user/UserList.tsx
+++ b/src/components/user/UserList.tsx
@@ -20,7 +20,7 @@ const UserList: FC = () => {
     )
   }
 
-  if (error || data === undefined) {
+  if (error || data === undefined || data.status === 'error') {
     return <ErrorView>Unable to fetch users from server.</ErrorView>
   }
 
diff --git a/src/views/HomeView.tsx b/src/views/HomeView.tsx
index 5755078d..ef21da7e 100644
--- a/src/views/HomeView.tsx
+++ b/src/views/HomeView.tsx
@@ -29,7 +29,7 @@ const HomeView: FC = () => {
     )
   }
 
-  if (error || data === undefined) {
+  if (error || data === undefined || data.status === 'error') {
     return (
       <Layout>
         <ErrorView>Unable to fetch tickers from server.</ErrorView>
diff --git a/src/views/TickerView.tsx b/src/views/TickerView.tsx
index 12e87a2e..cc713f2a 100644
--- a/src/views/TickerView.tsx
+++ b/src/views/TickerView.tsx
@@ -26,7 +26,7 @@ const TickerView: FC = () => {
     return <Loader size="large" />
   }
 
-  if (error || data === undefined) {
+  if (error || data === undefined || data.status === 'error') {
     return <ErrorView>Unable to fetch the ticker from server.</ErrorView>
   }