fix backHandler in Editor

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

@@ -98,7 +98,8 @@ export const NotebookPlaceHolder = ({colors, animation}) => {
               height: 8,
               backgroundColor: 'white',
               marginBottom: 15,
-            }}></View>
+            }}
+          />
           <Text
             style={{
               fontFamily: WEIGHT.bold,
@@ -153,7 +154,8 @@ export const NotebookPlaceHolder = ({colors, animation}) => {
               height: 8,
               backgroundColor: 'white',
               marginBottom: 15,
-            }}></View>
+            }}
+          />
           <Text
             style={{
               fontFamily: WEIGHT.bold,
@@ -489,104 +491,7 @@ export const TrashPlaceHolder = ({colors, animation}) => {
       style={{
         alignItems: 'center',
       }}>
-      <Animatable.View
-        animation={deleteItems(-50, -100)}
-        iterationCount="infinite"
-        duration={3000}
-        iterationDelay={7000}
-        easing="ease-in"
-        useNativeDriver={true}
-        style={{
-          width: 30,
-          height: 30,
-          backgroundColor: colors.errorBg,
-          borderRadius: 5,
-          transform: [
-            {
-              translateX: -50,
-            },
-            {
-              translateY: -100,
-            },
-          ],
-        }}
-      />
-      <Animatable.View
-        animation={deleteItems(-80, -70)}
-        iterationCount="infinite"
-        duration={3000}
-        iterationDelay={7000}
-        easing="ease-in"
-        useNativeDriver={true}
-        style={{
-          width: 25,
-          height: 25,
-          backgroundColor: colors.errorBg,
-          borderRadius: 5,
-          transform: [
-            {
-              translateX: -80,
-            },
-            {
-              translateY: -70,
-            },
-          ],
-        }}
-      />
-      <Animatable.View
-        animation={deleteItems(-120, -50)}
-        iterationCount="infinite"
-        duration={3000}
-        iterationDelay={7000}
-        easing="ease-in"
-        useNativeDriver={true}
-        style={{
-          width: 40,
-          height: 40,
-          backgroundColor: colors.errorBg,
-          borderRadius: 5,
-          transform: [
-            {
-              translateX: -120,
-            },
-            {
-              translateY: -50,
-            },
-          ],
-        }}
-      />
-
-      <Animatable.View
-        animation={deleteItems(-120, -140)}
-        iterationCount="infinite"
-        duration={3000}
-        iterationDelay={7000}
-        easing="ease-in"
-        useNativeDriver={true}
-        style={{
-          width: 20,
-          height: 20,
-          backgroundColor: colors.errorBg,
-          borderRadius: 5,
-          transform: [
-            {
-              translateX: -120,
-            },
-            {
-              translateY: -140,
-            },
-          ],
-        }}
-      />
-
-      <Animatable.View
-        animation={rotate}
-        iterationCount="infinite"
-        duration={3000}
-        iterationDelay={3500}
-        direction="alternate"
-        easing="ease-in"
-        useNativeDriver={true}
+      <View
         style={{
           width: 100,
           height: 15,
@@ -607,7 +512,7 @@ export const TrashPlaceHolder = ({colors, animation}) => {
             marginTop: -9,
           }}
         />
-      </Animatable.View>
+      </View>
 
       <View
         style={{
@@ -623,14 +528,7 @@ export const TrashPlaceHolder = ({colors, animation}) => {
             borderRadius: 5,
             zIndex: 10,
           }}>
-          <Animatable.View
-            animation={opacity}
-            iterationCount="infinite"
-            duration={3000}
-            iterationDelay={3500}
-            direction="alternate"
-            easing="ease-in"
-            useNativeDriver={true}
+          <View
             style={{
               flexDirection: 'row',
               width: '90%',
@@ -666,7 +564,7 @@ export const TrashPlaceHolder = ({colors, animation}) => {
                 zIndex: 10,
               }}
             />
-          </Animatable.View>
+          </View>
         </View>
       </View>
     </View>

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

@@ -49,6 +49,8 @@ let timer = null;
 let saveCounter = 0;
 let tapCount = 0;
 let canSave = false;
+let handleBack;
+
 const Editor = ({noMenu}) => {
   // Global State
   const [state, dispatch] = useTracked();
@@ -80,6 +82,7 @@ const Editor = ({ noMenu }) => {
 
   const loadNote = async item => {
     //EditorWebView.current?.requestFocus();
+    editing.currentlyEditing = true;
     noMenu ? null : sideMenuRef.current?.setGestureEnabled(false);
     if (note && note.id) {
       dispatch({type: ACTIONS.NOTES});
@@ -142,22 +145,7 @@ const Editor = ({ noMenu }) => {
   const onCallClear = () => {
     canSave = false;
     exitEditorAnimation();
-    setDateEdited(0);
-    title = null;
-    content = null;
-    note = null;
-    id = null;
-    tapCount = 0;
-    saveCounter = 0;
-    post({
-      type: 'clearEditor',
-    });
-    post({
-      type: 'clearTitle',
-    });
-    post({
-      type: 'blur',
-    });
+    clearEditor();
   };
 
   useEffect(() => {
@@ -251,7 +239,13 @@ const Editor = ({ noMenu }) => {
   const saveNote = async (lockNote = true) => {
     if (!canSave) return;
     if (!title && !content) return;
-    if (content && content.text.trim().length === 0 && title && title.trim().length == 0) return;
+    if (
+      content &&
+      content.text.trim().length === 0 &&
+      title &&
+      title.trim().length == 0
+    )
+      return;
     if (!content && title && title.trim().length === 0) return;
     if (!title && content && content.text.trim.length === 0) return;
     if (!content) {
@@ -425,12 +419,17 @@ const Editor = ({ noMenu }) => {
   });
 
   const _onHardwareBackPress = async () => {
+    if (editing.currentlyEditing) {
       if (tapCount > 0) {
         exitEditorAnimation();
         if (note && note.id) {
           ToastEvent.show('Note Saved!', 'success');
         }
         await clearEditor();
+        if (handleBack) {
+          handleBack.remove();
+          handleBack = null;
+        }
         if (noMenu) return true;
         DDS.isTab ? sideMenuRef.current?.openMenu(true) : null;
         sideMenuRef.current?.setGestureEnabled(true);
@@ -443,26 +442,16 @@ const Editor = ({ noMenu }) => {
         ToastEvent.show('Press back again to exit editor', 'success');
         return true;
       }
+    }
   };
 
   useEffect(() => {
-    let handleBack;
     if (!noMenu && DDS.isTab) {
       handleBack = BackHandler.addEventListener('hardwareBackPress', () => {
         simpleDialogEvent(TEMPLATE_EXIT_FULLSCREEN());
         editing.isFullscreen = false;
         return true;
       });
-    } else if (!DDS.isTab) {
-      handleBack = BackHandler.addEventListener(
-        'hardwareBackPress',
-        _onHardwareBackPress,
-      );
-    } else {
-      if (handleBack) {
-        handleBack.remove();
-        handleBack = null;
-      }
     }
 
     return () => {
@@ -470,14 +459,24 @@ const Editor = ({ noMenu }) => {
         handleBack.remove();
         handleBack = null;
       }
-      title = null;
-      content = null;
-      id = null;
-      timer = null;
-      note = {};
     };
   }, [noMenu]);
 
+  useEffect(() => {
+    if (!DDS.isTab) {
+      handleBack = BackHandler.addEventListener(
+        'hardwareBackPress',
+        _onHardwareBackPress,
+      );
+    }
+    return () => {
+      if (handleBack) {
+        handleBack.remove();
+        handleBack = null;
+      }
+    };
+  }, []);
+
   return (
     <SafeAreaView
       style={{
@@ -497,11 +496,13 @@ const Editor = ({ noMenu }) => {
         <View
           style={{
             marginTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight,
-          }}></View>
+          }}
+        />
 
         {noMenu ? null : (
           <TouchableOpacity
             onPress={async () => {
+              editing.currentlyEditing = true;
               if (DDS.isTab) {
                 simpleDialogEvent(TEMPLATE_EXIT_FULLSCREEN());
               } else {
@@ -512,6 +513,10 @@ const Editor = ({ noMenu }) => {
                 await clearEditor();
                 DDS.isTab ? sideMenuRef.current?.openMenu(true) : null;
                 sideMenuRef.current?.setGestureEnabled(true);
+                if (handleBack) {
+                  handleBack.remove();
+                  handleBack = null;
+                }
               }
             }}
             style={{
@@ -597,8 +602,7 @@ const Editor = ({ noMenu }) => {
         <View
           style={{
             paddingHorizontal: 12,
-            marginTop:
-              Platform.OS === 'ios' ? 45 : insets.top + 45,
+            marginTop: Platform.OS === 'ios' ? 45 : insets.top + 45,
             width: '100%',
             position: 'absolute',
             justifyContent: 'flex-start',

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

@@ -167,14 +167,14 @@ export const Notes = ({navigation}) => {
   return (
     <Container
       bottomButtonText="Create a new note"
-      canGoBack={false}
+      canGoBack={params.type === 'color' ? false : true}
+      menu={params.type === 'color' ? true : false}
       heading={
         params.type == 'tag'
           ? '#' + params.title
           : params.title.slice(0, 1).toUpperCase() + params.title.slice(1)
       }
       headerColor={params.type == 'color' ? params.title : null}
-      canGoBack={true}
       data={notes}
       type="notes"
       placeholder={`Search in ${