Merge pull request #37 from OpenDTU-App/35-move-graphs-into-separate-tab

Author: CommanderRedYT

src/translations/translation-files

@@ -8,12 +8,13 @@ import {
 
 import useHasNewAppVersion from '@/hooks/useHasNewAppVersion';
 
+import GraphTab from '@/views/navigation/tabs/GraphTab';
 import LivedataTab from '@/views/navigation/tabs/LivedataTab';
 import MainSettingsTab from '@/views/navigation/tabs/MainSettingsTab';
 
 const LivedataRoute = () => <LivedataTab />;
-
 const SettingsRoute = () => <MainSettingsTab />;
+const GraphRoute = () => <GraphTab />;
 
 type BaseRoutes = ComponentProps<
   typeof BottomNavigationPaper
@@ -35,6 +36,11 @@ const BottomNavigation: FC = () => {
         title: t('navigation.livedata'),
         focusedIcon: 'solar-power',
       },
+      {
+        key: 'graph',
+        title: t('navigation.graph'),
+        focusedIcon: 'chart-line',
+      },
       {
         key: 'settings',
         title: t('navigation.settings'),
@@ -47,6 +53,7 @@ const BottomNavigation: FC = () => {
 
   const renderScene = BottomNavigationPaper.SceneMap({
     livedata: LivedataRoute,
+    graph: GraphRoute,
     settings: SettingsRoute,
   });
 

src/views/navigation/NavigationTabs.tsx

@@ -0,0 +1,61 @@
+import { useCallback, useEffect, useState } from 'react';
+import { RefreshControl } from 'react-native';
+import { useTheme } from 'react-native-paper';
+
+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
+          }
+        >
+          <ImportantCharts />
+        </StyledScrollView>
+      </DeviceOfflineWrapper>
+    </StyledSafeAreaView>
+  );
+};
+
+export default LivedataTab;

src/views/navigation/tabs/GraphTab.tsx

@@ -1,61 +1,20 @@
-import { useCallback, useEffect, useState } from 'react';
-import { RefreshControl } from 'react-native';
 import { useTheme } from 'react-native-paper';
 
-import ImportantCharts from '@/components/Charts/ImportantCharts';
 import DeviceOfflineWrapper from '@/components/DeviceOfflineWrapper';
 import DeviceStatus from '@/components/DeviceStatus';
 import ImportantStatusValues from '@/components/ImportantStatusValues';
 
-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}>
           <DeviceStatus />
           <ImportantStatusValues />
-          <ImportantCharts />
         </StyledScrollView>
       </DeviceOfflineWrapper>
     </StyledSafeAreaView>