feat: add refresh icon and no comics message to local library view

src/pages/comiclist.tsx

@@ -21,19 +21,8 @@ function Remote() {
 export default function ComicList() {
   return (
     <Tab.Navigator
-      screenOptions={({ navigation, route }) => {
+      screenOptions={({ route }) => {
         return {
-          headerRight: () => (
-            <View style={styles.padding}>
-              <TouchableOpacity
-                onPress={() => {
-                  navigation.push("OldHome");
-                }}
-              >
-                <MaterialCommunityIcons name="cog" size={24} style={{ color: "black" }} />
-              </TouchableOpacity>
-            </View>
-          ),
           tabBarIcon: (({ focused, size, color }) => {
             const iconName = route.name === 'Local'
               ? (focused ? 'download' : 'download-outline')
@@ -48,9 +37,3 @@ export default function ComicList() {
     </Tab.Navigator>
   );
 }
-
-const styles = StyleSheet.create({
-  padding: {
-    paddingEnd: 16,
-  },
-});

src/pages/comiclist/Local.tsx

@@ -1,5 +1,5 @@
-import { FC } from "react"
-import { ActivityIndicator, FlatList, StyleSheet, Text, View } from "react-native"
+import { FC, useEffect } from "react"
+import { ActivityIndicator, FlatList, StyleSheet, Text, TouchableOpacity, View } from "react-native"
 import Touchable from "../../components/Touchable";
 import ComicCard from '../../components/ComicCard';
 import { ComicMetadata, useLocalComics } from "../../provider"
@@ -9,6 +9,8 @@ import { TabParamList } from "../comiclist";
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import { RootStackParamList } from "../../../App";
 import { LocalComicId } from "../../provider/local";
+import { useQueryClient } from "react-query";
+import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
 
 export type ComicListNavigationProp = CompositeNavigationProp<
     BottomTabNavigationProp<TabParamList, 'Local'>,
@@ -24,9 +26,36 @@ const Comic: FC<ComicMetadata & { onClick: () => void }> = (props) => {
 }
 
 export default function LocalComicList() {
+    const client = useQueryClient();
+    const navigator = useNavigation<ComicListNavigationProp>();
     const { data, error, isLoading } = useLocalComics();
     const navigation = useNavigation<ComicListNavigationProp>();
 
+    useEffect(() => {
+        navigator.setOptions({
+            headerRight: () => <View style={styles.iconRow}>
+                <View style={styles.padding}>
+                    <TouchableOpacity
+                        onPress={() => {
+                            navigation.push("OldHome");
+                        }}
+                    >
+                        <MaterialCommunityIcons name="cog" size={24} style={{ color: "black" }} />
+                    </TouchableOpacity>
+                </View>
+                <View style={styles.padding}>
+                    <TouchableOpacity
+                        onPress={() => {
+                            client.invalidateQueries('localComics');
+                        }}
+                    >
+                        <MaterialCommunityIcons name="refresh" size={24} style={{ color: "black" }} />
+                    </TouchableOpacity>
+                </View>
+            </View>
+        });
+    }, [client]);
+
     if (isLoading) return <ActivityIndicator />;
     if (error) return <Text>Failed to load comic: {error.toString()}</Text>;
     if (!data) return <Text>Whoops! We couldn't find that comic :/</Text>;
@@ -38,11 +67,32 @@ export default function LocalComicList() {
         });
     }
 
+    if (data.length === 0) {
+        return <View style={styles.center}>
+            <MaterialIcons name='sentiment-dissatisfied' size={32} color='#666' />
+            <Text style={styles.noComicsText}>You don't have any comics downloaded</Text>
+        </View>
+    }
+
     return <FlatList data={data} renderItem={({ item }) => <Comic onClick={() => openComic(item.id)} {...item} />} keyExtractor={item => item.id} />
 }
 
 const styles = StyleSheet.create({
+    center: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    noComicsText: {
+        color: '#666',
+    },
     comic: {
         padding: 8,
     },
+    iconRow: {
+        flexDirection: 'row',
+    },
+    padding: {
+        paddingEnd: 16,
+    },
 });