Preparations for debug menu

Author: CommanderRedYT

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;

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;

src/slices/settings.ts

@@ -18,7 +18,7 @@ import type {
   UpdateDtuHostnameAction,
   UpdateDtuSerialNumberAction,
   SetLanguageAction,
-  EnableAppUpdatesAction,
+  EnableAppUpdatesAction, DebugEnabledAction,
 } from '@/types/settings';
 
 const initialState: SettingsState = {
@@ -28,6 +28,7 @@ const initialState: SettingsState = {
   selectedDtuConfig: null,
   databaseConfigs: [],
   enableAppUpdates: null,
+  debugEnabled: false,
 };
 
 const log = logger.createLogger();
@@ -209,6 +210,9 @@ const settingsSlice = createSlice({
     setEnableAppUpdates: (state, action: EnableAppUpdatesAction) => {
       state.enableAppUpdates = action.payload.enable;
     },
+    setDebugEnabled: (state, action: DebugEnabledAction) => {
+      state.debugEnabled = action.payload.debugEnabled;
+    },
   },
 });
 
@@ -231,6 +235,7 @@ export const {
   updateDatabaseConfig,
   updateDTUDatabaseUuid,
   setEnableAppUpdates,
+  setDebugEnabled,
 } = settingsSlice.actions;
 
 export const { reducer: SettingsReducer } = settingsSlice;

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;
+}>;

src/views/navigation/NavigationStack.tsx

@@ -23,6 +23,7 @@ import SelectDatabaseScreen from '@/views/navigation/screens/SelectDatabaseScree
 import SetupAddOpenDTUScreen from '@/views/navigation/screens/SetupAddOpenDTUScreen';
 import SetupAuthenticateOpenDTUInstanceScreen from '@/views/navigation/screens/SetupAuthenticateOpenDTUInstanceScreen';
 import SetupOpenDTUCompleteScreen from '@/views/navigation/screens/SetupOpenDTUCompleteScreen';
+import DebugScreen from '@/views/navigation/screens/DebugScreen';
 
 export type PropsWithNavigation = {
   navigation: NavigationProp<ParamListBase>;
@@ -119,6 +120,11 @@ const NavigationStack: FC = () => {
         component={LicensesScreen}
         options={{ headerBackVisible: true }}
       />
+      <Stack.Screen
+        name="DebugScreen"
+        component={DebugScreen}
+        options={{ headerBackVisible: true }}
+      />
     </Stack.Navigator>
   );
 };

src/views/navigation/screens/DebugScreen.tsx

@@ -0,0 +1,16 @@
+import type { FC } from 'react';
+import { Appbar } from 'react-native-paper';
+
+import type { PropsWithNavigation } from '@/views/navigation/NavigationStack';
+
+const DebugScreen: FC<PropsWithNavigation> = () => {
+  return (
+    <>
+      <Appbar.Header>
+        <Appbar.Content title="Debug" />
+      </Appbar.Header>
+    </>
+  );
+};
+
+export default DebugScreen;

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}>
+            Version {packageJson.version}
+          </Text>
         </ScrollView>
       </Box>
       <ChangeThemeModal