fix: add error to applications list of something goes wrong and no da…

…ta in cache
island-is · Sep 11, 2024 · 8b2829f · 8b2829f
1 parent 32d3ffd
commit 8b2829f
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 34 deletions.
diff --git a/apps/native/app/src/screens/applications/components/applications-list.tsx b/apps/native/app/src/screens/applications/components/applications-list.tsx
@@ -1,4 +1,11 @@
-import { Badge, EmptyList, StatusCard, StatusCardSkeleton, TopLine } from '@ui'
+import {
+  Badge,
+  EmptyList,
+  Problem,
+  StatusCard,
+  StatusCardSkeleton,
+  TopLine,
+} from '@ui'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { useIntl } from 'react-intl'
 import {
@@ -53,6 +60,8 @@ export const ApplicationsList = ({
     [applicationsRes],
   )
 
+  const showError = applicationsRes.error && !applicationsRes.data
+
   const onRefresh = useCallback(async () => {
     setRefetching(true)
     onRefetch(true)
@@ -179,30 +188,36 @@ export const ApplicationsList = ({
   ]) as FlatListItem[]
 
   return (
-    <>
-      <Animated.FlatList
-        ref={flatListRef}
-        contentContainerStyle={{
-          paddingBottom: theme.spacing[2],
-          paddingTop: theme.spacing[2],
-        }}
-        refreshControl={
-          <RefreshControl refreshing={refetching} onRefresh={onRefresh} />
-        }
-        scrollEventThrottle={16}
-        scrollToOverflowEnabled={true}
-        onScroll={Animated.event(
-          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
-          {
-            useNativeDriver: true,
-          },
-        )}
-        data={data}
-        keyExtractor={keyExtractor}
-        renderItem={renderItem}
-      />
-      <TopLine scrollY={scrollY} />
-      <BottomTabsIndicator index={1} total={5} />
-    </>
+    <View>
+      {showError ? (
+        <Problem withContainer />
+      ) : (
+        <>
+          <Animated.FlatList
+            ref={flatListRef}
+            contentContainerStyle={{
+              paddingBottom: theme.spacing[2],
+              paddingTop: theme.spacing[2],
+            }}
+            refreshControl={
+              <RefreshControl refreshing={refetching} onRefresh={onRefresh} />
+            }
+            scrollEventThrottle={16}
+            scrollToOverflowEnabled={true}
+            onScroll={Animated.event(
+              [{ nativeEvent: { contentOffset: { y: scrollY } } }],
+              {
+                useNativeDriver: true,
+              },
+            )}
+            data={data}
+            keyExtractor={keyExtractor}
+            renderItem={renderItem}
+          />
+          <TopLine scrollY={scrollY} />
+          <BottomTabsIndicator index={1} total={5} />
+        </>
+      )}
+    </View>
   )
 }
diff --git a/apps/native/app/src/ui/lib/problem/problem-template.tsx b/apps/native/app/src/ui/lib/problem/problem-template.tsx
@@ -83,15 +83,17 @@ const Host = styled.View<{
   min-height: 280px;
 `
 
-const Tag = styled(Typography)<{
+const Tag = styled(View)<{
   backgroundColor: Colors
-  color?: Colors
 }>`
   background-color: ${({ backgroundColor, theme }) =>
     theme.color[backgroundColor]};
   padding: ${({ theme }) => theme.spacing[1]}px;
   border-radius: ${({ theme }) => theme.border.radius.large};
   overflow: hidden;
+`
+
+const TagText = styled(Typography)<{ color?: Colors }>`
   ${({ color, theme }) => color && `color: ${theme.color[color]};`}
 `
 
@@ -119,12 +121,10 @@ export const ProblemTemplate = ({
   return (
     <Host borderColor={borderColor} noContainer={withContainer}>
       {tag && (
-        <Tag
-          variant="eyebrow"
-          backgroundColor={tagBackgroundColor}
-          color={tagColor}
-        >
-          {tag}
+        <Tag backgroundColor={tagBackgroundColor}>
+          <TagText variant="eyebrow" color={tagColor}>
+            {tag}
+          </TagText>
         </Tag>
       )}
       {showIcon && <Icon source={getIcon(variant)} />}