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

refactor

Browse Source
This commit is contained in:
ammarahm-ed
2021-02-09 11:33:57 +05:00
parent 80ab2a6f2e
commit dafbadf049
12 changed files with 229 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
apps/mobile/src/components/LoginDialog/index.js
View File

@@ -1,37 +1,35 @@
import React, {useEffect, useRef, useState} from 'react';
import { Platform } from 'react-native';
import {ActivityIndicator, Modal, TouchableOpacity, View} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import React, { useEffect, useRef, useState } from 'react';
import { ActivityIndicator, Modal, TouchableOpacity, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {Button} from '../../components/Button';
import { Button } from '../../components/Button';
import Seperator from '../../components/Seperator';
import {Toast} from '../../components/Toast';
import {Actions} from '../../provider/Actions';
import {useTracked} from '../../provider/index';
import {DDS} from '../../services/DeviceDetection';
import { Toast } from '../../components/Toast';
import { Actions } from '../../provider/Actions';
import { useTracked } from '../../provider/index';
import { DDS } from '../../services/DeviceDetection';
import {
eSendEvent,
eSubscribeEvent,
eUnSubscribeEvent,
ToastEvent,
ToastEvent
} from '../../services/EventManager';
import {clearMessage, setEmailVerifyMessage} from '../../services/Message';
import { clearMessage, setEmailVerifyMessage } from '../../services/Message';
import PremiumService from '../../services/PremiumService';
import {getElevation} from '../../utils';
import {db} from '../../utils/DB';
import { getElevation } from '../../utils';
import { db } from '../../utils/DB';
import {
eOpenLoginDialog,
eOpenRecoveryKeyDialog,
refreshNotesPage,
refreshNotesPage
} from '../../utils/Events';
import {MMKV} from '../../utils/mmkv';
import {SIZE} from '../../utils/SizeUtils';
import {sleep} from '../../utils/TimeUtils';
import {ActionIcon} from '../ActionIcon';
import { MMKV } from '../../utils/mmkv';
import { SIZE } from '../../utils/SizeUtils';
import { sleep } from '../../utils/TimeUtils';
import { ActionIcon } from '../ActionIcon';
import BaseDialog from '../Dialog/base-dialog';
import DialogContainer from '../Dialog/dialog-container';
import Input from '../Input';
import {ListHeaderComponent} from '../SimpleList/ListHeaderComponent';
import { Header } from '../SimpleList/header';
import Heading from '../Typography/Heading';
import Paragraph from '../Typography/Paragraph';
@@ -457,7 +455,7 @@ const LoginDialog = () => {
<View />
</View>
<ListHeaderComponent
<Header
color="transparent"
type="settings"
shouldShow

6
apps/mobile/src/components/SimpleList/NoteItemWrapper.js → apps/mobile/src/components/NoteItem/wrapper.js
View File

@@ -1,6 +1,6 @@
import React, {useEffect, useMemo, useState} from 'react';
import NoteItem from '../../components/NoteItem';
import SelectionWrapper from '../../components/SelectionWrapper';
import NoteItem from '.';
import SelectionWrapper from '../SelectionWrapper';
import {useTracked} from '../../provider';
import {Actions} from '../../provider/Actions';
import {
@@ -17,7 +17,7 @@ import {DDS} from '../../services/DeviceDetection';
import {tabBarRef} from '../../utils/Refs';
import {notesnook} from '../../../e2e/test.ids';
export const NoteItemWrapper = ({item, index, isTrash = false}) => {
export const NoteWrapper = ({item, index, isTrash = false}) => {
const [state, dispatch] = useTracked();
const {colors, selectionMode} = state;
const [note, setNote] = useState(item);

6
apps/mobile/src/components/SimpleList/NotebookItemWrapper.js → apps/mobile/src/components/NotebookItem/wrapper.js
View File

@@ -1,13 +1,13 @@
import React, {useMemo} from 'react';
import {notesnook} from '../../../e2e/test.ids';
import {NotebookItem} from '../../components/NotebookItem';
import SelectionWrapper from '../../components/SelectionWrapper';
import {NotebookItem} from '.';
import SelectionWrapper from '../SelectionWrapper';
import {useTracked} from '../../provider';
import {Actions} from '../../provider/Actions';
import Navigation from '../../services/Navigation';
import {rootNavigatorRef} from '../../utils/Refs';
export const NotebookItemWrapper = ({
export const NotebookWrapper = ({
item,
index,
isTrash = false,

4
apps/mobile/src/components/SelectionWrapper/index.js
View File

@@ -60,10 +60,6 @@ const SelectionWrapper = ({
setActionStrip(false);
};
const closeStrip = () => {
setActionStrip(false);
};
useEffect(() => {
eSubscribeEvent('navigate', closeStrip);

14
apps/mobile/src/components/SimpleList/MessageCard.js → apps/mobile/src/components/SimpleList/card.js
View File

@@ -4,11 +4,11 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {notesnook} from '../../../e2e/test.ids';
import {useTracked} from '../../provider';
import {DDS} from '../../services/DeviceDetection';
import { getElevation } from '../../utils';
import {getElevation} from '../../utils';
import {SIZE} from '../../utils/SizeUtils';
import Paragraph from '../Typography/Paragraph';
export const MessageCard = ({data, color}) => {
export const Card = ({data, color}) => {
const [state] = useTracked();
const {selectionMode, messageBoardState} = state;
@@ -25,7 +25,7 @@ export const MessageCard = ({data, color}) => {
right: 0,
top: 0,
zIndex: 999,
backgroundColor: messageBoardState.type === "error" ? "red" : color,
backgroundColor: messageBoardState.type === 'error' ? 'red' : color,
width: '100%',
}}>
<View
@@ -45,9 +45,13 @@ export const MessageCard = ({data, color}) => {
width: 20,
justifyContent: 'center',
alignItems: 'center',
...getElevation(5)
...getElevation(5),
}}>
<Icon name={messageBoardState.icon} size={SIZE.sm} color={messageBoardState.type === "error" ? "red" : color} />
<Icon
name={messageBoardState.icon}
size={SIZE.sm}
color={messageBoardState.type === 'error' ? 'red' : color}
/>
</View>
<Paragraph size={SIZE.sm} color="white">

85
apps/mobile/src/components/SimpleList/empty.js Normal file
View File

@@ -0,0 +1,85 @@
import React, {useEffect, useState} from 'react';
import {ActivityIndicator, useWindowDimensions, View} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {useTracked} from '../../provider';
import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
import Navigation from '../../services/Navigation';
import {COLORS_NOTE} from '../../utils/Colors';
import {SIZE} from '../../utils/SizeUtils';
import {Button} from '../Button';
import Seperator from '../Seperator';
import Heading from '../Typography/Heading';
import Paragraph from '../Typography/Paragraph';
export const Empty = ({loading = true, placeholderData}) => {
const [state] = useTracked();
const {colors} = state;
const [headerTextState, setHeaderTextState] = useState(
Navigation.getHeaderState(),
);
const insets = useSafeAreaInsets();
const {height} = useWindowDimensions();
const onHeaderStateChange = (event) => {
if (!event) return;
setHeaderTextState(event);
};
useEffect(() => {
eSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
return () => {
eUnSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
};
}, []);
return (
<View
style={[
{
backgroundColor: colors.bg,
height: height - 250 - insets.top,
width: '100%',
},
]}>
<View
style={{
flexGrow: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Heading>{placeholderData.heading}</Heading>
<Paragraph
style={{
textAlign: 'center',
width: '80%',
}}
color={colors.icon}>
{loading ? placeholderData.loading : placeholderData.paragraph}
</Paragraph>
<Seperator />
{placeholderData.button && !loading ? (
<Button
onPress={placeholderData.action}
title={placeholderData.button}
icon="plus"
type="accent"
fontSize={SIZE.md}
accentColor="bg"
accentText={
COLORS_NOTE[headerTextState?.heading?.toLowerCase()]
? headerTextState.heading?.toLowerCase()
: 'accent'
}
/>
) : loading ? (
<ActivityIndicator
color={
COLORS_NOTE[headerTextState?.heading?.toLowerCase()]
? COLORS_NOTE[headerTextState?.heading?.toLowerCase()]
: colors.accent
}
/>
) : null}
</View>
</View>
);
};

6
apps/mobile/src/components/SimpleList/footer.js Normal file
View File

@@ -0,0 +1,6 @@
import React from 'react';
import {View} from 'react-native';
export const Footer = () => {
return <View style={{height: 300}} />;
};

31
apps/mobile/src/components/SimpleList/ListHeaderComponent.js → apps/mobile/src/components/SimpleList/header.js
View File

@@ -1,19 +1,16 @@
import React, {useEffect} from 'react';
import {Text, View} from 'react-native';
import Animated from 'react-native-reanimated';
import {useTracked} from '../../provider';
import {DDS} from '../../services/DeviceDetection';
import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
import {COLORS_NOTE} from '../../utils/Colors';
import {hexToRGBA} from '../../utils/ColorUtils';
import {eScrollEvent} from '../../utils/Events';
import {normalize, SIZE} from '../../utils/SizeUtils';
import {Placeholder} from '../ListPlaceholders';
import React from 'react';
import { View } from 'react-native';
import { useTracked } from '../../provider';
import { DDS } from '../../services/DeviceDetection';
import { COLORS_NOTE } from '../../utils/Colors';
import { hexToRGBA } from '../../utils/ColorUtils';
import { normalize, SIZE } from '../../utils/SizeUtils';
import { Placeholder } from '../ListPlaceholders';
import Heading from '../Typography/Heading';
import Paragraph from '../Typography/Paragraph';
import {MessageCard} from './MessageCard';
import { Card } from './card';
export const ListHeaderComponent = ({
export const Header = ({
type,
messageCard = true,
title,
@@ -36,9 +33,7 @@ export const ListHeaderComponent = ({
alignItems: 'center',
}}>
{messageCard && (
<MessageCard
color={COLORS_NOTE[title.toLowerCase()] || colors.accent}
/>
<Card color={COLORS_NOTE[title.toLowerCase()] || colors.accent} />
)}
</View>
) : (
@@ -47,9 +42,7 @@ export const ListHeaderComponent = ({
width: '100%',
}}>
{messageCard && (
<MessageCard
color={COLORS_NOTE[title.toLowerCase()] || colors.accent}
/>
<Card color={COLORS_NOTE[title.toLowerCase()] || colors.accent} />
)}
<View
style={{

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

@@ -1,35 +1,20 @@
import React, {useEffect, useState} from 'react';
import {
ActivityIndicator,
RefreshControl,
useWindowDimensions,
View,
} from 'react-native';
import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {DataProvider, LayoutProvider, RecyclerListView} from 'recyclerlistview';
import {useTracked} from '../../provider';
import {DDS} from '../../services/DeviceDetection';
import {
eSendEvent,
eSubscribeEvent,
eUnSubscribeEvent,
} from '../../services/EventManager';
import Navigation from '../../services/Navigation';
import React, { useEffect, useState } from 'react';
import { RefreshControl, useWindowDimensions } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { DataProvider, LayoutProvider, RecyclerListView } from 'recyclerlistview';
import { useTracked } from '../../provider';
import { DDS } from '../../services/DeviceDetection';
import { eSendEvent } from '../../services/EventManager';
import Sync from '../../services/Sync';
import {dHeight} from '../../utils';
import {COLORS_NOTE} from '../../utils/Colors';
import {eOpenJumpToDialog, eScrollEvent} from '../../utils/Events';
import {SIZE} from '../../utils/SizeUtils';
import {Button} from '../Button';
import {HeaderMenu} from '../Header/HeaderMenu';
import Seperator from '../Seperator';
import { dHeight } from '../../utils';
import { eScrollEvent } from '../../utils/Events';
import { NotebookWrapper } from '../NotebookItem/wrapper';
import { NoteWrapper } from '../NoteItem/wrapper';
import TagItem from '../TagItem';
import Heading from '../Typography/Heading';
import Paragraph from '../Typography/Paragraph';
import {ListHeaderComponent} from './ListHeaderComponent';
import {NotebookItemWrapper} from './NotebookItemWrapper';
import {NoteItemWrapper} from './NoteItemWrapper';
import { Empty } from './empty';
import { Footer } from './footer';
import { Header } from './header';
import { SectionHeader } from './section-header';
const header = {
type: 'MAIN_HEADER',
@@ -138,18 +123,16 @@ const SimpleList = ({
const _renderRow = (type, data, index) => {
switch (type) {
case 'note':
return (
<NoteItemWrapper item={data} pinned={data.pinned} index={index} />
);
return <NoteWrapper item={data} pinned={data.pinned} index={index} />;
case 'notebook':
return (
<NotebookItemWrapper item={data} pinned={data.pinned} index={index} />
<NotebookWrapper item={data} pinned={data.pinned} index={index} />
);
case 'tag':
return <TagItem item={data} index={index} />;
case 'topic':
return (
<NotebookItemWrapper
<NotebookWrapper
item={data}
isTopic={true}
pinned={data.pinned}
@@ -158,13 +141,13 @@ const SimpleList = ({
);
case 'trash':
return data.itemType === 'note' ? (
<NoteItemWrapper item={data} index={index} isTrash={true} />
<NoteWrapper item={data} index={index} isTrash={true} />
) : (
<NotebookItemWrapper item={data} index={index} isTrash={true} />
<NotebookWrapper item={data} index={index} isTrash={true} />
);
case 'MAIN_HEADER':
return (
<ListHeaderComponent
<Header
title={headerProps.heading}
type={dataType}
index={index}
@@ -173,7 +156,7 @@ const SimpleList = ({
);
case 'header':
return (
<RenderSectionHeader
<SectionHeader
item={data}
index={index}
headerProps={headerProps}
@@ -182,12 +165,7 @@ const SimpleList = ({
/>
);
case 'empty':
return (
<ListEmptyComponent
loading={loading}
placeholderData={placeholderData}
/>
);
return <Empty loading={loading} placeholderData={placeholderData} />;
}
};
@@ -222,7 +200,7 @@ const SimpleList = ({
width: '100%',
};
const renderFooter = () => <View style={{height: 300}} />;
return (
<RecyclerListView
@@ -234,7 +212,7 @@ const SimpleList = ({
canChangeSize={true}
optimizeForInsertDeleteAnimations
//forceNonDeterministicRendering
renderFooter={renderFooter}
renderFooter={ Footer}
scrollViewProps={scrollProps}
style={styles}
/>
@@ -242,130 +220,3 @@ const SimpleList = ({
};
export default SimpleList;
const RenderSectionHeader = ({
item,
index,
headerProps,
jumpToDialog,
sortMenuButton,
}) => {
const [state] = useTracked();
const {colors} = state;
return (
<View
style={{
flexDirection: 'row',
alignItems: 'center',
width: '100%',
justifyContent: 'space-between',
paddingHorizontal: 12,
height: 30,
backgroundColor:
index === 1
? headerProps.color
? colors[headerProps.color]
: colors.shade
: colors.nav,
marginTop: index === 1 ? 0 : 5,
}}>
<TouchableWithoutFeedback
onPress={() => {
if (jumpToDialog) {
eSendEvent(eOpenJumpToDialog);
}
}}
hitSlop={{top: 10, left: 10, right: 30, bottom: 15}}
style={{
height: '100%',
justifyContent: 'center',
}}>
<Heading
color={colors.accent}
size={SIZE.sm}
style={{
minWidth: 60,
alignSelf: 'center',
textAlignVertical: 'center',
}}>
{!item.title || item.title === '' ? 'Pinned' : item.title}
</Heading>
</TouchableWithoutFeedback>
{index === 1 && sortMenuButton ? <HeaderMenu /> : null}
</View>
);
};
const ListEmptyComponent = ({loading = true, placeholderData}) => {
const [state] = useTracked();
const {colors} = state;
const [headerTextState, setHeaderTextState] = useState(
Navigation.getHeaderState(),
);
const insets = useSafeAreaInsets();
const {height} = useWindowDimensions();
const onHeaderStateChange = (event) => {
if (!event) return;
setHeaderTextState(event);
};
useEffect(() => {
eSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
return () => {
eUnSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
};
}, []);
return (
<View
style={[
{
backgroundColor: colors.bg,
height: height - 250 - insets.top,
width: '100%',
},
]}>
<View
style={{
flexGrow: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Heading>{placeholderData.heading}</Heading>
<Paragraph
style={{
textAlign: 'center',
width: '80%',
}}
color={colors.icon}>
{loading ? placeholderData.loading : placeholderData.paragraph}
</Paragraph>
<Seperator />
{placeholderData.button && !loading ? (
<Button
onPress={placeholderData.action}
title={placeholderData.button}
icon="plus"
type="accent"
fontSize={SIZE.md}
accentColor="bg"
accentText={
COLORS_NOTE[headerTextState?.heading?.toLowerCase()]
? headerTextState.heading?.toLowerCase()
: 'accent'
}
/>
) : loading ? (
<ActivityIndicator
color={
COLORS_NOTE[headerTextState?.heading?.toLowerCase()]
? COLORS_NOTE[headerTextState?.heading?.toLowerCase()]
: colors.accent
}
/>
) : null}
</View>
</View>
);
};

67
apps/mobile/src/components/SimpleList/sectionheader.js Normal file
View File

@@ -0,0 +1,67 @@
import React from 'react';
import {
View
} from 'react-native';
import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
import { useTracked } from '../../provider';
import {
eSendEvent
} from '../../services/EventManager';
import { eOpenJumpToDialog } from '../../utils/Events';
import { SIZE } from '../../utils/SizeUtils';
import { HeaderMenu } from '../Header/HeaderMenu';
import Heading from '../Typography/Heading';
export const SectionHeader = ({
item,
index,
headerProps,
jumpToDialog,
sortMenuButton,
}) => {
const [state] = useTracked();
const {colors} = state;
return (
<View
style={{
flexDirection: 'row',
alignItems: 'center',
width: '100%',
justifyContent: 'space-between',
paddingHorizontal: 12,
height: 30,
backgroundColor:
index === 1
? headerProps.color
? colors[headerProps.color]
: colors.shade
: colors.nav,
marginTop: index === 1 ? 0 : 5,
}}>
<TouchableWithoutFeedback
onPress={() => {
if (jumpToDialog) {
eSendEvent(eOpenJumpToDialog);
}
}}
hitSlop={{top: 10, left: 10, right: 30, bottom: 15}}
style={{
height: '100%',
justifyContent: 'center',
}}>
<Heading
color={colors.accent}
size={SIZE.sm}
style={{
minWidth: 60,
alignSelf: 'center',
textAlignVertical: 'center',
}}>
{!item.title || item.title === '' ? 'Pinned' : item.title}
</Heading>
</TouchableWithoutFeedback>
{index === 1 && sortMenuButton ? <HeaderMenu /> : null}
</View>
);
};

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

@@ -2,7 +2,6 @@ import React, {useCallback, useEffect, useState} from 'react';
import {AddNotebookEvent} from '../../components/DialogManager/recievers';
import {Placeholder} from '../../components/ListPlaceholders';
import SimpleList from '../../components/SimpleList';
import {NotebookItemWrapper} from '../../components/SimpleList/NotebookItemWrapper';
import {useTracked} from '../../provider';
import {Actions} from '../../provider/Actions';
import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton';
@@ -84,7 +83,6 @@ export const Folders = ({route, navigation}) => {
data={notebooks}
type="notebooks"
focused={() => navigation.isFocused()}
RenderItem={NotebookItemWrapper}
loading={loading}
placeholderData={{
heading: 'Your Notebooks',

2
apps/mobile/src/views/Notes/index.js
View File

@@ -2,7 +2,6 @@ import React, {useCallback, useEffect, useState} from 'react';
import {InteractionManager, Platform} from 'react-native';
import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton';
import SimpleList from '../../components/SimpleList';
import {NoteItemWrapper} from '../../components/SimpleList/NoteItemWrapper';
import {useTracked} from '../../provider';
import {Actions} from '../../provider/Actions';
import {DDS} from '../../services/DeviceDetection';
@@ -217,7 +216,6 @@ export const Notes = ({route, navigation}) => {
}}
loading={loading || localLoad}
focused={() => navigation.isFocused()}
RenderItem={NoteItemWrapper}
placeholderText={`Add some notes to this" ${
params.type ? params.type : 'topic.'
}`}