feat: add support for ReadAllComics API and update navigation logic in Home and ComicBook components

Author: pushpender-singh-ap

src/Screens/Comic/APIs/Home.js

@@ -116,6 +116,7 @@ const HomeType = {
     getComics(ComicHostName.comichubfree, 1, 'popular-comic'),
     getComics(ComicHostName.comichubfree, 1),
   ],
+  readallcomics: [getComics(ComicHostName.readallcomics, 1)],
 };
 
 export const getComicsHome = async (

src/Screens/Comic/APIs/constance.js

@@ -66,6 +66,7 @@ export const HomePageCardClasses = {
       statusClass: null, // Not applicable for readallcomics
       dateClass: '.pinbin-copy span', // Date is inside this span tag
       lastPageClass: '.pagenavi span.page-numbers.dots',
+      cardLinkClass: '.front-link',
     },
   },
   comichubfree: {

src/Screens/Comic/Book/index.js

@@ -23,7 +23,10 @@ import Header from '../../../Components/UIComp/Header';
 import {goBack} from '../../../Navigation/NavigationService';
 import GalleryImage from './GalleryImage';
 import VerticalView from './VerticalView';
-import {downloadComicBook, showRewardedAd} from '../../../InkNest-Externals/Redux/Actions/Download';
+import {
+  downloadComicBook,
+  showRewardedAd,
+} from '../../../InkNest-Externals/Redux/Actions/Download';
 import {updateData, setScrollPreference} from '../../../Redux/Reducers';
 import {handleScrollModeChange} from '../../../Utils/ScrollModeUtils';
 import {NAVIGATION} from '../../../Constants';
@@ -51,10 +54,14 @@ export function ComicBook({navigation, route}) {
 
   const loading = useSelector(state => state?.data?.loading);
   const error = useSelector(state => state?.data?.error);
-  const userScrollPreference = useSelector(state => state?.data?.scrollPreference);
+  const userScrollPreference = useSelector(
+    state => state?.data?.scrollPreference,
+  );
 
   const [imageLinkIndex, setImageLinkIndex] = useState(0);
-  const [isVerticalScroll, setIsVerticalScroll] = useState(userScrollPreference === 'vertical');
+  const [isVerticalScroll, setIsVerticalScroll] = useState(
+    userScrollPreference === 'vertical',
+  );
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [downloadLoading, setDownloadLoading] = useState(false);
   const [progress, setProgress] = useState({downloaded: 0, total: 0});
@@ -174,7 +181,11 @@ export function ComicBook({navigation, route}) {
 
   if (loading) {
     return (
-      <SafeAreaView style={styles.container}>
+      <SafeAreaView
+        style={[
+          styles.container,
+          {justifyContent: 'center', alignItems: 'center'},
+        ]}>
         <Text style={styles.text}>Loading comic data...</Text>
       </SafeAreaView>
     );
@@ -183,22 +194,98 @@ export function ComicBook({navigation, route}) {
   if (error) {
     return (
       <SafeAreaView style={styles.container}>
-        <Text style={styles.text}>Error: {error}</Text>
+        <Header
+          style={{
+            width: '100%',
+            height: heightPercentageToDP('4%'),
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingHorizontal: 12,
+          }}>
+          <TouchableOpacity
+            onPress={() => {
+              analytics().logEvent('go_back_error', {
+                screen: 'ComicBook',
+                comicBookLink: comicBookLink?.toString(),
+                DetailsPageLink: detailsPageLink?.toString(),
+              });
+              goBack();
+            }}>
+            <Ionicons
+              name="arrow-back"
+              size={24}
+              color="#fff"
+              style={{marginRight: 10, opacity: 0.9}}
+            />
+          </TouchableOpacity>
+          <Text
+            style={{
+              fontSize: 14,
+              fontWeight: '700',
+              color: '#fff',
+              opacity: 0.9,
+            }}>
+            Comic Book
+          </Text>
+          <View style={{flex: 0.1}} />
+        </Header>
+        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+          <Text style={styles.text}>Error: {error}</Text>
+        </View>
       </SafeAreaView>
     );
   }
 
-  if (!comicBook) {
+  if (!comicBook?.images?.length > 0) {
     return (
       <SafeAreaView style={styles.container}>
-        <Text style={styles.text}>No data available</Text>
+        <Header
+          style={{
+            width: '100%',
+            height: heightPercentageToDP('4%'),
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingHorizontal: 12,
+          }}>
+          <TouchableOpacity
+            onPress={() => {
+              analytics().logEvent('go_back_nodata', {
+                screen: 'ComicBook',
+                comicBookLink: comicBookLink?.toString(),
+                DetailsPageLink: detailsPageLink?.toString(),
+              });
+              goBack();
+            }}>
+            <Ionicons
+              name="arrow-back"
+              size={24}
+              color="#fff"
+              style={{marginRight: 10, opacity: 0.9}}
+            />
+          </TouchableOpacity>
+          <Text
+            style={{
+              fontSize: 14,
+              fontWeight: '700',
+              color: '#fff',
+              opacity: 0.9,
+            }}>
+            Comic Book
+          </Text>
+          <View style={{flex: 0.1}} />
+        </Header>
+        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+          <Text style={styles.text}>No data available</Text>
+        </View>
       </SafeAreaView>
     );
   }
 
   return (
     <>
-      <SafeAreaView style={{flex: 1, backgroundColor: '#14142A'}}>
+      <SafeAreaView style={styles.container}>
         <Header
           style={{
             width: '100%',
@@ -243,7 +330,7 @@ export function ComicBook({navigation, route}) {
               color: '#fff',
               opacity: 0.9,
             }}>
-            Page: {imageLinkIndex + 1} / {comicBook?.images.length}
+            Page: {imageLinkIndex + 1} / {comicBook?.images?.length}
           </Text>
 
           <TouchableOpacity onPress={() => setIsModalVisible(true)}>
@@ -321,7 +408,7 @@ export function ComicBook({navigation, route}) {
                       setScrollPreference,
                       () => setIsModalVisible(false),
                       'ComicBook',
-                      comicBookLink
+                      comicBookLink,
                     );
                   }}>
                   <Text style={styles.text}>
@@ -494,8 +581,6 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#14142A',
-    justifyContent: 'center',
-    alignItems: 'center',
   },
   text: {
     fontSize: 20,

src/Screens/Comic/Home/index.js

@@ -28,13 +28,12 @@ import {AppendAd} from '../../../InkNest-Externals/Ads/AppendAd';
 import AnimeAdbanner from '../../../Components/UIComp/AnimeAdBanner/AnimeAdbanner';
 import {clearHistory} from '../../../Redux/Reducers';
 import {ComicHostName} from '../../../Utils/APIs';
-import {widthPercentageToDP} from 'react-native-responsive-screen';
 
 export function Home({navigation}) {
   const flatListRef = useRef(null);
   const [comicsData, setComicsData] = useState({});
   const [loading, setLoading] = useState(false);
-  const [type, setType] = useState('comichubfree');
+  const [type, setType] = useState('readcomicsonline');
   const [changeType, setChangeType] = useState(false);
   const History = useSelector(state => state.data.history);
   const dispatch = useDispatch();
@@ -323,10 +322,14 @@ export function Home({navigation}) {
                         link: item?.link?.toString(),
                         title: item?.title?.toString(),
                       });
-                      navigation.navigate(NAVIGATION.comicDetails, {
-                        ...item,
-                        isComicBookLink: key === 'readallcomics',
-                      });
+                      type === 'readallcomics'
+                        ? navigation.navigate(NAVIGATION.comicBook, {
+                            comicBookLink: item?.link,
+                          })
+                        : navigation.navigate(NAVIGATION.comicDetails, {
+                            ...item,
+                            isComicBookLink: key === 'readallcomics',
+                          });
                     }}
                   />
                 )}

src/Utils/APIs.js

@@ -1,6 +1,7 @@
 export const ComicHostName = {
   readcomicsonline: 'https://readcomicsonline.ru/',
   comichubfree: 'https://comichubfree.com/',
+  readallcomics: 'https://readallcomics.com/',
 };
 export const AnimeHostName = {
   gogoanimes: 'https://ww12.gogoanimes.fi/',