refactor

2025-12-22 22:49:45 +01:00 · 2020-01-18 00:46:29 +05:00
parent 6609f59383
commit 86ec252f20
5 changed files with 129 additions and 106 deletions
--- a/apps/mobile/src/components/DialogManager/index.js
+++ b/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 {
--- a/apps/mobile/src/components/NotebookItem/index.js
+++ b/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 => (
-                <View
-                  style={{
-                    borderRadius: 5,
-                    backgroundColor: colors.accent,
-                    paddingHorizontal: ph / 1.5,
-                    paddingVertical: pv / 4,
-                    marginRight: 10,
-                  }}>
-                  <Text
-                    numberOfLines={1}
-                    style={{
-                      color: 'white',
-                      fontFamily: WEIGHT.regular,
-                      fontSize: SIZE.xxs,
-                      maxWidth: '100%',
-                    }}>
-                    {topic.title}
-                  </Text>
-                </View>
-              ))}
+              {item && item.topics
+                ? item.topics.slice(1, 4).map(topic => (
+                    <View
+                      style={{
+                        borderRadius: 5,
+                        backgroundColor: colors.accent,
+                        paddingHorizontal: ph / 1.5,
+                        paddingVertical: pv / 4,
+                        marginRight: 10,
+                      }}>
+                      <Text
+                        numberOfLines={1}
+                        style={{
+                          color: 'white',
+                          fontFamily: WEIGHT.regular,
+                          fontSize: SIZE.xxs,
+                          maxWidth: '100%',
+                        }}>
+                        {topic.title}
+                      </Text>
+                    </View>
+                  ))
+                : null}
            </View>
          )}

--- a/apps/mobile/src/components/NotesList/index.js
+++ b/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);
-          updateSelectionList(item);
+          dispatch({type: ACTIONS.SELECTION_MODE, enabled: !selectionMode});
+          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 ? (
-        <>
-          <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}
+      <PinnedItems />
    </View>
  );

@@ -111,39 +81,38 @@ export const NotesList = ({
    </View>
  ) : null;

-  const _ListEmptyComponent =
-    pinned && pinned.length > 0 ? null : (
-      <View
+  const _ListEmptyComponent = (
+    <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%',
-          width: '100%',
-          alignItems: 'center',
-          alignSelf: 'center',
-          justifyContent: 'center',
-          opacity: 0.8,
+          color: colors.icon,
+          fontSize: SIZE.md,
+          fontFamily: WEIGHT.regular,
+          marginTop: 20,
        }}>
-        <NotesPlaceHolder animation={slideRight} colors={colors} />
-        <NotesPlaceHolder animation={slideLeft} colors={colors} />
-        <NotesPlaceHolder animation={slideRight} colors={colors} />
-        <Text
-          style={{
-            color: colors.icon,
-            fontSize: SIZE.md,
-            fontFamily: WEIGHT.regular,
-            marginTop: 20,
-          }}>
-          Notes you write will appear here.
-        </Text>
-        <Text
-          style={{
-            fontSize: SIZE.sm,
-            color: colors.icon,
-            marginTop: 20,
-          }}>
-          No notes found
-        </Text>
-      </View>
-    );
+        Notes you write will appear here.
+      </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
+        }
+      />
+    </>
+  );
+};
--- a/apps/mobile/src/components/SelectionHeader/index.js
+++ b/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={{
--- a/apps/mobile/src/components/SelectionWrapper/index.js
+++ b/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,