fix topic & notebook adding does not update the screens

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

@@ -1,21 +1,21 @@
-import React, { createRef } from 'react';
+import React, {createRef} from 'react';
+import { Actions } from '../../provider/Actions';
 import {
   eSubscribeEvent,
   eUnSubscribeEvent,
-  ToastEvent
+  ToastEvent,
 } from '../../services/EventManager';
-import { db } from '../../utils/DB';
-import {
-  eCloseAddTopicDialog,
-
-  eOpenAddTopicDialog
-} from '../../utils/Events';
+import Navigation from '../../services/Navigation';
+import {db} from '../../utils/DB';
+import {eCloseAddTopicDialog, eOpenAddTopicDialog} from '../../utils/Events';
+import {sleep} from '../../utils/TimeUtils';
 import BaseDialog from '../Dialog/base-dialog';
 import DialogButtons from '../Dialog/dialog-buttons';
 import DialogContainer from '../Dialog/dialog-container';
 import DialogHeader from '../Dialog/dialog-header';
+import { updateEvent } from '../DialogManager/recievers';
 import Input from '../Input';
-import { Toast } from '../Toast';
+import {Toast} from '../Toast';
 
 export class AddTopicDialog extends React.Component {
   constructor(props) {
@@ -29,26 +29,37 @@ export class AddTopicDialog extends React.Component {
     this.title;
     this.titleRef = createRef();
     this.notebook = null;
+    this.toEdit = null;
   }
 
   addNewTopic = async () => {
     this.setState({loading: true});
-    if (!this.title)
-      return ToastEvent.show('Title is required', 'error', 'local');
+    if (!this.title || this.title?.trim() === '') {
+      ToastEvent.show({
+        heading: 'Topic title is required',
+        type: 'error',
+        context: 'local',
+      });
+      this.setState({loading: false});
+      return;
+    }
 
-    if (!this.props.toEdit) {
+    if (!this.toEdit) {
       await db.notebooks.notebook(this.notebook.id).topics.add(this.title);
     } else {
-      let topic = this.props.toEdit;
+      let topic = this.toEdit;
       topic.title = this.title;
 
       await db.notebooks.notebook(topic.notebookId).topics.add(topic);
     }
+    this.setState({loading: false});
     this.close();
     Navigation.setRoutesToUpdate([
       Navigation.routeNames.Notebooks,
       Navigation.routeNames.Notebook,
+      Navigation.routeNames.NotesPage,
     ]);
+    updateEvent({type:Actions.MENU_PINS});
   };
 
   componentDidMount() {
@@ -60,12 +71,17 @@ export class AddTopicDialog extends React.Component {
     eUnSubscribeEvent(eCloseAddTopicDialog, this.close);
   }
 
-  open = async (notebookId) => {
-    let id = notebookId || this.props.notebookID;
-    this.notebook = await db.notebooks.notebook(id).data;
-    if (this.props.toEdit) {
-      this.title = this.props.toEdit.title;
+  open = async ({notebookId, toEdit}) => {
+    let id = notebookId;
+    if (id) {
+      this.notebook = await db.notebooks.notebook(id).data;
     }
+    this.toEdit = toEdit;
+
+    if (this.toEdit) {
+      this.title = this.toEdit.title;
+    }
+
     this.setState({
       visible: true,
     });
@@ -74,6 +90,7 @@ export class AddTopicDialog extends React.Component {
     this.props.close();
     this.title = null;
     this.notebook = null;
+    this.toEdit = null;
     this.setState({
       visible: false,
     });
@@ -81,11 +98,11 @@ export class AddTopicDialog extends React.Component {
 
   render() {
     const {visible} = this.state;
-    const {colors, toEdit} = this.props;
     if (!visible) return null;
     return (
       <BaseDialog
-        onShow={() => {
+        onShow={async () => {
+          await sleep(300);
           this.titleRef.current?.focus();
         }}
         statusBarTranslucent={false}
@@ -94,8 +111,12 @@ export class AddTopicDialog extends React.Component {
         <DialogContainer>
           <DialogHeader
             icon="book-outline"
-            title={toEdit ? 'Edit Topic' : 'New Topic'}
-            paragraph={'Add a new topic to ' + this.notebook.title}
+            title={this.toEdit ? 'Edit Topic' : 'New Topic'}
+            paragraph={
+              this.toEdit
+                ? 'Edit title of the topic'
+                : 'Add a new topic to ' + this.notebook.title
+            }
           />
 
           <Input
@@ -104,13 +125,13 @@ export class AddTopicDialog extends React.Component {
               this.title = value;
             }}
             blurOnSubmit={false}
-            defaultValue={toEdit ? toEdit.title : null}
+            defaultValue={this.toEdit ? this.toEdit.title : null}
             placeholder="Enter title of topic"
             onSubmit={() => this.addNewTopic()}
           />
 
           <DialogButtons
-            positiveTitle={toEdit ? 'Save' : 'Add'}
+            positiveTitle={this.toEdit ? 'Save' : 'Add'}
             onPressNegative={() => this.close()}
             onPressPositive={() => this.addNewTopic()}
             loading={this.state.loading}