diff --git a/apps/mobile/src/components/DialogManager/index.js b/apps/mobile/src/components/DialogManager/index.js index d7356be2b..d21ccd5e3 100644 --- a/apps/mobile/src/components/DialogManager/index.js +++ b/apps/mobile/src/components/DialogManager/index.js @@ -59,9 +59,19 @@ export const TEMPLATE_EXIT = type => { }; }; +export const TEMPLATE_EMPTY_TRASH = { + title: 'Empty Trash', + paragraph: 'Are you sure you want to clear the trash?', + icon: 'trash', + positiveText: 'Clear', + negativeText: 'Cancel', + action: dialogActions.ACTION_EMPTY_TRASH, +}; + export const dialogActions = { ACTION_DELETE: 511, ACTION_EXIT: 512, + ACTION_EMPTY_TRASH: 513, }; export class DialogManager extends Component { diff --git a/apps/mobile/src/components/NotebookItem/index.js b/apps/mobile/src/components/NotebookItem/index.js index b9e5250dd..eaeac30ed 100644 --- a/apps/mobile/src/components/NotebookItem/index.js +++ b/apps/mobile/src/components/NotebookItem/index.js @@ -12,6 +12,7 @@ import {useAppContext} from '../../provider/useAppContext'; import {AddNotebookDialog} from '../AddNotebookDialog'; import ActionSheet from '../ActionSheet'; import {ActionSheetComponent} from '../ActionSheetComponent'; +import {useTracked} from '../../provider'; export const NotebookItem = ({ item, @@ -175,27 +176,29 @@ export const NotebookItem = ({ width: '80%', maxWidth: '80%', }}> - {item.topics.slice(1, 4).map(topic => ( - - - {topic.title} - - - ))} + {item && item.topics + ? item.topics.slice(1, 4).map(topic => ( + + + {topic.title} + + + )) + : null} )} diff --git a/apps/mobile/src/components/NotesList/index.js b/apps/mobile/src/components/NotesList/index.js index b343f41c6..3ec71f135 100644 --- a/apps/mobile/src/components/NotesList/index.js +++ b/apps/mobile/src/components/NotesList/index.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useEffect} from 'react'; import {View, Text, FlatList, Platform, SectionList} from 'react-native'; import {SIZE, WEIGHT} from '../../common/common'; import NoteItem from '../NoteItem'; @@ -7,20 +7,18 @@ import {slideRight, slideLeft} from '../../utils/animations'; import {w} from '../../utils/utils'; import SelectionWrapper from '../SelectionWrapper'; -import {useTracked} from '../../provider'; +import {useTracked, ACTIONS} from '../../provider'; export const NotesList = ({ onScroll, isSearch = false, isGrouped = false, refresh = () => {}, + searchResults, }) => { const [state, dispatch] = useTracked(); - const {colors, selectionMode, pinned, selectedItemsList} = state; + const {colors, selectionMode} = state; const notes = [...state.notes]; - /// - const updateSelectionList = () => {}; - const changeSelectionMode = () => {}; const _renderItem = ({item, index}) => ( @@ -31,11 +29,11 @@ export const NotesList = ({ marginHorizontal: 0, }} onLongPress={() => { - changeSelectionMode(!selectionMode); - updateSelectionList(item); + dispatch({type: ACTIONS.SELECTION_MODE, enabled: !selectionMode}); + dispatch({type: ACTIONS.SELECTED_ITEMS, item: item}); }} update={() => { - dispatch({type: 'updateNotes'}); + dispatch({type: ACTIONS.NOTES}); }} item={item} index={index} @@ -61,35 +59,7 @@ export const NotesList = ({ ? 155 : 155 - 60, }}> - {pinned && pinned.length > 0 ? ( - <> - item.dateCreated.toString()} - renderItem={({item, index}) => - item.type === 'note' ? ( - - ) : null - } - /> - - ) : null} + ); @@ -111,39 +81,38 @@ export const NotesList = ({ ) : null; - const _ListEmptyComponent = - pinned && pinned.length > 0 ? null : ( - + + + + - - - - - Notes you write will appear here. - - - No notes found - - - ); + Notes you write will appear here. + + + No notes found + + + ); const _renderSectionHeader = ({section: {title}}) => ( ) : ( ); }; + +const PinnedItems = () => { + const [state, dispatch] = useTracked(); + const {pinned, colors} = state; + + useEffect(() => { + dispatch({type: ACTIONS.PINNED}); + }, []); + + return ( + <> + item.dateCreated.toString()} + renderItem={({item, index}) => + item.type === 'note' ? ( + + ) : null + } + /> + + ); +}; diff --git a/apps/mobile/src/components/SelectionHeader/index.js b/apps/mobile/src/components/SelectionHeader/index.js index 0f7ad6e0e..da1c44170 100644 --- a/apps/mobile/src/components/SelectionHeader/index.js +++ b/apps/mobile/src/components/SelectionHeader/index.js @@ -1,11 +1,18 @@ import React from 'react'; -import {SafeAreaView, TouchableOpacity, View, Text} from 'react-native'; +import { + SafeAreaView, + TouchableOpacity, + View, + Text, + StatusBar, + Platform, +} from 'react-native'; import {SIZE, WEIGHT} from '../../common/common'; 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'; +import {useTracked, ACTIONS} from '../../provider'; export const AnimatedSafeAreaView = Animatable.createAnimatableComponent( SafeAreaView, @@ -16,11 +23,6 @@ export const SelectionHeader = ({navigation}) => { const [state, dispatch] = useTracked(); const {colors, selectionMode, selectedItemsList} = state; - /// - const updateDB = () => {}; - const updateSelectionList = () => {}; - const changeSelectionMode = () => {}; - // Render return ( @@ -30,8 +32,10 @@ export const SelectionHeader = ({navigation}) => { style={{ width: '100%', position: 'absolute', - height: selectionMode ? 50 : 0, + height: selectionMode ? 50 + StatusBar.currentHeight : 0, opacity: selectionMode ? 1 : 0, + backgroundColor: colors.bg, + paddingTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight, justifyContent: 'flex-end', zIndex: 11, }}> @@ -52,7 +56,7 @@ export const SelectionHeader = ({navigation}) => { }}> { - changeSelectionMode(false); + dispatch({type: ACTIONS.SELECTION_MODE, enabled: !selectionMode}); }} hitSlop={{top: 20, bottom: 20, left: 50, right: 40}} style={{ diff --git a/apps/mobile/src/components/SelectionWrapper/index.js b/apps/mobile/src/components/SelectionWrapper/index.js index bbe61bb53..ee4a38858 100644 --- a/apps/mobile/src/components/SelectionWrapper/index.js +++ b/apps/mobile/src/components/SelectionWrapper/index.js @@ -3,16 +3,12 @@ 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 {useTracked, ACTIONS} from '../../provider'; const SelectionWrapper = ({children, item}) => { const [state, dispatch] = useTracked(); const {colors, selectionMode, selectedItemsList} = state; - /// - const updateDB = () => {}; - const updateSelectionList = () => {}; - const changeSelectionMode = () => {}; return ( { marginHorizontal: 12, }}> updateSelectionList(item)} + onPress={() => { + dispatch({type: ACTIONS.SELECTED_ITEMS, item: item}); + }} style={{ width: 50, height: 70,