feat: Add reloading button on comic details page

p2devs · Jan 28, 2025 · 86e347b · 86e347b
1 parent b68eb80
commit 86e347b
Showing 1 changed file with 42 additions and 31 deletions.
diff --git a/src/Screens/Comic/Details/Components/HeaderComponent.js b/src/Screens/Comic/Details/Components/HeaderComponent.js
@@ -1,4 +1,4 @@
-import React, {memo, useState} from 'react';
+import React, { memo, useState } from 'react';
 import {
   Image,
   SafeAreaView,
@@ -12,24 +12,25 @@ import {
   heightPercentageToDP,
   widthPercentageToDP,
 } from 'react-native-responsive-screen';
-import {useDispatch, useSelector} from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import Fontisto from 'react-native-vector-icons/Fontisto';
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 
 import Header from '../../../../Components/UIComp/Header';
 import DescriptionView from '../../../../Components/UIComp/DescriptionView';
-import {goBack} from '../../../../Navigation/NavigationService';
-import {updateData} from '../../../../Redux/Reducers';
+import { goBack } from '../../../../Navigation/NavigationService';
+import { updateData } from '../../../../Redux/Reducers';
+import { fetchComicDetails } from '../../../../Redux/Actions/GlobalActions';
 
 const HeaderComponent = memo(
-  ({image, title, link, tabBar, onTabBar, sort, setSORT}) => {
+  ({ image, title, link, tabBar, onTabBar, sort, setSORT }) => {
     const dispatch = useDispatch();
     const ComicDetail = useSelector(state => state.data.dataByUrl[link]);
 
     return (
       <SafeAreaView
-        style={[styles.container, {marginBottom: 16}]}
+        style={[styles.container, { marginBottom: 16 }]}
         edges={['top']}>
         <View style={styles.headerContainer}>
           <Image
@@ -66,7 +67,7 @@ const HeaderComponent = memo(
                 name="arrow-back"
                 size={24}
                 color="#fff"
-                style={{marginRight: 10, opacity: 0.9}}
+                style={{ marginRight: 10, opacity: 0.9 }}
               />
             </TouchableOpacity>
             <Text
@@ -79,21 +80,34 @@ const HeaderComponent = memo(
               Comic Details
             </Text>
 
-            <TouchableOpacity
-              onPress={() => {
-                dispatch(
-                  updateData({
-                    url: link,
-                    data: {Bookmark: !ComicDetail?.Bookmark},
-                  }),
-                );
-              }}>
-              <Fontisto
-                name={`bookmark${ComicDetail?.Bookmark ? '-alt' : ''}`}
-                size={heightPercentageToDP('2.4%')}
-                color={ComicDetail?.Bookmark ? 'yellow' : '#FFF'}
-              />
-            </TouchableOpacity>
+            <View style={{ flexDirection: 'row', gap: 16 }}>
+              <TouchableOpacity
+                onPress={() => {
+                  dispatch(
+                    updateData({
+                      url: link,
+                      data: { Bookmark: !ComicDetail?.Bookmark },
+                    }),
+                  );
+                }}>
+                <Fontisto
+                  name={`bookmark${ComicDetail?.Bookmark ? '-alt' : ''}`}
+                  size={heightPercentageToDP('2.4%')}
+                  color={ComicDetail?.Bookmark ? 'yellow' : '#FFF'}
+                />
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={() => {
+                  dispatch(fetchComicDetails(link, true));
+                }}>
+                <Ionicons
+                  name="refresh-outline"
+                  size={heightPercentageToDP('2.4%')}
+                  color={'#FFF'}
+                />
+              </TouchableOpacity>
+            </View>
+
           </Header>
 
           <View
@@ -145,17 +159,14 @@ const HeaderComponent = memo(
                   fontSize: 12,
                   color: '#fff',
                   opacity: 0.8,
-                }}>{`${
-                ComicDetail?.genres
+                }}>{`${ComicDetail?.genres
                   ? ComicDetail?.genres?.toString() + ' · '
                   : ''
-              }${
-                ComicDetail?.yearOfRelease
-                  ? ComicDetail?.yearOfRelease + ' · '
-                  : ''
-              }${ComicDetail?.status ? ComicDetail?.status + ' · ' : ''}${
-                ComicDetail?.publisher ? 'By - ' + ComicDetail?.publisher : ''
-              }`}</Text>
+                  }${ComicDetail?.yearOfRelease
+                    ? ComicDetail?.yearOfRelease + ' · '
+                    : ''
+                  }${ComicDetail?.status ? ComicDetail?.status + ' · ' : ''}${ComicDetail?.publisher ? 'By - ' + ComicDetail?.publisher : ''
+                  }`}</Text>
             }
             {ComicDetail?.volumes && (
               <View>