diff --git a/apps/mobile/src/components/AddNotebookDialog/index.js b/apps/mobile/src/components/AddNotebookDialog/index.js
index 76bae54ed..dc400f886 100644
--- a/apps/mobile/src/components/AddNotebookDialog/index.js
+++ b/apps/mobile/src/components/AddNotebookDialog/index.js
@@ -1,13 +1,14 @@
import React from 'react';
import {
- KeyboardAvoidingView,
- Modal,
- Platform,
- SafeAreaView,
- StyleSheet,
- Text,
- TouchableOpacity,
- View,
+ Keyboard,
+ KeyboardAvoidingView,
+ Modal,
+ Platform,
+ SafeAreaView,
+ StyleSheet,
+ Text,
+ TouchableOpacity,
+ View,
} from 'react-native';
import {FlatList, TextInput} from 'react-native-gesture-handler';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -15,204 +16,204 @@ import {Actions} from '../../provider/Actions';
import {Button} from '../Button';
import {updateEvent} from '../DialogManager/recievers';
import {Toast} from '../Toast';
-import {ToastEvent} from "../../services/EventManager";
-import {ph, pv, SIZE, WEIGHT} from "../../utils/SizeUtils";
-import {db} from "../../utils/DB";
-import {DDS} from "../../services/DeviceDetection";
+import {ToastEvent} from '../../services/EventManager';
+import {ph, pv, SIZE, WEIGHT} from '../../utils/SizeUtils';
+import {db} from '../../utils/DB';
+import {DDS} from '../../services/DeviceDetection';
+import {ActionIcon} from '../ActionIcon';
let refs = [];
export class AddNotebookDialog extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- visible: false,
- topics: [],
- description: null,
- titleFocused: false,
- descFocused: false,
- count: 0,
- topicInputFoused: false,
- };
- this.title = null;
- this.description = null;
- this.listRef;
- this.prevItem = null;
- this.prevIndex = null;
- this.currentSelectedInput = null;
- this.id = null;
- this.backPressCount = 0;
- this.currentInputValue = null;
- this.titleRef;
- this.descriptionRef;
- this.topicsToDelete = [];
+ constructor(props) {
+ super(props);
+ this.state = {
+ visible: false,
+ topics: [],
+ description: null,
+ titleFocused: false,
+ descFocused: false,
+ count: 0,
+ topicInputFocused: false,
+ editTopic: false,
+ };
+ this.title = null;
+ this.description = null;
+ this.listRef;
+ this.prevItem = null;
+ this.prevIndex = null;
+ this.currentSelectedInput = null;
+ this.id = null;
+ this.backPressCount = 0;
+ this.currentInputValue = null;
+ this.titleRef;
+ this.descriptionRef;
+ this.topicsToDelete = [];
+ }
+
+ open = () => {
+ refs = [];
+ let {toEdit} = this.props;
+
+ if (toEdit && toEdit.type === 'notebook') {
+ let topicsList = [];
+ toEdit.topics.forEach((item, index) => {
+ if (index === 0) return;
+ topicsList.push(item.title);
+ });
+ console.log(topicsList);
+ this.id = toEdit.id;
+ this.title = toEdit.title;
+ this.description = toEdit.description;
+
+ this.setState({
+ topics: [...topicsList],
+
+ visible: true,
+ });
+ } else {
+ this.setState({
+ visible: true,
+ });
+ }
+ };
+
+ close = () => {
+ refs = [];
+ this.prevIndex = null;
+ this.prevItem = null;
+ this.currentSelectedInput = null;
+ this.title = null;
+ this.description = null;
+ this.id = null;
+ this.setState({
+ visible: false,
+ topics: [],
+ descFocused: false,
+ titleFocused: false,
+ });
+ };
+
+ onDelete = (index) => {
+ let {topics} = this.state;
+ let prevTopics = topics;
+ refs = [];
+ prevTopics.splice(index, 1);
+ let edit = this.props.toEdit;
+ if (edit && edit.id) {
+ let topicToDelete = edit.topics[index + 1];
+ console.log(topicToDelete);
+ if (topicToDelete) {
+ this.topicsToDelete.push(topicToDelete.id);
+ }
+ }
+ let nextTopics = [...prevTopics];
+ if (this.prevIndex === index) {
+ this.prevIndex = null;
+ this.prevItem = null;
+ this.currentInputValue = null;
+ this.topicInputRef.setNativeProps({
+ text: null,
+ });
+ }
+ this.setState({
+ topics: nextTopics,
+ });
+ };
+
+ addNewNotebook = async () => {
+ let {topics} = this.state;
+ let edit = this.props.toEdit;
+
+ if (!this.title || this.title?.trim().length === 0)
+ return ToastEvent.show('Title is required', 'error', 'local');
+
+ let id = edit && edit.id ? edit.id : null;
+
+ let toEdit;
+ if (id) {
+ toEdit = db.notebooks.notebook(edit.id).data;
}
- open = () => {
- refs = [];
- let {toEdit} = this.props;
+ let prevTopics = [...topics];
- if (toEdit && toEdit.type === 'notebook') {
- let topicsList = [];
- toEdit.topics.forEach((item, index) => {
- if (index === 0) return;
- topicsList.push(item.title);
- });
- console.log(topicsList);
- this.id = toEdit.id;
- this.title = toEdit.title;
- this.description = toEdit.description;
+ if (this.currentInputValue && this.currentInputValue.trim().length !== 0) {
+ if (this.prevItem != null) {
+ prevTopics[this.prevIndex] = this.currentInputValue;
+ } else {
+ prevTopics.push(this.currentInputValue);
+ this.currentInputValue = null;
+ }
+ }
+ if (id) {
+ if (this.topicsToDelete?.length > 0) {
+ await db.notebooks
+ .notebook(toEdit.id)
+ .topics.delete(...this.topicsToDelete);
+ toEdit = db.notebooks.notebook(toEdit.id).data;
+ }
- this.setState({
- topics: [...topicsList],
+ await db.notebooks.add({
+ title: this.title,
+ description: this.description,
+ id: id,
+ });
- visible: true,
- });
- } else {
- this.setState({
- visible: true,
- });
+ let nextTopics = toEdit.topics.map((topic, index) => {
+ if (index === 0) return topic;
+ let copy = {...topic};
+ copy.title = prevTopics[index - 1];
+ return copy;
+ });
+
+ prevTopics.forEach((title, index) => {
+ if (!nextTopics[index + 1]) {
+ nextTopics.push(title);
}
- };
+ });
- close = () => {
- refs = [];
- this.prevIndex = null;
- this.prevItem = null;
- this.currentSelectedInput = null;
- this.title = null;
- this.description = null;
- this.id = null;
- this.setState({
- visible: false,
- topics: [],
- descFocused: false,
- titleFocused: false,
- });
- };
+ await db.notebooks.notebook(id).topics.add(...nextTopics);
+ } else {
+ await db.notebooks.add({
+ title: this.title,
+ description: this.description,
+ topics: prevTopics,
+ id: id,
+ });
+ }
+ this.close();
+ updateEvent({type: Actions.NOTEBOOKS});
+ updateEvent({type: Actions.PINNED});
- onDelete = (index) => {
- let {topics} = this.state;
- let prevTopics = topics;
- refs = [];
- prevTopics.splice(index, 1);
- let edit = this.props.toEdit;
- if (edit && edit.id) {
- let topicToDelete = edit.topics[index + 1];
- console.log(topicToDelete)
- if (topicToDelete) {
- this.topicsToDelete.push(topicToDelete.id);
- }
- }
- let nextTopics = [...prevTopics];
- if (this.prevIndex === index) {
- this.prevIndex = null;
- this.prevItem = null;
- this.currentInputValue = null;
- this.topicInputRef.setNativeProps({
- text: null,
- });
- }
- this.setState({
- topics: nextTopics,
- });
- };
+ //ToastEvent.show('New notebook added', 'success', 'local');
+ };
- addNewNotebook = async () => {
- let {topics} = this.state;
- let edit = this.props.toEdit;
+ onSubmit = (forward = true) => {
+ let {topics} = this.state;
+ if (!this.currentInputValue || this.currentInputValue?.trim().length === 0)
+ return;
- if (!this.title || this.title?.trim().length === 0)
- return ToastEvent.show('Title is required', 'error', 'local');
+ let prevTopics = [...topics];
+ if (this.prevItem === null) {
+ prevTopics.push(this.currentInputValue);
+ this.setState({
+ topics: prevTopics,
+ });
+ this.topicInputRef.setNativeProps({
+ text: null,
+ });
- let id = edit && edit.id ? edit.id : null;
-
- let toEdit;
- if (id) {
- toEdit = db.notebooks.notebook(edit.id).data;
- }
-
- let prevTopics = [...topics];
-
- if (this.currentInputValue && this.currentInputValue.trim().length !== 0) {
- if (this.prevItem != null) {
- prevTopics[this.prevIndex] = this.currentInputValue;
- } else {
- prevTopics.push(this.currentInputValue);
- this.currentInputValue =
- null;
- }
- }
- if (id) {
-
- if (this.topicsToDelete?.length > 0) {
- await db.notebooks
- .notebook(toEdit.id)
- .topics.delete(...this.topicsToDelete);
- toEdit = db.notebooks.notebook(toEdit.id).data;
- }
-
- await db.notebooks.add({
- title: this.title,
- description: this.description,
- id: id,
- });
-
- let nextTopics = toEdit.topics.map((topic, index) => {
- if (index === 0) return topic;
- let copy = {...topic};
- copy.title = prevTopics[index - 1];
- return copy;
- });
-
- prevTopics.forEach((title, index) => {
- if (!nextTopics[index + 1]) {
- nextTopics.push(title);
- }
- });
-
- await db.notebooks.notebook(id).topics.add(...nextTopics);
- } else {
- await db.notebooks.add({
- title: this.title,
- description: this.description,
- topics: prevTopics,
- id: id,
- });
- }
- this.close();
- updateEvent({type: Actions.NOTEBOOKS});
- updateEvent({type: Actions.PINNED});
-
- //ToastEvent.show('New notebook added', 'success', 'local');
- };
-
- onSubmit = (forward = true) => {
- let {topics} = this.state;
- if (!this.currentInputValue || this.currentInputValue?.trim().length === 0)
- return;
-
- let prevTopics = [...topics];
- if (this.prevItem === null) {
- prevTopics.push(this.currentInputValue);
- this.setState({
- topics: prevTopics,
- });
- this.topicInputRef.setNativeProps({
- text: null,
- });
-
- setTimeout(() => {
- this.listRef.scrollToEnd({animated: true});
- }, 30);
- this.currentInputValue = null;
- } else {
- prevTopics[this.prevIndex] = this.currentInputValue;
- this.setState({
- topics: prevTopics,
- });
- this.currentInputValue = null;
- if (prevTopics[this.prevIndex + 1] && forward) {
+ setTimeout(() => {
+ this.listRef.scrollToEnd({animated: true});
+ }, 30);
+ this.currentInputValue = null;
+ } else {
+ prevTopics[this.prevIndex] = this.currentInputValue;
+ this.setState({
+ topics: prevTopics,
+ });
+ this.currentInputValue = null;
+ /* if (prevTopics[this.prevIndex + 1] && forward) {
this.prevIndex = this.prevIndex + 1;
this.prevItem = prevTopics[this.prevIndex];
this.currentInputValue = this.prevItem;
@@ -222,375 +223,412 @@ export class AddNotebookDialog extends React.Component {
this.topicInputRef.setNativeProps({
text: prevTopics[this.prevIndex],
});
- } else {
- this.prevItem = null;
- this.prevIndex = null;
- this.currentInputValue = null;
- this.topicInputRef.setNativeProps({
- text: null,
- });
- if (forward) {
- setTimeout(() => {
- this.listRef.scrollToEnd({animated: true});
- }, 30);
- }
- }
- }
- };
+ this.setState({
+ editTopic:true
+ })
+ } else {} */
- render() {
- const {colors, toEdit} = this.props;
- const {
- titleFocused,
- descFocused,
- topics,
- visible,
- topicInputFoused,
- } = this.state;
- return (
- {
- this.topicsToDelete = [];
- this.titleRef.focus();
- }}
- onRequestClose={this.close}>
-
-
-
-
-
-
-
- {toEdit && toEdit.dateCreated
- ? 'Edit Notebook'
- : 'New Notebook'}
-
-
+ if (this.state.editTopic) {
+ this.topicInputRef.blur();
+ Keyboard.dismiss();
+ this.setState({
+ editTopic: false,
+ });
+ }
+ this.prevItem = null;
+ this.prevIndex = null;
+ this.currentInputValue = null;
+ this.topicInputRef.setNativeProps({
+ text: null,
+ });
- (this.titleRef = ref)}
- style={[
- styles.input,
- {
- borderColor: titleFocused ? colors.accent : colors.nav,
- color: colors.pri,
- },
- ]}
- numberOfLines={1}
- multiline={false}
- onFocus={() => {
- this.setState({
- titleFocused: true,
- });
- }}
- onBlur={() => {
- this.setState({
- titleFocused: false,
- });
- }}
- defaultValue={toEdit ? toEdit.title : null}
- onChangeText={(value) => {
- this.title = value;
- }}
- onSubmitEditing={() => {
- this.descriptionRef.focus();
- }}
- placeholder="Title"
- placeholderTextColor={colors.icon}
- />
- (this.descriptionRef = ref)}
- style={[
- styles.input,
- {
- borderColor: descFocused ? colors.accent : colors.nav,
- minHeight: 45,
- color: colors.pri,
- },
- ]}
- maxLength={150}
- onFocus={() => {
- this.setState({
- descFocused: true,
- });
- }}
- onBlur={() => {
- this.setState({
- descFocused: false,
- });
- }}
- defaultValue={toEdit ? toEdit.description : null}
- onChangeText={(value) => {
- this.description = value;
- }}
- onSubmitEditing={() => {
- this.topicInputRef.focus();
- }}
- placeholder="Describe your notebook."
- placeholderTextColor={colors.icon}
- />
-
-
- (this.topicInputRef = ref)}
- onChangeText={(value) => {
- this.currentInputValue = value;
- if (this.prevItem !== null) {
- refs[this.prevIndex].setNativeProps({
- text: this.prevIndex + 1 + '. ' + value,
- style: {
- borderBottomColor: colors.accent,
- },
- });
- }
- }}
- blurOnSubmit={false}
- onFocus={() => {
- this.setState({
- topicInputFoused: true,
- });
- }}
- onBlur={() => {
- this.onSubmit(false);
- this.setState({
- topicInputFoused: false,
- });
- }}
- onSubmitEditing={this.onSubmit}
- style={[
- styles.input,
- {
- borderColor: topicInputFoused
- ? colors.accent
- : colors.nav,
- color: colors.pri,
- width: '85%',
- maxWidth: '85%',
- marginTop: 5,
- },
- ]}
- placeholder="Add a topic"
- placeholderTextColor={colors.icon}
- />
-
-
-
-
-
-
- (this.listRef = ref)}
- keyExtractor={(item, index) => item + index.toString()}
- renderItem={({item, index}) => (
- {
- console.log("here")
- this.prevIndex = index;
- this.prevItem = item;
- this.topicInputRef.setNativeProps({
- text: item,
- });
- this.topicInputRef.focus();
- this.currentInputValue = item;
- }}
- onDelete={this.onDelete}
- index={index}
- colors={colors}
- />
- )}
- />
-
-
-
-
-
-
-
-
-
-
-
- );
+ if (forward) {
+ setTimeout(() => {
+ this.listRef.scrollToEnd({animated: true});
+ }, 30);
+ }
}
+ };
+
+ render() {
+ const {colors, toEdit} = this.props;
+ const {
+ titleFocused,
+ descFocused,
+ topics,
+ visible,
+ topicInputFocused,
+ } = this.state;
+ return (
+ {
+ this.topicsToDelete = [];
+ this.titleRef.focus();
+ }}
+ onRequestClose={this.close}>
+
+
+
+
+
+
+
+ {toEdit && toEdit.dateCreated
+ ? 'Edit Notebook'
+ : 'New Notebook'}
+
+
+
+ (this.titleRef = ref)}
+ style={[
+ styles.input,
+ {
+ borderColor: titleFocused ? colors.accent : colors.nav,
+ color: colors.pri,
+ },
+ ]}
+ numberOfLines={1}
+ multiline={false}
+ onFocus={() => {
+ this.setState({
+ titleFocused: true,
+ });
+ }}
+ onBlur={() => {
+ this.setState({
+ titleFocused: false,
+ });
+ }}
+ defaultValue={toEdit ? toEdit.title : null}
+ onChangeText={(value) => {
+ this.title = value;
+ }}
+ onSubmitEditing={() => {
+ this.descriptionRef.focus();
+ }}
+ placeholder="Title"
+ placeholderTextColor={colors.icon}
+ />
+ (this.descriptionRef = ref)}
+ style={[
+ styles.input,
+ {
+ borderColor: descFocused ? colors.accent : colors.nav,
+ minHeight: 45,
+ color: colors.pri,
+ },
+ ]}
+ maxLength={150}
+ onFocus={() => {
+ this.setState({
+ descFocused: true,
+ });
+ }}
+ onBlur={() => {
+ this.setState({
+ descFocused: false,
+ });
+ }}
+ defaultValue={toEdit ? toEdit.description : null}
+ onChangeText={(value) => {
+ this.description = value;
+ }}
+ onSubmitEditing={() => {
+ this.topicInputRef.focus();
+ }}
+ placeholder="Describe your notebook."
+ placeholderTextColor={colors.icon}
+ />
+
+
+ (this.topicInputRef = ref)}
+ onChangeText={(value) => {
+ this.currentInputValue = value;
+ if (this.prevItem !== null) {
+ refs[this.prevIndex].setNativeProps({
+ text: this.prevIndex + 1 + '. ' + value,
+ style: {
+ borderBottomColor: colors.accent,
+ },
+ });
+ }
+ }}
+ blurOnSubmit={false}
+ onFocus={() => {
+ this.setState({
+ topicInputFocused: true,
+ });
+ }}
+ onBlur={() => {
+ this.onSubmit(false);
+ this.setState({
+ topicInputFocused: false,
+ editTopic: false,
+ });
+ }}
+ onSubmitEditing={this.onSubmit}
+ style={[
+ styles.input,
+ {
+ borderColor: topicInputFocused
+ ? colors.accent
+ : colors.nav,
+ color: colors.pri,
+ width: '85%',
+ maxWidth: '85%',
+ marginTop: 5,
+ },
+ ]}
+ placeholder="Add a topic"
+ placeholderTextColor={colors.icon}
+ />
+
+
+
+
+
+ (this.listRef = ref)}
+ keyExtractor={(item, index) => item + index.toString()}
+ renderItem={({item, index}) => (
+ {
+ console.log('here');
+ this.prevIndex = index;
+ this.prevItem = item;
+ this.topicInputRef.setNativeProps({
+ text: item,
+ });
+ this.topicInputRef.focus();
+ this.currentInputValue = item;
+ this.setState({
+ editTopic: true,
+ });
+ }}
+ onDelete={this.onDelete}
+ index={index}
+ colors={colors}
+ />
+ )}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
}
const TopicItem = ({item, index, colors, onPress, onDelete}) => {
- const topicRef = (ref) => (refs[index] = ref);
+ const topicRef = (ref) => (refs[index] = ref);
- return (
-
-
+ {
+ onPress(item, index);
+ }}
+ />
+
+ {index + 1 + "."}
+
+
- style={{
- width: '80%',
- backgroundColor: "transparent",
- zIndex: 10,
- position: 'absolute',
- height: 30
- }}
- onPress={() => {
- onPress(item, index)
- }}
- />
-
-
- {
- onDelete(index);
- }}
- style={[
- styles.topicBtn,
- {
- borderColor: colors.nav,
- },
- ]}>
-
-
-
- );
+
+ {
+ onPress(item, index);
+ }}
+ name="pencil"
+ size={SIZE.lg - 5}
+ color={colors.icon}
+ />
+ {
+ onDelete(index);
+ }}
+ name="minus"
+ size={SIZE.lg}
+ color={colors.icon}
+ />
+
+
+ );
};
const styles = StyleSheet.create({
- wrapper: {
- width: '100%',
- height: '100%',
- backgroundColor: 'rgba(0,0,0,0.3)',
- justifyContent: 'center',
- alignItems: 'center',
- },
- container: {
- width: DDS.isTab ? 500 : '100%',
- height: DDS.isTab ? 600 : '100%',
- maxHeight: DDS.isTab ? 600 : '100%',
- borderRadius: DDS.isTab ? 5 : 0,
- paddingHorizontal: ph,
- paddingVertical: pv,
- },
- overlay: {
- width: '100%',
- height: '100%',
- position: 'absolute',
- },
- headingContainer: {
- flexDirection: 'row',
- justifyContent: 'center',
- alignItems: 'center',
- },
- headingText: {
- fontFamily: WEIGHT.bold,
- marginLeft: 5,
- fontSize: SIZE.xl,
- },
- input: {
- paddingHorizontal: ph,
- borderRadius: 5,
- minHeight: 45,
- fontSize: SIZE.sm,
- fontFamily: WEIGHT.regular,
- padding: pv - 2,
- borderWidth: 1.5,
- marginTop: 10,
- marginBottom: 5,
- },
- addBtn: {
- borderRadius: 5,
- width: '12%',
- minHeight: 45,
- justifyContent: 'center',
- alignItems: 'center',
- borderWidth: 1.5,
- },
- buttonContainer: {
- justifyContent: 'space-between',
- alignItems: 'center',
- flexDirection: 'row',
- width: '100%',
- marginTop: 20,
- },
+ wrapper: {
+ width: '100%',
+ height: '100%',
+ backgroundColor: 'rgba(0,0,0,0.3)',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ container: {
+ width: DDS.isTab ? 500 : '100%',
+ height: DDS.isTab ? 600 : '100%',
+ maxHeight: DDS.isTab ? 600 : '100%',
+ borderRadius: DDS.isTab ? 5 : 0,
+ paddingHorizontal: ph,
+ paddingVertical: pv,
+ },
+ overlay: {
+ width: '100%',
+ height: '100%',
+ position: 'absolute',
+ },
+ headingContainer: {
+ flexDirection: 'row',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ headingText: {
+ fontFamily: WEIGHT.bold,
+ marginLeft: 5,
+ fontSize: SIZE.xl,
+ },
+ input: {
+ paddingHorizontal: ph,
+ borderRadius: 5,
+ minHeight: 45,
+ fontSize: SIZE.sm,
+ fontFamily: WEIGHT.regular,
+ padding: pv - 2,
+ borderWidth: 1.5,
+ marginTop: 10,
+ marginBottom: 5,
+ },
+ addBtn: {
+ borderRadius: 5,
+ width: '12%',
+ minHeight: 45,
+ justifyContent: 'center',
+ alignItems: 'center',
+ borderWidth: 1.5,
+ },
+ buttonContainer: {
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ flexDirection: 'row',
+ width: '100%',
+ marginTop: 20,
+ },
- topicContainer: {
- flexDirection: 'row',
- justifyContent: 'space-between',
- alignItems: 'center',
- marginTop: 10,
- },
- topicInput: {
- padding: pv - 5,
- fontSize: SIZE.sm,
- fontFamily: WEIGHT.regular,
- paddingHorizontal: ph,
- borderBottomWidth: 1.5,
- paddingRight: 40,
- paddingVertical: 10,
- width: '100%',
- maxWidth: '100%',
- },
- topicBtn: {
- borderRadius: 5,
- width: 40,
- height: 40,
- justifyContent: 'center',
- alignItems: 'center',
- position: 'absolute',
- right: 0,
- },
+ topicContainer: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ marginTop: 10,
+ },
+ topicInput: {
+ padding: pv - 5,
+ fontSize: SIZE.sm,
+ fontFamily: WEIGHT.regular,
+ paddingHorizontal: ph,
+ paddingRight: 40,
+ paddingVertical: 10,
+ width: '100%',
+ maxWidth: '100%',
+ },
+ topicBtn: {
+ borderRadius: 5,
+ width: 40,
+ height: 40,
+ justifyContent: 'center',
+ alignItems: 'center',
+ position: 'absolute',
+ right: 0,
+ },
});