From a0ba5fce69190edb3fb10827edf060ab009a8553 Mon Sep 17 00:00:00 2001 From: ammarahm-ed Date: Fri, 17 Jan 2020 21:06:15 +0500 Subject: [PATCH] refactor --- apps/mobile/src/components/Menu/index.js | 15 +- apps/mobile/src/provider/index.js | 20 +- apps/mobile/src/views/Editor/index.js | 242 ++++++----------------- apps/mobile/src/views/Home/index.js | 15 +- apps/mobile/src/views/Settings/index.js | 20 +- 5 files changed, 104 insertions(+), 208 deletions(-) diff --git a/apps/mobile/src/components/Menu/index.js b/apps/mobile/src/components/Menu/index.js index 010755454..5c7b58803 100644 --- a/apps/mobile/src/components/Menu/index.js +++ b/apps/mobile/src/components/Menu/index.js @@ -15,20 +15,27 @@ import { WEIGHT, COLOR_SCHEME_DARK, COLOR_SCHEME_LIGHT, + ACCENT, + COLOR_SCHEME, + setColorScheme, } from '../../common/common'; import Icon from 'react-native-vector-icons/Feather'; -import {h} from '../../utils/utils'; import {AnimatedSafeAreaView} from '../../views/Home'; -import {useAppContext} from '../../provider/useAppContext'; import FastStorage from 'react-native-fast-storage'; -import {useTracked} from '../../provider'; +import {useTracked, ACTIONS} from '../../provider'; + export const Menu = ({close = () => {}, hide, update = () => {}}) => { const [state, dispatch] = useTracked(); const {colors} = state; // todo - const changeColorScheme = () => {}; + function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) { + let newColors = setColorScheme(colors, accent); + StatusBar.setBarStyle(newColors.night ? 'light-content' : 'dark-content'); + + dispatch({type: ACTIONS.THEME, colors: newColors}); + } const listItems = [ { diff --git a/apps/mobile/src/provider/index.js b/apps/mobile/src/provider/index.js index 1a34678fc..19d3db584 100644 --- a/apps/mobile/src/provider/index.js +++ b/apps/mobile/src/provider/index.js @@ -36,17 +36,33 @@ const defaultState = { export const ACTIONS = { NOTES: 'note', + NOTEBOOKS: 'notebook', + TRASH: 'trash', + TAGS: 'tags', + PINNED: 'pinned', + FAVORITES: 'favorites', + SELECTION_MODE: 'selectionMode', + SELECTED_ITEMS_LIST: 'selectedItemsList', + THEME: 'theme', + CHANGE_THEME: 'changeTheme', + CHANGE_ACCENT: 'changeAccent', }; const reducer = (state, action) => { switch (action.type) { - case 'note': + case ACTIONS.NOTES: + console.log(action.payload); let notes = db.groupNotes(); return { ...state, notes: notes, }; - + case ACTIONS.THEME: { + return { + ...state, + colors: {...action.colors}, + }; + } default: throw new Error('unknown action type'); } diff --git a/apps/mobile/src/views/Editor/index.js b/apps/mobile/src/views/Editor/index.js index 887c22ab7..b40c0d7fd 100755 --- a/apps/mobile/src/views/Editor/index.js +++ b/apps/mobile/src/views/Editor/index.js @@ -26,6 +26,11 @@ import {ActionSheetComponent} from '../../components/ActionSheetComponent'; import {VaultDialog} from '../../components/VaultDialog'; import {useIsFocused} from 'react-navigation-hooks'; import {useTracked} from '../../provider'; +import { + simpleDialogEvent, + TEMPLATE_EXIT, + ActionSheetEvent, +} from '../../components/DialogManager'; const w = Dimensions.get('window').width; const h = Dimensions.get('window').height; @@ -117,14 +122,8 @@ const Editor = ({navigation}) => { locked: note.locked, }; setNoteProps({...props}); - console.log(JSON.stringify(note.content.delta)); - if (JSON.stringify(note.content.delta) === JSON.stringify({})) { - console.log('i run'); - post(`{"ops":[{"insert":"${note.content.text}"}]}`); - } else { - post(JSON.stringify(note.content.delta)); - } + post(JSON.stringify(note.content.delta)); title = note.title; titleRef.setNativeProps({ @@ -140,33 +139,9 @@ const Editor = ({navigation}) => { timer = null; timer = setTimeout(() => { saveNote(noteProps, true); - console.log('saved'); }, 1000); }; - const onMenuHide = () => { - if (show) { - if (show === 'lock') { - if (unlock) { - setUnlock(false); - } - setVaultDialog(true); - } else if (show === 'unlock') { - setUnlock(true); - setVaultDialog(true); - } else if (show == 'delete') { - setVisible(true); - } - } - }; - - const deleteItem = async () => { - await db.deleteNotes([note]); - ToastEvent.show('Note moved to trash', 'success', 3000); - setVisible(false); - navigation.goBack(); - }; - const _renderEditor = () => { return ( { }}> { - setDialog(true); + simpleDialogEvent(TEMPLATE_EXIT('Editor')); }} style={{ width: '12.5%', @@ -230,7 +205,13 @@ const Editor = ({navigation}) => { onPress={() => { DDS.isTab ? setSidebar(!sidebar) - : actionSheet._setModalVisible(); + : ActionSheetEvent( + note, + true, + true, + ['Add to', 'Share', 'Export', 'Delete'], + ['Dark Mode', 'Add to Vault', 'Pin', 'Favorite'], + ); }} style={{ width: '12.5%', @@ -308,8 +289,8 @@ const Editor = ({navigation}) => { useEffect(() => { let handleBack = BackHandler.addEventListener('hardwareBackPress', () => { - updateDB(); - setDialog(true); + simpleDialogEvent(TEMPLATE_EXIT('Editor')); + return true; }); return () => { @@ -334,162 +315,59 @@ const Editor = ({navigation}) => { EditorWebView.reload(); }, [colors]); - if (!isFocused) { - console.log('block rerender'); - return <>; - } else { - return DDS.isTab ? ( - - - { - setDialog(false); - }} - positivePress={() => { - setTimeout(() => { - navigation.goBack(); - setDialog(false); - }, 1000); - }} - /> - - {_renderEditor()} - - - { - setNoteProps(props); - }} - close={() => { - setTimeout(() => { - setOpen(args); - }, 500); - }} - /> - - - ) : ( - + - - { - setDialog(false); - }} - positivePress={() => { - navigation.goBack(); - setDialog(false); - }} - /> - - {_renderEditor()} - - - { - setVisible(false); - }} - /> - - { - let props = {...noteProps}; - props.locked = locked; - note.locked = locked; + {_renderEditor()} + + + { setNoteProps(props); - setVaultDialog(false); - setUnlock(false); }} - note={note} - timestamp={timestamp} - perm={true} - openedToUnlock={unlock} - visible={vaultDialog} - /> - (actionSheet = ref)} - customStyles={{ - backgroundColor: colors.bg, + close={() => { + setTimeout(() => { + setOpen(args); + }, 500); }} - initialOffsetFromBottom={0.99} - elevation={5} - overlayColor={ - colors.night ? 'rgba(225,225,225,0.1)' : 'rgba(0,0,0,0.3)' - } - indicatorColor={colors.shade} - onClose={() => { - onMenuHide(); - if (willRefresh) { - note = db.getNote(timestamp); - - updateEditor(); - } - }} - children={ - { - cutsomNote = value; - willRefresh = true; - }} - hasColors={true} - hasTags={true} - rowItems={['Add to', 'Share', 'Export', 'Delete']} - columnItems={['Dark Mode', 'Add to Vault', 'Pin', 'Favorite']} - close={value => { - if (value) { - show = value; - } - - actionSheet._setModalVisible(); - }} - /> - } /> - ); - } + + ) : ( + + + {_renderEditor()} + + + ); }; Editor.navigationOptions = { diff --git a/apps/mobile/src/views/Home/index.js b/apps/mobile/src/views/Home/index.js index 1fda5fcbf..acda8e6e0 100755 --- a/apps/mobile/src/views/Home/index.js +++ b/apps/mobile/src/views/Home/index.js @@ -38,7 +38,6 @@ export const Home = ({navigation}) => { const [searchResults, setSearchResults] = useState([]); // Variables - let isFocused = useIsFocused(); let offsetY = 0; let countUp = 1; @@ -48,20 +47,9 @@ export const Home = ({navigation}) => { // Effects useEffect(() => { - dispatch({type: ACTIONS.NOTES}); + dispatch({type: ACTIONS.NOTES, payload: 'hello there'}); }, []); - useEffect(() => { - _recieveEvent('updateEvent', type => { - dispatch(type); - }); - return () => { - _unSubscribeEvent('updateEvent', type => { - dispatch(type); - }); - }; - }); - // Functions const onChangeText = value => { @@ -120,6 +108,7 @@ export const Home = ({navigation}) => { { + dispatch({type: ACTIONS.NOTES}); SideMenuEvent.close(); SideMenuEvent.disable(); NavigationService.navigate('Editor'); diff --git a/apps/mobile/src/views/Settings/index.js b/apps/mobile/src/views/Settings/index.js index 5dafb16de..a455caa29 100644 --- a/apps/mobile/src/views/Settings/index.js +++ b/apps/mobile/src/views/Settings/index.js @@ -14,6 +14,8 @@ import { WEIGHT, COLOR_SCHEME_DARK, COLOR_SCHEME_LIGHT, + COLOR_SCHEME, + ACCENT, } from '../../common/common'; import Icon from 'react-native-vector-icons/Feather'; import {Header} from '../../components/header'; @@ -28,15 +30,19 @@ export const Settings = ({navigation}) => { const {colors} = state; /// - const changeAccentColor = () => {}; - const changeColorScheme = () => {}; - //const [colors, setColors] = useState(COLOR_SCHEME_LIGHT); - let isFocused = useIsFocused(); + function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) { + let newColors = setColorScheme(colors, accent); + StatusBar.setBarStyle(newColors.night ? 'light-content' : 'dark-content'); - if (!isFocused) { - console.log('block rerender'); - return <>; + dispatch({type: ACTIONS.THEME, colors: newColors}); } + + function changeAccentColor(accentColor) { + ACCENT.color = accentColor; + ACCENT.shade = accentColor + '12'; + changeColorScheme(); + } + return (