From b9c7857c5bb16d024fed6544eebf0ef6cd10390f Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sat, 14 Sep 2024 13:26:50 +0100
Subject: feature(mobile): Add proper error handling for server errors

---
 apps/mobile/app/dashboard/(tabs)/lists.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

(limited to 'apps/mobile/app/dashboard/(tabs)/lists.tsx')

diff --git a/apps/mobile/app/dashboard/(tabs)/lists.tsx b/apps/mobile/app/dashboard/(tabs)/lists.tsx
index c7e3a874..fa97f67a 100644
--- a/apps/mobile/app/dashboard/(tabs)/lists.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/lists.tsx
@@ -2,9 +2,11 @@ import { useEffect, useRef, useState } from "react";
 import { FlatList, Pressable, Text, View } from "react-native";
 import * as Haptics from "expo-haptics";
 import { Link } from "expo-router";
+import FullPageError from "@/components/FullPageError";
 import NewListModal from "@/components/lists/NewListModal";
 import { TailwindResolver } from "@/components/TailwindResolver";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
+import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import PageTitle from "@/components/ui/PageTitle";
 import { api } from "@/lib/trpc";
 import { BottomSheetModal } from "@gorhom/bottom-sheet";
@@ -65,7 +67,7 @@ function traverseTree(
 
 export default function Lists() {
   const [refreshing, setRefreshing] = useState(false);
-  const { data: lists, isPending } = useBookmarkLists();
+  const { data: lists, isPending, error, refetch } = useBookmarkLists();
   const [showChildrenOf, setShowChildrenOf] = useState<Record<string, boolean>>(
     {},
   );
@@ -76,9 +78,12 @@ export default function Lists() {
     setRefreshing(isPending);
   }, [isPending]);
 
+  if (error) {
+    return <FullPageError error={error.message} onRetry={() => refetch()} />;
+  }
+
   if (!lists) {
-    // Add spinner
-    return <View />;
+    return <FullPageSpinner />;
   }
 
   const onRefresh = () => {
-- 
cgit v1.2.3-70-g09d2