diff --git a/apps/mobile/src/provider/index.js b/apps/mobile/src/provider/index.js index ec3e0b638..38e4e3503 100644 --- a/apps/mobile/src/provider/index.js +++ b/apps/mobile/src/provider/index.js @@ -1,6 +1,7 @@ import React, {useReducer} from 'react'; import {DDS, db} from '../../App'; import {createContainer} from 'react-tracked'; +import {SideMenuEvent} from '../utils/utils'; const defaultState = { isMenuOpen: { current: false, @@ -80,13 +81,20 @@ const reducer = (state, action) => { }; } case ACTIONS.FAVORITES: { - let favorites = [db.getFavorites()]; + let favorites = [...db.getFavorites()]; + return { ...state, - favorites: favorites, + favorites: [...favorites], }; } case ACTIONS.SELECTION_MODE: { + if (action.enabled) { + SideMenuEvent.disable(); + } else { + SideMenuEvent.enable(); + } + return { ...state, selectionMode: action.enabled, diff --git a/apps/mobile/src/provider/useAppContext.js b/apps/mobile/src/provider/useAppContext.js index 9f5a3e3de..bd4230e78 100644 --- a/apps/mobile/src/provider/useAppContext.js +++ b/apps/mobile/src/provider/useAppContext.js @@ -1,5 +1,5 @@ import {useContext} from 'react'; -import {AppContext} from '.'; +import {AppContext, useTrackedState} from '.'; import {StatusBar} from 'react-native'; import { COLOR_SCHEME, @@ -10,12 +10,8 @@ import { import {db} from '../../App'; const useAppContext = () => { - const [state, dispatch] = useContext(AppContext); - - if (dispatch === undefined) { - throw new Error('Must have dispatch defined'); - } - + const state = useTrackedState(); + /* // Themeing async function updateAppTheme(colors = state.colors) { @@ -80,16 +76,10 @@ const useAppContext = () => { draft.favorites = favorites; draft.pinned = pinned; }); - } + } */ return { ...state, - updateAppTheme, - changeColorScheme, - changeAccentColor, - changeSelectionMode, - updateSelectionList, - updateDB, }; }; diff --git a/apps/mobile/src/views/Favorites/index.js b/apps/mobile/src/views/Favorites/index.js index 1628f3146..e7c2c37b4 100644 --- a/apps/mobile/src/views/Favorites/index.js +++ b/apps/mobile/src/views/Favorites/index.js @@ -1,4 +1,4 @@ -import React, {useState} from 'react'; +import React, {useState, useEffect} from 'react'; import {View, Text, FlatList, Platform} from 'react-native'; import {Header} from '../../components/header'; import {useAppContext} from '../../provider/useAppContext'; @@ -10,15 +10,13 @@ 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'; +import {useTracked, ACTIONS} from '../../provider'; +import SelectionWrapper from '../../components/SelectionWrapper'; 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} = state; // Local State const [text, setText] = useState(''); @@ -26,12 +24,15 @@ export const Favorites = ({navigation}) => { const [buttonHide, setButtonHide] = useState(false); // Variables - let isFocused = useIsFocused(); let offsetY = 0; let countUp = 1; let countDown = 0; + useEffect(() => { + dispatch({type: ACTIONS.FAVORITES}); + }, []); + // Functions // Effects @@ -53,140 +54,145 @@ export const Favorites = ({navigation}) => { offsetY = y; }; // Render - if (!isFocused) { - console.log('block rerender'); - return <>; - } else { - return ( - - -
{ - setHideHeader(false); - countUp = 0; - countDown = 0; - }} - colors={colors} - heading="Favorites" - canGoBack={false} - customIcon="menu" - /> - {favorites.length > 0 ? ( - setText('')} - hide={hideHeader} - placeholder="Search your notes" - value={text} - /> - ) : null} - - item.dateCreated.toString()} - style={{ - width: '100%', - alignSelf: 'center', - height: '100%', + return ( + + +
{ + setHideHeader(false); + countUp = 0; + countDown = 0; }} - contentContainerStyle={{ - height: '100%', - }} - ListHeaderComponent={ - - } - ListEmptyComponent={ - - - - Favorite notes & notebooks appear here. - - - Favorites are empty. - - - } - data={favorites} - onScroll={onScroll} - renderItem={({item, index}) => ( - - {item.type === 'note' ? ( - { - if (!selectionMode) { - updateSelectionList(item); - } - changeSelectionMode(!selectionMode); - }} - item={item} - index={index} - isTrash={true} - /> - ) : ( - { - if (!selectionMode) { - updateSelectionList(item); - } - changeSelectionMode(!selectionMode); - }} - customStyle={{ - width: selectionMode ? w - 74 : '100%', - marginHorizontal: 0, - }} - item={item} - isTrash={true} - index={index} - /> - )} - - )} + colors={colors} + heading="Favorites" + canGoBack={false} + customIcon="menu" /> - - ); - } + {favorites.length > 0 ? ( + setText('')} + hide={hideHeader} + placeholder="Search your notes" + value={text} + /> + ) : null} + + + item.dateCreated.toString()} + style={{ + width: '100%', + alignSelf: 'center', + height: '100%', + }} + contentContainerStyle={{ + height: '100%', + }} + ListHeaderComponent={ + + } + ListEmptyComponent={ + + + + Favorite notes & notebooks appear here. + + + Favorites are empty. + + + } + data={favorites} + onScroll={onScroll} + renderItem={({item, index}) => ( + + {item.type === 'note' ? ( + { + dispatch({ + type: ACTIONS.SELECTION_MODE, + enabled: !selectionMode, + }); + dispatch({ + type: ACTIONS.SELECTED_ITEMS, + item: item, + }); + }} + item={item} + index={index} + isTrash={false} + /> + ) : ( + { + dispatch({ + type: ACTIONS.SELECTION_MODE, + enabled: !selectionMode, + }); + dispatch({ + type: ACTIONS.SELECTED_ITEMS, + item: item, + }); + }} + customStyle={{ + width: selectionMode ? w - 74 : '100%', + marginHorizontal: 0, + }} + item={item} + isTrash={false} + index={index} + /> + )} + + )} + /> + + ); }; Favorites.navigationOptions = { diff --git a/apps/mobile/src/views/Folders/index.js b/apps/mobile/src/views/Folders/index.js index 0ff5b4a61..2d30ab3c7 100644 --- a/apps/mobile/src/views/Folders/index.js +++ b/apps/mobile/src/views/Folders/index.js @@ -1,4 +1,4 @@ -import React, {useState} from 'react'; +import React, {useState, useEffect} from 'react'; import {View, Text, Platform, FlatList} from 'react-native'; import {SIZE, WEIGHT} from '../../common/common'; import {AddNotebookDialog} from '../../components/AddNotebookDialog'; @@ -14,16 +14,17 @@ 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'; +import {useTracked, ACTIONS} from '../../provider'; export const Folders = ({navigation}) => { const [state, dispatch] = useTracked(); const {colors, selectionMode, pinned, notebooks} = state; /// - const updateDB = () => {}; - const updateSelectionList = () => {}; - const changeSelectionMode = () => {}; + + useEffect(() => { + dispatch({type: ACTIONS.NOTEBOOKS}); + }, []); const [addNotebook, setAddNotebook] = useState(false); const [hideHeader, setHideHeader] = useState(false); @@ -136,7 +137,14 @@ export const Folders = ({navigation}) => { }} isMove={params.isMove} onLongPress={() => { - changeSelectionMode(); + dispatch({ + type: ACTIONS.SELECTION_MODE, + enabled: !selectionMode, + }); + dispatch({ + type: ACTIONS.SELECTED_ITEMS, + item: item, + }); }} noteToMove={params.note} item={item} @@ -220,11 +228,14 @@ export const Folders = ({navigation}) => { }} isMove={params.isMove} onLongPress={() => { - if (!selectionMode) { - updateSelectionList(item); - } - - changeSelectionMode(!selectionMode); + dispatch({ + type: ACTIONS.SELECTION_MODE, + enabled: !selectionMode, + }); + dispatch({ + type: ACTIONS.SELECTED_ITEMS, + item: item, + }); }} noteToMove={params.note} item={item} diff --git a/apps/mobile/src/views/Home/index.js b/apps/mobile/src/views/Home/index.js index acda8e6e0..967fc231f 100755 --- a/apps/mobile/src/views/Home/index.js +++ b/apps/mobile/src/views/Home/index.js @@ -18,20 +18,12 @@ import {_recieveEvent, _unSubscribeEvent} 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 [text, setText] = useState(''); const [hideHeader, setHideHeader] = useState(false); const [keyword, setKeyword] = useState(''); @@ -159,7 +151,7 @@ export const Home = ({navigation}) => { isGrouped={true} onScroll={onScroll} isSearch={searchResults.length > 0 ? true : false} - notes={searchResults.length > 0 ? searchResults : notes} + searchResults={searchResults.length > 0 ? searchResults : null} keyword={keyword} /> diff --git a/apps/mobile/src/views/Trash/index.js b/apps/mobile/src/views/Trash/index.js index d7d03c9dc..e36d37481 100644 --- a/apps/mobile/src/views/Trash/index.js +++ b/apps/mobile/src/views/Trash/index.js @@ -1,156 +1,133 @@ -import React, {useEffect, useState} from 'react'; +import React, {useState, useEffect} from 'react'; import {Text, FlatList, View} from 'react-native'; import {SIZE, WEIGHT} from '../../common/common'; -import Icon from 'react-native-vector-icons/Feather'; import {Header} from '../../components/header'; import NoteItem from '../../components/NoteItem'; -import {useAppContext} from '../../provider/useAppContext'; -import {db} from '../../../App'; import {NotebookItem} from '../../components/NotebookItem'; -import {Dialog} from '../../components/Dialog'; -import {ToastEvent, w} from '../../utils/utils'; +import {w} from '../../utils/utils'; 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'; +import {useTracked, ACTIONS} from '../../provider'; +import { + simpleDialogEvent, + TEMPLATE_EMPTY_TRASH, +} from '../../components/DialogManager'; export const Trash = ({navigation}) => { const [state, dispatch] = useTracked(); const {colors, selectionMode, trash} = state; - const updateDB = () => {}; - const changeSelectionMode = () => {}; - const updateSelectionList = () => {}; + useEffect(() => { + dispatch({ + type: ACTIONS.TRASH, + }); + }); - const [dialog, setDialog] = useState(false); - let isFocused = useIsFocused(); + const _renderItem = ({item, index}) => ( + + {item.type === 'note' ? ( + { + dispatch({ + type: ACTIONS.SELECTION_MODE, + enabled: !selectionMode, + }); + dispatch({ + type: ACTIONS.SELECTED_ITEMS, + item: item, + }); + }} + item={item} + index={index} + isTrash={true} + /> + ) : ( + { + dispatch({ + type: ACTIONS.SELECTION_MODE, + enabled: !selectionMode, + }); + dispatch({ + type: ACTIONS.SELECTED_ITEMS, + item: item, + }); + }} + customStyle={{ + width: selectionMode ? w - 74 : '100%', + marginHorizontal: 0, + }} + item={item} + isTrash={true} + index={index} + /> + )} + + ); - if (!isFocused) { - console.log('block rerender'); - return <>; - } else { - return ( - { - setDialog(true); + _ListEmptyComponent = ( + + + + Deleted notes & notebooks appear here. + + + Trash is empty + + + ); + + return ( + { + simpleDialogEvent(TEMPLATE_EMPTY_TRASH); + }} + bottomButtonText="Clear all trash"> + + {selectionMode ? null : ( +
+ )} + + item.dateCreated.toString()} + style={{ + width: '100%', + alignSelf: 'center', + height: '100%', }} - bottomButtonText="Clear all trash"> - - {selectionMode ? null : ( -
- )} - - item.dateCreated.toString()} - style={{ - width: '100%', - alignSelf: 'center', - height: '100%', - }} - contentContainerStyle={{ - height: '100%', - }} - data={trash} - ListEmptyComponent={ - - - - Deleted notes & notebooks appear here. - - - Trash is empty - - - } - renderItem={({item, index}) => ( - - {item.type === 'note' ? ( - { - if (!selectionMode) { - updateSelectionList(item); - } - - changeSelectionMode(!selectionMode); - }} - item={item} - index={index} - isTrash={true} - /> - ) : ( - { - if (!selectionMode) { - updateSelectionList(item); - } - - changeSelectionMode(!selectionMode); - }} - customStyle={{ - width: selectionMode ? w - 74 : '100%', - marginHorizontal: 0, - }} - item={item} - isTrash={true} - index={index} - /> - )} - - )} - /> - - { - setDialog(false); - }} - icon="trash" - paragraph="Clearing all trash cannot be undone." - positiveText="Clear" - negativeText="Cancel" - positivePress={async () => { - await db.clearTrash(); - updateDB(); - ToastEvent.show('Trash cleared', 'success', 1000, () => {}, ''); - setDialog(false); - }} - negativePress={() => { - setDialog(false); - }} - /> - - ); - } + contentContainerStyle={{ + height: '100%', + }} + data={trash} + ListEmptyComponent={_ListEmptyComponent} + renderItem={_renderItem} + /> + + ); }; Trash.navigationOptions = {