fix incorrect description added to notebook

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

@@ -1,14 +1,7 @@
-import React, {createRef, useEffect, useState} from 'react';
+import React, {createRef, useEffect, useRef, useState} from 'react';
-import {
+import {Keyboard} from 'react-native';
-  FlatList,
+import {ScrollView} from 'react-native';
-  KeyboardAvoidingView,
+import {FlatList, TextInput, TouchableOpacity, View} from 'react-native';
-  Modal,
-  SafeAreaView,
-  TextInput,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {notesnook} from '../../../e2e/test.ids';
 import {useTracked} from '../../provider';
@@ -20,7 +13,7 @@ import {
   eUnSubscribeEvent,
   ToastEvent,
 } from '../../services/EventManager';
-import {getElevation} from '../../utils';
+import {dHeight} from '../../utils';
 import {db} from '../../utils/DB';
 import {
   eOnNewTopicAdded,
@@ -28,7 +21,8 @@ import {
   refreshNotesPage,
 } from '../../utils/Events';
 import {pv, SIZE, WEIGHT} from '../../utils/SizeUtils';
-import DialogButtons from '../Dialog/dialog-buttons';
+import {ActionIcon} from '../ActionIcon';
+import ActionSheet from '../ActionSheet';
 import DialogHeader from '../Dialog/dialog-header';
 import {PressableButton} from '../PressableButton';
 import {Toast} from '../Toast';
@@ -42,27 +36,30 @@ const topicInput = createRef();
 
 const MoveNoteDialog = () => {
   const [state, dispatch] = useTracked();
-  const {colors, selectedItemsList} = state;
+  const {colors} = state;
   const [visible, setVisible] = useState(false);
-  const [expanded, setExpanded] = useState('');
-  const [notebookInputFocused, setNotebookInputFocused] = useState(false);
-  const [topicInputFocused, setTopicInputFocused] = useState(false);
   const [note, setNote] = useState(null);
-
+  const actionSheetRef = useRef();
-  function open() {
+  function open(note) {
-    if (selectedItemsList.length === 1) {
+    setNote(note);
-      console.log('setting note');
-      setNote(selectedItemsList[0]);
-    }
     setVisible(true);
+    actionSheetRef.current?._setModalVisible(true);
   }
   const close = () => {
+    actionSheetRef.current?._setModalVisible(false);
+  };
+
+  useEffect(() => {
+    eSubscribeEvent(eOpenMoveNoteDialog, open);
+    return () => {
+      eUnSubscribeEvent(eOpenMoveNoteDialog, open);
+    };
+  }, []);
+
+  const _onClose = () => {
     setVisible(false);
-    setExpanded(false);
     newTopicTitle = null;
     newNotebookTitle = null;
-    setNotebookInputFocused(false);
-    setTopicInputFocused(false);
     setNote(null);
     eSendEvent(refreshNotesPage);
     eSendEvent(eOnNewTopicAdded);
@@ -71,16 +68,41 @@ const MoveNoteDialog = () => {
     dispatch({type: Actions.NOTES});
   };
 
-  useEffect(() => {
+  const style = React.useMemo(() => {
-    if (selectedItemsList.length === 1) {
+    return {
-      console.log('setting note effect');
+      width: DDS.isLargeTablet() ? 500 : '100%',
-      setNote(selectedItemsList[0]);
+      height: DDS.isLargeTablet() ? 500 : null,
-    }
+      maxHeight: DDS.isLargeTablet() ? 500 : '90%',
-    eSubscribeEvent(eOpenMoveNoteDialog, open);
+      borderTopRightRadius: DDS.isLargeTablet() ? 5 : 10,
-    return () => {
+      borderTopLeftRadius: DDS.isLargeTablet() ? 5 : 10,
-      eUnSubscribeEvent(eOpenMoveNoteDialog, open);
+      backgroundColor: colors.bg,
+      padding: DDS.isLargeTablet() ? 8 : 0,
+      zIndex: 10,
+      paddingVertical: 12,
     };
-  }, []);
+  }, [colors.bg]);
+
+  return !visible ? null : (
+    <ActionSheet
+      ref={actionSheetRef}
+      animationType="slide"
+      containerStyle={style}
+      gestureEnabled
+      initialOffsetFromBottom={1}
+      onClose={_onClose}>
+      <IntComponent close={close} note={note} />
+    </ActionSheet>
+  );
+};
+
+export default MoveNoteDialog;
+
+const IntComponent = ({close, note}) => {
+  const [state, dispatch] = useTracked();
+  const {colors, selectedItemsList} = state;
+  const [expanded, setExpanded] = useState('');
+  const [notebookInputFocused, setNotebookInputFocused] = useState(false);
+  const [topicInputFocused, setTopicInputFocused] = useState(false);
 
   const addNewNotebook = async () => {
     if (!newNotebookTitle || newNotebookTitle.trim().length === 0)
@@ -88,7 +110,7 @@ const MoveNoteDialog = () => {
 
     await db.notebooks.add({
       title: newNotebookTitle,
-      description: 'this.description',
+      description: null,
       topics: [],
       id: null,
     });
@@ -101,61 +123,31 @@ const MoveNoteDialog = () => {
     if (!newTopicTitle || newTopicTitle.trim().length === 0) {
       return ToastEvent.show('Title is required', 'error', 'local');
     }
-    let res = await db.notebooks.notebook(expanded).topics.add(newTopicTitle);
+    await db.notebooks.notebook(expanded).topics.add(newTopicTitle);
     dispatch({type: Actions.NOTEBOOKS});
     topicInput.current?.clear();
     topicInput.current?.blur();
     newTopicTitle = null;
   };
 
-  return !visible ? null : (
+  return (
-    <Modal
+    <>
-      animated={true}
+      <View>
-      animationType="slide"
-      onRequestClose={close}
-      visible={true}
-      transparent={true}>
-      <SafeAreaView
-        style={{
-          height: '100%',
-          width: '100%',
-        }}>
-        <KeyboardAvoidingView
-          behavior={Platform.OS === 'ios' ? 'padding' : null}
-          style={{
-            flex: 1,
-            backgroundColor: DDS.isTab ? 'rgba(0,0,0,0.3)' : colors.bg,
-            width: '100%',
-            height: '100%',
-            alignSelf: 'center',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}>
         <TouchableOpacity
-            onPress={close}
           style={{
             width: '100%',
             height: '100%',
             position: 'absolute',
-              zIndex: 1,
+          }}
+          onPress={() => {
+            Keyboard.dismiss();
           }}
         />
-
-          <View
-            style={{
-              ...getElevation(DDS.isTab ? 10 : 0),
-              width: DDS.isTab ? 500 : '100%',
-              height: DDS.isTab ? 500 : '100%',
-              flex: 1,
-              borderRadius: DDS.isTab ? 5 : 0,
-              backgroundColor: colors.bg,
-              padding: DDS.isTab ? 8 : 0,
-              zIndex: 10,
-              paddingVertical: 12,
-            }}>
         <View
           style={{
             paddingHorizontal: 12,
+            flexDirection: 'row',
+            justifyContent: 'space-between',
           }}>
           <DialogHeader
             title="Add to notebook"
@@ -163,27 +155,18 @@ const MoveNoteDialog = () => {
           />
         </View>
 
-            <FlatList
+        <ScrollView nestedScrollEnabled>
-              data={state.notebooks}
+          <View>
-              keyboardShouldPersistTaps="always"
-              keyboardDismissMode="none"
-              ListHeaderComponent={
-                <View
-                  style={{
-                    paddingHorizontal: 12,
-                  }}>
             <View
               style={{
                 flexDirection: 'row',
                 justifyContent: 'space-between',
                 alignItems: 'center',
-                      paddingHorizontal: 0,
                 marginBottom: 10,
                 width: '100%',
                 borderBottomWidth: 1,
-                      borderColor: notebookInputFocused
+                borderColor: colors.nav,
-                        ? colors.accent
+                paddingHorizontal: 12,
-                        : colors.nav,
               }}>
               <TextInput
                 ref={notebookInput}
@@ -202,8 +185,8 @@ const MoveNoteDialog = () => {
                 style={[
                   {
                     color: colors.pri,
-                          width: '85%',
+                    width: '90%',
-                          maxWidth: '85%',
+                    maxWidth: '90%',
                     paddingHorizontal: 0,
                     borderRadius: 5,
                     minHeight: 45,
@@ -212,7 +195,7 @@ const MoveNoteDialog = () => {
                     padding: pv - 2,
                   },
                 ]}
-                      placeholder="Add a notebook"
+                placeholder="Create a new notebook"
                 placeholderTextColor={colors.icon}
               />
               <TouchableOpacity
@@ -221,7 +204,6 @@ const MoveNoteDialog = () => {
                 style={[
                   {
                     borderRadius: 5,
-                          width: '12%',
                     minHeight: 45,
                     justifyContent: 'center',
                     alignItems: 'center',
@@ -230,49 +212,61 @@ const MoveNoteDialog = () => {
                 <Icon
                   name="plus"
                   size={SIZE.lg}
-                        color={
+                  color={notebookInputFocused ? colors.accent : colors.icon}
-                          notebookInputFocused ? colors.accent : colors.icon
-                        }
                 />
               </TouchableOpacity>
             </View>
           </View>
-              }
+
-              renderItem={({item, index}) => (
+          {state.notebooks.map((item) => (
             <View>
               <PressableButton
                 onPress={() => {
                   setExpanded(item.id === expanded ? null : item.id);
+                  setTopicInputFocused(false);
+                  setNotebookInputFocused(false);
                 }}
-                    type={expanded === item.id ? 'shade' : 'transparent'}
+                type="gray"
                 customStyle={{
                   height: 50,
                   width: '100%',
                   borderRadius: 0,
                   alignItems: 'flex-start',
-                      paddingHorizontal: 12,
                   marginBottom: 5,
+                  borderBottomWidth: 1,
+                  borderBottomColor:
+                    expanded === item.id ? colors.accent : colors.nav,
                 }}>
                 <View
                   style={{
-                        borderBottomWidth: 1,
                     width: '100%',
                     height: 50,
-                        justifyContent: 'center',
+                    justifyContent: 'space-between',
-                        borderBottomColor:
+                    flexDirection: 'row',
-                          expanded === item.id ? 'transparent' : colors.nav,
+                    alignItems: 'center',
+                    paddingHorizontal: 12,
                   }}>
-                      <Heading size={SIZE.md}>
+                  <View>
+                    <Heading
+                      color={expanded === item.id ? colors.accent : null}
+                      size={SIZE.md}>
                       {item.title}
-                        {'\n'}
+                    </Heading>
                     <Paragraph size={SIZE.xs} color={colors.icon}>
+                      Notebook{' '}
                       {item.totalNotes +
                         ' notes' +
                         ' & ' +
                         item.topics.length +
                         ' topics'}
                     </Paragraph>
-                      </Heading>
+                  </View>
+
+                  <Icon
+                    name={expanded === item.id ? 'chevron-up' : 'chevron-down'}
+                    color={colors.pri}
+                    size={SIZE.lg}
+                  />
                 </View>
               </PressableButton>
 
@@ -282,23 +276,19 @@ const MoveNoteDialog = () => {
                   keyboardShouldPersistTaps="always"
                   keyboardDismissMode="none"
                   ListHeaderComponent={
-                        <View
+                    <View>
-                          style={{
-                            paddingRight: 12,
-                          }}>
                       <View
                         style={{
                           flexDirection: 'row',
                           justifyContent: 'space-between',
                           alignItems: 'center',
-                              width: '90%',
+                          width: '100%',
                           alignSelf: 'flex-end',
                           marginBottom: 5,
                           marginTop: 5,
                           borderBottomWidth: 1,
-                              borderColor: topicInputFocused
+                          paddingHorizontal: 12,
-                                ? colors.accent
+                          borderColor: colors.nav,
-                                : colors.nav,
                         }}>
                         <TextInput
                           ref={topicInput}
@@ -317,8 +307,8 @@ const MoveNoteDialog = () => {
                           style={[
                             {
                               color: colors.pri,
-                                  width: '85%',
+                              width: '90%',
-                                  maxWidth: '85%',
+                              maxWidth: '90%',
                               paddingHorizontal: 0,
                               borderRadius: 5,
                               height: 40,
@@ -327,7 +317,7 @@ const MoveNoteDialog = () => {
                               padding: pv - 2,
                             },
                           ]}
-                              placeholder="Add a Topic"
+                          placeholder="Add a topic"
                           placeholderTextColor={colors.icon}
                         />
                         <TouchableOpacity
@@ -336,8 +326,7 @@ const MoveNoteDialog = () => {
                           style={[
                             {
                               borderRadius: 5,
-                                  width: 40,
+                              height: 40,
-                                  minHeight: 40,
                               justifyContent: 'center',
                               alignItems: 'center',
                             },
@@ -346,9 +335,7 @@ const MoveNoteDialog = () => {
                             name="plus"
                             size={SIZE.lg}
                             color={
-                                  topicInputFocused
+                              topicInputFocused ? colors.accent : colors.icon
-                                    ? colors.accent
-                                    : colors.icon
                             }
                           />
                         </TouchableOpacity>
@@ -358,7 +345,6 @@ const MoveNoteDialog = () => {
                   renderItem={({item, index}) => (
                     <PressableButton
                       onPress={async () => {
-                            
                         if (
                           note &&
                           note.notebooks &&
@@ -381,9 +367,7 @@ const MoveNoteDialog = () => {
                         }
 
                         let noteIds = [];
-                            selectedItemsList.forEach((i) =>
+                        selectedItemsList.forEach((i) => noteIds.push(i.id));
-                              noteIds.push(i.id),
-                            );
                         await db.notes.move(
                           {
                             topic: item.id,
@@ -403,12 +387,11 @@ const MoveNoteDialog = () => {
                         height: 50,
                         borderTopWidth: index === 0 ? 0 : 1,
                         borderTopColor: colors.nav,
-                            width: '87%',
+                        width: '100%',
-                            alignSelf: 'flex-end',
                         borderRadius: 0,
                         alignItems: 'center',
-                            marginRight: 12,
                         flexDirection: 'row',
+                        paddingHorizontal: 12,
                         justifyContent: 'space-between',
                       }}>
                       <View>
@@ -424,7 +407,7 @@ const MoveNoteDialog = () => {
                         (o) => o.topics.indexOf(item.id) > -1,
                       ) > -1 ? (
                         <Paragraph size={SIZE.sm} color={colors.errorText}>
-                              Remove
+                          Remove Note
                         </Paragraph>
                       ) : null}
                     </PressableButton>
@@ -432,25 +415,15 @@ const MoveNoteDialog = () => {
                 />
               ) : null}
             </View>
-              )}
+          ))}
-            />
-
           <View
             style={{
-                paddingHorizontal: 12,
+              height: 100,
-                width: '100%',
+            }}
-              }}>
-              <DialogButtons
-                negativeTitle="Close"
-                onPressNegative={close}
           />
-            </View>
+        </ScrollView>
       </View>
       <Toast context="local" />
-        </KeyboardAvoidingView>
+    </>
-      </SafeAreaView>
-    </Modal>
   );
 };
-
-export default MoveNoteDialog;