move notebook dialog to dialog manager

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

@@ -1,4 +1,4 @@
-import React, {createRef, useState} from 'react';
+import React, {useState} from 'react';
 import {
   KeyboardAvoidingView,
   Modal,
@@ -11,46 +11,83 @@ import {FlatList, TextInput} from 'react-native-gesture-handler';
 import Icon from 'react-native-vector-icons/Feather';
 import {db, DDS} from '../../../App';
 import {opacity, ph, pv, SIZE, WEIGHT} from '../../common/common';
-import {useTracked} from '../../provider';
+import {ACTIONS} from '../../provider';
 import {getElevation, ToastEvent} from '../../utils/utils';
+import {updateEvent} from '../DialogManager';
 
 let refs = [];
 
-export const AddNotebookDialog = ({visible, close, toEdit = null}) => {
-  const [state, dispatch] = useTracked();
-  const {colors} = state;
+export class AddNotebookDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false,
+      topics: [''],
+      title: null,
+      description: null,
+      titleFocused: false,
+      descFocused: false,
+    };
 
-  const [topics, setTopics] = useState(['']);
-  const [title, setTitle] = useState(null);
+    this.listRef;
+    this.prevItem = null;
+    this.prevIndex = null;
+    this.currentSelectedInput = null;
+    this.timestamp = null;
+    this.backPressCount = 0;
+  }
 
-  const [description, setDescription] = useState(null);
-  const [titleFocused, setTitleFocused] = useState(false);
-  const [descFocused, setDescFocused] = useState(false);
-  let listRef = createRef();
-  let prevItem = null;
-  let prevIndex = null;
-  let currentSelectedInput = null;
-  let timestamp = null;
-  let backPressCount = 0;
+  open() {
+    refs = [];
+    let {toEdit} = this.props;
 
-  const onSubmit = (text, index, willFocus = false) => {
-    console.log('here');
+    if (toEdit !== null) {
+      let topicsList = [];
+      toEdit.topics.forEach(item => {
+        if (item.title !== 'General') {
+          topicsList.push(item.title);
+        }
+      });
+      topicsList.push('');
+
+      this.setState({
+        topics: [...topicsList],
+        title: toEdit.title,
+        visible: true,
+      });
+      this.timestamp = toEdit.dateCreated;
+    }
+  }
+  close() {
+    refs = [];
+    this.prevIndex = null;
+    this.prevItem = null;
+    this.currentSelectedInput = null;
+    this.setState({
+      visible: false,
+      topics: [''],
+    });
+  }
+
+  onSubmit = (text, index, willFocus = false) => {
     let prevTopics = topics;
     prevTopics[index] = text;
-    prevIndex = index;
-    prevItem = text;
+    this.prevIndex = index;
+    this.prevItem = text;
 
     if (
       prevTopics.length === index + 1 &&
-      prevIndex !== null &&
-      prevItem !== null
+      this.prevIndex !== null &&
+      this.prevItem !== null
     ) {
       prevTopics.push('');
     }
 
     let nextTopics = [...prevTopics];
-    setTopics(nextTopics);
-    currentSelectedInput = null;
+    this.setState({
+      topics: nextTopics,
+    });
+    this.currentSelectedInput = null;
     if (!refs[index + 1]) {
       setTimeout(() => {
         if (!refs[index + 1]) return;
@@ -63,41 +100,45 @@ export const AddNotebookDialog = ({visible, close, toEdit = null}) => {
     }
   };
 
-  const onBlur = (text, index) => {};
+  onBlur = (text, index) => {};
 
-  const onFocus = index => {
-    currentSelectedInput = index;
+  onFocus = index => {
+    this.currentSelectedInput = index;
 
-    if (currentSelectedInput) {
+    if (this.currentSelectedInput) {
       let prevTopics = topics;
 
-      prevTopics[prevIndex] = prevItem;
-      if (prevTopics.length === prevIndex + 1) {
+      prevTopics[this.prevIndex] = this.prevItem;
+      if (prevTopics.length === this.prevIndex + 1) {
         prevTopics.push('');
       }
-      prevIndex = null;
-      prevItem = null;
+      this.prevIndex = null;
+      this.prevItem = null;
 
       let nextTopics = [...prevTopics];
-      setTopics(nextTopics);
+      this.setState({
+        topics: nextTopics,
+      });
     }
   };
-  const onChange = (text, index) => {
-    prevIndex = index;
-    prevItem = text;
+  onChange = (text, index) => {
+    this.prevIndex = index;
+    this.prevItem = text;
   };
 
-  const onDelete = index => {
+  onDelete = index => {
     let prevTopics = topics;
-
     if (prevTopics.length === 1) return;
     refs = [];
     prevTopics.splice(index, 1);
     let nextTopics = [...prevTopics];
-    setTopics(nextTopics);
+    this.setState({
+      topics: nextTopics,
+    });
   };
 
-  const addNewNotebook = async () => {
+  addNewNotebook = async () => {
+    let {toEdit} = this.props;
     if (!title)
       return ToastEvent.show('Title is required', 'error', 3000, () => {}, '');
 
@@ -109,59 +150,44 @@ export const AddNotebookDialog = ({visible, close, toEdit = null}) => {
       topics,
       dateCreated: dateCreated,
     });
-
-    prevIndex = null;
-    prevItem = null;
-    currentSelectedInput = null;
-    refs = [];
-    setTopics(['']);
-    close(true);
+    updateEvent({type: ACTIONS.NOTEBOOKS});
+    this.close();
     ToastEvent.show('New notebook added', 'success', 3000, () => {}, '');
   };
 
   onKeyPress = (event, index, text) => {
     if (event.nativeEvent.key === 'Backspace') {
-      if (backPressCount === 0 && (!text || text.length == 0)) {
-        backPressCount = 1;
+      if (this.backPressCount === 0 && (!text || text.length == 0)) {
+        this.backPressCount = 1;
 
         return;
       }
-
-      if (backPressCount === 1 && (!text || text.length == 0)) {
-        backPressCount = 0;
+      if (this.backPressCount === 1 && (!text || text.length == 0)) {
+        this.backPressCount = 0;
         if (!refs[index] == 0) {
           refs[index - 1].focus();
         }
-        onDelete(index);
+        this.onDelete(index);
       }
     }
   };
 
+  render() {
+    const {colors, toEdit} = this.props;
+    const {
+      titleFocused,
+      descFocused,
+      description,
+      title,
+      topics,
+      visible,
+    } = this.state;
     return (
       <Modal
         visible={visible}
         transparent={true}
         animated
         animationType="fade"
-      onShow={() => {
-        refs = [];
-
-        if (toEdit !== null) {
-          let topicsList = [];
-          toEdit.topics.forEach(item => {
-            if (item.title !== 'General') {
-              topicsList.push(item.title);
-            }
-          });
-          topicsList.push('');
-          setTopics([...topicsList]);
-          setTitle(toEdit.title);
-          timestamp = toEdit.dateCreated;
-          setTimeout(() => {
-            console.log(timestamp, title, topics);
-          }, 400);
-        }
-      }}
         onRequestClose={() => (refs = [])}>
         <KeyboardAvoidingView
           behavior={Platform.OS === 'ios' ? 'padding' : null}
@@ -222,14 +248,20 @@ export const AddNotebookDialog = ({visible, close, toEdit = null}) => {
                 marginBottom: 5,
               }}
               onFocus={() => {
-              setTitleFocused(true);
+                this.setState({
+                  titleFocused: true,
+                });
               }}
               onBlur={() => {
-              setTitleFocused(false);
+                this.setState({
+                  titleFocused: false,
+                });
               }}
               defaultValue={toEdit ? toEdit.title : null}
               onChangeText={value => {
-              setTitle(value);
+                this.setState({
+                  title: value,
+                });
               }}
               placeholder="Title of notebook"
               placeholderTextColor={colors.icon}
@@ -248,14 +280,20 @@ export const AddNotebookDialog = ({visible, close, toEdit = null}) => {
                 marginBottom: 10,
               }}
               onFocus={() => {
-              setDescFocused(true);
+                this.setState({
+                  descFocused: true,
+                });
               }}
               onBlur={() => {
-              setDescFocused(false);
+                this.setState({
+                  descFocused: false,
+                });
               }}
               defaultValue={toEdit ? toEdit.description : null}
               onChangeText={value => {
-              setDescription(value);
+                this.setState({
+                  description: value,
+                });
               }}
               placeholder="write a description"
               placeholderTextColor={colors.icon}
@@ -272,7 +310,7 @@ export const AddNotebookDialog = ({visible, close, toEdit = null}) => {
 
             <FlatList
               data={topics}
-            ref={listRef}
+              ref={ref => (this.listRef = ref)}
               removeClippedSubviews={false}
               enableEmptySections={false}
               getItemLayout={(data, index) => ({
@@ -287,12 +325,12 @@ export const AddNotebookDialog = ({visible, close, toEdit = null}) => {
                   toEdit={toEdit ? true : false}
                   index={index}
                   colors={colors}
-                onSubmit={onSubmit}
-                onChange={onChange}
-                onFocus={onFocus}
-                onDelete={onDelete}
-                onKeyPress={onKeyPress}
-                onBlur={onBlur}
+                  onSubmit={this.onSubmit}
+                  onChange={this.onChange}
+                  onFocus={this.onFocus}
+                  onDelete={this.onDelete}
+                  onKeyPress={this.onKeyPress}
+                  onBlur={this.onBlur}
                 />
               )}
             />
@@ -309,7 +347,7 @@ export const AddNotebookDialog = ({visible, close, toEdit = null}) => {
               <TouchableOpacity
                 activeOpacity={opacity}
                 onPress={async () => {
-                await addNewNotebook();
+                  await this.addNewNotebook();
                 }}
                 style={{
                   paddingVertical: pv,
@@ -335,12 +373,7 @@ export const AddNotebookDialog = ({visible, close, toEdit = null}) => {
               <TouchableOpacity
                 activeOpacity={opacity}
                 onPress={() => {
-                setTopics(['']);
-                refs = [];
-                prevIndex = null;
-                prevItem = null;
-                currentSelectedInput = null;
-                close();
+                  this.close();
                 }}
                 style={{
                   paddingVertical: pv,
@@ -365,7 +398,8 @@ export const AddNotebookDialog = ({visible, close, toEdit = null}) => {
         </KeyboardAvoidingView>
       </Modal>
     );
-};
+  }
+}
 
 const TopicItem = ({
   item,