improve settings of app

apps/mobile/App.js

@@ -1,4 +1,6 @@
+import {useNetInfo} from '@react-native-community/netinfo';
 import React, {useEffect, useState} from 'react';
+import {Appearance, StatusBar, useColorScheme} from 'react-native';
 import Orientation from 'react-native-orientation';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {getColorScheme, scale, updateSize} from './src/common/common';
@@ -6,64 +8,56 @@ import {useTracked} from './src/provider';
 import {ACTIONS} from './src/provider/actions';
 import {defaultState} from './src/provider/defaultState';
 import {eSubscribeEvent, eUnSubscribeEvent} from './src/services/eventManager';
-import {eDispatchAction, eStartSyncer, eResetApp} from './src/services/events';
+import {eDispatchAction, eResetApp, eStartSyncer} from './src/services/events';
+import {MMKV} from './src/utils/storage';
 import {db, DDS, ToastEvent} from './src/utils/utils';
-import {useNetInfo} from '@react-native-community/netinfo';
-import RNHTMLtoPDF from 'react-native-html-to-pdf';
-import { MMKV } from './src/utils/storage';
-import {
-  Appearance,
-  useColorScheme,
-  StatusBar} from "react-native";
 const App = () => {
-  const [state, dispatch] = useTracked();
+  const [, dispatch] = useTracked();
   const [init, setInit] = useState(false);
   const netInfo = useNetInfo();
   const colorScheme = useColorScheme();
   const I = DDS.isTab ? require('./index.tablet') : require('./index.mobile');
-  const _onOrientationChange = o => {
+  const _onOrientationChange = (o) => {
     // Currently orientation is locked on tablet.
     /* DDS.checkOrientation();
     setTimeout(() => {
-     
       forceUpdate();
     }, 1000); */
   };
 
   useEffect(() => {
-    systemThemeChange();
+    (async () => {
-  
+      let settings;
-  },[colorScheme])
+      try {
+        settings = await MMKV.getStringAsync('settings');
+      } catch (e) {}
+      if (!settings) {
+        return;
+      }
+      settings = JSON.parse(settings);
 
-
+      if (settings.useSystemTheme) {
-  const systemThemeChange = async () => {
+        let newColors = await getColorScheme(settings.useSystemTheme);
-    let s;
+        StatusBar.setBarStyle(
-    try {
+          Appearance.getColorScheme() === 'dark'
-      s = await MMKV.getStringAsync('settings');
+            ? 'light-content'
-    } catch (e) {
+            : 'dark-content',
-    }
+        );
-    console.log("HEREE");
+        dispatch({type: ACTIONS.THEME, colors: newColors});
-    console.log('heree');
+      }
-    if (!s) return;
+    })();
-    s = JSON.parse(s);
+  }, [colorScheme]);
-    console.log(s);
-    if (s.useSystemTheme) {
-      let newColors = await getColorScheme(s.useSystemTheme);
-      StatusBar.setBarStyle(Appearance.getColorScheme() === "dark" ? 'light-content' : 'dark-content');
-      dispatch({type: ACTIONS.THEME, colors: newColors});
-    }
-  }
 
   useEffect(() => {
     if (!netInfo.isConnected || !netInfo.isInternetReachable) {
-      db.user?.get().then(user => {
+      db.user?.get().then((user) => {
         if (user) {
           ToastEvent.show('No internet connection', 'error');
         } else {
         }
       });
     } else {
-      db.user?.get().then(user => {
+      db.user?.get().then((user) => {
         if (user) {
           ToastEvent.show('Internet connection restored', 'success');
         } else {
@@ -74,11 +68,11 @@ const App = () => {
 
   useEffect(() => {
     Orientation.addOrientationListener(_onOrientationChange);
-    eSubscribeEvent(eDispatchAction, type => {
+    eSubscribeEvent(eDispatchAction, (type) => {
       dispatch(type);
     });
     return () => {
-      eUnSubscribeEvent(eDispatchAction, type => {
+      eUnSubscribeEvent(eDispatchAction, (type) => {
         dispatch(type);
       });
       Orientation.removeOrientationListener(_onOrientationChange);
@@ -98,12 +92,12 @@ const App = () => {
 
   const _syncFunc = async () => {
     dispatch({type: ACTIONS.SYNCING, syncing: true});
-    let u = await db.user.get();
+    let user = await db.user.get();
     try {
       await db.sync();
     } catch (e) {}
-    u = await db.user.get();
+    user = await db.user.get();
-    dispatch({type: ACTIONS.USER, user: u});
+    dispatch({type: ACTIONS.USER, user: user});
     dispatch({type: ACTIONS.ALL});
     dispatch({type: ACTIONS.SYNCING, syncing: false});
   };
@@ -139,31 +133,30 @@ const App = () => {
   }, []);
 
   async function Initialize(colors = colors) {
-
+    let settings;
-    let s;
     try {
-      s = await MMKV.getStringAsync('settings');
+      settings = await MMKV.getStringAsync('settings');
     } catch (e) {}
-    if (typeof s !== 'string') {
+    if (!settings) {
-      s = defaultState.settings;
+      settings = defaultState.settings;
-      s = JSON.stringify(s);
+      settings = JSON.stringify(s);
-      s.fontScale = 1;
+      settings.fontScale = 1;
 
-      await MMKV.setStringAsync('settings', s);
+      await MMKV.setStringAsync('settings', settings);
 
-      dispatch({type: ACTIONS.SETTINGS, s});
+      dispatch({type: ACTIONS.SETTINGS, settings});
     } else {
-      s = JSON.parse(s);
+      settings = JSON.parse(settings);
-      if (s.fontScale) {
+      if (settings.fontScale) {
-        scale.fontScale = s.fontScale;
+        scale.fontScale = settings.fontScale;
       } else {
         scale.fontScale = 1;
       }
       updateSize();
-      dispatch({type: ACTIONS.SETTINGS, settings: {...s}});
+      dispatch({type: ACTIONS.SETTINGS, settings: {...settings}});
     }
 
-    let newColors = await getColorScheme(s.useSystemTheme);
+    let newColors = await getColorScheme(settings.useSystemTheme);
     dispatch({type: ACTIONS.THEME, colors: newColors});
   }
 

apps/mobile/index.mobile.js

@@ -30,8 +30,9 @@ export const Initialize = () => {
     if (Platform.OS === 'android') {
       StatusBar.setBackgroundColor('transparent');
       StatusBar.setTranslucent(true);
-      StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
+     
     }
+    StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
   }, []);
 
   const setGestureDisabled = () => {

apps/mobile/index.tablet.js

@@ -76,10 +76,9 @@ export const Initialize = () => {
     if (Platform.OS === 'android') {
       StatusBar.setBackgroundColor('transparent');
       StatusBar.setTranslucent(true);
-      StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
-    } else {
-      StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
     }
+      StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
+    
   }, []);
 
   return (

apps/mobile/src/components/Container/ContainerBottomButton.js

@@ -1,16 +1,14 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
-import {Keyboard, Text, TouchableOpacity, View, Pressable} from 'react-native';
+import { Keyboard, Text, View } from 'react-native';
-import {useSafeArea} from 'react-native-safe-area-context';
+import { useSafeArea } from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import {pv, SIZE, WEIGHT} from '../../common/common';
+import { pv, SIZE, WEIGHT } from '../../common/common';
-import {useTracked} from '../../provider';
+import { useTracked } from '../../provider';
 import {
   DDS,
-  getElevation,
+  getElevation
-  hexToRGBA,
-  RGB_Linear_Shade,
 } from '../../utils/utils';
-import {PressableButton} from '../PressableButton';
+import { PressableButton } from '../PressableButton';
 
 export const ContainerBottomButton = ({root}) => {
   const [state, dispatch] = useTracked();

apps/mobile/src/components/header/HeaderTitle.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import {Text} from 'react-native';
+import { Text } from 'react-native';
-import {SIZE, WEIGHT} from '../../common/common';
+import { SIZE, WEIGHT } from '../../common/common';
-import {useTracked} from '../../provider';
+import { useTracked } from '../../provider';
 
 export const HeaderTitle = ({root}) => {
   const [state, dispatch] = useTracked();

apps/mobile/src/provider/defaultState.js

@@ -22,7 +22,9 @@ export const defaultState = {
     showKeyboardOnOpen: false,
     fontScale: 1,
     forcePortraitOnTablet: false,
-    useSystemTheme:true
+    useSystemTheme:true,
+    reminder:'weekly',
+    encryptedBackups:false
   },
   currentScreen: 'home',
   colors: {

apps/mobile/src/views/Settings/index.js

@@ -34,10 +34,19 @@ import {ACTIONS} from '../../provider/actions';
 import {eSendEvent} from '../../services/eventManager';
 import {eOpenLoginDialog, eResetApp} from '../../services/events';
 import NavigationService from '../../services/NavigationService';
-import {db, DDS, setSetting, ToastEvent, w, RGB_Linear_Shade, hexToRGBA} from '../../utils/utils';
+import {
+  db,
+  DDS,
+  setSetting,
+  ToastEvent,
+  w,
+  RGB_Linear_Shade,
+  hexToRGBA,
+} from '../../utils/utils';
 import {MMKV} from '../../utils/storage';
 import {PressableButton} from '../../components/PressableButton';
-  
+import Seperator from '../../components/Seperator';
+
 export const Settings = ({route, navigation}) => {
   const [state, dispatch] = useTracked();
   const {colors, user, settings} = state;
@@ -329,10 +338,6 @@ export const Settings = ({route, navigation}) => {
             </View>
 
             {[
-              {
-                name: 'Backup my notes',
-                func: () => {},
-              },
               {
                 name: 'Data recovery key',
                 func: async () => {
@@ -345,7 +350,6 @@ export const Settings = ({route, navigation}) => {
                 name: 'Subscription status',
                 func: () => {},
               },
-
               {
                 name: 'Logout',
                 func: async () => {
@@ -477,7 +481,14 @@ export const Settings = ({route, navigation}) => {
             color: colors.pri,
             marginTop: pv + 5,
           }}>
-          Accent Color
+          Accent Color{'\n'}
+          <Text
+            style={{
+              fontSize: SIZE.xs,
+              color: colors.icon,
+            }}>
+            Choose a color to use as accent color
+          </Text>
         </Text>
 
         <View
@@ -509,7 +520,14 @@ export const Settings = ({route, navigation}) => {
           ].map((item) => (
             <PressableButton
               key={item}
-              color={colors.accent === item? RGB_Linear_Shade(!colors.night? -0.2 : 0.2, hexToRGBA(item, 1)) : item}
+              color={
+                colors.accent === item
+                  ? RGB_Linear_Shade(
+                      !colors.night ? -0.2 : 0.2,
+                      hexToRGBA(item, 1),
+                    )
+                  : item
+              }
               selectedColor={item}
               alpha={!colors.night ? -0.1 : 0.1}
               opacity={1}
@@ -530,11 +548,9 @@ export const Settings = ({route, navigation}) => {
                 justifyContent: 'center',
                 alignItems: 'center',
               }}>
-             
+              {colors.accent === item ? (
-                {colors.accent === item ? (
+                <Icon size={SIZE.lg} color="white" name="check" />
-                  <Icon size={SIZE.lg} color="white" name="check" />
+              ) : null}
-                ) : null}
-            
             </PressableButton>
           ))}
         </View>
@@ -575,7 +591,16 @@ export const Settings = ({route, navigation}) => {
               textAlignVertical: 'center',
               color: colors.pri,
             }}>
-            Use System Dark Mode
+            Use System Dark Mode{'\n'}
+            <Text
+              style={{
+                fontSize: SIZE.xs,
+                color: colors.icon,
+              }}>
+              {settings.useSystemTheme
+                ? 'Switch to dark theme based on system settings'
+                : 'Keep the app theme independent from system settings'}
+            </Text>
           </Text>
           <Icon
             size={SIZE.xl}
@@ -613,7 +638,14 @@ export const Settings = ({route, navigation}) => {
               textAlignVertical: 'center',
               color: colors.pri,
             }}>
-            Dark Mode
+            Dark Mode{'\n'}
+            <Text
+              style={{
+                fontSize: SIZE.xs,
+                color: colors.icon,
+              }}>
+              {colors.night ? 'Turn off dark mode' : 'Turn on dark mode'}
+            </Text>
           </Text>
           <Icon
             size={SIZE.xl}
@@ -623,34 +655,10 @@ export const Settings = ({route, navigation}) => {
         </TouchableOpacity>
 
         <TouchableOpacity
-          onPress={async () => {
-            let scale = settings.fontScale;
-
-            scale === 1
-              ? (scale = 1.1)
-              : scale === 1.1
-              ? (scale = 1.2)
-              : scale === 1.2
-              ? (scale = 1.3)
-              : scale === 1.3
-              ? (scale = 1.4)
-              : scale === 1.4
-              ? (scale = 1.5)
-              : scale === 1.5
-              ? (scale = 0.8)
-              : scale === 0.8
-              ? (scale = 0.9)
-              : (scale = 0.9 ? (scale = 1) : (scale = 1));
-
-            await setSetting(settings, 'fontScale', scale);
-
-            eSendEvent(eResetApp);
-          }}
-          activeOpacity={opacity}
           style={{
             width: '100%',
             marginHorizontal: 0,
-            paddingVertical: pv + 5,
+            height: 50,
             flexDirection: 'row',
             alignItems: 'center',
             justifyContent: 'space-between',
@@ -662,25 +670,70 @@ export const Settings = ({route, navigation}) => {
               textAlignVertical: 'center',
               color: colors.pri,
             }}>
-            Font Scaling
+            Font Scaling{'\n'}
+            <Text
+              style={{
+                fontSize: SIZE.xs,
+                color: colors.icon,
+              }}>
+              Scale the size of text in the app.
+            </Text>
           </Text>
 
           <View
             style={{
-              borderBottomWidth: 1,
+              flexDirection: 'row',
-              borderColor: colors.nav,
+              overflow: 'hidden',
-              paddingVertical: 1,
+              borderRadius: 5,
-              paddingHorizontal: 5,
+              justifyContent: 'center',
+              alignItems: 'center',
             }}>
-            <Text
+            {[
-              style={{
+              {
-                fontSize: SIZE.xs,
+                title: '0.9x',
-                fontFamily: WEIGHT.regular,
+                value: 0.9,
-                textAlignVertical: 'center',
+              },
-                color: colors.pri,
+              {
-              }}>
+                title: '1.0x',
-              {settings?.fontScale ? settings.fontScale + 'X' : '1X'}
+                value: 1,
-            </Text>
+              },
+              {
+                title: '1.2x',
+                value: 1.2,
+              },
+              {
+                title: '1.5x',
+                value: 1.5,
+              },
+            ].map((item) => (
+              <TouchableOpacity
+                activeOpacity={1}
+                onPress={async () => {
+                  let scale = settings.fontScale;
+                  await setSetting(settings, 'fontScale', scale);
+                  eSendEvent(eResetApp);
+                }}
+                key={item.title}
+                style={{
+                  backgroundColor:
+                    settings.fontScale === item.value
+                      ? colors.accent
+                      : colors.nav,
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  height: 20,
+                  paddingHorizontal: 5,
+                }}>
+                <Text
+                  style={{
+                    color:
+                      settings.fontScale === item.value ? 'white' : colors.icon,
+                    fontSize: SIZE.xs,
+                  }}>
+                  {item.title}
+                </Text>
+              </TouchableOpacity>
+            ))}
           </View>
         </TouchableOpacity>
 
@@ -731,11 +784,197 @@ export const Settings = ({route, navigation}) => {
             fontFamily: WEIGHT.bold,
             textAlignVertical: 'center',
             color: colors.accent,
-
             borderBottomColor: colors.nav,
             borderBottomWidth: 0.5,
             paddingBottom: 3,
-            marginBottom: pv + 5,
+          }}>
+          Backup & Restore
+        </Text>
+
+        <TouchableOpacity
+          onPress={async () => {
+            await setSetting(
+              settings,
+              'useSystemTheme',
+              !settings.useSystemTheme,
+            );
+
+            if (!settings.useSystemTheme) {
+              MMKV.setStringAsync(
+                'theme',
+                JSON.stringify({night: Appearance.getColorScheme() === 'dark'}),
+              );
+              changeColorScheme(
+                Appearance.getColorScheme() === 'dark'
+                  ? COLOR_SCHEME_DARK
+                  : COLOR_SCHEME_LIGHT,
+              );
+            }
+          }}
+          activeOpacity={opacity}
+          style={{
+            width: '100%',
+            marginHorizontal: 0,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            height: 50,
+          }}>
+          <Text
+            style={{
+              fontSize: SIZE.sm,
+              fontFamily: WEIGHT.regular,
+              textAlignVertical: 'center',
+              color: colors.pri,
+            }}>
+            Backup reminder{'\n'}
+            <Text
+              style={{
+                fontSize: SIZE.xs,
+                color: colors.icon,
+              }}>
+              Remind you to backup data.
+            </Text>
+          </Text>
+
+          <View
+            style={{
+              flexDirection: 'row',
+              overflow: 'hidden',
+              borderRadius: 5,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}>
+            {[
+              {
+                title: 'Daily',
+                value: 'daily',
+              },
+              {
+                title: 'Weekly',
+                value: 'weekly',
+              },
+            ].map((item) => (
+              <TouchableOpacity
+                onPress={async () => {
+                  await setSetting(settings, 'reminder', item.value);
+                }}
+                key={item.value}
+                style={{
+                  backgroundColor:
+                    settings.reminder === 'daily' ? colors.accent : colors.nav,
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  width: 60,
+                  height: 20,
+                }}>
+                <Text
+                  style={{
+                    color:
+                      settings.reminder === 'daily' ? 'white' : colors.icon,
+                    fontSize: SIZE.xs,
+                  }}>
+                  {item.title}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          onPress={async () => {
+            await setSetting(
+              settings,
+              'encryptedBackup',
+              !settings.encryptedBackup,
+            );
+          }}
+          activeOpacity={opacity}
+          style={{
+            width: '100%',
+            marginHorizontal: 0,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            height: 50,
+          }}>
+          <Text
+            style={{
+              fontSize: SIZE.sm,
+              fontFamily: WEIGHT.regular,
+              textAlignVertical: 'center',
+              color: colors.pri,
+            }}>
+            Encrypted Backups{'\n'}
+            <Text
+              style={{
+                fontSize: SIZE.xs,
+                color: colors.icon,
+              }}>
+              Encrypt your data before backup
+            </Text>
+          </Text>
+          <Icon
+            size={SIZE.xl}
+            color={settings.useSystemTheme ? colors.accent : colors.icon}
+            name={
+              settings.useSystemTheme ? 'toggle-switch' : 'toggle-switch-off'
+            }
+          />
+        </TouchableOpacity>
+
+        {[
+          {
+            name: 'Backup data',
+            func: () => {
+              Linking.openURL('https://www.notesnook.com/privacy.html');
+            },
+            desc: 'Backup all your data to phone storage',
+          },
+          {
+            name: 'Restore data',
+            func: () => {
+              Linking.openURL('https://www.notesnook.com');
+            },
+            desc: 'Restore backup from your phone.',
+          },
+        ].map((item) => (
+          <TouchableOpacity
+            key={item.name}
+            activeOpacity={opacity}
+            onPress={item.func}>
+            <Text
+              style={{
+                fontSize: SIZE.sm,
+                fontFamily: WEIGHT.regular,
+                textAlignVertical: 'center',
+                color: colors.pri,
+                height: 50,
+                justifyContent: 'center',
+              }}>
+              {item.name}
+              {'\n'}
+              <Text
+                style={{
+                  fontSize: SIZE.xs,
+                  color: colors.icon,
+                }}>
+                {item.desc}
+              </Text>
+            </Text>
+            {item.customComponent ? item.customComponent : null}
+          </TouchableOpacity>
+        ))}
+
+        <Text
+          style={{
+            fontSize: SIZE.xs,
+            fontFamily: WEIGHT.bold,
+            textAlignVertical: 'center',
+            color: colors.accent,
+            borderBottomColor: colors.nav,
+            borderBottomWidth: 0.5,
+            paddingBottom: 3,
           }}>
           Other
         </Text>
@@ -746,12 +985,14 @@ export const Settings = ({route, navigation}) => {
             func: () => {
               Linking.openURL('https://www.notesnook.com/privacy.html');
             },
+            desc: 'Read our privacy policy',
           },
           {
             name: 'About',
             func: () => {
               Linking.openURL('https://www.notesnook.com');
             },
+            desc: null,
           },
         ].map((item) => (
           <TouchableOpacity
@@ -759,8 +1000,8 @@ export const Settings = ({route, navigation}) => {
             activeOpacity={opacity}
             onPress={item.func}
             style={{
-              width: item.step ? '85%' : w - 24,
+              height: 50,
-              paddingVertical: pv + 5,
+              justifyContent: 'center',
             }}>
             <Text
               style={{
@@ -770,15 +1011,19 @@ export const Settings = ({route, navigation}) => {
                 color: colors.pri,
               }}>
               {item.name}
+              {'\n'}
+              <Text
+                style={{
+                  fontSize: SIZE.xs,
+                  color: colors.icon,
+                }}>
+                {item.desc}
+              </Text>
             </Text>
             {item.customComponent ? item.customComponent : null}
           </TouchableOpacity>
         ))}
-        <View
+        <Seperator />
-          style={{
-            height: 300,
-          }}
-        />
       </ScrollView>
     </Animatable.View>
   );