refactor

2025-12-22 22:49:45 +01:00 · 2020-04-20 10:54:58 +05:00
parent f9131b8032
commit cbb5577b97
6 changed files with 186 additions and 337 deletions
--- a/apps/mobile/App.js
+++ b/apps/mobile/App.js
@@ -46,7 +46,6 @@ const App = () => {
      db.init().then(async () => {
        let user = await db.user.get();
        dispatch({type: ACTIONS.USER, user: user});
-
        setInit(true);
      });
    });
@@ -78,6 +77,7 @@ const App = () => {

      dispatch({type: ACTIONS.SETTINGS, settings: {...s}});
    }
+
    dispatch({type: ACTIONS.THEME, colors: newColors});
  }

--- a/apps/mobile/src/components/NotesList/index.js
+++ b/apps/mobile/src/components/NotesList/index.js
@@ -1,310 +0,0 @@
-import React, {useEffect, useState, createRef} from 'react';
-import {
-  ActivityIndicator,
-  FlatList,
-  Platform,
-  RefreshControl,
-  SectionList,
-  Text,
-  View,
-} from 'react-native';
-import {SIZE, WEIGHT} from '../../common/common';
-import {useTracked} from '../../provider';
-import {ACTIONS} from '../../provider/actions';
-import {eSendEvent} from '../../services/eventManager';
-import {eScrollEvent, eClearSearch} from '../../services/events';
-import {ToastEvent, hexToRGBA, DDS, db} from '../../utils/utils';
-import {NotesPlaceHolder} from '../ListPlaceholders';
-import NoteItem from '../NoteItem';
-import SelectionWrapper from '../SelectionWrapper';
-import {useIsFocused} from 'react-navigation-hooks';
-import {useSafeArea} from 'react-native-safe-area-context';
-
-const sectionListRef = createRef();
-export const NotesList = ({isGrouped = false}) => {
-  const [state, dispatch] = useTracked();
-  const {colors, selectionMode, currentEditingNote, loading, notes} = state;
-  const isFocused = useIsFocused();
-  const [refreshing, setRefreshing] = useState(false);
-  const searchResults = {...state.searchResults};
-  const insets = useSafeArea();
-  const _renderItem = ({item, index}) => (
-    <SelectionWrapper
-      index={index}
-      currentEditingNote={
-        currentEditingNote === item.id ? currentEditingNote : null
-      }
-      item={item}>
-      <NoteItem
-        colors={colors}
-        customStyle={{
-          width: selectionMode ? '90%' : '100%',
-          marginHorizontal: 0,
-        }}
-        currentEditingNote={
-          currentEditingNote === item.id ? currentEditingNote : null
-        }
-        selectionMode={selectionMode}
-        onLongPress={() => {
-          if (!selectionMode) {
-            dispatch({type: ACTIONS.SELECTION_MODE, enabled: true});
-          }
-          dispatch({type: ACTIONS.SELECTED_ITEMS, item: item});
-        }}
-        update={() => {
-          dispatch({type: ACTIONS.NOTES});
-        }}
-        item={item}
-        index={index}
-      />
-    </SelectionWrapper>
-  );
-
-  const _onScroll = event => {
-    if (!event) return;
-    let y = event.nativeEvent.contentOffset.y;
-
-    eSendEvent(eScrollEvent, y);
-  };
-
-  const _ListHeaderComponent = (
-    <View
-      style={{
-        marginTop:
-          Platform.OS == 'ios'
-            ? notes[0] && !selectionMode
-              ? 135
-              : 135 - 60
-            : notes[0] && !selectionMode
-            ? 135
-            : 135 - 60 - insets.top,
-      }}>
-      <PinnedItems />
-    </View>
-  );
-
-  const _ListFooterComponent = notes[0] ? (
-    <View
-      style={{
-        height: 150,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-      <Text
-        style={{
-          color: colors.navbg,
-          fontSize: SIZE.sm,
-          fontFamily: WEIGHT.regular,
-        }}>
-        - End -
-      </Text>
-    </View>
-  ) : null;
-
-  const _ListEmptyComponent = (
-    <View
-      style={{
-        height: '80%',
-        width: '100%',
-        alignItems: 'center',
-        alignSelf: 'center',
-        justifyContent: 'center',
-        opacity: 0.8,
-      }}>
-      {loading ? (
-        <ActivityIndicator size={SIZE.xl} color={colors.accent} />
-      ) : (
-        <>
-          <NotesPlaceHolder colors={colors} />
-          <Text
-            style={{
-              color: colors.icon,
-              fontSize: SIZE.sm,
-              fontFamily: WEIGHT.regular,
-              marginTop: 35,
-            }}>
-            Notes you write will appear here.
-          </Text>
-        </>
-      )}
-    </View>
-  );
-
-  const _renderSectionHeader = ({section: {title}}) => (
-    <Text
-      style={{
-        fontFamily: WEIGHT.bold,
-        fontSize: SIZE.xs + 1,
-        color: colors.accent,
-        paddingHorizontal: 12,
-        width: '100%',
-        alignSelf: 'center',
-        marginTop: 15,
-        paddingBottom: 5,
-      }}>
-      {title}
-    </Text>
-  );
-
-  const _ListHeaderComponent_S = (
-    <View
-      style={{
-        marginTop:
-          Platform.OS == 'ios'
-            ? notes[0] && !selectionMode
-              ? 135
-              : 135 - 60
-            : notes[0] && !selectionMode
-            ? 135
-            : 135 - 60 - insets.top,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 12,
-      }}>
-      <Text
-        style={{
-          fontFamily: WEIGHT.bold,
-          color: colors.accent,
-          fontSize: SIZE.xs,
-        }}>
-        Search Results for {searchResults.keyword}
-      </Text>
-      <Text
-        onPress={() => {
-          eSendEvent(eClearSearch);
-        }}
-        style={{
-          fontFamily: WEIGHT.regular,
-          color: colors.errorText,
-          fontSize: SIZE.xs,
-        }}>
-        Clear
-      </Text>
-    </View>
-  );
-
-  const _listKeyExtractor = (item, index) => item.id.toString();
-
-  return searchResults.type !== 'notes' && isFocused ? (
-    <SectionList
-      ref={sectionListRef}
-      sections={notes}
-      refreshControl={
-        <RefreshControl
-          tintColor={colors.accent}
-          colors={[colors.accent]}
-          progressViewOffset={165}
-          onRefresh={async () => {
-            setRefreshing(true);
-            try {
-              await db.sync();
-              setRefreshing(false);
-              ToastEvent.show('Sync Complete', 'success');
-            } catch (e) {
-              setRefreshing(false);
-              ToastEvent.show(e.message, 'error');
-            }
-            dispatch({type: ACTIONS.NOTES});
-            dispatch({type: ACTIONS.PINNED});
-            let user = await db.user.get();
-            dispatch({type: ACTIONS.USER, user: user});
-          }}
-          refreshing={refreshing}
-        />
-      }
-      keyExtractor={_listKeyExtractor}
-      renderSectionHeader={_renderSectionHeader}
-      onScroll={_onScroll}
-      ListEmptyComponent={_ListEmptyComponent}
-      ListHeaderComponent={_ListHeaderComponent}
-      contentContainerStyle={{
-        width: '100%',
-        alignSelf: 'center',
-        minHeight: '100%',
-      }}
-      style={{
-        height: '100%',
-      }}
-      removeClippedSubviews={true}
-      ListFooterComponent={_ListFooterComponent}
-      renderItem={_renderItem}
-    />
-  ) : (
-    <FlatList
-      data={searchResults.type === 'notes' ? searchResults.results : []}
-      keyExtractor={_listKeyExtractor}
-      ListFooterComponent={_ListFooterComponent}
-      onScroll={_onScroll}
-      ListHeaderComponent={_ListHeaderComponent_S}
-      contentContainerStyle={{
-        width: '100%',
-        alignSelf: 'center',
-        minHeight: '100%',
-      }}
-      style={{
-        height: '100%',
-      }}
-      renderItem={_renderItem}
-    />
-  );
-};
-
-const PinnedItems = () => {
-  const [state, dispatch] = useTracked();
-  const {pinned, colors, selectionMode} = state;
-
-  useEffect(() => {
-    dispatch({type: ACTIONS.PINNED});
-  }, []);
-
-  return (
-    <>
-      <FlatList
-        data={pinned.notes}
-        keyExtractor={(item, index) => item.id.toString()}
-        renderItem={({item, index}) =>
-          item.type === 'note' ? (
-            <SelectionWrapper
-              index={index}
-              currentEditingNote={false}
-              pinned={true}
-              background={
-                Platform.ios
-                  ? hexToRGBA(colors.accent + '19')
-                  : hexToRGBA(colors.shade)
-              }
-              item={item}>
-              <NoteItem
-                colors={colors}
-                customStyle={{
-                  width: selectionMode ? '90%' : '100%',
-                  marginHorizontal: 0,
-                  paddingTop: 15,
-                  paddingRight: 18,
-                  marginBottom: 10,
-                  marginTop: 15,
-                  borderBottomWidth: 0,
-                }}
-                currentEditingNote={false}
-                pinned={true}
-                selectionMode={selectionMode}
-                onLongPress={() => {
-                  if (!selectionMode) {
-                    dispatch({type: ACTIONS.SELECTION_MODE, enabled: true});
-                  }
-                  dispatch({type: ACTIONS.SELECTED_ITEMS, item: item});
-                }}
-                update={() => {
-                  dispatch({type: ACTIONS.NOTES});
-                }}
-                item={item}
-                index={index}
-              />
-            </SelectionWrapper>
-          ) : null
-        }
-      />
-    </>
-  );
-};
--- a/apps/mobile/src/components/SimpleList/index.js
+++ b/apps/mobile/src/components/SimpleList/index.js
@@ -1,5 +1,12 @@
-import React from 'react';
-import {FlatList, Platform, RefreshControl, Text, View} from 'react-native';
+import React, {createRef} from 'react';
+import {
+  FlatList,
+  Platform,
+  RefreshControl,
+  Text,
+  View,
+  SectionList,
+} from 'react-native';
 import {SIZE, WEIGHT} from '../../common/common';
 import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
@@ -9,7 +16,8 @@ import {hexToRGBA} from '../../utils/utils';
 import {NotebookItem} from '../NotebookItem';
 import SelectionWrapper from '../SelectionWrapper';
 import {useSafeArea} from 'react-native-safe-area-context';
-
+import NoteItem from '../NoteItem';
+const sectionListRef = createRef();
 const SimpleList = ({
  data,
  type,
@@ -23,6 +31,7 @@ const SimpleList = ({
  isMove,
  hideMore,
  noteToMove,
+  isHome = false,
 }) => {
  const [state, dispatch] = useTracked();
  const {colors, selectionMode} = state;
@@ -53,6 +62,22 @@ const SimpleList = ({
    </View>
  ) : null;

+  const _renderSectionHeader = ({section: {title}}) => (
+    <Text
+      style={{
+        fontFamily: WEIGHT.bold,
+        fontSize: SIZE.xs + 1,
+        color: colors.accent,
+        paddingHorizontal: 12,
+        width: '100%',
+        alignSelf: 'center',
+        marginTop: 15,
+        paddingBottom: 5,
+      }}>
+      {title}
+    </Text>
+  );
+
  const _ListHeaderComponent_S =
    searchResults.type === type && searchResults.results.length > 0 ? (
      <View
@@ -63,8 +88,8 @@ const SimpleList = ({
                ? 135
                : 135 - 60
              : data[0] && !selectionMode
-              ? 135 - insets.top
-              : 135 - insets.top - 60,
+              ? 155 - insets.top
+              : 155 - insets.top - 60,
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
@@ -99,8 +124,8 @@ const SimpleList = ({
                ? 135
                : 135 - 60
              : data[0] && !selectionMode
-              ? 155
-              : 155 - 60,
+              ? 155 - insets.top
+              : 155 - 60 - insets.top,
        }}>
        {pinned && pinned.notebooks && pinned.notebooks.length > 0 ? (
          <>
@@ -148,7 +173,48 @@ const SimpleList = ({
                      colors={colors}
                    />
                  </SelectionWrapper>
-                ) : null
+                ) : (
+                  <SelectionWrapper
+                    index={index}
+                    currentEditingNote={false}
+                    pinned={true}
+                    background={
+                      Platform.ios
+                        ? hexToRGBA(colors.accent + '19')
+                        : hexToRGBA(colors.shade)
+                    }
+                    item={item}>
+                    <NoteItem
+                      colors={colors}
+                      customStyle={{
+                        width: selectionMode ? '90%' : '100%',
+                        marginHorizontal: 0,
+                        paddingTop: 15,
+                        paddingRight: 18,
+                        marginBottom: 10,
+                        marginTop: 15,
+                        borderBottomWidth: 0,
+                      }}
+                      currentEditingNote={false}
+                      pinned={true}
+                      selectionMode={selectionMode}
+                      onLongPress={() => {
+                        if (!selectionMode) {
+                          dispatch({
+                            type: ACTIONS.SELECTION_MODE,
+                            enabled: true,
+                          });
+                        }
+                        dispatch({type: ACTIONS.SELECTED_ITEMS, item: item});
+                      }}
+                      update={() => {
+                        dispatch({type: ACTIONS.NOTES});
+                      }}
+                      item={item}
+                      index={index}
+                    />
+                  </SelectionWrapper>
+                )
              }
            />
          </>
@@ -184,7 +250,37 @@ const SimpleList = ({
  const _listKeyExtractor = (item, index) =>
    item.id.toString() + index.toString();

-  return (
+  return isHome && searchResults.type !== 'notes' ? (
+    <SectionList
+      ref={sectionListRef}
+      sections={data}
+      refreshControl={
+        <RefreshControl
+          tintColor={colors.accent}
+          colors={[colors.accent]}
+          progressViewOffset={165}
+          onRefresh={onRefresh}
+          refreshing={refreshing}
+        />
+      }
+      keyExtractor={_listKeyExtractor}
+      renderSectionHeader={_renderSectionHeader}
+      onScroll={_onScroll}
+      ListEmptyComponent={_ListEmptyComponent}
+      ListHeaderComponent={_ListHeaderComponent_S}
+      contentContainerStyle={{
+        width: '100%',
+        alignSelf: 'center',
+        minHeight: '100%',
+      }}
+      style={{
+        height: '100%',
+      }}
+      removeClippedSubviews={true}
+      ListFooterComponent={_ListFooterComponent}
+      renderItem={renderItem}
+    />
+  ) : (
    <FlatList
      data={
        searchResults.type === type &&
--- a/apps/mobile/src/provider/reducer.js
+++ b/apps/mobile/src/provider/reducer.js
@@ -1,6 +1,6 @@
-import { history, db } from '../utils/utils';
-import { ACTIONS } from './actions';
-import { sideMenuRef } from '../utils/refs';
+import {history, db} from '../utils/utils';
+import {ACTIONS} from './actions';
+import {sideMenuRef} from '../utils/refs';
 import storage from '../utils/storage';

 export const reducer = (state, action) => {
@@ -32,13 +32,13 @@ export const reducer = (state, action) => {
        trash: [],
        pinned: {
          notes: [],
-          notebooks: []
+          notebooks: [],
        },
        tags: [],
        favorites: [],
        colorNotes: [],
-        user: null
-      }
+        user: null,
+      };
    }
    case ACTIONS.NOTES:
      let notes;
@@ -56,7 +56,7 @@ export const reducer = (state, action) => {
    case ACTIONS.THEME: {
      return {
        ...state,
-        colors: { ...action.colors },
+        colors: {...action.colors},
      };
    }
    case ACTIONS.USER: {
@@ -75,7 +75,7 @@ export const reducer = (state, action) => {
    case ACTIONS.SETTINGS: {
      return {
        ...state,
-        settings: { ...action.settings },
+        settings: {...action.settings},
      };
    }
    case ACTIONS.TRASH: {
@@ -185,7 +185,7 @@ export const reducer = (state, action) => {
      let results = action.results;
      return {
        ...state,
-        searchResults: { ...results },
+        searchResults: {...results},
      };
    }
    default:
--- a/apps/mobile/src/views/Home/index.js
+++ b/apps/mobile/src/views/Home/index.js
@@ -1,7 +1,6 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import {useIsFocused} from 'react-navigation-hooks';
 import Container from '../../components/Container';
-import {NotesList} from '../../components/NotesList';
 import SelectionHeader from '../../components/SelectionHeader';
 import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
@@ -10,11 +9,16 @@ import {DDS} from '../../utils/utils';
 import {eScrollEvent, eOnLoadNote} from '../../services/events';
 import {openEditorAnimation} from '../../utils/animations';
 import {sideMenuRef} from '../../utils/refs';
+import SimpleList from '../../components/SimpleList';
+import {NotesPlaceHolder} from '../../components/ListPlaceholders';
+import SelectionWrapper from '../../components/SelectionWrapper';
+import NoteItem from '../../components/NoteItem';
 let count = 0;

 export const Home = ({navigation}) => {
  const [state, dispatch] = useTracked();
-  const {notes} = state;
+  const [refreshing, setRefreshing] = useState(false);
+  const {colors, selectionMode, currentEditingNote, loading, notes} = state;
  const isFocused = useIsFocused();

  useEffect(() => {
@@ -30,6 +34,54 @@ export const Home = ({navigation}) => {
    dispatch({type: ACTIONS.NOTES});
  }, [isFocused]);

+  const _onRefresh = async () => {
+    setRefreshing(true);
+    try {
+      await db.sync();
+      setRefreshing(false);
+      ToastEvent.show('Sync Complete', 'success');
+    } catch (e) {
+      setRefreshing(false);
+      ToastEvent.show(e.message, 'error');
+    }
+    dispatch({type: ACTIONS.NOTES});
+    dispatch({type: ACTIONS.PINNED});
+    let user = await db.user.get();
+    dispatch({type: ACTIONS.USER, user: user});
+  };
+
+  const _renderItem = ({item, index}) => (
+    <SelectionWrapper
+      index={index}
+      currentEditingNote={
+        currentEditingNote === item.id ? currentEditingNote : null
+      }
+      item={item}>
+      <NoteItem
+        colors={colors}
+        customStyle={{
+          width: selectionMode ? '90%' : '100%',
+          marginHorizontal: 0,
+        }}
+        currentEditingNote={
+          currentEditingNote === item.id ? currentEditingNote : null
+        }
+        selectionMode={selectionMode}
+        onLongPress={() => {
+          if (!selectionMode) {
+            dispatch({type: ACTIONS.SELECTION_MODE, enabled: true});
+          }
+          dispatch({type: ACTIONS.SELECTED_ITEMS, item: item});
+        }}
+        update={() => {
+          dispatch({type: ACTIONS.NOTES});
+        }}
+        item={item}
+        index={index}
+      />
+    </SelectionWrapper>
+  );
+
  return (
    <Container
      bottomButtonText="Create a new note"
@@ -53,7 +105,17 @@ export const Home = ({navigation}) => {
      data={notes ? notes : []}>
      <SelectionHeader />

-      <NotesList />
+      <SimpleList
+        data={notes}
+        type="notes"
+        isHome={true}
+        refreshing={refreshing}
+        focused={isFocused}
+        onRefresh={_onRefresh}
+        renderItem={_renderItem}
+        placeholder={<NotesPlaceHolder colors={colors} />}
+        placeholderText={`Notes you write appear here`}
+      />
    </Container>
  );
 };
--- a/apps/mobile/src/views/Trash/index.js
+++ b/apps/mobile/src/views/Trash/index.js
@@ -14,8 +14,10 @@ import {TEMPLATE_EMPTY_TRASH} from '../../components/DialogManager/templates';

 export const Trash = ({navigation}) => {
  const [state, dispatch] = useTracked();
-  const {colors, selectionMode, trash} = state;
+  const {colors, selectionMode} = state;
+  const trash = [...trash];
  const [refreshing, setRefreshing] = useState(false);
+
  const isFocused = useIsFocused();
  useEffect(() => {
    if (isFocused) {
@@ -87,15 +89,14 @@ export const Trash = ({navigation}) => {
    setRefreshing(true);
    try {
      await db.sync();
-
-      dispatch({type: ACTIONS.TRASH});
-      dispatch({type: ACTIONS.USER});
      setRefreshing(false);
      ToastEvent.show('Sync Complete', 'success');
    } catch (e) {
      setRefreshing(false);
      ToastEvent.show('Sync failed, network error', 'error');
    }
+    dispatch({type: ACTIONS.TRASH});
+    dispatch({type: ACTIONS.USER});
  };

  return (