fix state

apps/mobile/App.js

@@ -10,17 +10,18 @@ import {Menu} from './src/components/Menu';
 import SideMenu from './src/components/SideMenu';
 import Storage from 'notes-core/api/database';
 import StorageInterface from './src/utils/storage';
-import {Provider, useTracked} from './src/provider';
 import {DeviceDetectionService} from './src/utils/deviceDetection';
 import {DialogManager} from './src/components/DialogManager';
+import {useAppContext} from './src/provider/useAppContext';
+import {AppProvider} from './src/provider';
+import {COLOR_SCHEME_LIGHT} from './src/common/common';
 
 export const DDS = new DeviceDetectionService();
 export const db = new Storage(StorageInterface);
 
 let sideMenuRef;
 const App = () => {
-  const [state, dispatch] = useTracked();
-  const {colors} = state;
+  const [colors, setColors] = useState(COLOR_SCHEME_LIGHT);
   // Global State
 
   // Local State
@@ -73,15 +74,15 @@ const App = () => {
     db.init().then(() => {
       setInit(true);
     });
-  }, []);
+  });
 
   // Render
-
   if (!init) {
     return <></>;
   }
+
   return (
-    <Provider>
+    <AppProvider>
       <View
         style={{
           width: '100%',
@@ -144,14 +145,9 @@ const App = () => {
           </SideMenu>
         )}
         <Toast />
-        <DialogManager
-          colors={colors}
-          update={type => {
-            dispatch({type: 'updateNotes'});
-          }}
-        />
       </View>
-    </Provider>
+      <DialogManager colors={colors} />
+    </AppProvider>
   );
 };
 

apps/mobile/index.js

@@ -5,15 +5,5 @@
 import {AppRegistry} from 'react-native';
 import App, {db} from './App';
 import {name as appName} from './app.json';
-import React, {useEffect} from 'react';
-import {Provider} from './src/provider';
 
-const AppProvider = () => {
-  return (
-    <Provider>
-      <App />
-    </Provider>
-  );
-};
-
-AppRegistry.registerComponent(appName, () => AppProvider);
+AppRegistry.registerComponent(appName, () => App);

apps/mobile/src/components/ActionSheetComponent/index.js

@@ -19,7 +19,8 @@ import NavigationService from '../../services/NavigationService';
 import {db} from '../../../App';
 import {useAppContext} from '../../provider/useAppContext';
 import FastStorage from 'react-native-fast-storage';
-import {useTracked} from '../../provider';
+
+import {_recieveEvent, _unSubscribeEvent} from '../DialogManager';
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 
@@ -33,13 +34,10 @@ export const ActionSheetComponent = ({
   rowItems = [],
   columnItems = [],
 }) => {
-  const [state, dispatch] = useTracked();
-  const {colors} = state;
+  const {colors, updateDB, changeColorScheme} = useAppContext();
 
   // Todo
 
-  const changeColorScheme = () => {};
-
   const [focused, setFocused] = useState(false);
   const [note, setNote] = useState(
     item
@@ -154,7 +152,7 @@ export const ActionSheetComponent = ({
       }
     }
 
-    dispatch({type: type});
+    updateDB();
     setNote({...toAdd});
   };
 

apps/mobile/src/components/AddNotebookDialog/index.js

@@ -13,13 +13,12 @@ import {getElevation, ToastEvent} from '../../utils/utils';
 import {FlatList, TextInput} from 'react-native-gesture-handler';
 import {db, DDS} from '../../../App';
 import {useAppContext} from '../../provider/useAppContext';
-import {useTracked} from '../../provider';
+ 
 
 let refs = [];
 
 export const AddNotebookDialog = ({visible, close, toEdit = null}) => {
-  const [state, dispatch] = useTracked();
-  const {colors} = state;
+  const {colors} = useAppContext();
 
   const [topics, setTopics] = useState(['']);
   const [title, setTitle] = useState(null);

apps/mobile/src/components/AddTopicDialog/index.js

@@ -28,7 +28,7 @@ import {FlatList, TextInput} from 'react-native-gesture-handler';
 import {useForceUpdate} from '../../views/ListsEditor';
 import {db} from '../../../App';
 import {useAppContext} from '../../provider/useAppContext';
-import {useTracked} from '../../provider';
+ 
 
 export const AddTopicDialog = ({
   visible,
@@ -36,8 +36,7 @@ export const AddTopicDialog = ({
   notebookID,
   toEdit = null,
 }) => {
-  const [state, dispatch] = useTracked();
-  const {colors} = state;
+  const {colors} = useAppContext();
   const [titleFocused, setTitleFocused] = useState(false);
 
   let title = null;

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

@@ -19,7 +19,7 @@ import NavigationService from '../../services/NavigationService';
 import * as Animatable from 'react-native-animatable';
 import {useAppContext} from '../../provider/useAppContext';
 import {DDS} from '../../../App';
-import {useTracked} from '../../provider';
+ 
 export const AnimatedSafeAreaView = Animatable.createAnimatableComponent(
   SafeAreaView,
 );
@@ -31,8 +31,7 @@ export const Container = ({
   noBottomButton = false,
 }) => {
   // State
-  const [state, dispatch] = useTracked();
-  const {colors} = state;
+  const {colors} = useAppContext();
 
   const [buttonHide, setButtonHide] = useState(false);
 

apps/mobile/src/components/Dialog/index.js

@@ -13,7 +13,7 @@ import {
 } from '../../common/common';
 import Icon from 'react-native-vector-icons/Feather';
 import {getElevation, ToastEvent} from '../../utils/utils';
-import {useTracked} from '../../provider';
+ 
 import {dialogActions, updateEvent} from '../DialogManager';
 import {db} from '../../../App';
 

apps/mobile/src/components/DialogManager/index.js

@@ -3,6 +3,7 @@ import {DeviceEventEmitter} from 'react-native';
 import {ActionSheetComponent} from '../ActionSheetComponent';
 import ActionSheet from '../ActionSheet';
 import {Dialog} from '../Dialog';
+import {VaultDialog} from '../VaultDialog';
 export const ActionSheetEvent = (item, colors, tags, rowItems, columnItems) => {
   DeviceEventEmitter.emit('ActionSheetEvent', {
     item,
@@ -56,6 +57,8 @@ export class DialogManager extends Component {
   constructor(props) {
     super(props);
     this.actionSheet;
+    this.opened = false;
+
     this.state = {
       item: {},
       actionSheetData: {
@@ -72,9 +75,17 @@ export class DialogManager extends Component {
         action: 0,
         icon: '',
       },
+      isPerm: false,
     };
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return (
+      JSON.stringify(nextProps) !== JSON.stringify(this.props) ||
+      nextState !== this.state
+    );
+  }
+
   _showActionSheet = data => {
     this.setState(
       {
@@ -120,6 +131,13 @@ export class DialogManager extends Component {
     this.simpleDialog.hide();
   };
 
+  _showVaultDialog = () => {
+    this.vaultDialogRef.open();
+  };
+  _hideVaultDialog = () => {
+    this.vaultDialogRef.close();
+  };
+
   onActionSheetHide = () => {
     if (this.show) {
       if (this.show === 'delete') {
@@ -127,16 +145,13 @@ export class DialogManager extends Component {
 
         this.show = null;
       } else if (this.show == 'lock') {
-        this.setState({
-          vaultDialog: true,
-        });
+        this._showVaultDialog();
         this.show = null;
       } else if (this.show == 'unlock') {
         this.setState({
-          unlock: true,
           isPerm: true,
-          vaultDialog: true,
         });
+        this._showVaultDialog();
         this.show = null;
       }
     }
@@ -144,8 +159,15 @@ export class DialogManager extends Component {
   };
 
   render() {
-    let {colors, update} = this.props;
-    let {actionSheetData, item, simpleDialog} = this.state;
+    let {colors} = this.props;
+    let {
+      actionSheetData,
+      item,
+      simpleDialog,
+      isPerm,
+      vaultDialog,
+      unlock,
+    } = this.state;
     return (
       <>
         <ActionSheet
@@ -187,6 +209,15 @@ export class DialogManager extends Component {
           colors={colors}
           template={simpleDialog}
         />
+
+        <VaultDialog
+          ref={ref => (this.vaultDialogRef = ref)}
+          colors={colors}
+          note={item}
+          perm={isPerm}
+          openedToUnlock={false}
+          visible={vaultDialog}
+        />
       </>
     );
   }

apps/mobile/src/components/EditorMenu/index.js

@@ -26,7 +26,7 @@ import {AnimatedSafeAreaView} from '../../views/Home';
 import {TextInput} from 'react-native-gesture-handler';
 import {useAppContext} from '../../provider/useAppContext';
 import {VaultDialog} from '../VaultDialog';
-import {useTracked} from '../../provider';
+ 
 
 let tagsInputRef;
 let tagsList;
@@ -39,11 +39,9 @@ export const EditorMenu = ({
   note,
   timestamp,
 }) => {
-  const [state, dispatch] = useTracked();
-  const {colors} = state;
+  const {colors, changeColorScheme} = useAppContext();
   // Todo
 
-  const changeColorScheme = () => {};
   ///////
 
   const [unlock, setUnlock] = useState(false);

apps/mobile/src/components/ListItem/index.js

@@ -14,12 +14,11 @@ import Icon from 'react-native-vector-icons/Ionicons';
 import {getElevation} from '../../utils/utils';
 import {FlatList} from 'react-native-gesture-handler';
 import {useAppContext} from '../../provider/useAppContext';
-import {useTracked} from '../../provider';
+ 
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 export const ListItem = props => {
-  const [state, dispatch] = useTracked();
-  const {colors} = state;
+  const {colors} = useAppContext();
 
   return (
     <View

apps/mobile/src/components/Menu/index.js

@@ -21,10 +21,9 @@ import {h} from '../../utils/utils';
 import {AnimatedSafeAreaView} from '../../views/Home';
 import {useAppContext} from '../../provider/useAppContext';
 import FastStorage from 'react-native-fast-storage';
-import {useTracked} from '../../provider';
+ 
 export const Menu = ({close = () => {}, hide, update = () => {}}) => {
-  const [state, dispatch] = useTracked();
-  const {colors} = state;
+  const {colors} = useAppContext();
 
   // todo
 

apps/mobile/src/components/NoteItem/index.js

@@ -49,8 +49,7 @@ export default class NoteItem extends React.Component {
       update,
       index,
     } = this.props;
-
-    console.log('rerendering' + index);
+    console.log('rerendering', index);
     return (
       <View
         style={[
@@ -69,20 +68,6 @@ export default class NoteItem extends React.Component {
           },
           customStyle ? customStyle : {},
         ]}>
-        <VaultDialog
-          close={() => {
-            this.setState({
-              vaultDialog: false,
-              unlock: false,
-              isPerm: false,
-            });
-          }}
-          note={item}
-          perm={isPerm}
-          openedToUnlock={unlock}
-          visible={vaultDialog}
-        />
-
         {pinned ? (
           <View
             style={{

apps/mobile/src/components/NotebookItem/index.js

@@ -27,11 +27,9 @@ export const NotebookItem = ({
   customStyle,
   onLongPress,
 }) => {
-  const [state, dispatch] = useTracked();
-  const {colors} = state;
+  const {colors, updateDB} = useAppContext();
 
   ///
-  const updateDB = () => {};
 
   const [isVisible, setVisible] = useState(false);
   const [addTopic, setAddTopic] = useState(false);

apps/mobile/src/components/NotesList/index.js

@@ -9,7 +9,7 @@ import {w} from '../../utils/utils';
 import SelectionWrapper from '../SelectionWrapper';
 import ActionSheet from '../ActionSheet';
 import {ActionSheetComponent} from '../ActionSheetComponent';
-import {useTracked} from '../../provider';
+ 
 
 export const NotesList = ({
   notes,
@@ -18,12 +18,14 @@ export const NotesList = ({
   isGrouped = false,
   refresh = () => {},
 }) => {
-  const [state, dispatch] = useTracked();
-  const {colors, selectionMode, pinned, selectedItemsList} = state;
-
-  ///
-  const updateSelectionList = () => {};
-  const changeSelectionMode = () => {};
+  const {
+    colors,
+    selectionMode,
+    pinned,
+    selectedItemsList,
+    updateSelectionList,
+    changeSelectionMode,
+  } = useAppContext();
 
   const _renderItem = ({item, index}) => (
     <SelectionWrapper item={item}>

apps/mobile/src/components/SearchInput/index.js

@@ -15,10 +15,9 @@ import {getElevation, w} from '../../utils/utils';
 import * as Animatable from 'react-native-animatable';
 import {DDS} from '../../../App';
 import {useAppContext} from '../../provider/useAppContext';
-import {useTracked} from '../../provider';
+ 
 export const Search = props => {
-  const [state, dispatch] = useTracked();
-  const {colors} = state;
+  const {colors} = useAppContext();
 
   const [focus, setFocus] = useState(false);
 

apps/mobile/src/components/SelectionHeader/index.js

@@ -5,7 +5,7 @@ import {w} from '../../utils/utils';
 import Icon from 'react-native-vector-icons/Feather';
 import * as Animatable from 'react-native-animatable';
 import {useAppContext} from '../../provider/useAppContext';
-import {useTracked} from '../../provider';
+ 
 
 export const AnimatedSafeAreaView = Animatable.createAnimatableComponent(
   SafeAreaView,
@@ -13,13 +13,14 @@ export const AnimatedSafeAreaView = Animatable.createAnimatableComponent(
 
 export const SelectionHeader = ({navigation}) => {
   // State
-  const [state, dispatch] = useTracked();
-  const {colors, selectionMode, selectedItemsList} = state;
-
-  ///
-  const updateDB = () => {};
-  const updateSelectionList = () => {};
-  const changeSelectionMode = () => {};
+  const {
+    colors,
+    selectionMode,
+    selectedItemsList,
+    updateDB,
+    updateSelectionList,
+    changeSelectionMode,
+  } = useAppContext();
 
   // Render
 

apps/mobile/src/components/SelectionWrapper/index.js

@@ -3,16 +3,18 @@ import {View, TouchableOpacity} from 'react-native';
 import {SIZE} from '../../common/common';
 import Icon from 'react-native-vector-icons/Feather';
 import {w} from '../../utils/utils';
-import {useTracked} from '../../provider';
+import {useAppContext} from '../../provider/useAppContext';
 
 const SelectionWrapper = ({children, item}) => {
-  const [state, dispatch] = useTracked();
-  const {colors, selectionMode, selectedItemsList} = state;
+  const {
+    colors,
+    selectionMode,
+    selectedItemsList,
+    updateDB,
+    updateSelectionList,
+    changeSelectionMode,
+  } = useAppContext();
 
-  ///
-  const updateDB = () => {};
-  const updateSelectionList = () => {};
-  const changeSelectionMode = () => {};
   return (
     <View
       style={{

apps/mobile/src/components/Toast/index.js

@@ -12,14 +12,13 @@ import Icon from 'react-native-vector-icons/Feather';
 import * as Animatable from 'react-native-animatable';
 import {h, w} from '../../utils/utils';
 import {useAppContext} from '../../provider/useAppContext';
-import {useTracked} from '../../provider';
+ 
 
 const AnimatedTouchableOpacity = Animatable.createAnimatableComponent(
   TouchableOpacity,
 );
 export const Toast = () => {
-  const [state, dispatch] = useTracked();
-  const {colors} = state;
+  const {colors} = useAppContext();
 
   const [toast, setToast] = useState(false);
   const [message, setMessage] = useState([]);

apps/mobile/src/components/VaultDialog/index.js

@@ -1,36 +1,71 @@
-import React, {useState} from 'react';
+import React, {Component} from 'react';
 import {View, Text, TouchableOpacity, Modal} from 'react-native';
 import {SIZE, ph, pv, opacity, WEIGHT} from '../../common/common';
 import Icon from 'react-native-vector-icons/Feather';
-import {FlatList, TextInput} from 'react-native-gesture-handler';
-import {useForceUpdate} from '../../views/ListsEditor';
+import {TextInput} from 'react-native-gesture-handler';
 import {db} from '../../../App';
-import {useAppContext} from '../../provider/useAppContext';
 import {getElevation} from '../../utils/utils';
 import NavigationService from '../../services/NavigationService';
-import {useTracked} from '../../provider';
 
-let refs = [];
+import {updateEvent} from '../DialogManager';
 
-export const VaultDialog = ({
-  openedToUnlock = false,
-  visible,
-  hasPassword = false,
-  note,
-  close = () => {},
-  perm = false,
-  timestamp = null,
-}) => {
-  const [state, dispatch] = useTracked();
-  const {colors} = state;
+export class VaultDialog extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false,
+    };
+    this.password = null;
+  }
+
+  open = () => {
+    this.setState({
+      visible: true,
+    });
+  };
+  close = () => {
+    this.setState(
+      {
+        visible: false,
+      },
+      () => {
+        updateEvent({type: this.props.note.type});
+      },
+    );
+  };
+
+  onPress = async () => {
+    if (this.props.note.locked) {
+      let n = db.getNote(this.props.note.dateCreated);
+      let item;
+      if (n.content.cipher) {
+        try {
+          item = await db.unlockNote(n.dateCreated, password, this.props.perm);
+        } catch (error) {
+          console.log(error);
+        }
+      } else {
+        item = n;
+      }
+      if (!this.props.perm) {
+        NavigationService.navigate('Editor', {
+          note: item,
+        });
+      }
+
+      this.close();
+    } else {
+      await db.lockNote(this.props.note.dateCreated, 'password');
+      this.close();
+    }
+  };
+
+  render() {
+    const {hasPassword, note, colors} = this.props;
+    const {visible} = this.state;
 
-  const [hidden, setHidden] = useState(false);
-  let password = null;
     return (
-    <Modal
-      visible={visible}
-      transparent={true}
-      onRequestClose={() => (refs = [])}>
+      <Modal visible={visible} transparent={true} onRequestClose={this.close}>
         <View
           style={{
             width: '100%',
@@ -65,7 +100,7 @@ export const VaultDialog = ({
                   marginLeft: 5,
                   fontSize: SIZE.md,
                 }}>
-              {openedToUnlock ? 'Unlock Note' : 'Lock Note'}
+                {note.locked ? 'Unlock Note' : 'Lock Note'}
               </Text>
             </View>
 
@@ -76,16 +111,16 @@ export const VaultDialog = ({
                 textAlign: 'center',
                 fontSize: SIZE.sm - 1,
                 marginTop: 10,
-              marginBottom: hidden ? 20 : 0,
+                //marginBottom: hidden ? 20 : 0,
               }}>
               {hasPassword
                 ? 'Set password for all your locked notes.'
-              : openedToUnlock
+                : note.locked
                 ? 'Enter vault password to unlock note.'
                 : 'Do you want to lock this note?'}
             </Text>
 
-          {openedToUnlock ? (
+            {note.locked ? (
               <TextInput
                 style={{
                   padding: pv - 5,
@@ -165,33 +200,7 @@ export const VaultDialog = ({
               }}>
               <TouchableOpacity
                 activeOpacity={opacity}
-              onPress={async () => {
-                if (openedToUnlock) {
-                  let n = db.getNote(note.dateCreated);
-                  let item;
-                  if (n.content.cipher) {
-                    try {
-                      item = await db.unlockNote(n.dateCreated, password, perm);
-                    } catch (error) {
-                      console.log(error);
-                    }
-                  } else {
-                    item = n;
-                  }
-                  if (!perm) {
-                    NavigationService.navigate('Editor', {
-                      note: item,
-                    });
-                  }
-                  close(item, false);
-                } else {
-                  try {
-                    await db.lockNote(note.dateCreated, 'password');
-                  } catch (error) {}
-
-                  close(null, true);
-                }
-              }}
+                onPress={this.onPress}
                 style={{
                   paddingVertical: pv,
                   paddingHorizontal: ph,
@@ -209,15 +218,13 @@ export const VaultDialog = ({
                     color: 'white',
                     fontSize: SIZE.sm,
                   }}>
-                {openedToUnlock ? 'Unlock' : 'Lock'}
+                  {note.locked ? 'Unlock' : 'Lock'}
                 </Text>
               </TouchableOpacity>
 
               <TouchableOpacity
                 activeOpacity={opacity}
-              onPress={() => {
-                close();
-              }}
+                onPress={this.close}
                 style={{
                   paddingVertical: pv,
                   paddingHorizontal: ph,
@@ -241,4 +248,5 @@ export const VaultDialog = ({
         </View>
       </Modal>
     );
-};
+  }
+}

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

@@ -7,7 +7,7 @@ import * as Animatable from 'react-native-animatable';
 import NavigationService from '../../services/NavigationService';
 import {DDS} from '../../../App';
 import {useAppContext} from '../../provider/useAppContext';
-import {useTracked} from '../../provider';
+ 
 let isOpen = false;
 export const Header = ({
   heading,
@@ -18,8 +18,7 @@ export const Header = ({
   verticalMenu = false,
   sendHeight = e => {},
 }) => {
-  const [state, dispatch] = useTracked();
-  const {colors} = state;
+  const {colors} = useAppContext();
 
   return (
     <Animatable.View

apps/mobile/src/provider/index.js

@@ -1,6 +1,9 @@
-import React, {useReducer} from 'react';
+import React, {createContext, useEffect, useState} from 'react';
+import {View, Text} from 'react-native';
+import {useImmer} from 'use-immer';
 import {DDS, db} from '../../App';
-import {createContainer} from 'react-tracked';
+import {getColorScheme} from '../common/common';
+
 const defaultState = {
   isMenuOpen: {
     current: false,
@@ -32,26 +35,51 @@ const defaultState = {
     warningBg: '#FEEFB3',
     warningText: '#9F6000',
   },
+  selectionMode: false,
+  selectedItemsList: [],
 };
 
-export const ACTIONS = {
-  NOTES: 'note',
-};
+const AppContext = createContext([defaultState, function() {}]);
 
-const reducer = (state, action) => {
-  switch (action.type) {
-    case 'note':
-      let notes = db.groupNotes();
-      return {
-        ...state,
-        notes: notes,
-      };
+const AppProvider = ({children}) => {
+  const [state, dispatch] = useImmer({...defaultState});
+  const [loading, setLoading] = useState(true);
 
-    default:
-      throw new Error('unknown action type');
+  async function init() {
+    let newColors = await getColorScheme();
+    dispatch(draft => {
+      draft.colors = {...newColors};
+      draft.notes = db.groupNotes();
+      draft.notebooks = db.getNotebooks();
+      draft.trash = db.getTrash();
+      draft.favorites = db.getFavorites();
+      draft.pinned = db.getPinned();
+    });
   }
+
+  useEffect(() => {
+    init();
+  }, []);
+
+  return (
+    <AppContext.Provider value={[state, dispatch]}>
+      {children}
+      {loading ? (
+        <View
+          style={{
+            width: '100%',
+            height: '100%',
+            backgroundColor: 'white',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}>
+          <Text>Loading...</Text>
+        </View>
+      ) : (
+        children
+      )}
+    </AppContext.Provider>
+  );
 };
 
-const useValue = () => useReducer(reducer, defaultState);
-
-export const {Provider, useTracked} = createContainer(useValue);
+export {AppProvider, AppContext};

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

@@ -4,11 +4,10 @@ import {SIZE, pv, opacity, WEIGHT} from '../../common/common';
 import {Header} from '../../components/header';
 import {AnimatedSafeAreaView} from '../Home';
 import {useAppContext} from '../../provider/useAppContext';
-import {useTracked} from '../../provider';
+ 
 
 export const AccountSettings = ({navigation}) => {
-  const [state, dispatch] = useTracked();
-  const {colors} = state;
+  const {colors} = useAppContext();
 
   return (
     <AnimatedSafeAreaView

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

@@ -25,7 +25,7 @@ import ActionSheet from '../../components/ActionSheet';
 import {ActionSheetComponent} from '../../components/ActionSheetComponent';
 import {VaultDialog} from '../../components/VaultDialog';
 import {useIsFocused} from 'react-navigation-hooks';
-import {useTracked} from '../../provider';
+ 
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 
@@ -38,11 +38,7 @@ var title = null;
 let timer = null;
 const Editor = ({navigation}) => {
   // Global State
-  const [state, dispatch] = useTracked();
-  const {colors} = state;
-
-  ///
-  const updateDB = () => {};
+  const {colors, updateDB} = useAppContext();
 
   // Local State
 

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

@@ -10,15 +10,17 @@ import {NotebookItem} from '../../components/NotebookItem';
 import {FavoritesPlaceHolder} from '../../components/ListPlaceholders';
 import Container from '../../components/Container';
 import {useIsFocused} from 'react-navigation-hooks';
-import {useTracked} from '../../provider';
+ 
 
 export const Favorites = ({navigation}) => {
   // Global State
-  const [state, dispatch] = useTracked();
-  const {colors, selectionMode, pinned, selectedItemsList, favorites} = state;
-
-  const updateSelectionList = () => {};
-  const changeSelectionMode = () => {};
+  const {
+    colors,
+    selectionMode,
+    favorites,
+    updateSelectionList,
+    changeSelectionMode,
+  } = useAppContext();
 
   // Local State
   const [text, setText] = useState('');

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

@@ -14,16 +14,18 @@ import SelectionHeader from '../../components/SelectionHeader';
 import SelectionWrapper from '../../components/SelectionWrapper';
 import {w} from '../../utils/utils';
 import {useIsFocused} from 'react-navigation-hooks';
-import {useTracked} from '../../provider';
+ 
 
 export const Folders = ({navigation}) => {
-  const [state, dispatch] = useTracked();
-  const {colors, selectionMode, pinned, notebooks} = state;
-
-  ///
-  const updateDB = () => {};
-  const updateSelectionList = () => {};
-  const changeSelectionMode = () => {};
+  const {
+    colors,
+    selectionMode,
+    pinned,
+    notebooks,
+    updateDB,
+    updateSelectionList,
+    changeSelectionMode,
+  } = useAppContext();
 
   const [addNotebook, setAddNotebook] = useState(false);
   const [hideHeader, setHideHeader] = useState(false);

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

@@ -33,16 +33,17 @@ import {NavigationEvents} from 'react-navigation';
 import {Header} from '../../components/header';
 import {useForceUpdate} from '../ListsEditor';
 import {useAppContext} from '../../provider/useAppContext';
-import {useTracked} from '../../provider';
+ 
 
 export const ForgotPassword = ({navigation}) => {
-  const [state, dispatch] = useTracked();
-  const {colors, selectionMode, pinned, selectedItemsList} = state;
+  const {
+    colors,
+    updateDB,
+    updateSelectionList,
+    changeSelectionMode,
+  } = useAppContext();
 
   ///
-  const updateDB = () => {};
-  const updateSelectionList = () => {};
-  const changeSelectionMode = () => {};
 
   useEffect(() => {
     DeviceEventEmitter.emit('hide');

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

@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react';
-import {SafeAreaView} from 'react-native';
+import {SafeAreaView, Text} from 'react-native';
 import {Search} from '../../components/SearchInput';
 import {w, h, SideMenuEvent, ToastEvent} from '../../utils/utils';
 import {Header} from '../../components/header';
@@ -11,26 +11,28 @@ import {useAppContext} from '../../provider/useAppContext';
 import {DDS} from '../../../App';
 import Container from '../../components/Container';
 import SelectionHeader from '../../components/SelectionHeader';
-import {useIsFocused} from 'react-navigation-hooks';
-import {useTracked, ACTIONS} from '../../provider';
-import {_recieveEvent, _unSubscribeEvent} from '../../components/DialogManager';
+import {useIsFocused, useFocusEffect} from 'react-navigation-hooks';
+import {
+  _recieveEvent,
+  _unSubscribeEvent,
+  updateEvent,
+} from '../../components/DialogManager';
 
 export const AnimatedSafeAreaView = Animatable.createAnimatableComponent(
   SafeAreaView,
 );
-let intervals;
-let counter = 0;
 
 export const Home = ({navigation}) => {
   // State
-
-  const [state, dispatch] = useTracked();
-  const {colors, selectionMode, notes} = state;
-
-  ///
-  const updateDB = () => {};
-  const updateSelectionList = () => {};
-  const changeSelectionMode = () => {};
+  const {
+    colors,
+    selectionMode,
+    pinned,
+    notes,
+    updateDB,
+    updateSelectionList,
+    changeSelectionMode,
+  } = useAppContext();
 
   const [text, setText] = useState('');
   const [hideHeader, setHideHeader] = useState(false);
@@ -48,19 +50,15 @@ export const Home = ({navigation}) => {
   // Effects
 
   useEffect(() => {
-    dispatch({type: ACTIONS.NOTES});
-  }, []);
-
-  useEffect(() => {
-    _recieveEvent('updateEvent', type => {
-      dispatch(type);
+    _recieveEvent('updateEvent', () => {
+      updateDB();
     });
     return () => {
-      _unSubscribeEvent('updateEvent', type => {
-        dispatch(type);
+      _unSubscribeEvent('updateEvent', () => {
+        updateDB();
       });
     };
-  });
+  }, []);
 
   // Functions
 
@@ -115,7 +113,7 @@ export const Home = ({navigation}) => {
   };
 
   // Render
-
+  console.log('rerender');
   return (
     <Container
       bottomButtonText="Add a new note"
@@ -141,6 +139,7 @@ export const Home = ({navigation}) => {
           hide={hideHeader}
           verticalMenu
           showSearch={() => {
+            let counter = updateCounter;
             setHideHeader(false);
             countUp = 0;
             countDown = 0;

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

@@ -24,14 +24,13 @@ import Icon from 'react-native-vector-icons/Ionicons';
 import {Reminder} from '../../components/Reminder';
 import {ListItem} from '../../components/ListItem';
 import {useAppContext} from '../../provider/useAppContext';
-import {useTracked} from '../../provider';
+ 
 
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 
 export const Lists = ({navigation}) => {
-  const [state, dispatch] = useTracked();
-  const {colors} = state;
+  const {colors} = useAppContext();
 
   return (
     <SafeAreaView>

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

@@ -14,10 +14,9 @@ import {NavigationEvents} from 'react-navigation';
 import {Header} from '../../components/header';
 import {DDS} from '../../../App';
 import {useAppContext} from '../../provider/useAppContext';
-import {useTracked} from '../../provider';
+
 export const Login = ({navigation}) => {
-  const [state, dispatch] = useTracked();
-  const {colors} = state;
+  const {colors} = useAppContext();
 
   useEffect(() => {
     DeviceEventEmitter.emit('hide');

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

@@ -9,16 +9,17 @@ import * as Animatable from 'react-native-animatable';
 import {useAppContext} from '../../provider/useAppContext';
 import {useIsFocused} from 'react-navigation-hooks';
 import Container from '../../components/Container';
-import {useTracked} from '../../provider';
+ 
 
 export const Notebook = ({navigation}) => {
-  const [state, dispatch] = useTracked();
-  const {colors, selectionMode, pinned, selectedItemsList} = state;
+  const {
+    colors,
+    selectionMode,
+    updateDB,
+    updateSelectionList,
+    changeSelectionMode,
+  } = useAppContext();
 
-  ///
-  const updateDB = () => {};
-  const updateSelectionList = () => {};
-  const changeSelectionMode = () => {};
   const params = navigation.state.params;
   const [hideHeader, setHideHeader] = useState(false);
   const [buttonHide, setButtonHide] = useState(false);

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

@@ -7,16 +7,17 @@ import * as Animatable from 'react-native-animatable';
 import {useAppContext} from '../../provider/useAppContext';
 import Container from '../../components/Container';
 import {useIsFocused} from 'react-navigation-hooks';
-import {useTracked} from '../../provider';
+ 
 
 export const Notes = ({navigation}) => {
-  const [state, dispatch] = useTracked();
-  const {colors, selectionMode, pinned, selectedItemsList} = state;
+  const {
+    colors,
+    selectionMode,
+    updateDB,
+    updateSelectionList,
+    changeSelectionMode,
+  } = useAppContext();
 
-  ///
-  const updateDB = () => {};
-  const updateSelectionList = () => {};
-  const changeSelectionMode = () => {};
   const [hideHeader, setHideHeader] = useState(false);
   const [margin, setMargin] = useState(200);
   const [buttonHide, setButtonHide] = useState(false);

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

@@ -22,14 +22,10 @@ import {useAppContext} from '../../provider/useAppContext';
 import {useIsFocused} from 'react-navigation-hooks';
 import Container from '../../components/Container';
 import FastStorage from 'react-native-fast-storage';
-import {useTracked} from '../../provider';
-export const Settings = ({navigation}) => {
-  const [state, dispatch] = useTracked();
-  const {colors} = state;
  
-  ///
-  const changeAccentColor = () => {};
-  const changeColorScheme = () => {};
+export const Settings = ({navigation}) => {
+  const {colors, changeAccentColor, changeColorScheme} = useAppContext();
+
   //const [colors, setColors] = useState(COLOR_SCHEME_LIGHT);
   let isFocused = useIsFocused();
 

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

@@ -12,11 +12,10 @@ import {NavigationEvents} from 'react-navigation';
 import {Header} from '../../components/header';
 import {DDS} from '../../../App';
 import {useAppContext} from '../../provider/useAppContext';
-import {useTracked} from '../../provider';
+ 
 
 export const Signup = ({navigation}) => {
-  const [state, dispatch] = useTracked();
-  const {colors} = state;
+  const {colors} = useAppContext();
   useEffect(() => {
     DeviceEventEmitter.emit('hide');
     return () => {

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

@@ -5,13 +5,13 @@ import {SIZE, pv, WEIGHT} from '../../common/common';
 import {Header} from '../../components/header';
 import {useAppContext} from '../../provider/useAppContext';
 import {TagsPlaceHolder} from '../../components/ListPlaceholders';
-import {useTracked} from '../../provider';
+ 
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 
 export const Tags = ({navigation}) => {
-  const [state, dispatch] = useTracked();
-  const {colors} = state;
+  const {colors, tags} = useAppContext();
+
   let isFocused = useIsFocused();
 
   if (!isFocused) {

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

@@ -13,15 +13,17 @@ import {TrashPlaceHolder} from '../../components/ListPlaceholders';
 import Container from '../../components/Container';
 import SelectionHeader from '../../components/SelectionHeader';
 import {useIsFocused} from 'react-navigation-hooks';
-import {useTracked} from '../../provider';
+ 
 
 export const Trash = ({navigation}) => {
-  const [state, dispatch] = useTracked();
-  const {colors, selectionMode, trash} = state;
-
-  const updateDB = () => {};
-  const changeSelectionMode = () => {};
-  const updateSelectionList = () => {};
+  const {
+    colors,
+    selectionMode,
+    updateDB,
+    updateSelectionList,
+    changeSelectionMode,
+    trash,
+  } = useAppContext();
 
   const [dialog, setDialog] = useState(false);
   let isFocused = useIsFocused();