diff --git a/apps/mobile/src/components/AddNotebookDialog/index.js b/apps/mobile/src/components/AddNotebookDialog/index.js index cc0770009..7547dc3e7 100644 --- a/apps/mobile/src/components/AddNotebookDialog/index.js +++ b/apps/mobile/src/components/AddNotebookDialog/index.js @@ -1,4 +1,4 @@ -import React, {useEffect, useState} from 'react'; +import React, {useEffect, useState, createRef} from 'react'; import { ScrollView, View, @@ -29,10 +29,11 @@ import {useForceUpdate} from '../../views/ListsEditor'; const refs = []; -export const AddNotebookDialog = ({visible}) => { +export const AddNotebookDialog = ({visible, close}) => { const [colors, setColors] = useState(COLOR_SCHEME); const [topicsToAdd, setTopicsToAdd] = useState(['']); const forceUpdate = useForceUpdate(); + let listRef = createRef(); let prevItem = null; let prevIndex = null; let currentSelectedItem = null; @@ -53,13 +54,17 @@ export const AddNotebookDialog = ({visible}) => { forceUpdate(); currentSelectedItem = null; - if (!willFocus) return; + //if (!willFocus) return; if (!refs[index + 1]) { setTimeout(() => { + if (!refs[index + 1]) return; + refs[index + 1].focus(); }, 400); } else { - refs[index + 1].focus(); + setTimeout(() => { + refs[index + 1].focus(); + }, 400); } }; const onFocus = index => { @@ -82,146 +87,166 @@ export const AddNotebookDialog = ({visible}) => { prevItem = text; }; const onDelete = index => { + console.log('deleting'); let listData = topicsToAdd; + if (listData.length === 1) return; + refs.splice(index, 1); listData.splice(index, 1); + console.log(refs, listData); setTopicsToAdd(listData); forceUpdate(); }; return ( - - + (refs = [])}> + - - - - New Notebook - - - - - + - Topics + New Notebook + - ( - - )} - /> + - + Topics + + + ({ + length: 50, + offset: 50 * index, + index, + })} + renderItem={({item, index}) => ( + + )} + /> + + + - - - Add - - + Add + + - { + setTopicsToAdd(['']); + prevIndex = null; + prevItem = null; + currentSelectedItem = null; + close(); + }} + style={{ + paddingVertical: pv, + paddingHorizontal: ph, + borderRadius: 5, + width: '45%', + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#f0f0f0', + }}> + - - Cancel - - - + Cancel + + - - + + ); }; @@ -281,24 +306,18 @@ const TopicItem = ({ placeholderTextColor={colors.icon} /> - {index == 0 && !focus ? ( - - !focus && index !== 0 - ? onDelete(index) - : onSubmit(text, index, true) - } - style={{ - justifyContent: 'center', - alignItems: 'center', - }}> - - - ) : null} + (!focus ? onDelete(index) : onSubmit(text, index, true))} + style={{ + justifyContent: 'center', + alignItems: 'center', + }}> + + ); }; diff --git a/apps/mobile/src/components/NotebookItem/index.js b/apps/mobile/src/components/NotebookItem/index.js new file mode 100644 index 000000000..cfe286ad4 --- /dev/null +++ b/apps/mobile/src/components/NotebookItem/index.js @@ -0,0 +1,62 @@ +import React, {useEffect, useState} from 'react'; +import {View, Text, TouchableOpacity} from 'react-native'; +import NavigationService from '../../services/NavigationService'; + +import { + COLOR_SCHEME, + SIZE, + br, + ph, + pv, + opacity, + FONT, + WEIGHT, +} from '../../common/common'; +import Icon from 'react-native-vector-icons/Feather'; +export const NotebookItem = ({item, index, colors}) => { + return ( + { + NavigationService.navigate('Notebook', { + notebook: item, + }); + }} + style={{ + paddingHorizontal: ph, + marginHorizontal: '5%', + borderBottomWidth: 1, + borderBottomColor: '#f0f0f0', + paddingVertical: pv + 5, + }}> + + + + {item.name} + + + + 15 notes + + + + + + + ); +}; diff --git a/apps/mobile/src/components/Recents/index.js b/apps/mobile/src/components/Recents/index.js index fe1df1955..b38614718 100644 --- a/apps/mobile/src/components/Recents/index.js +++ b/apps/mobile/src/components/Recents/index.js @@ -148,7 +148,7 @@ export const RecentList = ({update}) => { style={{ width: Platform.isPad ? '95%' : '90%', alignSelf: 'center', - backgroundColor: 'red', + backgroundColor: colors.errorBg, padding: pv, borderRadius: 5, flexDirection: 'row', @@ -158,16 +158,16 @@ export const RecentList = ({update}) => { - Sync Disabled + Sync is disabled - Fix Now + Fix now diff --git a/apps/mobile/src/services/NavigationService.js b/apps/mobile/src/services/NavigationService.js index 433ee18bf..91bfeb5fe 100755 --- a/apps/mobile/src/services/NavigationService.js +++ b/apps/mobile/src/services/NavigationService.js @@ -15,6 +15,7 @@ import Settings from '../views/Settings'; import Trash from '../views/Trash'; import Notes from '../views/Notes'; import Tags from '../views/Tags'; +import Notebook from '../views/Notebook'; const TopLevelNavigator = createStackNavigator( { @@ -63,6 +64,9 @@ const TopLevelNavigator = createStackNavigator( Tags: { screen: Tags, }, + Notebook: { + screen: Notebook, + }, }, { initialRouteName: 'Home', diff --git a/apps/mobile/src/views/Editor/index.js b/apps/mobile/src/views/Editor/index.js index 2ab95fefd..9bc1ebc4f 100755 --- a/apps/mobile/src/views/Editor/index.js +++ b/apps/mobile/src/views/Editor/index.js @@ -22,7 +22,7 @@ import { WEIGHT, } from '../../common/common'; import WebView from 'react-native-webview'; -import Icon from 'react-native-vector-icons/Ionicons'; +import Icon from 'react-native-vector-icons/Feather'; import {useForceUpdate} from '../ListsEditor'; import {NavigationEvents} from 'react-navigation'; import {storage} from '../../../App'; @@ -92,23 +92,41 @@ const Editor = ({navigation}) => { style={{ height: '100%', }}> - { - title = value; - }} - onSubmitEditing={async () => await saveNote()} - /> + }}> + + + { + title = value; + }} + onSubmitEditing={async () => await saveNote()} + /> + { const [addNotebook, setAddNotebook] = useState(false); return ( - + setAddNotebook(false)} + /> { - Create new notebook + Create a new notebook } renderItem={({item, index}) => ( - - - {item.name} - - - - June 21 - - - 15 notes - - - + )} /> diff --git a/apps/mobile/src/views/Notebook/index.js b/apps/mobile/src/views/Notebook/index.js new file mode 100644 index 000000000..0c4c5641d --- /dev/null +++ b/apps/mobile/src/views/Notebook/index.js @@ -0,0 +1,136 @@ +import React, {useEffect, useState} from 'react'; +import { + ScrollView, + View, + Text, + TouchableOpacity, + Dimensions, + Image, + SafeAreaView, + Platform, + FlatList, +} from 'react-native'; +import NavigationService from '../../services/NavigationService'; +import { + COLOR_SCHEME, + SIZE, + br, + ph, + pv, + opacity, + FONT, + WEIGHT, +} from '../../common/common'; +import Icon from 'react-native-vector-icons/Feather'; +import {Reminder} from '../../components/Reminder'; +import {ListItem} from '../../components/ListItem'; +import {Header} from '../../components/header'; +import NoteItem from '../../components/NoteItem'; +import {NotebookItem} from '../../components/NotebookItem'; + +const w = Dimensions.get('window').width; +const h = Dimensions.get('window').height; + +export const Notebook = ({navigation}) => { + const [colors, setColors] = useState(COLOR_SCHEME); + + return ( + +
+ + + { + setAddNotebook(true); + }} + style={{ + borderWidth: 1, + borderRadius: 5, + width: '90%', + marginHorizontal: '5%', + paddingHorizontal: ph, + borderColor: '#f0f0f0', + paddingVertical: pv + 5, + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + marginBottom: 15, + backgroundColor: colors.accent, + }}> + + Add a new topic + + + + + { + setAddNotebook(true); + }} + style={{ + borderWidth: 1, + borderRadius: 5, + width: '90%', + marginHorizontal: '5%', + paddingHorizontal: ph, + borderColor: '#f0f0f0', + paddingVertical: pv + 5, + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + marginBottom: 15, + }}> + + View All Notes + + + + } + renderItem={({item, index}) => ( + + )} + /> + + ); +}; + +Notebook.navigationOptions = { + header: null, +}; + +export default Notebook;