Refactor RefreshControl into extra button

Author: CommanderRedYT

src/components/Charts/ImportantCharts.tsx

@@ -1,8 +1,13 @@
 import type { FC } from 'react';
-import { useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Box } from 'react-native-flex-layout';
-import { Icon, Text, TouchableRipple, useTheme } from 'react-native-paper';
+import {
+  IconButton,
+  Text,
+  TouchableRipple,
+  useTheme,
+} from 'react-native-paper';
 
 import { View } from 'react-native';
 
@@ -11,6 +16,11 @@ import DcVoltageChart from '@/components/Charts/DcVoltageChart';
 import StyledSurface from '@/components/styled/StyledSurface';
 
 import { spacing } from '@/constants';
+import {
+  useDatabase,
+  useDatabaseIsFetching,
+  useRefreshDatabase,
+} from '@/database';
 import { useAppSelector } from '@/store';
 
 import type { NavigationProp, ParamListBase } from '@react-navigation/native';
@@ -46,6 +56,25 @@ const ImportantCharts: FC = () => {
     navigation.navigate('ConfigureGraphsScreen');
   }, [navigation]);
 
+  const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
+
+  const refreshing = useDatabaseIsFetching();
+  const triggerRefresh = useRefreshDatabase();
+  const database = useDatabase();
+
+  const handleRefresh = useCallback(() => {
+    if (!database) return;
+
+    triggerRefresh?.();
+    setIsRefreshing(true);
+  }, [database, triggerRefresh]);
+
+  useEffect(() => {
+    if (!refreshing) {
+      setIsRefreshing(false);
+    }
+  }, [refreshing]);
+
   if (!hasDatabaseConfig) {
     return (
       <Box p={8} mt={4}>
@@ -95,9 +124,11 @@ const ImportantCharts: FC = () => {
                     {t('livedata.changeTimerangeAndRefreshInterval')}
                   </Text>
                 </View>
-                <View>
-                  <Icon size={20} source="chevron-right" />
-                </View>
+                <IconButton
+                  icon="reload"
+                  onPress={handleRefresh}
+                  loading={isRefreshing}
+                />
               </View>
             </TouchableRipple>
           </StyledSurface>

src/views/navigation/NavigationTabs.tsx

@@ -30,7 +30,7 @@ const renderScene = BottomNavigationPaper.SceneMap({
   settings: SettingsRoute,
 });
 
-const BottomNavigation: FC = () => {
+const NavigationTabs: FC = () => {
   const theme = useTheme();
   const { t } = useTranslation();
   const [index, setIndex] = useState<number>(0);
@@ -80,4 +80,4 @@ const BottomNavigation: FC = () => {
   );
 };
 
-export default BottomNavigation;
+export default NavigationTabs;

src/views/navigation/tabs/GraphTab.tsx

@@ -1,57 +1,17 @@
-import { useCallback, useEffect, useState } from 'react';
 import { useTheme } from 'react-native-paper';
 
-import { RefreshControl } from 'react-native';
-
 import ImportantCharts from '@/components/Charts/ImportantCharts';
 import DeviceOfflineWrapper from '@/components/DeviceOfflineWrapper';
 
-import {
-  useDatabase,
-  useDatabaseIsFetching,
-  useRefreshDatabase,
-} from '@/database';
 import { StyledSafeAreaView, StyledScrollView } from '@/style';
 
 const LivedataTab = () => {
   const theme = useTheme();
 
-  const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
-
-  const refreshing = useDatabaseIsFetching();
-  const triggerRefresh = useRefreshDatabase();
-  const database = useDatabase();
-
-  const handleRefresh = useCallback(() => {
-    if (!database) return;
-
-    triggerRefresh?.();
-    setIsRefreshing(true);
-  }, [database, triggerRefresh]);
-
-  useEffect(() => {
-    if (!refreshing) {
-      setIsRefreshing(false);
-    }
-  }, [refreshing]);
-
   return (
     <StyledSafeAreaView theme={theme}>
       <DeviceOfflineWrapper>
-        <StyledScrollView
-          theme={theme}
-          refreshControl={
-            database ? (
-              <RefreshControl
-                refreshing={isRefreshing}
-                onRefresh={handleRefresh}
-                colors={[theme.colors.primary]}
-                progressBackgroundColor={theme.colors.elevation.level3}
-                tintColor={theme.colors.primary}
-              />
-            ) : undefined
-          }
-        >
+        <StyledScrollView theme={theme}>
           <ImportantCharts />
         </StyledScrollView>
       </DeviceOfflineWrapper>