Add Retry and WebView Button on Chapter Error Screen (Closes #818)

LNReader · Jan 7, 2024 · 9253249 · 9253249
1 parent e0e593b
commit 9253249
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 5 deletions.
diff --git a/src/components/ErrorScreenV2/ErrorScreenV2.tsx b/src/components/ErrorScreenV2/ErrorScreenV2.tsx
@@ -1,21 +1,45 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import { useTheme } from '@hooks/useTheme';
 
 interface ErrorScreenProps {
   error: string;
-  onRetry?: () => void;
-  retryIconColor?: string;
+  actions?: Array<{
+    iconName: string;
+    title: string;
+    onPress: () => void;
+  }>;
 }
 
-const ErrorScreen: React.FC<ErrorScreenProps> = ({ error }) => {
+const ErrorScreen: React.FC<ErrorScreenProps> = ({ error, actions }) => {
   const theme = useTheme();
 
   return (
     <View style={styles.container}>
       <Text style={[styles.icon, { color: theme.outline }]}>ಥ_ಥ</Text>
       <Text style={[styles.error, { color: theme.outline }]}>{error}</Text>
+      {actions?.length ? (
+        <View style={styles.actionsCtn}>
+          {actions.map(action => (
+            <View style={styles.buttonWrapper}>
+              <Pressable
+                android_ripple={{ color: theme.rippleColor }}
+                onPress={action.onPress}
+                style={styles.buttonCtn}
+              >
+                <MaterialCommunityIcons
+                  name={action.iconName}
+                  size={24}
+                  color={theme.outline}
+                />
+                <Text style={{ color: theme.outline }}>{action.title}</Text>
+              </Pressable>
+            </View>
+          ))}
+        </View>
+      ) : null}
     </View>
   );
 };
@@ -36,4 +60,21 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     textAlign: 'center',
   },
+  buttonWrapper: {
+    overflow: 'hidden',
+    borderRadius: 50,
+    marginHorizontal: 4,
+    flexDirection: 'row',
+    flex: 1 / 3,
+  },
+  buttonCtn: {
+    flex: 1,
+    paddingVertical: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  actionsCtn: {
+    marginTop: 20,
+    flexDirection: 'row',
+  },
 });
diff --git a/src/screens/reader/ReaderScreen.js b/src/screens/reader/ReaderScreen.js
@@ -46,6 +46,8 @@ import { createDrawerNavigator } from '@react-navigation/drawer';
 import { htmlToText } from '../../sources/helpers/htmlToText';
 import ChapterLoadingScreen from './ChapterLoadingScreen/ChapterLoadingScreen';
 import { ErrorScreenV2 } from '@components';
+import { getString } from '@strings/translations';
+import { useNavigation } from '@react-navigation/native';
 
 const Chapter = ({ route }) => {
   const DrawerNav = createDrawerNavigator();
@@ -82,6 +84,7 @@ const ChapterContent = ({ route, navigation }) => {
 
   const theme = useTheme();
   const dispatch = useDispatch();
+  const { navigate } = useNavigation();
 
   const {
     swipeGestures = false,
@@ -349,7 +352,31 @@ const ChapterContent = ({ route, navigation }) => {
   }
 
   if (error) {
-    return <ErrorScreenV2 error={error} />;
+    return (
+      <ErrorScreenV2
+        error={error}
+        actions={[
+          {
+            iconName: 'refresh',
+            title: getString('common.retry'),
+            onPress: () => {
+              setLoading(true);
+              getChapter(chapterId);
+            },
+          },
+          {
+            iconName: 'earth',
+            title: 'WebView',
+            onPress: () =>
+              navigate('WebviewScreen', {
+                sourceId,
+                name: `${chapterName} | ${novelName}`,
+                url: chapterUrl,
+              }),
+          },
+        ]}
+      />
+    );
   }
 
   return (