Implement proper in-app update notifications

Author: CommanderRedYT

licenses.json

@@ -154,7 +154,7 @@
         "licenseUrl": "https://github.com/onubo/react-native-logs/raw/master/LICENSE",
         "parents": "opendtu-react-native"
     },
-    "[email protected].0-alpha.2": {
+    "[email protected]": {
         "licenses": "MIT",
         "repository": "https://github.com/iamacup/react-native-markdown-display",
         "licenseUrl": "https://github.com/iamacup/react-native-markdown-display/raw/master/LICENSE",

package.json

@@ -52,7 +52,7 @@
     "react-native-get-random-values": "^1.9.0",
     "react-native-linear-gradient": "^2.8.3",
     "react-native-logs": "^5.0.1",
-    "react-native-markdown-display": "^7.0.0-alpha.2",
+    "react-native-markdown-display": "^7.0.2",
     "react-native-paper": "^5.11.2",
     "react-native-paper-dates": "^0.20.4",
     "react-native-reanimated": "^3.5.4",

src/App.tsx

@@ -14,6 +14,8 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import SplashScreen from 'react-native-splash-screen';
 import { Provider as ReduxProvider } from 'react-redux';
 
+import EnableAppUpdatesModal from '@/components/modals/EnableAppUpdatesModal';
+
 import ApiProvider from '@/api/ApiHandler';
 import DatabaseProvider from '@/database';
 import GithubProvider from '@/github';
@@ -231,6 +233,10 @@ const _App: FC = () => {
     });
   }, [i18n.language, t]);
 
+  const showEnableAppUpdatesModal = useAppSelector(
+    state => state.settings.enableAppUpdates === null,
+  );
+
   if (!i18nLanguageMatchesSettings) {
     return null;
   }
@@ -245,6 +251,13 @@ const _App: FC = () => {
       <NavigationContainer theme={navigationTheme}>
         <NavigationStack />
       </NavigationContainer>
+      <EnableAppUpdatesModal
+        visible={showEnableAppUpdatesModal}
+        /* eslint-disable-next-line @typescript-eslint/no-empty-function */
+        onDismiss={() => {}}
+        dismissable={false}
+        dismissableBackButton={false}
+      />
     </PaperProvider>
   );
 };

src/components/modals/EnableAppUpdatesModal.tsx

@@ -0,0 +1,68 @@
+import type { FC } from 'react';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Box } from 'react-native-flex-layout';
+import type { ModalProps } from 'react-native-paper';
+import { Button, Portal, Text } from 'react-native-paper';
+
+import { setEnableAppUpdates } from '@/slices/settings';
+
+import BaseModal from '@/components/BaseModal';
+
+import { useAppDispatch } from '@/store';
+
+const EnableAppUpdatesModal: FC<Omit<ModalProps, 'children'>> = props => {
+  const { onDismiss } = props;
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+
+  const handleAbort = useCallback(() => {
+    onDismiss?.();
+  }, [onDismiss]);
+
+  const handleEnable = useCallback(() => {
+    console.log('handleEnable');
+    dispatch(setEnableAppUpdates({ enable: true }));
+    handleAbort();
+  }, [dispatch, handleAbort]);
+
+  const handleDisable = useCallback(() => {
+    dispatch(setEnableAppUpdates({ enable: false }));
+    handleAbort();
+  }, [dispatch, handleAbort]);
+
+  return (
+    <Portal>
+      <BaseModal {...props}>
+        <Box p={16}>
+          <Box mb={8}>
+            <Text variant="bodyLarge">
+              {t('settings.doYouWantToEnableAppUpdates')}
+            </Text>
+          </Box>
+        </Box>
+        <Box
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            padding: 8,
+          }}
+        >
+          <Button
+            style={{ marginRight: 8 }}
+            onPress={handleEnable}
+            mode="contained"
+          >
+            {t('enable')}
+          </Button>
+          <Button onPress={handleDisable} mode="text">
+            {t('disable')}
+          </Button>
+        </Box>
+      </BaseModal>
+    </Portal>
+  );
+};
+
+export default EnableAppUpdatesModal;

src/github/FetchHandler.tsx

@@ -11,7 +11,11 @@ import {
 
 import ago from '@/utils/ago';
 
-import { AppGithubBaseConfig, OpenDTUGithubBaseConfig, useGithub } from '@/github/index';
+import {
+  AppGithubBaseConfig,
+  OpenDTUGithubBaseConfig,
+  useGithub,
+} from '@/github/index';
 import { useAppDispatch, useAppSelector } from '@/store';
 
 const FetchHandler: FC = () => {
@@ -36,6 +40,10 @@ const FetchHandler: FC = () => {
       : true,
   );
 
+  const enableAppUpdates = useAppSelector(
+    state => !!state.settings.enableAppUpdates,
+  );
+
   const githubApi = useGithub();
 
   useEffect(() => {
@@ -67,7 +75,7 @@ const FetchHandler: FC = () => {
           console.log('SKIP allReleasesRefetchOk');
         }
 
-        if (latestAppReleaseRefetchOk) {
+        if (latestAppReleaseRefetchOk && enableAppUpdates) {
           const appRelease = await githubApi.request(
             'GET /repos/{owner}/{repo}/releases/latest',
             AppGithubBaseConfig,
@@ -90,6 +98,7 @@ const FetchHandler: FC = () => {
     latestReleaseRefetchOk,
     allReleasesRefetchOk,
     latestAppReleaseRefetchOk,
+    enableAppUpdates,
   ]);
 
   return null;

src/hooks/useHasNewAppVersion.ts

@@ -5,11 +5,17 @@ import { useMemo } from 'react';
 
 import { useAppSelector } from '@/store';
 
-const useHasNewAppVersion = () => {
+const useHasNewAppVersion = (options?: { usedForIndicatorOnly: boolean }) => {
+  const { usedForIndicatorOnly = false } = options ?? {};
+
   const appRelease = useAppSelector(
     state => state.github.latestAppRelease?.data,
   );
 
+  const showIndicator = useAppSelector(
+    state => !!state.settings.enableAppUpdates,
+  );
+
   return useMemo(() => {
     if (!appRelease) return [false, null] as const;
 
@@ -19,8 +25,11 @@ const useHasNewAppVersion = () => {
       '>',
     );
 
-    return [newAppVersionAvailable, appRelease] as const;
-  }, [appRelease]);
+    return [
+      !showIndicator && usedForIndicatorOnly ? false : newAppVersionAvailable,
+      appRelease,
+    ] as const;
+  }, [appRelease, showIndicator, usedForIndicatorOnly]);
 };
 
 export default useHasNewAppVersion;

src/slices/settings.ts

@@ -18,6 +18,7 @@ import type {
   UpdateDtuHostnameAction,
   UpdateDtuSerialNumberAction,
   SetLanguageAction,
+  EnableAppUpdatesAction,
 } from '@/types/settings';
 
 const initialState: SettingsState = {
@@ -26,6 +27,7 @@ const initialState: SettingsState = {
   dtuConfigs: [],
   selectedDtuConfig: null,
   databaseConfigs: [],
+  enableAppUpdates: null,
 };
 
 const log = logger.createLogger();
@@ -204,6 +206,9 @@ const settingsSlice = createSlice({
           ? null
           : action.payload.databaseUuid;
     },
+    setEnableAppUpdates: (state, action: EnableAppUpdatesAction) => {
+      state.enableAppUpdates = action.payload.enable;
+    },
   },
 });
 
@@ -225,6 +230,7 @@ export const {
   removeDatabaseConfig,
   updateDatabaseConfig,
   updateDTUDatabaseUuid,
+  setEnableAppUpdates,
 } = settingsSlice.actions;
 
 export const { reducer: SettingsReducer } = settingsSlice;

src/types/settings.ts

@@ -28,6 +28,7 @@ export interface SettingsState {
   // app specific
   appTheme: 'light' | 'dark' | 'system';
   language: 'en' | 'de';
+  enableAppUpdates: boolean | null;
 
   // opendtu
   dtuConfigs: OpenDTUConfig[];
@@ -100,3 +101,7 @@ export type UpdateDTUDatabaseUuidAction = PayloadAction<{
   index: Index;
   databaseUuid: string | 'none';
 }>;
+
+export type EnableAppUpdatesAction = PayloadAction<{
+  enable: boolean;
+}>;

src/views/navigation/NavigationStack.tsx

@@ -13,6 +13,7 @@ import AboutSettingsScreen from '@/views/navigation/screens/AboutSettingsScreen'
 import ConfigureGraphsScreen from '@/views/navigation/screens/ConfigureGraphsScreen';
 import DeviceListScreen from '@/views/navigation/screens/DeviceListScreen';
 import DeviceSettingsScreen from '@/views/navigation/screens/DeviceSettingsScreen';
+import LicensesScreen from '@/views/navigation/screens/LicensesScreen';
 import MainScreen from '@/views/navigation/screens/MainScreen';
 import ManageDatabasesScreen from '@/views/navigation/screens/ManageDatabasesScreen';
 import MqttInformationScreen from '@/views/navigation/screens/MqttInformationScreen';
@@ -113,6 +114,11 @@ const NavigationStack: FC = () => {
         component={MqttInformationScreen}
         options={{ headerBackVisible: true }}
       />
+      <Stack.Screen
+        name="LicensesScreen"
+        component={LicensesScreen}
+        options={{ headerBackVisible: true }}
+      />
     </Stack.Navigator>
   );
 };

src/views/navigation/NavigationTabs.tsx

@@ -24,7 +24,9 @@ const BottomNavigation: FC = () => {
   const { t } = useTranslation();
   const [index, setIndex] = useState<number>(0);
 
-  const [hasNewAppVersion] = useHasNewAppVersion();
+  const [hasNewAppVersion] = useHasNewAppVersion({
+    usedForIndicatorOnly: true,
+  });
 
   const routes = useMemo<BaseRoutes>(
     () => [