From a879469ca41fdcade09a280cd06e750e78363c85 Mon Sep 17 00:00:00 2001 From: ammarahm-ed Date: Fri, 17 Jan 2020 16:23:13 +0500 Subject: [PATCH] fix state --- apps/mobile/App.js | 22 +- apps/mobile/index.js | 12 +- .../components/ActionSheetComponent/index.js | 10 +- .../src/components/AddNotebookDialog/index.js | 5 +- .../src/components/AddTopicDialog/index.js | 5 +- apps/mobile/src/components/Container/index.js | 5 +- apps/mobile/src/components/Dialog/index.js | 2 +- .../src/components/DialogManager/index.js | 45 +- .../mobile/src/components/EditorMenu/index.js | 6 +- apps/mobile/src/components/ListItem/index.js | 5 +- apps/mobile/src/components/Menu/index.js | 5 +- apps/mobile/src/components/NoteItem/index.js | 17 +- .../src/components/NotebookItem/index.js | 4 +- apps/mobile/src/components/NotesList/index.js | 16 +- .../src/components/SearchInput/index.js | 5 +- .../src/components/SelectionHeader/index.js | 17 +- .../src/components/SelectionWrapper/index.js | 16 +- apps/mobile/src/components/Toast/index.js | 5 +- .../src/components/VaultDialog/index.js | 412 +++++++++--------- apps/mobile/src/components/header/index.js | 5 +- apps/mobile/src/provider/index.js | 64 ++- .../mobile/src/views/AccountSettings/index.js | 5 +- apps/mobile/src/views/Editor/index.js | 8 +- apps/mobile/src/views/Favorites/index.js | 14 +- apps/mobile/src/views/Folders/index.js | 18 +- apps/mobile/src/views/ForgotPassword/index.js | 13 +- apps/mobile/src/views/Home/index.js | 47 +- apps/mobile/src/views/Lists/index.js | 5 +- apps/mobile/src/views/Login/index.js | 5 +- apps/mobile/src/views/Notebook/index.js | 15 +- apps/mobile/src/views/Notes/index.js | 15 +- apps/mobile/src/views/Settings/index.js | 8 +- apps/mobile/src/views/Signup/index.js | 5 +- apps/mobile/src/views/Tags/index.js | 6 +- apps/mobile/src/views/Trash/index.js | 16 +- 35 files changed, 444 insertions(+), 419 deletions(-) diff --git a/apps/mobile/App.js b/apps/mobile/App.js index 5e1e082b0..c46689bd0 100644 --- a/apps/mobile/App.js +++ b/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 ( - + { )} - { - dispatch({type: 'updateNotes'}); - }} - /> - + + ); }; diff --git a/apps/mobile/index.js b/apps/mobile/index.js index b6114df9d..56df3b5c4 100644 --- a/apps/mobile/index.js +++ b/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 ( - - - - ); -}; - -AppRegistry.registerComponent(appName, () => AppProvider); +AppRegistry.registerComponent(appName, () => App); diff --git a/apps/mobile/src/components/ActionSheetComponent/index.js b/apps/mobile/src/components/ActionSheetComponent/index.js index 00a4d20c3..2e11e3c53 100644 --- a/apps/mobile/src/components/ActionSheetComponent/index.js +++ b/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}); }; diff --git a/apps/mobile/src/components/AddNotebookDialog/index.js b/apps/mobile/src/components/AddNotebookDialog/index.js index efe71241a..de1c25d1f 100644 --- a/apps/mobile/src/components/AddNotebookDialog/index.js +++ b/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); diff --git a/apps/mobile/src/components/AddTopicDialog/index.js b/apps/mobile/src/components/AddTopicDialog/index.js index 2767d5ec1..bfb64f3b1 100644 --- a/apps/mobile/src/components/AddTopicDialog/index.js +++ b/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; diff --git a/apps/mobile/src/components/Container/index.js b/apps/mobile/src/components/Container/index.js index 069d9b9e6..cd1e6535e 100644 --- a/apps/mobile/src/components/Container/index.js +++ b/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); diff --git a/apps/mobile/src/components/Dialog/index.js b/apps/mobile/src/components/Dialog/index.js index 5c283d085..22bb10a32 100644 --- a/apps/mobile/src/components/Dialog/index.js +++ b/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'; diff --git a/apps/mobile/src/components/DialogManager/index.js b/apps/mobile/src/components/DialogManager/index.js index c795ee82d..71f586559 100644 --- a/apps/mobile/src/components/DialogManager/index.js +++ b/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 ( <> + + (this.vaultDialogRef = ref)} + colors={colors} + note={item} + perm={isPerm} + openedToUnlock={false} + visible={vaultDialog} + /> ); } diff --git a/apps/mobile/src/components/EditorMenu/index.js b/apps/mobile/src/components/EditorMenu/index.js index ed6d8d27f..b79dd5148 100644 --- a/apps/mobile/src/components/EditorMenu/index.js +++ b/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); diff --git a/apps/mobile/src/components/ListItem/index.js b/apps/mobile/src/components/ListItem/index.js index 5cc859048..cb5057740 100644 --- a/apps/mobile/src/components/ListItem/index.js +++ b/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 ( {}, hide, update = () => {}}) => { - const [state, dispatch] = useTracked(); - const {colors} = state; + const {colors} = useAppContext(); // todo diff --git a/apps/mobile/src/components/NoteItem/index.js b/apps/mobile/src/components/NoteItem/index.js index 20b90c47a..43f73d565 100644 --- a/apps/mobile/src/components/NoteItem/index.js +++ b/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 ( - { - this.setState({ - vaultDialog: false, - unlock: false, - isPerm: false, - }); - }} - note={item} - perm={isPerm} - openedToUnlock={unlock} - visible={vaultDialog} - /> - {pinned ? ( { - const [state, dispatch] = useTracked(); - const {colors} = state; + const {colors, updateDB} = useAppContext(); /// - const updateDB = () => {}; const [isVisible, setVisible] = useState(false); const [addTopic, setAddTopic] = useState(false); diff --git a/apps/mobile/src/components/NotesList/index.js b/apps/mobile/src/components/NotesList/index.js index efe0e7549..cbfca42f1 100644 --- a/apps/mobile/src/components/NotesList/index.js +++ b/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}) => ( diff --git a/apps/mobile/src/components/SearchInput/index.js b/apps/mobile/src/components/SearchInput/index.js index 5a31bb32d..fe03bfc5f 100644 --- a/apps/mobile/src/components/SearchInput/index.js +++ b/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); diff --git a/apps/mobile/src/components/SelectionHeader/index.js b/apps/mobile/src/components/SelectionHeader/index.js index 0f7ad6e0e..3bee9a753 100644 --- a/apps/mobile/src/components/SelectionHeader/index.js +++ b/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 diff --git a/apps/mobile/src/components/SelectionWrapper/index.js b/apps/mobile/src/components/SelectionWrapper/index.js index bbe61bb53..d6b68b1ca 100644 --- a/apps/mobile/src/components/SelectionWrapper/index.js +++ b/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 ( { - const [state, dispatch] = useTracked(); - const {colors} = state; + const {colors} = useAppContext(); const [toast, setToast] = useState(false); const [message, setMessage] = useState([]); diff --git a/apps/mobile/src/components/VaultDialog/index.js b/apps/mobile/src/components/VaultDialog/index.js index 49dacf948..6094e420a 100644 --- a/apps/mobile/src/components/VaultDialog/index.js +++ b/apps/mobile/src/components/VaultDialog/index.js @@ -1,113 +1,126 @@ -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; + } - const [hidden, setHidden] = useState(false); - let password = null; - return ( - (refs = [])}> - + 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; + + return ( + - + + + + {note.locked ? 'Unlock Note' : 'Lock Note'} + + + - {openedToUnlock ? 'Unlock Note' : 'Lock Note'} - - - - - - {openedToUnlock ? ( - { - password = value; - }} - secureTextEntry - placeholder="Password" - placeholderTextColor={colors.icon} - /> - ) : null} + textAlign: 'center', + fontSize: SIZE.sm - 1, + marginTop: 10, + //marginBottom: hidden ? 20 : 0, + }}> + {hasPassword + ? 'Set password for all your locked notes.' + : note.locked + ? 'Enter vault password to unlock note.' + : 'Do you want to lock this note?'} + - {!hasPassword ? null : ( - + {note.locked ? ( {}} + onChangeText={value => { + password = value; + }} + secureTextEntry placeholder="Password" placeholderTextColor={colors.icon} /> + ) : null} - + {}} + placeholder="Password" + placeholderTextColor={colors.icon} + /> + + {}} + placeholder="Confirm password" + placeholderTextColor={colors.icon} + /> + {}} + placeholder="Hint" + placeholderTextColor={colors.icon} + /> + + )} + + + {}} - placeholder="Confirm password" - placeholderTextColor={colors.icon} - /> - + + {note.locked ? 'Unlock' : 'Lock'} + + + + {}} - placeholder="Hint" - placeholderTextColor={colors.icon} - /> + width: '45%', + justifyContent: 'center', + alignItems: 'center', + backgroundColor: colors.nav, + }}> + + Cancel + + - )} - - - { - 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); - } - }} - style={{ - paddingVertical: pv, - paddingHorizontal: ph, - borderRadius: 5, - width: '45%', - justifyContent: 'center', - alignItems: 'center', - borderColor: colors.accent, - backgroundColor: colors.accent, - borderWidth: 1, - }}> - - {openedToUnlock ? 'Unlock' : 'Lock'} - - - - { - close(); - }} - style={{ - paddingVertical: pv, - paddingHorizontal: ph, - borderRadius: 5, - width: '45%', - justifyContent: 'center', - alignItems: 'center', - backgroundColor: colors.nav, - }}> - - Cancel - - - - - ); -}; + + ); + } +} diff --git a/apps/mobile/src/components/header/index.js b/apps/mobile/src/components/header/index.js index 75ec2b986..b255a16fa 100644 --- a/apps/mobile/src/components/header/index.js +++ b/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 ( { - 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 ( + + {children} + {loading ? ( + + Loading... + + ) : ( + children + )} + + ); }; -const useValue = () => useReducer(reducer, defaultState); - -export const {Provider, useTracked} = createContainer(useValue); +export {AppProvider, AppContext}; diff --git a/apps/mobile/src/views/AccountSettings/index.js b/apps/mobile/src/views/AccountSettings/index.js index 10df3ec27..195f3d217 100644 --- a/apps/mobile/src/views/AccountSettings/index.js +++ b/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 ( { // Global State - const [state, dispatch] = useTracked(); - const {colors} = state; - - /// - const updateDB = () => {}; + const {colors, updateDB} = useAppContext(); // Local State diff --git a/apps/mobile/src/views/Favorites/index.js b/apps/mobile/src/views/Favorites/index.js index 1628f3146..3ca20195f 100644 --- a/apps/mobile/src/views/Favorites/index.js +++ b/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(''); diff --git a/apps/mobile/src/views/Folders/index.js b/apps/mobile/src/views/Folders/index.js index 0ff5b4a61..9ed8d9a28 100644 --- a/apps/mobile/src/views/Folders/index.js +++ b/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); diff --git a/apps/mobile/src/views/ForgotPassword/index.js b/apps/mobile/src/views/ForgotPassword/index.js index 5dd8dbd89..839470d01 100644 --- a/apps/mobile/src/views/ForgotPassword/index.js +++ b/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'); diff --git a/apps/mobile/src/views/Home/index.js b/apps/mobile/src/views/Home/index.js index 1fda5fcbf..8f2c731b4 100755 --- a/apps/mobile/src/views/Home/index.js +++ b/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 ( { hide={hideHeader} verticalMenu showSearch={() => { + let counter = updateCounter; setHideHeader(false); countUp = 0; countDown = 0; diff --git a/apps/mobile/src/views/Lists/index.js b/apps/mobile/src/views/Lists/index.js index 95e7f1bf0..19f5212be 100644 --- a/apps/mobile/src/views/Lists/index.js +++ b/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 ( diff --git a/apps/mobile/src/views/Login/index.js b/apps/mobile/src/views/Login/index.js index 350a0b79e..76de1f531 100644 --- a/apps/mobile/src/views/Login/index.js +++ b/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'); diff --git a/apps/mobile/src/views/Notebook/index.js b/apps/mobile/src/views/Notebook/index.js index 718fae194..bc5a750f0 100644 --- a/apps/mobile/src/views/Notebook/index.js +++ b/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); diff --git a/apps/mobile/src/views/Notes/index.js b/apps/mobile/src/views/Notes/index.js index c6221b0d2..1c3d93299 100644 --- a/apps/mobile/src/views/Notes/index.js +++ b/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); diff --git a/apps/mobile/src/views/Settings/index.js b/apps/mobile/src/views/Settings/index.js index 5dafb16de..bcf48d549 100644 --- a/apps/mobile/src/views/Settings/index.js +++ b/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 {colors, changeAccentColor, changeColorScheme} = useAppContext(); - /// - const changeAccentColor = () => {}; - const changeColorScheme = () => {}; //const [colors, setColors] = useState(COLOR_SCHEME_LIGHT); let isFocused = useIsFocused(); diff --git a/apps/mobile/src/views/Signup/index.js b/apps/mobile/src/views/Signup/index.js index bc9830bf3..1a82497bb 100644 --- a/apps/mobile/src/views/Signup/index.js +++ b/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 () => { diff --git a/apps/mobile/src/views/Tags/index.js b/apps/mobile/src/views/Tags/index.js index 2d14fd705..f9bc686c9 100644 --- a/apps/mobile/src/views/Tags/index.js +++ b/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) { diff --git a/apps/mobile/src/views/Trash/index.js b/apps/mobile/src/views/Trash/index.js index d7d03c9dc..68d0b7595 100644 --- a/apps/mobile/src/views/Trash/index.js +++ b/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();