Merge pull request #19 from OpenDTU-App/in-app-update-notes

Author: CommanderRedYT

android/app/build.gradle

@@ -80,8 +80,8 @@ android {
         setProperty("archivesBaseName", "OpenDTUApp")
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 6
-        versionName "0.1.8"
+        versionCode 7
+        versionName "0.1.9"
     }
     signingConfigs {
         debug {

ios/opendtureactnative/Info.plist

@@ -17,11 +17,11 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>0.1.8</string>
+	<string>0.1.9</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>5</string>
+	<string>7</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true />
 	<key>NSAppTransportSecurity</key>

ios/opendtureactnativeTests/Info.plist

@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>0.1.8</string>
+	<string>0.1.9</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>6</string>
+	<string>7</string>
 </dict>
 </plist>

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

@@ -1,6 +1,6 @@
 {
   "name": "opendtu-react-native",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "private": true,
   "repository": {
     "type": "git",
@@ -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

@@ -3,11 +3,19 @@ import type { Release } from '@octokit/webhooks-types';
 import type { FC } from 'react';
 import { useEffect } from 'react';
 
-import { setLatestRelease, setReleases } from '@/slices/github';
+import {
+  setLatestAppRelease,
+  setLatestRelease,
+  setReleases,
+} from '@/slices/github';
 
 import ago from '@/utils/ago';
 
-import { GithubBaseConfig, useGithub } from '@/github/index';
+import {
+  AppGithubBaseConfig,
+  OpenDTUGithubBaseConfig,
+  useGithub,
+} from '@/github/index';
 import { useAppDispatch, useAppSelector } from '@/store';
 
 const FetchHandler: FC = () => {
@@ -26,6 +34,16 @@ const FetchHandler: FC = () => {
       : true,
   );
 
+  const latestAppReleaseRefetchOk = useAppSelector(state =>
+    state.github.latestAppRelease.lastUpdate
+      ? ago(state.github.latestAppRelease.lastUpdate) > 1000 * 60 * 10 // 10 minutes
+      : true,
+  );
+
+  const enableAppUpdates = useAppSelector(
+    state => !!state.settings.enableAppUpdates,
+  );
+
   const githubApi = useGithub();
 
   useEffect(() => {
@@ -38,7 +56,7 @@ const FetchHandler: FC = () => {
         if (latestReleaseRefetchOk) {
           const latestRelease = await githubApi.request(
             'GET /repos/{owner}/{repo}/releases/latest',
-            GithubBaseConfig,
+            OpenDTUGithubBaseConfig,
           );
 
           dispatch(setLatestRelease({ latest: latestRelease.data as Release }));
@@ -49,13 +67,24 @@ const FetchHandler: FC = () => {
         if (allReleasesRefetchOk) {
           const releases = await githubApi.request(
             'GET /repos/{owner}/{repo}/releases',
-            GithubBaseConfig,
+            OpenDTUGithubBaseConfig,
           );
 
           dispatch(setReleases({ releases: releases.data as Release[] }));
         } else {
           console.log('SKIP allReleasesRefetchOk');
         }
+
+        if (latestAppReleaseRefetchOk && enableAppUpdates) {
+          const appRelease = await githubApi.request(
+            'GET /repos/{owner}/{repo}/releases/latest',
+            AppGithubBaseConfig,
+          );
+
+          dispatch(setLatestAppRelease({ latest: appRelease.data as Release }));
+        } else {
+          console.log('SKIP latestAppReleaseRefetchOk');
+        }
       } catch (e) {
         console.warn('GITHUB FETCH ERROR', e);
       }
@@ -68,6 +97,8 @@ const FetchHandler: FC = () => {
     githubApi,
     latestReleaseRefetchOk,
     allReleasesRefetchOk,
+    latestAppReleaseRefetchOk,
+    enableAppUpdates,
   ]);
 
   return null;

src/github/index.tsx

@@ -5,14 +5,22 @@ import { createContext, useContext, useMemo } from 'react';
 
 export const GithubContext = createContext<Octokit | undefined>(undefined);
 
-export const GithubBaseConfig = {
+export const OpenDTUGithubBaseConfig = {
   owner: 'tbnobody',
   repo: 'OpenDTU',
   headers: {
     'X-GitHub-Api-Version': '2022-11-28',
   },
 };
 
+export const AppGithubBaseConfig = {
+  owner: 'OpenDTU-App',
+  repo: 'opendtu-react-native',
+  headers: {
+    'X-GitHub-Api-Version': '2022-11-28',
+  },
+};
+
 export const GithubProvider: FC<PropsWithChildren<unknown>> = ({
   children,
 }) => {

src/hooks/useHasNewAppVersion.ts

@@ -0,0 +1,35 @@
+import packageJson from '@root/package.json';
+import { compare } from 'compare-versions';
+
+import { useMemo } from 'react';
+
+import { useAppSelector } from '@/store';
+
+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;
+
+    const newAppVersionAvailable = compare(
+      appRelease?.tag_name,
+      packageJson.version,
+      '>',
+    );
+
+    return [
+      !showIndicator && usedForIndicatorOnly ? false : newAppVersionAvailable,
+      appRelease,
+    ] as const;
+  }, [appRelease, showIndicator, usedForIndicatorOnly]);
+};
+
+export default useHasNewAppVersion;