move topic dialog to dialog manager

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

@@ -1,12 +1,190 @@
-import React, {useState} from 'react';
+import React from 'react';
 import {Modal, Text, TouchableOpacity, View} from 'react-native';
 import {TextInput} from 'react-native-gesture-handler';
 import Icon from 'react-native-vector-icons/Feather';
-import {db} from '../../../App';
 import {opacity, ph, pv, SIZE, WEIGHT} from '../../common/common';
 import {useTracked} from '../../provider';
 import {getElevation, ToastEvent} from '../../utils/utils';
 
+export class AddTopicDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false,
+      titleFocused: false,
+    };
+
+    this.title;
+  }
+
+  addNewTopic = async () => {
+    if (!this.title)
+      return ToastEvent.show('Title is required', 'error', 3000, () => {}, '');
+
+    //db.addTopicToNotebook(toEdit.dateCreated, title);
+
+    ToastEvent.show('New topic added', 'success', 3000, () => {}, '');
+    close(true);
+  };
+
+  open() {
+    this.setState({
+      visible: true,
+    });
+  }
+  close() {
+    this.title = null;
+    this.setState({
+      visible: false,
+    });
+  }
+
+  render() {
+    const {visible} = this.state;
+    const {colors, toEdit} = this.props;
+
+    return (
+      <Modal
+        visible={visible}
+        animated
+        animationType="fade"
+        transparent={true}
+        onRequestClose={() => (refs = [])}>
+        <View
+          style={{
+            width: '100%',
+            height: '100%',
+            backgroundColor: 'rgba(0,0,0,0.3)',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}>
+          <TouchableOpacity
+            onPress={() => close()}
+            style={{
+              width: '100%',
+              height: '100%',
+              position: 'absolute',
+            }}
+          />
+
+          <View
+            style={{
+              ...getElevation(5),
+              width: '80%',
+              maxHeight: 350,
+              borderRadius: 5,
+              backgroundColor: colors.bg,
+              paddingHorizontal: ph,
+              paddingVertical: pv,
+            }}>
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}>
+              <Icon name="book-open" color={colors.accent} size={SIZE.lg} />
+              <Text
+                style={{
+                  color: colors.accent,
+                  fontFamily: WEIGHT.bold,
+                  marginLeft: 5,
+                  fontSize: SIZE.md,
+                }}>
+                {toEdit ? 'Edit Topic' : 'Add New Topic'}
+              </Text>
+            </View>
+
+            <TextInput
+              style={{
+                padding: pv,
+                borderWidth: 1.5,
+                borderColor: titleFocused ? colors.accent : colors.nav,
+                paddingHorizontal: ph,
+                borderRadius: 5,
+                fontSize: SIZE.sm,
+                fontFamily: WEIGHT.regular,
+                color: colors.pri,
+                marginTop: 20,
+              }}
+              onFocus={() => {
+                this.setState({
+                  titleFocused: true,
+                });
+              }}
+              onBlur={() => {
+                this.setState({
+                  titleFocused: true,
+                });
+              }}
+              defaultValue={toEdit ? toEdit.title : null}
+              onChangeText={value => {
+                this.title = value;
+              }}
+              placeholder="Enter title of topic"
+              placeholderTextColor={colors.icon}
+            />
+
+            <View
+              style={{
+                justifyContent: 'space-around',
+                alignItems: 'center',
+                flexDirection: 'row',
+                marginTop: 20,
+              }}>
+              <TouchableOpacity
+                activeOpacity={opacity}
+                onPress={async () => await this.addNewTopic()}
+                style={{
+                  paddingVertical: pv,
+                  paddingHorizontal: ph,
+                  borderRadius: 5,
+                  width: '45%',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  borderColor: colors.accent,
+                  backgroundColor: colors.accent,
+                  borderWidth: 1,
+                }}>
+                <Text
+                  style={{
+                    fontFamily: WEIGHT.medium,
+                    color: 'white',
+                    fontSize: SIZE.sm,
+                  }}>
+                  Add
+                </Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                activeOpacity={opacity}
+                onPress={() => this.close()}
+                style={{
+                  paddingVertical: pv,
+                  paddingHorizontal: ph,
+                  borderRadius: 5,
+                  width: '45%',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  backgroundColor: colors.nav,
+                }}>
+                <Text
+                  style={{
+                    fontFamily: WEIGHT.medium,
+                    color: colors.icon,
+                    fontSize: SIZE.sm,
+                  }}>
+                  Cancel
+                </Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+      </Modal>
+    );
+  }
+}
+
 export const AddTopicDialog = ({
   visible,
   close = () => {},
@@ -15,150 +193,4 @@ export const AddTopicDialog = ({
 }) => {
   const [state, dispatch] = useTracked();
   const {colors} = state;
-  const [titleFocused, setTitleFocused] = useState(false);
-
-  let title = null;
-  const addNewTopic = async () => {
-    if (!title)
-      return ToastEvent.show('Title is required', 'error', 3000, () => {}, '');
-    db.addTopicToNotebook(notebookID, title);
-    ToastEvent.show('New topic added', 'success', 3000, () => {}, '');
-    close(true);
-  };
-
-  return (
-    <Modal
-      visible={visible}
-      animated
-      animationType="fade"
-      transparent={true}
-      onRequestClose={() => (refs = [])}>
-      <View
-        style={{
-          width: '100%',
-          height: '100%',
-          backgroundColor: 'rgba(0,0,0,0.3)',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}>
-        <TouchableOpacity
-          onPress={() => close()}
-          style={{
-            width: '100%',
-            height: '100%',
-            position: 'absolute',
-          }}
-        />
-
-        <View
-          style={{
-            ...getElevation(5),
-            width: '80%',
-            maxHeight: 350,
-            borderRadius: 5,
-            backgroundColor: colors.bg,
-            paddingHorizontal: ph,
-            paddingVertical: pv,
-          }}>
-          <View
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'center',
-              alignItems: 'center',
-            }}>
-            <Icon name="book-open" color={colors.accent} size={SIZE.lg} />
-            <Text
-              style={{
-                color: colors.accent,
-                fontFamily: WEIGHT.bold,
-                marginLeft: 5,
-                fontSize: SIZE.md,
-              }}>
-              {toEdit ? 'Edit Topic' : 'Add New Topic'}
-            </Text>
-          </View>
-
-          <TextInput
-            style={{
-              padding: pv,
-              borderWidth: 1.5,
-              borderColor: titleFocused ? colors.accent : colors.nav,
-              paddingHorizontal: ph,
-              borderRadius: 5,
-              fontSize: SIZE.sm,
-              fontFamily: WEIGHT.regular,
-              color: colors.pri,
-              marginTop: 20,
-            }}
-            onFocus={() => {
-              setTitleFocused(true);
-            }}
-            onBlur={() => {
-              setTitleFocused(false);
-            }}
-            defaultValue={toEdit ? toEdit.title : null}
-            onChangeText={value => {
-              title = value;
-            }}
-            placeholder="Enter title of topic"
-            placeholderTextColor={colors.icon}
-          />
-
-          <View
-            style={{
-              justifyContent: 'space-around',
-              alignItems: 'center',
-              flexDirection: 'row',
-              marginTop: 20,
-            }}>
-            <TouchableOpacity
-              activeOpacity={opacity}
-              onPress={async () => await addNewTopic()}
-              style={{
-                paddingVertical: pv,
-                paddingHorizontal: ph,
-                borderRadius: 5,
-                width: '45%',
-                justifyContent: 'center',
-                alignItems: 'center',
-                borderColor: colors.accent,
-                backgroundColor: colors.accent,
-                borderWidth: 1,
-              }}>
-              <Text
-                style={{
-                  fontFamily: WEIGHT.medium,
-                  color: 'white',
-                  fontSize: SIZE.sm,
-                }}>
-                Add
-              </Text>
-            </TouchableOpacity>
-
-            <TouchableOpacity
-              activeOpacity={opacity}
-              onPress={() => close()}
-              style={{
-                paddingVertical: pv,
-                paddingHorizontal: ph,
-                borderRadius: 5,
-                width: '45%',
-                justifyContent: 'center',
-                alignItems: 'center',
-                backgroundColor: colors.nav,
-              }}>
-              <Text
-                style={{
-                  fontFamily: WEIGHT.medium,
-                  color: colors.icon,
-                  fontSize: SIZE.sm,
-                }}>
-                Cancel
-              </Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-      </View>
-    </Modal>
-  );
 };