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

add new sort bottom sheet & save sort val

Browse Source
This commit is contained in:
ammarahm-ed
2020-11-03 16:42:42 +05:00
parent bf9d2b72e3
commit 9e01b4a749
13 changed files with 602 additions and 484 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/mobile/App.js
View File

@@ -30,6 +30,7 @@ import {MMKV} from './src/utils/mmkv';
import Backup from './src/services/Backup';
import {setLoginMessage} from './src/services/Message';
import SplashScreen from 'react-native-splash-screen';
import {SORT, sortSettings} from "./src/utils";
let firstLoad = true;
let note = null;
@@ -157,8 +158,10 @@ const App = () => {
if (!user) {
setLoginMessage(dispatch);
}
dispatch({type: Actions.ALL});
setInit(true);
backupData().then(r=> r)
setTimeout(() => {
@@ -208,6 +211,8 @@ const App = () => {
if (settings.fontScale) {
scale.fontScale = settings.fontScale;
}
sortSettings.sort = settings.sort;
sortSettings.sortOrder = settings.sortOrder;
dispatch({type: Actions.SETTINGS, settings: {...settings}});
updateSize();

19
apps/mobile/src/components/DialogManager/index.js
View File

@@ -44,6 +44,7 @@ import {TEMPLATE_DELETE, TEMPLATE_PERMANANT_DELETE} from './Templates';
import {hexToRGBA} from "../../utils/ColorUtils";
import {DDS} from "../../services/DeviceDetection";
import ResultDialog from '../ResultDialog';
import Index from "../SortDialog";
export class DialogManager extends Component {
constructor(props) {
@@ -107,7 +108,6 @@ export class DialogManager extends Component {
item: {},
});
} else {
note = i;
this.setState({
item: i,
});
@@ -333,18 +333,12 @@ export class DialogManager extends Component {
}}
/>
</ActionSheet>
<Dialog
ref={(ref) => (this.simpleDialog = ref)}
item={item}
colors={colors}
template={simpleDialog}
/>
<VaultDialog colors={colors} />
<MoveNoteDialog colors={colors} />
<AddTopicDialog
ref={(ref) => (this.addTopicsDialog = ref)}
toEdit={item.type === 'topic' ? item : null}
@@ -364,22 +358,19 @@ export class DialogManager extends Component {
ref={(ref) => (this.premiumDialog = ref)}
colors={colors}
/>
<LoginDialog colors={colors} />
<MergeEditor />
<ExportDialog />
<RecoveryKeyDialog colors={colors} />
<PendingDialog colors={colors} />
<PremiumStatusDialog />
<ProgressDialog />
<RestoreDialog/>
<ResultDialog/>
<VaultDialog colors={colors} />
<MoveNoteDialog colors={colors} />
<Index colors={colors} />
</>
);
}

124
apps/mobile/src/components/Header/HeaderMenu.js
View File

@@ -1,104 +1,38 @@
import React, {createRef} from 'react';
import Menu, {MenuDivider, MenuItem} from 'react-native-material-menu';
import React from 'react';
import {useTracked} from '../../provider';
import {Actions} from '../../provider/Actions';
import {ActionIcon} from '../ActionIcon';
import {SIZE, WEIGHT} from "../../utils/SizeUtils";
import {Text, TouchableOpacity} from "react-native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import {eSendEvent} from "../../services/EventManager";
import {eOpenSortDialog} from "../../utils/Events";
const menuRef = createRef();
export const HeaderMenu = () => {
const [state, dispatch] = useTracked();
const {colors, headerVerticalMenu} = state;
const [state,] = useTracked();
const {colors,settings} = state;
const styles = {
text:{
fontFamily: WEIGHT.regular,
color: colors.pri,
fontSize: SIZE.sm,
},
title:{
return <TouchableOpacity
onPress={() => {
eSendEvent(eOpenSortDialog);
}}
activeOpacity={1}
style={{
flexDirection: 'row',
alignItems: 'center',
}}>
<Text
style={{
fontSize: SIZE.xs + 1,
fontFamily: WEIGHT.regular,
color: colors.icon,
fontSize: SIZE.sm ,
},
action:{
justifyContent: 'center',
alignItems: 'flex-end',
height: 40,
width: 40,
marginLeft: 10,
borderRadius: 100,
backgroundColor: colors.bg,
}
}
return headerVerticalMenu ? (
<Menu
ref={menuRef}
animationDuration={200}
style={{
borderRadius: 5,
backgroundColor: colors.bg,
paddingBottom:10,
}}
button={
<ActionIcon
onPress={() => {
menuRef.current?.show();
}}
name="dots-vertical"
size={SIZE.xl}
color={colors.pri}
customStyle={styles.action}
/>
}>
<MenuItem
textStyle={styles.title}>
Sort by:
</MenuItem>
<MenuItem
textStyle={styles.text}
onPress={() => {
dispatch({type: Actions.NOTES, sort: null});
menuRef.current?.hide();
marginRight: 5
}}>
Default
</MenuItem>
<MenuItem
textStyle={styles.text}
onPress={() => {
dispatch({type: Actions.NOTES, sort: 'abc'});
menuRef.current?.hide();
}}>
Alphabetical
</MenuItem>
<MenuItem
textStyle={styles.text}
onPress={() => {
dispatch({type: Actions.NOTES, sort: 'year'});
menuRef.current?.hide();
}}>
By year
</MenuItem>
<MenuItem
textStyle={styles.text}
onPress={() => {
dispatch({type: Actions.NOTES, sort: 'month'});
menuRef.current?.hide();
}}>
By month
</MenuItem>
<MenuItem
textStyle={styles.text}
onPress={() => {
dispatch({type: Actions.NOTES, sort: 'week'});
menuRef.current?.hide();
}}>
By week
</MenuItem>
</Menu>
) : null;
{settings.sort.slice(0,1).toUpperCase() + settings.sort.slice(1,settings.sort.length)}
</Text>
<Icon color={colors.icon}
name={settings.sortOrder === "asc" ? "sort-ascending" : "sort-descending"}
size={SIZE.md}/>
</TouchableOpacity>
};

1
apps/mobile/src/components/Header/index.js
View File

@@ -114,7 +114,6 @@ export const Header = ({showSearch, root}) => {
/>
</Animatable.View>
<HeaderMenu />
</View>
</View>
);

2
apps/mobile/src/components/Premium/PendingDialog.js
View File

@@ -53,9 +53,7 @@ class PendingDialog extends React.Component {
<ActionSheet
containerStyle={{
backgroundColor: colors.bg,
width: '100%',
alignSelf: 'center',
borderRadius: 10,
width: DDS.isTab? 500 : '100%',
borderRadius: 10,
marginBottom: DDS.isTab ? 50 : 0,

50
apps/mobile/src/components/SimpleList/index.js
View File

@@ -1,12 +1,5 @@
import React, {useCallback, useEffect, useMemo, useState} from 'react';
import {
Platform,
RefreshControl,
StyleSheet,
Text,
useWindowDimensions,
View,
} from 'react-native';
import {Platform, RefreshControl, StyleSheet, Text, useWindowDimensions, View,} from 'react-native';
import {initialWindowMetrics} from 'react-native-safe-area-context';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {DataProvider, LayoutProvider, RecyclerListView} from 'recyclerlistview';
@@ -18,6 +11,7 @@ import {PressableButton} from '../PressableButton';
import {COLORS_NOTE} from '../../utils/Colors';
import {SIZE, WEIGHT} from '../../utils/SizeUtils';
import {db} from '../../utils/DB';
import {HeaderMenu} from "../Header/HeaderMenu";
const header = {
type: 'MAIN_HEADER',
@@ -32,7 +26,7 @@ const SimpleList = ({
customRefresh,
customRefreshing,
refreshCallback,
}) => {
}) => {
const [state, dispatch] = useTracked();
const {colors, selectionMode, user, messageBoardState} = state;
const searchResults = {...state.searchResults};
@@ -68,7 +62,19 @@ const SimpleList = ({
setDataProvider(dataProvider.cloneWithRows(d));
};
const RenderSectionHeader = ({item}) => (
const RenderSectionHeader = ({item,index}) => (
<View
style={{
flexDirection: "row",
alignItems: "center",
width: "100%",
justifyContent: "space-between",
paddingHorizontal: 12,
marginTop: 10,
height: 25,
}}
>
<Text
style={[
{
@@ -78,6 +84,10 @@ const SimpleList = ({
]}>
{item.title}
</Text>
{
index === 1? <HeaderMenu/> : null
}
</View>
);
const _onRefresh = useCallback(async () => {
@@ -181,15 +191,15 @@ const SimpleList = ({
switch (type) {
case 'note':
return <RenderItem item={data} pinned={data.pinned} index={index} />;
return <RenderItem item={data} pinned={data.pinned} index={index}/>;
case 'notebook':
return <RenderItem item={data} pinned={data.pinned} index={index} />;
return <RenderItem item={data} pinned={data.pinned} index={index}/>;
case 'MAIN_HEADER':
return <ListHeaderComponent type={dataType} data={listData} />;
return <ListHeaderComponent type={dataType} index={index} data={listData}/>;
case 'header':
return <RenderSectionHeader item={data} />;
return <RenderSectionHeader item={data} index={index}/>;
default:
return <RenderItem item={data} index={index} />;
return <RenderItem item={data} index={index}/>;
}
};
@@ -217,7 +227,7 @@ const SimpleList = ({
dataProvider={dataProvider}
rowRenderer={_renderRow}
onScroll={_onScroll}
renderFooter={() => <View style={{height: 400}} />}
renderFooter={() => <View style={{height: 400}}/>}
scrollViewProps={{
refreshControl: (
<RefreshControl
@@ -344,9 +354,9 @@ const ListHeaderComponent = ({type, data}) => {
const searchResults = {...state.searchResults};
return searchResults.type === type && searchResults.results.length > 0 ? (
<SearchHeader />
<SearchHeader/>
) : (
<MessageCard type={type} data={data} />
<MessageCard type={type} data={data}/>
);
};
@@ -376,11 +386,7 @@ const styles = StyleSheet.create({
sectionHeader: {
fontFamily: WEIGHT.bold,
fontSize: SIZE.xs + 1,
paddingHorizontal: 12,
width: '100%',
alignSelf: 'center',
marginTop: 10,
height: 25,
textAlignVertical: 'center',
},
emptyList: {

175
apps/mobile/src/components/SortDialog/index.js Normal file
View File

@@ -0,0 +1,175 @@
import React, {createRef} from 'react';
import {Text, TouchableOpacity, View} from 'react-native';
import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
import {dWidth, setSetting, SORT, sortSettings} from '../../utils';
import ActionSheet from '../ActionSheet';
import {DDS} from "../../services/DeviceDetection";
import {eCloseSortDialog, eOpenSortDialog} from "../../utils/Events";
import {PressableButton} from "../PressableButton";
import {SIZE, WEIGHT} from "../../utils/SizeUtils";
import {defaultState} from "../../provider/DefaultState";
import {MMKV} from "../../utils/MMKV";
import {updateEvent} from "../DialogManager/Recievers";
import {Actions} from "../../provider/Actions";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import Seperator from "../Seperator";
const actionSheet = createRef();
class Index extends React.Component {
constructor(props) {
super(props);
this.state = {
settings: defaultState.settings
}
}
async open() {
actionSheet.current?._setModalVisible(true);
await this.getSettings();
}
async getSettings() {
let settings = await MMKV.getItem("settings");
this.setState({
settings: JSON.parse(settings)
})
}
close() {
actionSheet.current?._setModalVisible(false);
}
async componentDidMount() {
eSubscribeEvent(eOpenSortDialog, this.open.bind(this));
eSubscribeEvent(eCloseSortDialog, this.close.bind(this));
}
componentWillUnmount() {
eUnSubscribeEvent(eOpenSortDialog, this.open);
eUnSubscribeEvent(eCloseSortDialog, this.close);
}
render() {
const {colors} = this.props;
return (
<ActionSheet
containerStyle={{
backgroundColor: colors.bg,
alignSelf: 'center',
width: DDS.isTab ? 500 : '100%',
borderRadius: 10,
marginBottom: DDS.isTab ? 50 : 0,
}}
extraScroll={DDS.isTab ? 50 : 0}
gestureEnabled={true}
footerAlwaysVisible={DDS.isTab}
footerHeight={DDS.isTab ? 20 : 10}
footerStyle={
DDS.isTab
? {
borderRadius: 10,
backgroundColor: colors.bg,
}
: null
}
ref={actionSheet}
initialOffsetFromBottom={1}>
<View
style={{
width: DDS.isTab ? 500 : dWidth,
backgroundColor: colors.bg,
justifyContent: 'space-between',
paddingHorizontal: 12,
borderRadius: 10,
paddingTop: 10,
}}>
<View>
<View
style={{
flexDirection: "row",
alignItems: 'center',
justifyContent: 'space-between',
}}
>
<Text
style={{
fontSize: SIZE.xl,
fontFamily: WEIGHT.bold,
color: colors.heading,
alignSelf: 'center',
}}>
Sort by
</Text>
<TouchableOpacity
onPress={async () => {
let value = this.state.settings.sortOrder === "asc" ? "des" : "asc";
await setSetting(this.state.settings, 'sortOrder', value);
sortSettings.sortOrder = value;
await this.getSettings();
}}
activeOpacity={1}
style={{
flexDirection: 'row',
alignItems: 'center',
}}>
<Text
style={{
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
color: colors.icon,
marginRight: 5
}}>
{this.state.settings.sortOrder === "asc" ? "Ascending" : "Descending"}
</Text>
<Icon color={colors.icon}
name={this.state.settings.sortOrder === "asc" ? "sort-ascending" : "sort-descending"}
size={SIZE.md}/>
</TouchableOpacity>
</View>
<Seperator/>
{
Object.keys(SORT).map((item, index) => <PressableButton
color={this.state.settings.sort === item ? colors.shade : "transparent"}
onPress={async () => {
await setSetting(this.state.settings, 'sort', item);
await this.getSettings();
sortSettings.sort = item;
updateEvent({type: Actions.NOTES})
}}
selectedColor={this.state.settings.sort === item ? colors.accent : colors.nav}
alpha={!colors.night ? -0.02 : 0.02}
opacity={this.state.settings.sort === item ? 0.12 : 1}
customStyle={{
width: "100%",
height: 50
}}
>
<Text
style={{
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
color: this.state.settings.sort === item ? colors.accent : colors.pri
}}
>
{item.slice(0, 1).toUpperCase() + item.slice(1, item.length)}
</Text>
</PressableButton>)
}
</View>
</View>
</ActionSheet>
);
}
}
export default Index;

4
apps/mobile/src/provider/DefaultState.js
View File

@@ -25,7 +25,9 @@ export const defaultState = {
useSystemTheme:true,
reminder:'weekly',
encryptedBackups:false,
homepage:'Home'
homepage:'Home',
sort:"default",
sortOrder:"des"
},
currentScreen: 'home',
colors: {

13
apps/mobile/src/provider/Reducer.js
View File

@@ -1,7 +1,7 @@
import { eSendEvent } from '../services/EventManager';
import { eCloseSideMenu, eOpenSideMenu } from '../utils/Events';
import storage from '../utils/storage';
import { history} from '../utils/index';
import {history, SORT, sortSettings} from '../utils/index';
import { Actions } from './Actions';
import {db} from "../utils/DB";
@@ -9,9 +9,10 @@ export const reducer = (state, action) => {
switch (action.type) {
case Actions.ALL: {
return {
...state,
notes: db.notes.group(),
notes: db.notes.group(SORT[sortSettings.sort]),
notebooks: db.notebooks.all,
trash: db.trash.all,
tags: db.tags.all,
@@ -43,16 +44,10 @@ export const reducer = (state, action) => {
};
}
case Actions.NOTES:
let notes;
if (action.sort) {
notes = db.notes.group(action.sort);
} else {
notes = db.notes.group();
}
return {
...state,
notes: notes,
notes: db.notes.group(SORT[sortSettings.sort]),
loading: false,
};
case Actions.THEME: {

3
apps/mobile/src/utils/Events.js
View File

@@ -114,3 +114,6 @@ export const eUpdateSearchState = '556';
export const eOpenResultDialog = '557';
export const eCloseResultDialog = '558';
export const eOpenSortDialog = '559';
export const eCloseSortDialog = '560';

14
apps/mobile/src/utils/index.js
View File

@@ -4,6 +4,7 @@ import {updateEvent} from '../components/DialogManager/recievers';
import {Actions} from '../provider/Actions';
import {MMKV} from "./MMKV";
import RNFetchBlob from 'rn-fetch-blob';
import {defaultState} from "../provider/DefaultState";
export async function setSetting(settings, name, value) {
let s = {...settings};
@@ -26,6 +27,19 @@ export const getElevation = (elevation) => {
};
};
export const sortSettings = {
sort:defaultState.settings.sort,
sortOrder: defaultState.settings.sortOrder
}
export const SORT = {
default: null,
alphabetical: 'abc',
year: 'year',
week: 'week',
month: 'month'
}
export const editing = {
currentlyEditing: false,
isFullscreen: false,

1
apps/mobile/src/views/Editor/Functions.js
View File

@@ -155,7 +155,6 @@ export const _onMessage = async (evt) => {
let message = evt.nativeEvent.data;
clearTimeout(timer);
timer = null;
console.log('new message from editor')
if (message === 'loaded') {
} else if (message !== '' && message !== 'loaded') {
onChange(message);

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

@@ -13,17 +13,13 @@ import {
} from '../../utils/Events';
import {openEditorAnimation} from '../../utils/Animations';
import {DDS} from '../../services/DeviceDetection';
import {sortSettings} from "../../utils";
export const Home = ({navigation}) => {
const [state, dispatch] = useTracked();
const {notes} = state;
const onFocus = useCallback(() => {
dispatch({
type: Actions.HEADER_VERTICAL_MENU,
state: notes.length > 0,
});
dispatch({
type: Actions.HEADER_TEXT_STATE,
state: {
@@ -46,6 +42,7 @@ export const Home = ({navigation}) => {
color: null,
});
eSendEvent(eScrollEvent, 0);
console.log(sortSettings);
dispatch({type: Actions.COLORS});
dispatch({type: Actions.NOTES});
}, [notes]);