diff --git a/apps/mobile/src/common/common.js b/apps/mobile/src/common/common.js index 127ec5c92..e4a29200b 100755 --- a/apps/mobile/src/common/common.js +++ b/apps/mobile/src/common/common.js @@ -35,6 +35,12 @@ export const COLOR_SCHEME = { accent: '#0560FF', normal: 'black', icon: 'gray', + errorBg: '#FFD2D2', + errorText: '#D8000C', + successBg: '#DFF2BF', + successText: '#4F8A10', + warningBg: '#FEEFB3', + warningText: '#9F6000', }; //FONT FAMILY diff --git a/apps/mobile/src/components/AddNotebookDialog/index.js b/apps/mobile/src/components/AddNotebookDialog/index.js new file mode 100644 index 000000000..cc0770009 --- /dev/null +++ b/apps/mobile/src/components/AddNotebookDialog/index.js @@ -0,0 +1,304 @@ +import React, {useEffect, useState} from 'react'; +import { + ScrollView, + View, + Text, + TouchableOpacity, + Dimensions, + Image, + SafeAreaView, + Platform, + Modal, +} 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 {getElevation, h, w, timeSince} from '../../utils/utils'; +import {FlatList, TextInput} from 'react-native-gesture-handler'; +import {useForceUpdate} from '../../views/ListsEditor'; + +const refs = []; + +export const AddNotebookDialog = ({visible}) => { + const [colors, setColors] = useState(COLOR_SCHEME); + const [topicsToAdd, setTopicsToAdd] = useState(['']); + const forceUpdate = useForceUpdate(); + let prevItem = null; + let prevIndex = null; + let currentSelectedItem = null; + + const onSubmit = (text, index, willFocus = true) => { + let oldData = topicsToAdd; + oldData[index] = text; + + if ( + oldData.length === index + 1 && + prevIndex !== null && + prevItem !== null + ) { + oldData.push(''); + } + + setTopicsToAdd(oldData); + forceUpdate(); + currentSelectedItem = null; + + if (!willFocus) return; + if (!refs[index + 1]) { + setTimeout(() => { + refs[index + 1].focus(); + }, 400); + } else { + refs[index + 1].focus(); + } + }; + const onFocus = index => { + currentSelectedItem = index; + if (currentSelectedItem) { + let oldData = topicsToAdd; + oldData[prevIndex] = prevItem; + if (oldData.length === prevIndex + 1) { + oldData.push(''); + } + prevIndex = null; + prevItem = null; + setTopicsToAdd(oldData); + console.log(oldData); + forceUpdate(); + } + }; + const onChange = (text, index) => { + prevIndex = index; + prevItem = text; + }; + const onDelete = index => { + let listData = topicsToAdd; + listData.splice(index, 1); + setTopicsToAdd(listData); + forceUpdate(); + }; + + return ( + + + + + + + + New Notebook + + + + + + + Topics + + + ( + + )} + /> + + + + + Add + + + + + + Cancel + + + + + + + + ); +}; + +const TopicItem = ({ + item, + index, + onFocus, + onSubmit, + onDelete, + onChange, + colors, +}) => { + const [focus, setFocus] = useState(true); + const topicRef = ref => (refs[index] = ref); + + let text = item; + + return ( + + { + onFocus(index); + + setFocus(true); + }} + onBlur={() => { + onSubmit(text, index, false); + setFocus(false); + }} + onChangeText={value => { + onChange(value, index); + + text = value; + }} + onSubmit={() => onSubmit(text, index, true)} + blurOnSubmit + style={{ + padding: pv - 5, + paddingHorizontal: 0, + fontSize: SIZE.sm, + fontFamily: WEIGHT.regular, + width: '90%', + maxWidth: '90%', + }} + placeholder="Add a topic" + placeholderTextColor={colors.icon} + /> + + {index == 0 && !focus ? ( + + !focus && index !== 0 + ? onDelete(index) + : onSubmit(text, index, true) + } + style={{ + justifyContent: 'center', + alignItems: 'center', + }}> + + + ) : null} + + ); +}; diff --git a/apps/mobile/src/components/Recents/index.js b/apps/mobile/src/components/Recents/index.js index ff494e719..fe1df1955 100644 --- a/apps/mobile/src/components/Recents/index.js +++ b/apps/mobile/src/components/Recents/index.js @@ -51,7 +51,7 @@ let blockdata = [ }, ]; -export const RecentList = () => { +export const RecentList = ({update}) => { const [colors, setColors] = useState(COLOR_SCHEME); const [notes, setNotes] = useState([]); const fetchNotes = async () => { @@ -63,7 +63,7 @@ export const RecentList = () => { }; useEffect(() => { fetchNotes(); - }, []); + }, [update]); return ( <> diff --git a/apps/mobile/src/services/NavigationService.js b/apps/mobile/src/services/NavigationService.js index 70e6dc488..433ee18bf 100755 --- a/apps/mobile/src/services/NavigationService.js +++ b/apps/mobile/src/services/NavigationService.js @@ -14,6 +14,7 @@ import ForgotPassword from '../views/ForgotPassword'; import Settings from '../views/Settings'; import Trash from '../views/Trash'; import Notes from '../views/Notes'; +import Tags from '../views/Tags'; const TopLevelNavigator = createStackNavigator( { @@ -59,6 +60,9 @@ const TopLevelNavigator = createStackNavigator( Notes: { screen: Notes, }, + Tags: { + screen: Tags, + }, }, { initialRouteName: 'Home', diff --git a/apps/mobile/src/views/Folders/index.js b/apps/mobile/src/views/Folders/index.js index 3ea19d820..df5cab361 100644 --- a/apps/mobile/src/views/Folders/index.js +++ b/apps/mobile/src/views/Folders/index.js @@ -8,6 +8,7 @@ import { Image, SafeAreaView, Platform, + Modal, } from 'react-native'; import NavigationService from '../../services/NavigationService'; import { @@ -20,17 +21,22 @@ import { FONT, WEIGHT, } from '../../common/common'; -import Icon from 'react-native-vector-icons/Ionicons'; +import Icon from 'react-native-vector-icons/Feather'; import {Reminder} from '../../components/Reminder'; import {ListItem} from '../../components/ListItem'; -import {getElevation, h, w} from '../../utils/utils'; -import {FlatList} from 'react-native-gesture-handler'; +import {getElevation, h, w, timeSince} from '../../utils/utils'; +import {FlatList, TextInput} from 'react-native-gesture-handler'; +import {useForceUpdate} from '../ListsEditor'; +import {AddNotebookDialog} from '../../components/AddNotebookDialog'; + +const refs = []; export const Folders = ({navigation}) => { const [colors, setColors] = useState(COLOR_SCHEME); - + const [addNotebook, setAddNotebook] = useState(false); return ( + { }}> Notebooks - + { Qty: '3', }, ]} - renderItem={({item, index}) => ( - - { + 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, + }}> + - - {item.Qty} Notes - - + Create new notebook + + + + } + renderItem={({item, index}) => ( + {item.name} + + + June 21 + + + 15 notes + + )} /> diff --git a/apps/mobile/src/views/Home/index.js b/apps/mobile/src/views/Home/index.js index 3507257e8..142e2b128 100755 --- a/apps/mobile/src/views/Home/index.js +++ b/apps/mobile/src/views/Home/index.js @@ -43,6 +43,7 @@ export const Home = ({navigation}) => { const [hidden, setHidden] = useState(false); const [text, setText] = useState(''); const [searchResults, setSearchResults] = useState([]); + const [update, setUpdate] = useState(0); useEffect(() => { setTimeout(() => { setLoading(false); @@ -82,6 +83,7 @@ export const Home = ({navigation}) => { { DeviceEventEmitter.emit('openSidebar'); + setUpdate(update + 1); }} />
@@ -110,6 +112,12 @@ export const Home = ({navigation}) => { menu={ setOpen(false)} />} openMenuOffset={w / 1.5}> + { + setUpdate(update + 1); + }} + /> +
{ {hidden ? ( ) : ( - + )} @@ -152,93 +160,9 @@ export const RenderSideMenu = ({colors, close}) => ( - - - - { - close(); - - NavigationService.navigate('Login'); - }} - activeOpacity={opacity} - style={{ - paddingVertical: pv - 5, - paddingHorizontal: ph, - borderRadius: 5, - justifyContent: 'center', - alignItems: 'center', - borderColor: colors.accent, - backgroundColor: colors.accent, - borderWidth: 1, - }}> - - Login - - - - {/* - Hi, Ammar! - - - - 80.45/100 MB - */} - - {/* - - Basic User - - */} - ( backgroundColor: colors.navbg, width: '100%', marginBottom: 5, + marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.03, }} /> ( )} /> - - - { + close(); + NavigationService.navigate('Tags'); + }} style={{ width: '100%', alignSelf: 'center', @@ -351,7 +278,7 @@ export const RenderSideMenu = ({colors, close}) => ( justifyContent: 'flex-start', alignItems: 'center', paddingHorizontal: ph, - marginTop: 20, + marginTop: 15, }}> ( style={{ fontFamily: WEIGHT.medium, fontSize: SIZE.sm - 1, - marginTop: -5, }}> Tags - + ( flexDirection: 'row', flexWrap: 'wrap', paddingHorizontal: '5%', - marginBottom: 20, + marginBottom: 0, }}> {[ 'home', @@ -422,33 +348,6 @@ export const RenderSideMenu = ({colors, close}) => ( ))} - - - - Colors - - ( flexDirection: 'row', flexWrap: 'wrap', paddingHorizontal: '5%', - marginBottom: 40, + marginBottom: 15, }}> {['red', 'yellow', 'green', 'blue', 'purple', 'orange', 'gray'].map( item => ( @@ -477,18 +376,19 @@ export const RenderSideMenu = ({colors, close}) => ( }}> ), )} + - ( }}> - + */} + + + { + close(); + + NavigationService.navigate('Login'); + }} + activeOpacity={opacity} + style={{ + paddingVertical: pv, + paddingHorizontal: ph, + borderRadius: 5, + width: '100%', + justifyContent: 'center', + alignItems: 'center', + borderColor: colors.accent, + backgroundColor: colors.accent, + borderWidth: 1, + }}> + + Login to Sync + + + + {/* + Hi, Ammar! + + + + 80.45/100 MB + */} + + {/* + + Basic User + + */} diff --git a/apps/mobile/src/views/Settings/index.js b/apps/mobile/src/views/Settings/index.js index 3529d8d99..0135905e3 100644 --- a/apps/mobile/src/views/Settings/index.js +++ b/apps/mobile/src/views/Settings/index.js @@ -20,10 +20,11 @@ import { FONT, WEIGHT, } from '../../common/common'; -import Icon from 'react-native-vector-icons/Ionicons'; +import Icon from 'react-native-vector-icons/Feather'; import {Reminder} from '../../components/Reminder'; import {ListItem} from '../../components/ListItem'; import {Header} from '../../components/header'; +import {FlatList} from 'react-native-gesture-handler'; const w = Dimensions.get('window').width; const h = Dimensions.get('window').height; @@ -34,6 +35,65 @@ export const Settings = ({navigation}) => { return (
+ + } + renderItem={({item, index}) => ( + + + {item} + + + )} + /> + } + renderItem={({item, index}) => ( + + + {item} + + + + )} + /> ); }; diff --git a/apps/mobile/src/views/Tags/index.js b/apps/mobile/src/views/Tags/index.js new file mode 100644 index 000000000..4e9d9fee2 --- /dev/null +++ b/apps/mobile/src/views/Tags/index.js @@ -0,0 +1,162 @@ +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/Ionicons'; +import {Reminder} from '../../components/Reminder'; +import {ListItem} from '../../components/ListItem'; +import {Header} from '../../components/header'; +import NoteItem from '../../components/NoteItem'; + +const w = Dimensions.get('window').width; +const h = Dimensions.get('window').height; + +export const Tags = ({navigation}) => { + const [colors, setColors] = useState(COLOR_SCHEME); + + return ( + + + + {[ + '#home', + '#school', + '#water', + '#love', + '#hope', + '#music', + '#notesforbook', + '#hate', + '#worldofwonders', + '#home', + '#school', + '#water', + '#love', + '#hope', + '#music', + '#notesforbook', + '#hate', + '#worldofwonders', + '#home', + '#school', + '#water', + '#love', + '#hope', + '#music', + '#notesforbook', + '#hate', + '#worldofwonders', + '#home', + '#school', + '#water', + '#love', + '#hope', + '#music', + '#notesforbook', + '#hate', + '#worldofwonders', + '#home', + '#school', + '#water', + '#love', + '#hope', + '#music', + '#notesforbook', + '#hate', + '#worldofwonders', + '#home', + '#school', + '#water', + '#love', + '#hope', + '#music', + '#notesforbook', + '#hate', + '#worldofwonders', + '#home', + '#school', + '#water', + '#love', + '#hope', + '#music', + '#notesforbook', + '#hate', + '#worldofwonders', + ].map(item => ( + { + NavigationService.navigate('Notes', { + heading: item, + }); + }} + style={{ + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'center', + margin: 5, + backgroundColor: colors.accent, + paddingVertical: pv - 5, + paddingHorizontal: ph + 10, + borderRadius: 30, + }}> + + {item} + + + ))} + + + + ); +}; + +Tags.navigationOptions = { + header: null, +}; + +export default Tags; diff --git a/apps/mobile/src/views/Trash/index.js b/apps/mobile/src/views/Trash/index.js index 18c68d46c..f267299b7 100644 --- a/apps/mobile/src/views/Trash/index.js +++ b/apps/mobile/src/views/Trash/index.js @@ -8,6 +8,7 @@ import { Image, SafeAreaView, Platform, + FlatList, } from 'react-native'; import NavigationService from '../../services/NavigationService'; import { @@ -24,6 +25,7 @@ import Icon from 'react-native-vector-icons/Ionicons'; import {Reminder} from '../../components/Reminder'; import {ListItem} from '../../components/ListItem'; import {Header} from '../../components/header'; +import NoteItem from '../../components/NoteItem'; const w = Dimensions.get('window').width; const h = Dimensions.get('window').height; @@ -34,6 +36,25 @@ export const Trash = ({navigation}) => { return (
+ } + /> ); };