update

apps/mobile/App.js

@@ -10,7 +10,6 @@ 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';
-<<<<<<< HEAD
 import {useTracked, ACTIONS} from './src/provider';
 import {DeviceDetectionService} from './src/utils/deviceDetection';
 import {
@@ -19,26 +18,14 @@ import {
   _unSubscribeEvent,
 } from './src/components/DialogManager';
 import {getColorScheme} from './src/common/common';
-=======
-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';
->>>>>>> cfee96fb230bdd33c710a5e72a80ccf2b82a8646
 
 export const DDS = new DeviceDetectionService();
 export const db = new Storage(StorageInterface);
 
 let sideMenuRef;
 const App = () => {
-<<<<<<< HEAD
   const [state, dispatch] = useTracked();
   const {colors} = state;
-=======
-  const [colors, setColors] = useState(COLOR_SCHEME_LIGHT);
-  // Global State
->>>>>>> cfee96fb230bdd33c710a5e72a80ccf2b82a8646
 
   // Local State
   const [sidebar, setSidebar] = useState(w * 0.3);
@@ -102,7 +89,7 @@ const App = () => {
         setInit(true);
       });
     });
-  });
+  }, []);
 
   async function updateAppTheme(colors = state.colors) {
     let newColors = await getColorScheme(colors);
@@ -110,16 +97,12 @@ const App = () => {
   }
 
   // Render
+
   if (!init) {
     return <></>;
   }
-
   return (
-<<<<<<< HEAD
     <>
-=======
-    <AppProvider>
->>>>>>> cfee96fb230bdd33c710a5e72a80ccf2b82a8646
       <View
         style={{
           width: '100%',
@@ -182,15 +165,9 @@ const App = () => {
           </SideMenu>
         )}
         <Toast />
-<<<<<<< HEAD
         <DialogManager colors={colors} />
       </View>
     </>
-=======
-      </View>
-      <DialogManager colors={colors} />
-    </AppProvider>
->>>>>>> cfee96fb230bdd33c710a5e72a80ccf2b82a8646
   );
 };
 

apps/mobile/index.js

@@ -5,5 +5,15 @@
 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';
 
-AppRegistry.registerComponent(appName, () => App);
+const AppProvider = () => {
+  return (
+    <Provider>
+      <App />
+    </Provider>
+  );
+};
+
+AppRegistry.registerComponent(appName, () => AppProvider);

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

@@ -20,8 +20,7 @@ import Icon from 'react-native-vector-icons/Feather';
 import NavigationService from '../../services/NavigationService';
 import {db} from '../../../App';
 import FastStorage from 'react-native-fast-storage';
-
-import {_recieveEvent, _unSubscribeEvent} from '../DialogManager';
+import {useTracked} from '../../provider';
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 
@@ -35,11 +34,11 @@ export const ActionSheetComponent = ({
   rowItems = [],
   columnItems = [],
 }) => {
-  const {colors, updateDB, changeColorScheme} = useAppContext();
+  const [state, dispatch] = useTracked();
+  const {colors} = state;
 
   // Todo
 
-<<<<<<< HEAD
   function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
     let newColors = setColorScheme(colors, accent);
     StatusBar.setBarStyle(newColors.night ? 'light-content' : 'dark-content');
@@ -47,8 +46,6 @@ export const ActionSheetComponent = ({
     dispatch({type: ACTIONS.THEME, colors: newColors});
   }
 
-=======
->>>>>>> cfee96fb230bdd33c710a5e72a80ccf2b82a8646
   const [focused, setFocused] = useState(false);
   const [note, setNote] = useState(
     item
@@ -163,7 +160,7 @@ export const ActionSheetComponent = ({
       }
     }
 
-    updateDB();
+    dispatch({type: type});
     setNote({...toAdd});
   };
 

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

@@ -13,12 +13,13 @@ 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 {colors} = useAppContext();
+  const [state, dispatch] = useTracked();
+  const {colors} = state;
 
   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,7 +36,8 @@ export const AddTopicDialog = ({
   notebookID,
   toEdit = null,
 }) => {
-  const {colors} = useAppContext();
+  const [state, dispatch] = useTracked();
+  const {colors} = state;
   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,7 +31,8 @@ export const Container = ({
   noBottomButton = false,
 }) => {
   // State
-  const {colors} = useAppContext();
+  const [state, dispatch] = useTracked();
+  const {colors} = state;
 
   const [buttonHide, setButtonHide] = useState(false);
 

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

@@ -13,10 +13,6 @@ import {
 } from '../../common/common';
 import Icon from 'react-native-vector-icons/Feather';
 import {getElevation, ToastEvent} from '../../utils/utils';
-<<<<<<< HEAD
-=======
- 
->>>>>>> cfee96fb230bdd33c710a5e72a80ccf2b82a8646
 import {dialogActions, updateEvent} from '../DialogManager';
 import {db} from '../../../App';
 

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

@@ -69,10 +69,6 @@ export class DialogManager extends Component {
     super(props);
     this.actionSheet;
     this.opened = false;
-<<<<<<< HEAD
-=======
-
->>>>>>> cfee96fb230bdd33c710a5e72a80ccf2b82a8646
     this.state = {
       item: {},
       actionSheetData: {

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,9 +39,11 @@ export const EditorMenu = ({
   note,
   timestamp,
 }) => {
-  const {colors, changeColorScheme} = useAppContext();
+  const [state, dispatch] = useTracked();
+  const {colors} = state;
   // Todo
 
+  const changeColorScheme = () => {};
   ///////
 
   const [unlock, setUnlock] = useState(false);

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

@@ -14,11 +14,12 @@ 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 {colors} = useAppContext();
+  const [state, dispatch] = useTracked();
+  const {colors} = state;
 
   return (
     <View

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

@@ -25,7 +25,8 @@ import FastStorage from 'react-native-fast-storage';
 import {useTracked, ACTIONS} from '../../provider';
 
 export const Menu = ({close = () => {}, hide, update = () => {}}) => {
-  const {colors} = useAppContext();
+  const [state, dispatch] = useTracked();
+  const {colors} = state;
 
   // todo
 

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

@@ -67,11 +67,7 @@ export default class NoteItem extends React.Component {
       update,
       index,
     } = this.props;
-<<<<<<< HEAD
     console.log('rendering', index);
-=======
-    console.log('rerendering', index);
->>>>>>> cfee96fb230bdd33c710a5e72a80ccf2b82a8646
     return (
       <View
         style={[

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

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

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

@@ -15,9 +15,10 @@ 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 {colors} = useAppContext();
+  const [state, dispatch] = useTracked();
+  const {colors} = state;
 
   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,14 +13,13 @@ export const AnimatedSafeAreaView = Animatable.createAnimatableComponent(
 
 export const SelectionHeader = ({navigation}) => {
   // State
-  const {
-    colors,
-    selectionMode,
-    selectedItemsList,
-    updateDB,
-    updateSelectionList,
-    changeSelectionMode,
-  } = useAppContext();
+  const [state, dispatch] = useTracked();
+  const {colors, selectionMode, selectedItemsList} = state;
+
+  ///
+  const updateDB = () => {};
+  const updateSelectionList = () => {};
+  const changeSelectionMode = () => {};
 
   // Render
 

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

@@ -3,18 +3,16 @@ 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 {useAppContext} from '../../provider/useAppContext';
+import {useTracked} from '../../provider';
 
 const SelectionWrapper = ({children, item}) => {
-  const {
-    colors,
-    selectionMode,
-    selectedItemsList,
-    updateDB,
-    updateSelectionList,
-    changeSelectionMode,
-  } = useAppContext();
+  const [state, dispatch] = useTracked();
+  const {colors, selectionMode, selectedItemsList} = state;
 
+  ///
+  const updateDB = () => {};
+  const updateSelectionList = () => {};
+  const changeSelectionMode = () => {};
   return (
     <View
       style={{

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

@@ -12,13 +12,14 @@ 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 {colors} = useAppContext();
+  const [state, dispatch] = useTracked();
+  const {colors} = state;
 
   const [toast, setToast] = useState(false);
   const [message, setMessage] = useState([]);

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,7 +18,8 @@ export const Header = ({
   verticalMenu = false,
   sendHeight = e => {},
 }) => {
-  const {colors} = useAppContext();
+  const [state, dispatch] = useTracked();
+  const {colors} = state;
 
   return (
     <Animatable.View

apps/mobile/src/provider/index.js

@@ -1,9 +1,6 @@
-import React, {createContext, useEffect, useState} from 'react';
-import {View, Text} from 'react-native';
-import {useImmer} from 'use-immer';
+import React, {useReducer} from 'react';
 import {DDS, db} from '../../App';
-import {getColorScheme} from '../common/common';
-
+import {createContainer} from 'react-tracked';
 const defaultState = {
   isMenuOpen: {
     current: false,
@@ -35,11 +32,8 @@ const defaultState = {
     warningBg: '#FEEFB3',
     warningText: '#9F6000',
   },
-  selectionMode: false,
-  selectedItemsList: [],
 };
 
-<<<<<<< HEAD
 export const ACTIONS = {
   NOTES: 'note',
   NOTEBOOKS: 'notebook',
@@ -71,49 +65,9 @@ const reducer = (state, action) => {
     }
     default:
       throw new Error('unknown action type');
-=======
-const AppContext = createContext([defaultState, function() {}]);
-
-const AppProvider = ({children}) => {
-  const [state, dispatch] = useImmer({...defaultState});
-  const [loading, setLoading] = useState(true);
-
-  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();
-    });
-    setLoading(false);
->>>>>>> cfee96fb230bdd33c710a5e72a80ccf2b82a8646
   }
-
-  useEffect(() => {
-    init();
-  }, []);
-
-  return (
-    <AppContext.Provider value={[state, dispatch]}>
-      {loading ? (
-        <View
-          style={{
-            width: '100%',
-            height: '100%',
-            backgroundColor: 'white',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}>
-          <Text>Loading...</Text>
-        </View>
-      ) : (
-        children
-      )}
-    </AppContext.Provider>
-  );
 };
 
-export {AppProvider, AppContext};
+const useValue = () => useReducer(reducer, defaultState);
+
+export const {Provider, useTracked} = createContainer(useValue);

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

@@ -4,10 +4,11 @@ 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 {colors} = useAppContext();
+  const [state, dispatch] = useTracked();
+  const {colors} = state;
 
   return (
     <AnimatedSafeAreaView

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

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

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

@@ -10,17 +10,15 @@ 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 {
-    colors,
-    selectionMode,
-    favorites,
-    updateSelectionList,
-    changeSelectionMode,
-  } = useAppContext();
+  const [state, dispatch] = useTracked();
+  const {colors, selectionMode, pinned, selectedItemsList, favorites} = state;
+
+  const updateSelectionList = () => {};
+  const changeSelectionMode = () => {};
 
   // Local State
   const [text, setText] = useState('');

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

@@ -14,18 +14,16 @@ 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 {
-    colors,
-    selectionMode,
-    pinned,
-    notebooks,
-    updateDB,
-    updateSelectionList,
-    changeSelectionMode,
-  } = useAppContext();
+  const [state, dispatch] = useTracked();
+  const {colors, selectionMode, pinned, notebooks} = state;
+
+  ///
+  const updateDB = () => {};
+  const updateSelectionList = () => {};
+  const changeSelectionMode = () => {};
 
   const [addNotebook, setAddNotebook] = useState(false);
   const [hideHeader, setHideHeader] = useState(false);

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

@@ -33,17 +33,16 @@ 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 {
-    colors,
-    updateDB,
-    updateSelectionList,
-    changeSelectionMode,
-  } = useAppContext();
+  const [state, dispatch] = useTracked();
+  const {colors, selectionMode, pinned, selectedItemsList} = state;
 
   ///
+  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, Text} from 'react-native';
+import {SafeAreaView} from 'react-native';
 import {Search} from '../../components/SearchInput';
 import {w, h, SideMenuEvent, ToastEvent} from '../../utils/utils';
 import {Header} from '../../components/header';
@@ -11,28 +11,26 @@ import {useAppContext} from '../../provider/useAppContext';
 import {DDS} from '../../../App';
 import Container from '../../components/Container';
 import SelectionHeader from '../../components/SelectionHeader';
-import {useIsFocused, useFocusEffect} from 'react-navigation-hooks';
-import {
-  _recieveEvent,
-  _unSubscribeEvent,
-  updateEvent,
-} from '../../components/DialogManager';
+import {useIsFocused} from 'react-navigation-hooks';
+import {useTracked, ACTIONS} from '../../provider';
+import {_recieveEvent, _unSubscribeEvent} from '../../components/DialogManager';
 
 export const AnimatedSafeAreaView = Animatable.createAnimatableComponent(
   SafeAreaView,
 );
+let intervals;
+let counter = 0;
 
 export const Home = ({navigation}) => {
   // State
-  const {
-    colors,
-    selectionMode,
-    pinned,
-    notes,
-    updateDB,
-    updateSelectionList,
-    changeSelectionMode,
-  } = useAppContext();
+
+  const [state, dispatch] = useTracked();
+  const {colors, selectionMode, notes} = state;
+
+  ///
+  const updateDB = () => {};
+  const updateSelectionList = () => {};
+  const changeSelectionMode = () => {};
 
   const [text, setText] = useState('');
   const [hideHeader, setHideHeader] = useState(false);
@@ -49,18 +47,7 @@ export const Home = ({navigation}) => {
   // Effects
 
   useEffect(() => {
-<<<<<<< HEAD
     dispatch({type: ACTIONS.NOTES, payload: 'hello there'});
-=======
-    _recieveEvent('updateEvent', () => {
-      updateDB();
-    });
-    return () => {
-      _unSubscribeEvent('updateEvent', () => {
-        updateDB();
-      });
-    };
->>>>>>> cfee96fb230bdd33c710a5e72a80ccf2b82a8646
   }, []);
 
   // Functions
@@ -116,7 +103,7 @@ export const Home = ({navigation}) => {
   };
 
   // Render
-  console.log('rerender');
+
   return (
     <Container
       bottomButtonText="Add a new note"
@@ -143,7 +130,6 @@ 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,13 +24,14 @@ 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 {colors} = useAppContext();
+  const [state, dispatch] = useTracked();
+  const {colors} = state;
 
   return (
     <SafeAreaView>

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

@@ -14,9 +14,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 Login = ({navigation}) => {
-  const {colors} = useAppContext();
+  const [state, dispatch] = useTracked();
+  const {colors} = state;
 
   useEffect(() => {
     DeviceEventEmitter.emit('hide');

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

@@ -9,17 +9,16 @@ 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 {
-    colors,
-    selectionMode,
-    updateDB,
-    updateSelectionList,
-    changeSelectionMode,
-  } = useAppContext();
+  const [state, dispatch] = useTracked();
+  const {colors, selectionMode, pinned, selectedItemsList} = state;
 
+  ///
+  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,17 +7,16 @@ 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 {
-    colors,
-    selectionMode,
-    updateDB,
-    updateSelectionList,
-    changeSelectionMode,
-  } = useAppContext();
+  const [state, dispatch] = useTracked();
+  const {colors, selectionMode, pinned, selectedItemsList} = state;
 
+  ///
+  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

@@ -24,19 +24,15 @@ 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 {colors, changeAccentColor, changeColorScheme} = useAppContext();
+  const [state, dispatch] = useTracked();
+  const {colors} = state;
 
-<<<<<<< HEAD
   ///
   function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
     let newColors = setColorScheme(colors, accent);
     StatusBar.setBarStyle(newColors.night ? 'light-content' : 'dark-content');
-=======
-  //const [colors, setColors] = useState(COLOR_SCHEME_LIGHT);
-  let isFocused = useIsFocused();
->>>>>>> cfee96fb230bdd33c710a5e72a80ccf2b82a8646
 
     dispatch({type: ACTIONS.THEME, colors: newColors});
   }

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

@@ -12,10 +12,11 @@ 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 {colors} = useAppContext();
+  const [state, dispatch] = useTracked();
+  const {colors} = state;
   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 {colors, tags} = useAppContext();
-
+  const [state, dispatch] = useTracked();
+  const {colors} = state;
   let isFocused = useIsFocused();
 
   if (!isFocused) {

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

@@ -13,17 +13,15 @@ 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 {
-    colors,
-    selectionMode,
-    updateDB,
-    updateSelectionList,
-    changeSelectionMode,
-    trash,
-  } = useAppContext();
+  const [state, dispatch] = useTracked();
+  const {colors, selectionMode, trash} = state;
+
+  const updateDB = () => {};
+  const changeSelectionMode = () => {};
+  const updateSelectionList = () => {};
 
   const [dialog, setDialog] = useState(false);
   let isFocused = useIsFocused();