minor fixes and improvements

apps/mobile/src/components/AddNotebookDialog/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {
+  Keyboard,
   KeyboardAvoidingView,
   Modal,
   Platform,
@@ -15,10 +16,11 @@ 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 = [];
 
@@ -32,7 +34,8 @@ export class AddNotebookDialog extends React.Component {
       titleFocused: false,
       descFocused: false,
       count: 0,
-            topicInputFoused: false,
+      topicInputFocused: false,
+      editTopic: false,
     };
     this.title = null;
     this.description = null;
@@ -99,7 +102,7 @@ export class AddNotebookDialog extends React.Component {
     let edit = this.props.toEdit;
     if (edit && edit.id) {
       let topicToDelete = edit.topics[index + 1];
-            console.log(topicToDelete)
+      console.log(topicToDelete);
       if (topicToDelete) {
         this.topicsToDelete.push(topicToDelete.id);
       }
@@ -139,12 +142,10 @@ export class AddNotebookDialog extends React.Component {
         prevTopics[this.prevIndex] = this.currentInputValue;
       } else {
         prevTopics.push(this.currentInputValue);
-                this.currentInputValue =
-                    null;
+        this.currentInputValue = null;
       }
     }
     if (id) {
-
       if (this.topicsToDelete?.length > 0) {
         await db.notebooks
           .notebook(toEdit.id)
@@ -212,7 +213,7 @@ export class AddNotebookDialog extends React.Component {
         topics: prevTopics,
       });
       this.currentInputValue = null;
-            if (prevTopics[this.prevIndex + 1] && forward) {
+      /*   if (prevTopics[this.prevIndex + 1] && forward) {
                 this.prevIndex = this.prevIndex + 1;
                 this.prevItem = prevTopics[this.prevIndex];
                 this.currentInputValue = this.prevItem;
@@ -222,20 +223,31 @@ export class AddNotebookDialog extends React.Component {
                 this.topicInputRef.setNativeProps({
                     text: prevTopics[this.prevIndex],
                 });
-            } else {
+                this.setState({
+                    editTopic:true
+                })
+            } else {} */
+
+      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,
       });
+
       if (forward) {
         setTimeout(() => {
           this.listRef.scrollToEnd({animated: true});
         }, 30);
       }
     }
-        }
   };
 
   render() {
@@ -245,14 +257,14 @@ export class AddNotebookDialog extends React.Component {
       descFocused,
       topics,
       visible,
-            topicInputFoused,
+      topicInputFocused,
     } = this.state;
     return (
       <Modal
         visible={visible}
         transparent={true}
         animated
-                animationType={DDS.isTab ? "fade" : "slide"}
+        animationType={DDS.isTab ? 'fade' : 'slide'}
         onShow={() => {
           this.topicsToDelete = [];
           this.titleRef.focus();
@@ -276,7 +288,7 @@ export class AddNotebookDialog extends React.Component {
                   color={colors.accent}
                   size={SIZE.xl}
                 />
-                                <Text style={[styles.headingText, {color: colors.accent}]}>
+                <Text style={[styles.headingText, {color: colors.heading}]}>
                   {toEdit && toEdit.dateCreated
                     ? 'Edit Notebook'
                     : 'New Notebook'}
@@ -363,20 +375,21 @@ export class AddNotebookDialog extends React.Component {
                   blurOnSubmit={false}
                   onFocus={() => {
                     this.setState({
-                                            topicInputFoused: true,
+                      topicInputFocused: true,
                     });
                   }}
                   onBlur={() => {
                     this.onSubmit(false);
                     this.setState({
-                                            topicInputFoused: false,
+                      topicInputFocused: false,
+                      editTopic: false,
                     });
                   }}
                   onSubmitEditing={this.onSubmit}
                   style={[
                     styles.input,
                     {
-                                            borderColor: topicInputFoused
+                      borderColor: topicInputFocused
                         ? colors.accent
                         : colors.nav,
                       color: colors.pri,
@@ -393,20 +406,19 @@ export class AddNotebookDialog extends React.Component {
                   style={[
                     styles.addBtn,
                     {
-                                            borderColor: topicInputFoused
+                      borderColor: topicInputFocused
                         ? colors.accent
                         : colors.nav,
                     },
                   ]}>
                   <Icon
-                                        name="plus"
+                    name={this.state.editTopic ? 'check' : 'plus'}
                     size={SIZE.lg}
-                                        color={topicInputFoused ? colors.accent : colors.icon}
+                    color={topicInputFocused ? colors.accent : colors.icon}
                   />
                 </TouchableOpacity>
               </View>
 
-
               <FlatList
                 data={topics}
                 ref={(ref) => (this.listRef = ref)}
@@ -415,7 +427,7 @@ export class AddNotebookDialog extends React.Component {
                   <TopicItem
                     item={item}
                     onPress={(item, index) => {
-                                            console.log("here")
+                      console.log('here');
                       this.prevIndex = index;
                       this.prevItem = item;
                       this.topicInputRef.setNativeProps({
@@ -423,6 +435,9 @@ export class AddNotebookDialog extends React.Component {
                       });
                       this.topicInputRef.focus();
                       this.currentInputValue = item;
+                      this.setState({
+                        editTopic: true,
+                      });
                     }}
                     onDelete={this.onDelete}
                     index={index}
@@ -463,20 +478,32 @@ const TopicItem = ({item, index, colors, onPress, onDelete}) => {
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
+        borderBottomWidth:1,
+        borderColor:colors.nav
       }}>
       <TouchableOpacity
-
         style={{
           width: '80%',
-                    backgroundColor: "transparent",
+          backgroundColor: 'transparent',
           zIndex: 10,
           position: 'absolute',
-                    height: 30
+          height: 30,
+        
         }}
         onPress={() => {
-                    onPress(item, index)
+          onPress(item, index);
         }}
       />
+      <Text
+      style={{
+          fontFamily:WEIGHT.regular,
+          fontSize: SIZE.sm,
+          color:colors.primary,
+          marginRight:index === 0? 2 : 0
+      }}
+      >
+          {index + 1 + "."} 
+      </Text>
       <TextInput
         ref={topicRef}
         editable={false}
@@ -484,27 +511,39 @@ const TopicItem = ({item, index, colors, onPress, onDelete}) => {
           styles.topicInput,
           {
             color: colors.pri,
-
-                        borderBottomColor: colors.nav,
           },
         ]}
-                defaultValue={index + 1 + '. ' + item}
-                placeholder="Add a topic"
+        defaultValue={item}
         placeholderTextColor={colors.icon}
       />
 
-            <TouchableOpacity
+      <View
+      style={{
+          width:80,
+          position:"absolute",
+          right:0,
+          alignItems:"center",
+          flexDirection:"row",
+          justifyContent:'flex-end'
+      }}
+      >
+          <ActionIcon
+           onPress={() => {
+            onPress(item, index);
+          }}
+          name="pencil"
+          size={SIZE.lg - 5}
+          color={colors.icon}
+        />   
+        <ActionIcon
           onPress={() => {
             onDelete(index);
           }}
-                style={[
-                    styles.topicBtn,
-                    {
-                        borderColor: colors.nav,
-                    },
-                ]}>
-                <Icon name="minus" size={SIZE.lg} color={colors.icon}/>
-            </TouchableOpacity>
+          name="minus"
+          size={SIZE.lg}
+          color={colors.icon}
+        />
+      </View>
     </View>
   );
 };
@@ -578,7 +617,6 @@ const styles = StyleSheet.create({
     fontSize: SIZE.sm,
     fontFamily: WEIGHT.regular,
     paddingHorizontal: ph,
-        borderBottomWidth: 1.5,
     paddingRight: 40,
     paddingVertical: 10,
     width: '100%',