Merge pull request #40 from OpenDTU-App/32-implement-debug-menu

CommanderRedYT · web-flow · commit 6244abb9a6b8 · 2024-02-04T21:45:49.000+01:00
diff --git a/.githooks/pre-commit b/.githooks/pre-commit
@@ -1,12 +1,13 @@
 #!/bin/bash
 # Get latest git tag
 latest_tag=$(git describe --tags --abbrev=0)
-version_from_tag=$(echo "$latest_tag" | grep -o -E '[0-9]+\.[0-9]+\.[0-9]+')
+latest_tag_without_v=${latest_tag#"v"}
+version_from_tag=$(echo "$latest_tag_without_v" | grep -P '^(?P<major>0|[1-9]\d*)\.(?P<minor>0|[1-9]\d*)\.(?P<patch>0|[1-9]\d*)(?:-(?P<prerelease>(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+(?P<buildmetadata>[0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$')
 
 # Get the version from package.json
 version=$(jq -r '.version' package.json)
 
-echo "Latest tag: $latest_tag"
+echo "Latest tag: $latest_tag_without_v"
 echo "Version from tag: $version_from_tag"
 echo "Version from package.json: $version"
 
@@ -15,3 +16,5 @@ if [ "$version" != "$version_from_tag" ]; then
   echo "Version in package.json and tag are not the same"
   exit 1
 fi
+
+echo "Version in package.json and tag are the same"
diff --git a/src/hooks/useRequireMultiplePresses.ts b/src/hooks/useRequireMultiplePresses.ts
@@ -0,0 +1,31 @@
+import { useCallback, useRef, useState } from 'react';
+
+const useRequireMultiplePresses = (
+  onPress: () => void,
+  requiredPresses = 3,
+  timeout = 500,
+) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_, setPresses] = useState(0);
+  const timeoutRef = useRef<NodeJS.Timeout>();
+
+  return useCallback(() => {
+    setPresses(prevPresses => {
+      if (prevPresses === 0) {
+        timeoutRef.current = setTimeout(() => {
+          setPresses(0);
+        }, timeout);
+      }
+
+      if (prevPresses + 1 === requiredPresses) {
+        clearTimeout(timeoutRef.current);
+        onPress();
+        return 0;
+      }
+
+      return prevPresses + 1;
+    });
+  }, [onPress, requiredPresses, timeout]);
+};
+
+export default useRequireMultiplePresses;
diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts
@@ -0,0 +1,12 @@
+import type { EqualityFn } from 'react-redux';
+
+import type { SettingsState } from '@/types/settings';
+
+import { useAppSelector } from '@/store';
+
+const useSettings = <T>(
+  selector: (state: SettingsState) => T,
+  equalityFn?: EqualityFn<T>,
+): T => useAppSelector(state => selector(state.settings), equalityFn);
+
+export default useSettings;
diff --git a/src/slices/settings.ts b/src/slices/settings.ts
@@ -19,6 +19,7 @@ import type {
   UpdateDtuSerialNumberAction,
   SetLanguageAction,
   EnableAppUpdatesAction,
+  DebugEnabledAction,
 } from '@/types/settings';
 
 const initialState: SettingsState = {
@@ -28,6 +29,7 @@ const initialState: SettingsState = {
   selectedDtuConfig: null,
   databaseConfigs: [],
   enableAppUpdates: null,
+  debugEnabled: false,
 };
 
 const log = logger.createLogger();
@@ -209,6 +211,9 @@ const settingsSlice = createSlice({
     setEnableAppUpdates: (state, action: EnableAppUpdatesAction) => {
       state.enableAppUpdates = action.payload.enable;
     },
+    setDebugEnabled: (state, action: DebugEnabledAction) => {
+      state.debugEnabled = action.payload.debugEnabled;
+    },
   },
 });
 
@@ -231,6 +236,7 @@ export const {
   updateDatabaseConfig,
   updateDTUDatabaseUuid,
   setEnableAppUpdates,
+  setDebugEnabled,
 } = settingsSlice.actions;
 
 export const { reducer: SettingsReducer } = settingsSlice;
diff --git a/src/translations/translation-files b/src/translations/translation-files
@@ -1 +1 @@
-Subproject commit f7ba4bb48ba6db68a8dc63bde6e51b62a03639f4
+Subproject commit 7c2eb2be02836609ea5cd5df5d617d19ca35222c
diff --git a/src/types/opendtu/github.ts b/src/types/opendtu/github.ts
@@ -15,6 +15,7 @@ export interface WithTimestamp<T> {
 }
 
 export interface GithubState {
+  // OpenDTU releases
   latestRelease: WithTimestamp<Release | null>;
   releases: WithTimestamp<Release[]>;
 
diff --git a/src/types/settings.ts b/src/types/settings.ts
@@ -29,6 +29,7 @@ export interface SettingsState {
   appTheme: 'light' | 'dark' | 'system';
   language: 'en' | 'de';
   enableAppUpdates: boolean | null;
+  debugEnabled: boolean;
 
   // opendtu
   dtuConfigs: OpenDTUConfig[];
@@ -105,3 +106,7 @@ export type UpdateDTUDatabaseUuidAction = PayloadAction<{
 export type EnableAppUpdatesAction = PayloadAction<{
   enable: boolean;
 }>;
+
+export type DebugEnabledAction = PayloadAction<{
+  debugEnabled: boolean;
+}>;
diff --git a/src/views/navigation/NavigationStack.tsx b/src/views/navigation/NavigationStack.tsx
@@ -11,6 +11,7 @@ import { useAppSelector } from '@/store';
 import AboutOpenDTUScreen from '@/views/navigation/screens/AboutOpenDTUScreen';
 import AboutSettingsScreen from '@/views/navigation/screens/AboutSettingsScreen';
 import ConfigureGraphsScreen from '@/views/navigation/screens/ConfigureGraphsScreen';
+import DebugScreen from '@/views/navigation/screens/DebugScreen';
 import DeviceListScreen from '@/views/navigation/screens/DeviceListScreen';
 import DeviceSettingsScreen from '@/views/navigation/screens/DeviceSettingsScreen';
 import LicensesScreen from '@/views/navigation/screens/LicensesScreen';
@@ -119,6 +120,11 @@ const NavigationStack: FC = () => {
         component={LicensesScreen}
         options={{ headerBackVisible: true }}
       />
+      <Stack.Screen
+        name="DebugScreen"
+        component={DebugScreen}
+        options={{ headerBackVisible: true }}
+      />
     </Stack.Navigator>
   );
 };
diff --git a/src/views/navigation/screens/DebugScreen.tsx b/src/views/navigation/screens/DebugScreen.tsx
@@ -0,0 +1,96 @@
+import moment from 'moment';
+
+import type { FC } from 'react';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ScrollView } from 'react-native';
+import { Box } from 'react-native-flex-layout';
+import { Appbar, IconButton, List, useTheme } from 'react-native-paper';
+
+import { clearLatestAppRelease, clearLatestRelease } from '@/slices/github';
+import { setDebugEnabled } from '@/slices/settings';
+
+import { useAppDispatch, useAppSelector } from '@/store';
+import { StyledSafeAreaView } from '@/style';
+import type { PropsWithNavigation } from '@/views/navigation/NavigationStack';
+
+const DebugScreen: FC<PropsWithNavigation> = () => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const dispatch = useAppDispatch();
+
+  const latestAppRelease = useAppSelector(
+    state => state.github.latestAppRelease.lastUpdate,
+  );
+  const latestOpenDtuRelease = useAppSelector(
+    state => state.github.latestRelease.lastUpdate,
+  );
+
+  const handleClearLatestAppRelease = useCallback(() => {
+    dispatch(clearLatestAppRelease());
+  }, [dispatch]);
+
+  const handleClearLatestOpenDtuRelease = useCallback(() => {
+    dispatch(clearLatestRelease());
+  }, [dispatch]);
+
+  const handleDisableDebugMode = useCallback(() => {
+    dispatch(setDebugEnabled({ debugEnabled: false }));
+  }, [dispatch]);
+
+  return (
+    <>
+      <Appbar.Header>
+        <Appbar.Content title={t('settings.debug')} />
+      </Appbar.Header>
+      <StyledSafeAreaView theme={theme}>
+        <Box style={{ width: '100%', flex: 1 }}>
+          <ScrollView>
+            <List.Section>
+              <List.Subheader>{t('debug.cache')}</List.Subheader>
+              <List.Item
+                title={t('debug.latestAppReleaseCacheCreated')}
+                description={
+                  latestAppRelease
+                    ? moment(latestAppRelease).toLocaleString()
+                    : ''
+                }
+                right={props => (
+                  <IconButton
+                    {...props}
+                    icon="delete"
+                    onPress={handleClearLatestAppRelease}
+                  />
+                )}
+              />
+              <List.Item
+                title={t('debug.latestOpenDtuReleaseCacheCreated')}
+                description={
+                  latestOpenDtuRelease
+                    ? moment(latestOpenDtuRelease).toLocaleString()
+                    : ''
+                }
+                right={props => (
+                  <IconButton
+                    {...props}
+                    icon="delete"
+                    onPress={handleClearLatestOpenDtuRelease}
+                  />
+                )}
+              />
+            </List.Section>
+            <List.Section>
+              <List.Subheader>{t('debug.other')}</List.Subheader>
+              <List.Item
+                title={t('debug.disableDebugMode')}
+                onPress={handleDisableDebugMode}
+              />
+            </List.Section>
+          </ScrollView>
+        </Box>
+      </StyledSafeAreaView>
+    </>
+  );
+};
+
+export default DebugScreen;
diff --git a/src/views/navigation/tabs/MainSettingsTab.tsx b/src/views/navigation/tabs/MainSettingsTab.tsx
@@ -1,25 +1,32 @@
 import type { NavigationProp, ParamListBase } from '@react-navigation/native';
 import { useNavigation } from '@react-navigation/native';
+import packageJson from '@root/package.json';
 
 import type { FC } from 'react';
 import { useMemo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ScrollView } from 'react-native';
 import { Box } from 'react-native-flex-layout';
-import { Badge, List, useTheme } from 'react-native-paper';
+import { Badge, List, Text, useTheme } from 'react-native-paper';
+import { useDispatch } from 'react-redux';
+
+import { setDebugEnabled } from '@/slices/settings';
 
 import ChangeLanguageModal from '@/components/modals/ChangeLanguageModal';
 import ChangeThemeModal from '@/components/modals/ChangeThemeModal';
 
 import useDtuState from '@/hooks/useDtuState';
 import useHasNewAppVersion from '@/hooks/useHasNewAppVersion';
 import useIsConnected from '@/hooks/useIsConnected';
+import useRequireMultiplePresses from '@/hooks/useRequireMultiplePresses';
+import useSettings from '@/hooks/useSettings';
 
 import { StyledSafeAreaView } from '@/style';
 
 const MainSettingsTab: FC = () => {
   const navigation = useNavigation() as NavigationProp<ParamListBase>;
   const { t } = useTranslation();
+  const dispatch = useDispatch();
 
   const theme = useTheme();
 
@@ -40,6 +47,8 @@ const MainSettingsTab: FC = () => {
     usedForIndicatorOnly: true,
   });
 
+  const showDebugScreen = useSettings(state => state?.debugEnabled);
+
   const hasSystemInformation = !!useDtuState(state => !!state?.systemStatus);
   const hasNetworkInformation = !!useDtuState(state => !!state?.networkStatus);
   const hasNtpInformation = !!useDtuState(state => !!state?.ntpStatus);
@@ -86,6 +95,15 @@ const MainSettingsTab: FC = () => {
     navigation.navigate('MqttInformationScreen');
   }, [navigation]);
 
+  const handleDebugScreen = useCallback(() => {
+    navigation.navigate('DebugScreen');
+  }, [navigation]);
+
+  const enableDebugMode = useCallback(() => {
+    dispatch(setDebugEnabled({ debugEnabled: true }));
+  }, [dispatch]);
+  const handleUnlockDebug = useRequireMultiplePresses(enableDebugMode);
+
   return (
     <StyledSafeAreaView theme={theme}>
       <Box style={{ width: '100%', flex: 1 }}>
@@ -158,7 +176,17 @@ const MainSettingsTab: FC = () => {
               left={props => <List.Icon {...props} icon="file-document" />}
               onPress={handleLicenses}
             />
+            {showDebugScreen ? (
+              <List.Item
+                title={t('settings.debug')}
+                left={props => <List.Icon {...props} icon="bug" />}
+                onPress={handleDebugScreen}
+              />
+            ) : null}
           </List.Section>
+          <Text style={{ textAlign: 'center' }} onPress={handleUnlockDebug}>
+            {t('version')} {packageJson.version}
+          </Text>
         </ScrollView>
       </Box>
       <ChangeThemeModal

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,7 @@ export interface WithTimestamp<T> {`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`export interface GithubState {`
	`18`	`+ // OpenDTU releases`
`18`	`19`	`latestRelease: WithTimestamp<Release \| null>;`
`19`	`20`	`releases: WithTimestamp<Release[]>;`
`20`	`21`