Merge pull request #41 from OpenDTU-App/1-implement-network-check

Author: CommanderRedYT

__mocks__/@react-native-community/netinfo.js

@@ -0,0 +1,42 @@
+/**
+ * @format
+ */
+/* eslint-env jest */
+
+const defaultState = {
+  type: 'cellular',
+  isConnected: true,
+  isInternetReachable: true,
+  details: {
+    isConnectionExpensive: true,
+    cellularGeneration: '3g',
+  },
+};
+
+const NetInfoStateType = {
+  unknown: 'unknown',
+  none: 'none',
+  cellular: 'cellular',
+  wifi: 'wifi',
+  bluetooth: 'bluetooth',
+  ethernet: 'ethernet',
+  wimax: 'wimax',
+  vpn: 'vpn',
+  other: 'other',
+};
+
+const RNCNetInfoMock = {
+  NetInfoStateType,
+  configure: jest.fn(),
+  fetch: jest.fn(),
+  refresh: jest.fn(),
+  addEventListener: jest.fn(),
+  useNetInfo: jest.fn(),
+};
+
+RNCNetInfoMock.fetch.mockResolvedValue(defaultState);
+RNCNetInfoMock.refresh.mockResolvedValue(defaultState);
+RNCNetInfoMock.useNetInfo.mockReturnValue(defaultState);
+RNCNetInfoMock.addEventListener.mockReturnValue(jest.fn());
+
+module.exports = RNCNetInfoMock;

licenses.json

@@ -16,6 +16,12 @@
         "licenseUrl": "https://github.com/react-native-community/react-native-art",
         "parents": "opendtu-react-native"
     },
+    "@react-native-community/[email protected]": {
+        "licenses": "MIT",
+        "repository": "https://github.com/react-native-netinfo/react-native-netinfo",
+        "licenseUrl": "https://github.com/react-native-netinfo/react-native-netinfo/raw/master/LICENSE",
+        "parents": "opendtu-react-native"
+    },
     "@react-native-masked-view/[email protected]": {
         "licenses": "MIT",
         "repository": "https://github.com/react-native-masked-view/masked-view",

package.json

@@ -29,6 +29,7 @@
     "@os-team/i18next-react-native-language-detector": "^1.0.30",
     "@react-native-async-storage/async-storage": "^1.19.3",
     "@react-native-community/art": "^1.2.0",
+    "@react-native-community/netinfo": "^11.2.1",
     "@react-native-masked-view/masked-view": "^0.3.0",
     "@react-navigation/bottom-tabs": "^6.5.9",
     "@react-navigation/native": "^6.1.8",

src/App.tsx

@@ -14,6 +14,7 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import SplashScreen from 'react-native-splash-screen';
 import { Provider as ReduxProvider } from 'react-redux';
 
+import AppOfflineModal from '@/components/modals/AppOfflineModal';
 import EnableAppUpdatesModal from '@/components/modals/EnableAppUpdatesModal';
 
 import ApiProvider from '@/api/ApiHandler';
@@ -243,6 +244,7 @@ const _App: FC = () => {
 
   return (
     <PaperProvider theme={theme}>
+      <AppOfflineModal />
       <StatusBar
         backgroundColor={theme.colors.background}
         barStyle={theme.dark ? 'light-content' : 'dark-content'}

src/components/modals/AppOfflineModal.tsx

@@ -0,0 +1,30 @@
+import { useNetInfo } from '@react-native-community/netinfo';
+
+import type { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Box } from 'react-native-flex-layout';
+import { Portal, Text } from 'react-native-paper';
+
+import BaseModal from '@/components/BaseModal';
+
+const AppOfflineModal: FC = () => {
+  const { t } = useTranslation();
+  const { isConnected } = useNetInfo();
+
+  return (
+    <Portal>
+      <BaseModal visible={!isConnected} dismissable={false}>
+        <Box p={16}>
+          <Box mb={8}>
+            <Text variant="bodyLarge">{t('offlineModal.title')}</Text>
+          </Box>
+          <Box mb={4}>
+            <Text>{t('offlineModal.description')}</Text>
+          </Box>
+        </Box>
+      </BaseModal>
+    </Portal>
+  );
+};
+
+export default AppOfflineModal;

src/translations/translation-files

@@ -2274,6 +2274,11 @@
     prompts "^2.4.0"
     semver "^7.5.2"
 
+"@react-native-community/netinfo@^11.2.1":
+  version "11.2.1"
+  resolved "https://registry.yarnpkg.com/@react-native-community/netinfo/-/netinfo-11.2.1.tgz#177f5409f2ac41fd51ede6e4994307bb0edb2178"
+  integrity sha512-n9kgmH7vLaU7Cdo8vGfJGGwhrlgppaOSq5zKj9I7H4k5iRM3aNtwURw83mgrc22Ip7nSye2afZV2xDiIyvHttQ==
+
 "@react-native-masked-view/masked-view@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@react-native-masked-view/masked-view/-/masked-view-0.3.0.tgz#bd29fae18d148a685331910a3c7b766ce87eafcc"