🚸 Improve Error Handling

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>
   }
 

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.

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) {

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(
     () => ({

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>
   }
 

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>

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>
   }