Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-25 16:09:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

attach views to state

Browse Source
This commit is contained in:
ammarahm-ed
2020-01-18 00:46:59 +05:00
parent 86ec252f20
commit 079cfa4bb5
6 changed files with 295 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/mobile/src/provider/index.js
View File

@@ -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,

18
apps/mobile/src/provider/useAppContext.js
View File

@@ -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,
};
};

282
apps/mobile/src/views/Favorites/index.js
View File

@@ -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 (
<Container noBottomButton={true}>
<Animatable.View
transition="backgroundColor"
duration={300}
style={{
position: 'absolute',
backgroundColor: colors.night ? colors.bg : colors.bg,
zIndex: 10,
width: '100%',
}}>
<Header
menu={true}
hide={hideHeader}
showSearch={() => {
setHideHeader(false);
countUp = 0;
countDown = 0;
}}
colors={colors}
heading="Favorites"
canGoBack={false}
customIcon="menu"
/>
{favorites.length > 0 ? (
<Search
clear={() => setText('')}
hide={hideHeader}
placeholder="Search your notes"
value={text}
/>
) : null}
</Animatable.View>
<FlatList
//keyExtractor={item => item.dateCreated.toString()}
style={{
width: '100%',
alignSelf: 'center',
height: '100%',
return (
<Container noBottomButton={true}>
<Animatable.View
transition="backgroundColor"
duration={300}
style={{
position: 'absolute',
backgroundColor: colors.night ? colors.bg : colors.bg,
zIndex: 10,
width: '100%',
}}>
<Header
menu={true}
hide={hideHeader}
showSearch={() => {
setHideHeader(false);
countUp = 0;
countDown = 0;
}}
contentContainerStyle={{
height: '100%',
}}
ListHeaderComponent={
<View
style={{
marginTop:
Platform.OS == 'ios'
? favorites[0]
? 135
: 135 - 60
: favorites[0]
? 155
: 155 - 60,
}}></View>
}
ListEmptyComponent={
<View
style={{
height: '80%',
width: '100%',
alignItems: 'center',
alignSelf: 'center',
justifyContent: 'center',
opacity: 0.8,
}}>
<FavoritesPlaceHolder />
<Text
style={{
color: colors.pri,
fontSize: SIZE.md,
fontFamily: WEIGHT.regular,
marginTop: 20,
}}>
Favorite notes & notebooks appear here.
</Text>
<Text
style={{
fontSize: SIZE.sm,
color: colors.icon,
marginTop: 20,
}}>
Favorites are empty.
</Text>
</View>
}
data={favorites}
onScroll={onScroll}
renderItem={({item, index}) => (
<SelectionWrapper item={item}>
{item.type === 'note' ? (
<NoteItem
customStyle={{
width: selectionMode ? w - 74 : '100%',
marginHorizontal: 0,
}}
onLongPress={() => {
if (!selectionMode) {
updateSelectionList(item);
}
changeSelectionMode(!selectionMode);
}}
item={item}
index={index}
isTrash={true}
/>
) : (
<NotebookItem
onLongPress={() => {
if (!selectionMode) {
updateSelectionList(item);
}
changeSelectionMode(!selectionMode);
}}
customStyle={{
width: selectionMode ? w - 74 : '100%',
marginHorizontal: 0,
}}
item={item}
isTrash={true}
index={index}
/>
)}
</SelectionWrapper>
)}
colors={colors}
heading="Favorites"
canGoBack={false}
customIcon="menu"
/>
</Container>
);
}
{favorites.length > 0 ? (
<Search
clear={() => setText('')}
hide={hideHeader}
placeholder="Search your notes"
value={text}
/>
) : null}
</Animatable.View>
<FlatList
keyExtractor={item => item.dateCreated.toString()}
style={{
width: '100%',
alignSelf: 'center',
height: '100%',
}}
contentContainerStyle={{
height: '100%',
}}
ListHeaderComponent={
<View
style={{
marginTop:
Platform.OS == 'ios'
? favorites[0]
? 135
: 135 - 60
: favorites[0]
? 155
: 155 - 60,
}}></View>
}
ListEmptyComponent={
<View
style={{
height: '80%',
width: '100%',
alignItems: 'center',
alignSelf: 'center',
justifyContent: 'center',
opacity: 0.8,
}}>
<FavoritesPlaceHolder />
<Text
style={{
color: colors.pri,
fontSize: SIZE.md,
fontFamily: WEIGHT.regular,
marginTop: 20,
}}>
Favorite notes & notebooks appear here.
</Text>
<Text
style={{
fontSize: SIZE.sm,
color: colors.icon,
marginTop: 20,
}}>
Favorites are empty.
</Text>
</View>
}
data={favorites}
onScroll={onScroll}
renderItem={({item, index}) => (
<SelectionWrapper item={item}>
{item.type === 'note' ? (
<NoteItem
customStyle={{
width: selectionMode ? w - 74 : '100%',
marginHorizontal: 0,
}}
colors={colors}
onLongPress={() => {
dispatch({
type: ACTIONS.SELECTION_MODE,
enabled: !selectionMode,
});
dispatch({
type: ACTIONS.SELECTED_ITEMS,
item: item,
});
}}
item={item}
index={index}
isTrash={false}
/>
) : (
<NotebookItem
onLongPress={() => {
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}
/>
)}
</SelectionWrapper>
)}
/>
</Container>
);
};
Favorites.navigationOptions = {

33
apps/mobile/src/views/Folders/index.js
View File

@@ -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}

10
apps/mobile/src/views/Home/index.js
View File

@@ -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}
/>
</Container>

251
apps/mobile/src/views/Trash/index.js
View File

@@ -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}) => (
<SelectionWrapper item={item}>
{item.type === 'note' ? (
<NoteItem
customStyle={{
width: selectionMode ? w - 74 : '100%',
marginHorizontal: 0,
}}
onLongPress={() => {
dispatch({
type: ACTIONS.SELECTION_MODE,
enabled: !selectionMode,
});
dispatch({
type: ACTIONS.SELECTED_ITEMS,
item: item,
});
}}
item={item}
index={index}
isTrash={true}
/>
) : (
<NotebookItem
onLongPress={() => {
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}
/>
)}
</SelectionWrapper>
);
if (!isFocused) {
console.log('block rerender');
return <></>;
} else {
return (
<Container
bottomButtonOnPress={() => {
setDialog(true);
_ListEmptyComponent = (
<View
style={{
height: '80%',
width: '100%',
alignItems: 'center',
alignSelf: 'center',
justifyContent: 'center',
opacity: 0.8,
}}>
<TrashPlaceHolder colors={colors} />
<Text
style={{
color: colors.icon,
fontSize: SIZE.md,
fontFamily: WEIGHT.regular,
marginTop: 20,
}}>
Deleted notes & notebooks appear here.
</Text>
<Text
style={{
fontSize: SIZE.sm,
color: colors.icon,
marginTop: 20,
}}>
Trash is empty
</Text>
</View>
);
return (
<Container
bottomButtonOnPress={() => {
simpleDialogEvent(TEMPLATE_EMPTY_TRASH);
}}
bottomButtonText="Clear all trash">
<SelectionHeader />
{selectionMode ? null : (
<Header colors={colors} heading="Trash" canGoBack={false} menu={true} />
)}
<FlatList
keyExtractor={item => item.dateCreated.toString()}
style={{
width: '100%',
alignSelf: 'center',
height: '100%',
}}
bottomButtonText="Clear all trash">
<SelectionHeader />
{selectionMode ? null : (
<Header
colors={colors}
heading="Trash"
canGoBack={false}
menu={true}
/>
)}
<FlatList
keyExtractor={item => item.dateCreated.toString()}
style={{
width: '100%',
alignSelf: 'center',
height: '100%',
}}
contentContainerStyle={{
height: '100%',
}}
data={trash}
ListEmptyComponent={
<View
style={{
height: '80%',
width: '100%',
alignItems: 'center',
alignSelf: 'center',
justifyContent: 'center',
opacity: 0.8,
}}>
<TrashPlaceHolder colors={colors} />
<Text
style={{
color: colors.icon,
fontSize: SIZE.md,
fontFamily: WEIGHT.regular,
marginTop: 20,
}}>
Deleted notes & notebooks appear here.
</Text>
<Text
style={{
fontSize: SIZE.sm,
color: colors.icon,
marginTop: 20,
}}>
Trash is empty
</Text>
</View>
}
renderItem={({item, index}) => (
<SelectionWrapper item={item}>
{item.type === 'note' ? (
<NoteItem
customStyle={{
width: selectionMode ? w - 74 : '100%',
marginHorizontal: 0,
}}
onLongPress={() => {
if (!selectionMode) {
updateSelectionList(item);
}
changeSelectionMode(!selectionMode);
}}
item={item}
index={index}
isTrash={true}
/>
) : (
<NotebookItem
onLongPress={() => {
if (!selectionMode) {
updateSelectionList(item);
}
changeSelectionMode(!selectionMode);
}}
customStyle={{
width: selectionMode ? w - 74 : '100%',
marginHorizontal: 0,
}}
item={item}
isTrash={true}
index={index}
/>
)}
</SelectionWrapper>
)}
/>
<Dialog
title="Empty Trash"
visible={dialog}
close={() => {
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);
}}
/>
</Container>
);
}
contentContainerStyle={{
height: '100%',
}}
data={trash}
ListEmptyComponent={_ListEmptyComponent}
renderItem={_renderItem}
/>
</Container>
);
};
Trash.navigationOptions = {