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 React, {useState, useEffect} from 'react';
-import {Platform, Text, View} from 'react-native';
+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,120 +54,117 @@ export const Notebook = ({navigation}) => {
 
   // Functions
 
-  if (!isFocused) {
+  // Render
-    console.log('block rerender');
+  return (
-    return <></>;
+    <Container
-  } else {
+      bottomButtonText="Add new topic"
-    // Render
+      bottomButtonOnPress={() => {
-    return (
+        setAddTopic(true);
-      <Container
+      }}>
-        bottomButtonText="Add new topic"
+      <AddTopicDialog
-        bottomButtonOnPress={() => {
+        visible={addTopic}
-          setAddTopic(true);
+        notebookID={params.notebook.dateCreated}
+        close={() => {
+          setAddTopic(false);
+        }}
+      />
+      <Animatable.View
+        transition="backgroundColor"
+        duration={300}
+        style={{
+          position: 'absolute',
+          backgroundColor: colors.bg,
+          zIndex: 10,
+          width: '100%',
         }}>
-        <AddTopicDialog
+        <Header
-          visible={addTopic}
+          hide={hideHeader}
-          notebookID={params.notebook.dateCreated}
+          preventDefaultMargins={preventDefaultMargins}
-          close={() => {
+          navigation={navigation}
-            setAddTopic(false);
+          showSearch={() => {
+            setHideHeader(false);
+            countUp = 0;
+            countDown = 0;
           }}
+          colors={colors}
+          heading={params.title}
+          canGoBack={true}
         />
-        <Animatable.View
+
-          transition="backgroundColor"
+        <Search placeholder={`Search in ${params.title}`} hide={hideHeader} />
-          duration={300}
+      </Animatable.View>
-          style={{
+
-            position: 'absolute',
+      <FlatList
-            backgroundColor: colors.bg,
+        style={{
-            zIndex: 10,
+          width: '100%',
-            width: '100%',
+        }}
-          }}>
+        data={params.notebook.topics}
-          <Header
+        onScroll={event => {
-            hide={hideHeader}
+          y = event.nativeEvent.contentOffset.y;
-            showSearch={() => {
+          if (y < 30) setHideHeader(false);
-              setHideHeader(false);
+          if (buttonHide) return;
-              countUp = 0;
+          if (y > offsetY) {
-              countDown = 0;
+            if (y - offsetY < 150 || countDown > 0) return;
+            countDown = 1;
+            countUp = 0;
+            setHideHeader(true);
+          } else {
+            if (offsetY - y < 150 || countUp > 0) return;
+            countDown = 0;
+            countUp = 1;
+            setHideHeader(false);
+          }
+          offsetY = y;
+        }}
+        ListHeaderComponent={
+          <View
+            style={{
+              marginTop:
+                Platform.OS == 'ios'
+                  ? params.notebook.topics[0] && !selectionMode
+                    ? 135
+                    : 135 - 60
+                  : params.notebook.topics[0] && !selectionMode
+                  ? 155
+                  : 155 - 60,
             }}
-            colors={colors}
-            heading={params.title}
-            canGoBack={true}
           />
-
+        }
-          <Search placeholder={`Search in ${params.title}`} hide={hideHeader} />
+        ListFooterComponent={
-        </Animatable.View>
+          <View
-
+            style={{
-        <FlatList
+              height: 150,
-          style={{
+              alignItems: 'center',
-            width: '100%',
+              justifyContent: 'center',
-          }}
+            }}>
-          data={params.notebook.topics}
+            <Text
-          onScroll={event => {
-            y = event.nativeEvent.contentOffset.y;
-            if (y < 30) setHideHeader(false);
-            if (buttonHide) return;
-            if (y > offsetY) {
-              if (y - offsetY < 150 || countDown > 0) return;
-              countDown = 1;
-              countUp = 0;
-              setHideHeader(true);
-            } else {
-              if (offsetY - y < 150 || countUp > 0) return;
-              countDown = 0;
-              countUp = 1;
-              setHideHeader(false);
-            }
-            offsetY = y;
-          }}
-          ListHeaderComponent={
-            <View
               style={{
-                marginTop:
+                color: colors.navbg,
-                  Platform.OS == 'ios'
+                fontSize: SIZE.sm,
-                    ? notebooks[0] && !selectionMode
+                fontFamily: WEIGHT.regular,
-                      ? 135
-                      : 135 - 60
-                    : notebooks[0] && !selectionMode
-                    ? 155
-                    : 155 - 60,
-              }}
-            />
-          }
-          ListFooterComponent={
-            <View
-              style={{
-                height: 150,
-                alignItems: 'center',
-                justifyContent: 'center',
               }}>
-              <Text
+              - End -
-                style={{
+            </Text>
-                  color: colors.navbg,
+          </View>
-                  fontSize: SIZE.sm,
+        }
-                  fontFamily: WEIGHT.regular,
+        renderItem={({item, index}) => (
-                }}>
+          <NotebookItem
-                - End -
+            hideMore={params.hideMore}
-              </Text>
+            isTopic={true}
-            </View>
+            noteToMove={params.note}
-          }
+            notebookID={params.notebook.dateCreated}
-          renderItem={({item, index}) => (
+            isMove={params.isMove}
-            <NotebookItem
+            refresh={() => {
-              hideMore={params.hideMore}
+              //forceUpdate();
-              isTopic={true}
+            }}
-              noteToMove={params.note}
+            item={item}
-              notebookID={params.notebook.dateCreated}
+            index={index}
-              isMove={params.isMove}
+            colors={colors}
-              refresh={() => {
+          />
-                //forceUpdate();
+        )}
-              }}
+      />
-              item={item}
+    </Container>
-              index={index}
+  );
-              colors={colors}
-            />
-          )}
-        />
-      </Container>
-    );
-  }
 };
 
 Notebook.navigationOptions = {