add note moving

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

@@ -1,6 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import {
   Dimensions,
+  StatusBar,
   Text,
   TextInput,
   TouchableOpacity,
@@ -16,11 +17,12 @@ import {
   COLOR_SCHEME_LIGHT,
   opacity,
   pv,
+  setColorScheme,
   SIZE,
   WEIGHT,
 } from '../../common/common';
 import {ACTIONS, useTracked} from '../../provider';
-import NavigationService from '../../services/NavigationService';
+import {moveNoteEvent} from '../DialogManager';
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 
@@ -169,14 +171,10 @@ export const ActionSheetComponent = ({
       name: 'Add to',
       icon: 'book',
       func: () => {
+        dispatch({type: ACTIONS.MODAL_NAVIGATOR, enabled: true});
+        dispatch({type: ACTIONS.SELECTED_ITEMS, item: note});
+        moveNoteEvent();
         close();
-        NavigationService.push('Folders', {
-          note: note,
-          title: 'Choose a notebook',
-          isMove: true,
-          hideMore: true,
-          canGoBack: true,
-        });
       },
     },
     {
@@ -202,7 +200,7 @@ export const ActionSheetComponent = ({
       name: 'Edit Notebook',
       icon: 'trash',
       func: () => {
-        close('topic');
+        close('notebook');
       },
     },
     {

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

@@ -0,0 +1,148 @@
+import React from 'react';
+import {Modal, DeviceEventEmitter} from 'react-native';
+import {createAppContainer} from 'react-navigation';
+import {createStackNavigator} from 'react-navigation-stack';
+import {ACTIONS} from '../../provider';
+import Folders from '../../views/Folders';
+import Notebook from '../../views/Notebook';
+import Notes from '../../views/Notes';
+import {updateEvent} from '../DialogManager';
+import * as Animatable from 'react-native-animatable';
+
+const fade = props => {
+  const {position, scene} = props;
+
+  const index = scene.index;
+
+  const translateX = 0;
+  const translateY = 0;
+
+  const opacity = position.interpolate({
+    inputRange: [index - 0.7, index, index + 0.7],
+    outputRange: [0.3, 1, 0.3],
+  });
+
+  return {
+    opacity,
+    transform: [{translateX}, {translateY}],
+  };
+};
+
+const ModalNavigator = createStackNavigator(
+  {
+    Folders: {
+      screen: Folders,
+    },
+    Notebook: {
+      screen: Notebook,
+    },
+    Notes: {
+      screen: Notes,
+    },
+  },
+  {
+    initialRouteName: 'Folders',
+    initialRouteParams: {
+      title: 'Select Notebook',
+      isMove: true,
+      hideMore: true,
+      canGoBack: true,
+    },
+    defaultNavigationOptions: {
+      gesturesEnabled: false,
+      headerStyle: {
+        backgroundColor: 'transparent',
+        borderBottomWidth: 0,
+        height: 0,
+      },
+    },
+    transitionConfig: () => ({
+      screenInterpolator: props => {
+        return fade(props);
+      },
+    }),
+  },
+);
+
+const Navigator = createAppContainer(ModalNavigator);
+
+class MoveNoteDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false,
+      animated: false,
+    };
+    this.routeName = null;
+    this.count = 0;
+  }
+
+  open() {
+    console.log(' i am called');
+    this.setState({
+      visible: true,
+    });
+  }
+
+  close() {
+    updateEvent({type: ACTIONS.CLEAR_SELECTION});
+    updateEvent({type: ACTIONS.MODAL_NAVIGATOR, enabled: false});
+    this.setState({
+      visible: false,
+      animated: false,
+    });
+  }
+
+  render() {
+    const {visible, animated} = this.state;
+    return (
+      <Modal
+        animated={true}
+        animationType="fade"
+        onShow={() => {
+          updateEvent({type: ACTIONS.MODAL_NAVIGATOR, enabled: true});
+          this.setState({
+            animated: true,
+          });
+        }}
+        onRequestClose={() => {
+          if (!this.routeName || this.routeName === 0) {
+            this.close();
+          } else {
+            DeviceEventEmitter.emit('goBack');
+          }
+        }}
+        visible={visible}
+        transparent={true}>
+        <Animatable.View
+          transition={['opacity', 'scaleX', 'scaleY']}
+          useNativeDriver={true}
+          duration={300}
+          iterationCount={1}
+          style={{
+            opacity: animated ? 1 : 0,
+            flex: 1,
+            backgroundColor: 'white',
+            transform: [
+              {
+                scaleX: animated ? 1 : 0.95,
+              },
+              {
+                scaleY: animated ? 1 : 0.95,
+              },
+            ],
+          }}>
+          <Navigator
+            ref={ref => (this.navigation = ref)}
+            onNavigationStateChange={state => {
+              this.routeName = state.index;
+              console.log(state);
+            }}
+          />
+        </Animatable.View>
+      </Modal>
+    );
+  }
+}
+
+export default MoveNoteDialog;

apps/mobile/src/views/Folders/index.js

@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react';
-import {FlatList, Platform, Text, View} from 'react-native';
+import {FlatList, Platform, Text, View, BackHandler} from 'react-native';
 import * as Animatable from 'react-native-animatable';
 import {useIsFocused} from 'react-navigation-hooks';
 import {SIZE, WEIGHT} from '../../common/common';
@@ -17,19 +17,37 @@ import {w} from '../../utils/utils';
 
 export const Folders = ({navigation}) => {
   const [state, dispatch] = useTracked();
-  const {colors, selectionMode, pinned, notebooks} = state;
-
+  const {
+    colors,
+    selectionMode,
+    pinned,
+    notebooks,
+    preventDefaultMargins,
+    selectedItemsList,
+  } = state;
+  let isFocused = useIsFocused();
   ///
 
+  const handleBackPress = () => {
+    return true;
+  };
+
   useEffect(() => {
     dispatch({type: ACTIONS.NOTEBOOKS});
-  }, []);
+    console.log(selectedItemsList[0]);
+    let backhandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      handleBackPress,
+    );
+    return () => {
+      backhandler.remove();
+      backhandler = null;
+    };
+  }, [isFocused]);
 
   const [addNotebook, setAddNotebook] = useState(false);
   const [hideHeader, setHideHeader] = useState(false);
 
-  let isFocused = useIsFocused();
-
   const params = navigation.state.params;
   let offsetY = 0;
   let countUp = 0;
@@ -68,7 +86,7 @@ export const Folders = ({navigation}) => {
           close={newNotes => {
             setAddNotebook(false);
             if (newNotes) {
-              updateDB();
+              dispatch({type: ACTIONS.NOTEBOOKS});
             }
           }}
         />
@@ -83,12 +101,14 @@ export const Folders = ({navigation}) => {
             backgroundColor: colors.bg,
             height: selectionMode ? 0 : null,
             opacity: selectionMode ? 0 : 1,
-            zIndex: 10,
+            zIndex: 20,
             width: '100%',
           }}>
           <Header
             hide={hideHeader}
             menu={params.canGoBack ? false : true}
+            preventDefaultMargins={preventDefaultMargins}
+            navigation={navigation}
             showSearch={() => {
               setHideHeader(false);
               countUp = 0;
@@ -221,6 +241,7 @@ export const Folders = ({navigation}) => {
             <SelectionWrapper item={item}>
               <NotebookItem
                 hideMore={params.hideMore}
+                navigation={navigation}
                 customStyle={{
                   width: selectionMode ? w - 74 : '100%',
                   marginHorizontal: 0,

apps/mobile/src/views/Home/index.js

@@ -10,6 +10,7 @@ import SelectionHeader from '../../components/SelectionHeader';
 import {ACTIONS, useTracked} from '../../provider';
 import NavigationService from '../../services/NavigationService';
 import {SideMenuEvent, ToastEvent} from '../../utils/utils';
+import {useIsFocused} from 'react-navigation-hooks';
 
 export const AnimatedSafeAreaView = Animatable.createAnimatableComponent(
   SafeAreaView,
@@ -25,6 +26,7 @@ export const Home = ({navigation}) => {
   const [keyword, setKeyword] = useState('');
   const [searchResults, setSearchResults] = useState([]);
 
+  const isFocused = useIsFocused();
   // Variables
 
   let offsetY = 0;
@@ -36,7 +38,7 @@ export const Home = ({navigation}) => {
 
   useEffect(() => {
     dispatch({type: ACTIONS.NOTES, payload: 'hello there'});
-  }, []);
+  }, [isFocused]);
 
   // Functions
 

apps/mobile/src/views/Notebook/index.js

@@ -1,5 +1,5 @@
-import React, {useState} from 'react';
-import {Platform, Text, View} from 'react-native';
+import React, {useState, useEffect} from 'react';
+import {Platform, Text, View, FlatList, BackHandler} from 'react-native';
 import * as Animatable from 'react-native-animatable';
 import {useIsFocused} from 'react-navigation-hooks';
 import {SIZE, WEIGHT} from '../../common/common';
@@ -9,10 +9,17 @@ import {Header} from '../../components/header';
 import {NotebookItem} from '../../components/NotebookItem';
 import {Search} from '../../components/SearchInput';
 import {useTracked} from '../../provider';
+import {_recieveEvent, _unSubscribeEvent} from '../../components/DialogManager';
 
 export const Notebook = ({navigation}) => {
   const [state, dispatch] = useTracked();
-  const {colors, selectionMode, pinned, selectedItemsList} = state;
+  const {
+    colors,
+    selectionMode,
+    pinned,
+    selectedItemsList,
+    preventDefaultMargins,
+  } = state;
 
   ///
   const updateDB = () => {};
@@ -25,6 +32,17 @@ export const Notebook = ({navigation}) => {
 
   let isFocused = useIsFocused();
 
+  const handleBackPress = () => {
+    navigation.goBack();
+  };
+
+  useEffect(() => {
+    _recieveEvent('goBack', handleBackPress);
+    return () => {
+      _unSubscribeEvent('goBack', handleBackPress);
+    };
+  }, [isFocused]);
+
   // State
 
   // Variables
@@ -36,10 +54,6 @@ export const Notebook = ({navigation}) => {
 
   // Functions
 
-  if (!isFocused) {
-    console.log('block rerender');
-    return <></>;
-  } else {
   // Render
   return (
     <Container
@@ -65,6 +79,8 @@ export const Notebook = ({navigation}) => {
         }}>
         <Header
           hide={hideHeader}
+          preventDefaultMargins={preventDefaultMargins}
+          navigation={navigation}
           showSearch={() => {
             setHideHeader(false);
             countUp = 0;
@@ -105,10 +121,10 @@ export const Notebook = ({navigation}) => {
             style={{
               marginTop:
                 Platform.OS == 'ios'
-                    ? notebooks[0] && !selectionMode
+                  ? params.notebook.topics[0] && !selectionMode
                     ? 135
                     : 135 - 60
-                    : notebooks[0] && !selectionMode
+                  : params.notebook.topics[0] && !selectionMode
                   ? 155
                   : 155 - 60,
             }}
@@ -149,7 +165,6 @@ export const Notebook = ({navigation}) => {
       />
     </Container>
   );
-  }
 };
 
 Notebook.navigationOptions = {