refactor

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

@@ -59,9 +59,19 @@ export const TEMPLATE_EXIT = type => {
   };
 };
 
+export const TEMPLATE_EMPTY_TRASH = {
+  title: 'Empty Trash',
+  paragraph: 'Are you sure you want to clear the trash?',
+  icon: 'trash',
+  positiveText: 'Clear',
+  negativeText: 'Cancel',
+  action: dialogActions.ACTION_EMPTY_TRASH,
+};
+
 export const dialogActions = {
   ACTION_DELETE: 511,
   ACTION_EXIT: 512,
+  ACTION_EMPTY_TRASH: 513,
 };
 
 export class DialogManager extends Component {

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

@@ -12,6 +12,7 @@ import {useAppContext} from '../../provider/useAppContext';
 import {AddNotebookDialog} from '../AddNotebookDialog';
 import ActionSheet from '../ActionSheet';
 import {ActionSheetComponent} from '../ActionSheetComponent';
+import {useTracked} from '../../provider';
 
 export const NotebookItem = ({
   item,
@@ -175,27 +176,29 @@ export const NotebookItem = ({
                 width: '80%',
                 maxWidth: '80%',
               }}>
-              {item.topics.slice(1, 4).map(topic => (
+              {item && item.topics
-                <View
+                ? item.topics.slice(1, 4).map(topic => (
-                  style={{
+                    <View
-                    borderRadius: 5,
+                      style={{
-                    backgroundColor: colors.accent,
+                        borderRadius: 5,
-                    paddingHorizontal: ph / 1.5,
+                        backgroundColor: colors.accent,
-                    paddingVertical: pv / 4,
+                        paddingHorizontal: ph / 1.5,
-                    marginRight: 10,
+                        paddingVertical: pv / 4,
-                  }}>
+                        marginRight: 10,
-                  <Text
+                      }}>
-                    numberOfLines={1}
+                      <Text
-                    style={{
+                        numberOfLines={1}
-                      color: 'white',
+                        style={{
-                      fontFamily: WEIGHT.regular,
+                          color: 'white',
-                      fontSize: SIZE.xxs,
+                          fontFamily: WEIGHT.regular,
-                      maxWidth: '100%',
+                          fontSize: SIZE.xxs,
-                    }}>
+                          maxWidth: '100%',
-                    {topic.title}
+                        }}>
-                  </Text>
+                        {topic.title}
-                </View>
+                      </Text>
-              ))}
+                    </View>
+                  ))
+                : null}
             </View>
           )}
 

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import {View, Text, FlatList, Platform, SectionList} from 'react-native';
 import {SIZE, WEIGHT} from '../../common/common';
 import NoteItem from '../NoteItem';
@@ -7,20 +7,18 @@ import {slideRight, slideLeft} from '../../utils/animations';
 import {w} from '../../utils/utils';
 import SelectionWrapper from '../SelectionWrapper';
 
-import {useTracked} from '../../provider';
+import {useTracked, ACTIONS} from '../../provider';
 
 export const NotesList = ({
   onScroll,
   isSearch = false,
   isGrouped = false,
   refresh = () => {},
+  searchResults,
 }) => {
   const [state, dispatch] = useTracked();
-  const {colors, selectionMode, pinned, selectedItemsList} = state;
+  const {colors, selectionMode} = state;
   const notes = [...state.notes];
-  ///
-  const updateSelectionList = () => {};
-  const changeSelectionMode = () => {};
 
   const _renderItem = ({item, index}) => (
     <SelectionWrapper item={item}>
@@ -31,11 +29,11 @@ export const NotesList = ({
           marginHorizontal: 0,
         }}
         onLongPress={() => {
-          changeSelectionMode(!selectionMode);
+          dispatch({type: ACTIONS.SELECTION_MODE, enabled: !selectionMode});
-          updateSelectionList(item);
+          dispatch({type: ACTIONS.SELECTED_ITEMS, item: item});
         }}
         update={() => {
-          dispatch({type: 'updateNotes'});
+          dispatch({type: ACTIONS.NOTES});
         }}
         item={item}
         index={index}
@@ -61,35 +59,7 @@ export const NotesList = ({
             ? 155
             : 155 - 60,
       }}>
-      {pinned && pinned.length > 0 ? (
+      <PinnedItems />
-        <>
-          <FlatList
-            data={pinned}
-            keyExtractor={(item, index) => item.dateCreated.toString()}
-            renderItem={({item, index}) =>
-              item.type === 'note' ? (
-                <NoteItem
-                  colors={colors}
-                  customStyle={{
-                    backgroundColor: colors.shade,
-                    width: '100%',
-                    paddingHorizontal: '5%',
-                    paddingTop: 20,
-                    marginHorizontal: 0,
-                    marginBottom: 10,
-                    paddingHorizontal: 12,
-                    marginTop: 20,
-                    borderBottomWidth: 0,
-                  }}
-                  pinned={true}
-                  item={item}
-                  index={index}
-                />
-              ) : null
-            }
-          />
-        </>
-      ) : null}
     </View>
   );
 
@@ -111,39 +81,38 @@ export const NotesList = ({
     </View>
   ) : null;
 
-  const _ListEmptyComponent =
+  const _ListEmptyComponent = (
-    pinned && pinned.length > 0 ? null : (
+    <View
-      <View
+      style={{
+        height: '80%',
+        width: '100%',
+        alignItems: 'center',
+        alignSelf: 'center',
+        justifyContent: 'center',
+        opacity: 0.8,
+      }}>
+      <NotesPlaceHolder animation={slideRight} colors={colors} />
+      <NotesPlaceHolder animation={slideLeft} colors={colors} />
+      <NotesPlaceHolder animation={slideRight} colors={colors} />
+      <Text
         style={{
-          height: '80%',
+          color: colors.icon,
-          width: '100%',
+          fontSize: SIZE.md,
-          alignItems: 'center',
+          fontFamily: WEIGHT.regular,
-          alignSelf: 'center',
+          marginTop: 20,
-          justifyContent: 'center',
-          opacity: 0.8,
         }}>
-        <NotesPlaceHolder animation={slideRight} colors={colors} />
+        Notes you write will appear here.
-        <NotesPlaceHolder animation={slideLeft} colors={colors} />
+      </Text>
-        <NotesPlaceHolder animation={slideRight} colors={colors} />
+      <Text
-        <Text
+        style={{
-          style={{
+          fontSize: SIZE.sm,
-            color: colors.icon,
+          color: colors.icon,
-            fontSize: SIZE.md,
+          marginTop: 20,
-            fontFamily: WEIGHT.regular,
+        }}>
-            marginTop: 20,
+        No notes found
-          }}>
+      </Text>
-          Notes you write will appear here.
+    </View>
-        </Text>
+  );
-        <Text
-          style={{
-            fontSize: SIZE.sm,
-            color: colors.icon,
-            marginTop: 20,
-          }}>
-          No notes found
-        </Text>
-      </View>
-    );
 
   const _renderSectionHeader = ({section: {title}}) => (
     <Text
@@ -199,7 +168,7 @@ export const NotesList = ({
     />
   ) : (
     <FlatList
-      data={notes}
+      data={searchResults}
       keyExtractor={_listKeyExtractor}
       ListFooterComponent={_ListFooterComponent}
       onScroll={_onScroll}
@@ -216,3 +185,42 @@ export const NotesList = ({
     />
   );
 };
+
+const PinnedItems = () => {
+  const [state, dispatch] = useTracked();
+  const {pinned, colors} = state;
+
+  useEffect(() => {
+    dispatch({type: ACTIONS.PINNED});
+  }, []);
+
+  return (
+    <>
+      <FlatList
+        data={pinned}
+        keyExtractor={(item, index) => item.dateCreated.toString()}
+        renderItem={({item, index}) =>
+          item.type === 'note' ? (
+            <NoteItem
+              colors={colors}
+              customStyle={{
+                backgroundColor: colors.shade,
+                width: '100%',
+                paddingHorizontal: '5%',
+                paddingTop: 20,
+                marginHorizontal: 0,
+                marginBottom: 10,
+                paddingHorizontal: 12,
+                marginTop: 20,
+                borderBottomWidth: 0,
+              }}
+              pinned={true}
+              item={item}
+              index={index}
+            />
+          ) : null
+        }
+      />
+    </>
+  );
+};

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

@@ -1,11 +1,18 @@
 import React from 'react';
-import {SafeAreaView, TouchableOpacity, View, Text} from 'react-native';
+import {
+  SafeAreaView,
+  TouchableOpacity,
+  View,
+  Text,
+  StatusBar,
+  Platform,
+} from 'react-native';
 import {SIZE, WEIGHT} from '../../common/common';
 import {w} from '../../utils/utils';
 import Icon from 'react-native-vector-icons/Feather';
 import * as Animatable from 'react-native-animatable';
 import {useAppContext} from '../../provider/useAppContext';
-import {useTracked} from '../../provider';
+import {useTracked, ACTIONS} from '../../provider';
 
 export const AnimatedSafeAreaView = Animatable.createAnimatableComponent(
   SafeAreaView,
@@ -16,11 +23,6 @@ export const SelectionHeader = ({navigation}) => {
   const [state, dispatch] = useTracked();
   const {colors, selectionMode, selectedItemsList} = state;
 
-  ///
-  const updateDB = () => {};
-  const updateSelectionList = () => {};
-  const changeSelectionMode = () => {};
-
   // Render
 
   return (
@@ -30,8 +32,10 @@ export const SelectionHeader = ({navigation}) => {
       style={{
         width: '100%',
         position: 'absolute',
-        height: selectionMode ? 50 : 0,
+        height: selectionMode ? 50 + StatusBar.currentHeight : 0,
         opacity: selectionMode ? 1 : 0,
+        backgroundColor: colors.bg,
+        paddingTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight,
         justifyContent: 'flex-end',
         zIndex: 11,
       }}>
@@ -52,7 +56,7 @@ export const SelectionHeader = ({navigation}) => {
           }}>
           <TouchableOpacity
             onPress={() => {
-              changeSelectionMode(false);
+              dispatch({type: ACTIONS.SELECTION_MODE, enabled: !selectionMode});
             }}
             hitSlop={{top: 20, bottom: 20, left: 50, right: 40}}
             style={{

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

@@ -3,16 +3,12 @@ import {View, TouchableOpacity} from 'react-native';
 import {SIZE} from '../../common/common';
 import Icon from 'react-native-vector-icons/Feather';
 import {w} from '../../utils/utils';
-import {useTracked} from '../../provider';
+import {useTracked, ACTIONS} from '../../provider';
 
 const SelectionWrapper = ({children, item}) => {
   const [state, dispatch] = useTracked();
   const {colors, selectionMode, selectedItemsList} = state;
 
-  ///
-  const updateDB = () => {};
-  const updateSelectionList = () => {};
-  const changeSelectionMode = () => {};
   return (
     <View
       style={{
@@ -24,7 +20,9 @@ const SelectionWrapper = ({children, item}) => {
         marginHorizontal: 12,
       }}>
       <TouchableOpacity
-        onPress={() => updateSelectionList(item)}
+        onPress={() => {
+          dispatch({type: ACTIONS.SELECTED_ITEMS, item: item});
+        }}
         style={{
           width: 50,
           height: 70,