remove duplicate code.

2026-02-24 12:12:54 +01:00 · 2019-12-09 17:03:49 +05:00
parent 10b2486ff2
commit 521289df5f
12 changed files with 158 additions and 197 deletions
--- a/apps/mobile/src/components/NoteItem/index.js
+++ b/apps/mobile/src/components/NoteItem/index.js
@@ -244,7 +244,7 @@ const NoteItem = props => {
          <MenuItem
            onPress={() => {
              hideMenu();
-              NavigationService.navigate('Folders', {
+              NavigationService.push('Folders', {
                note: item,
                title: 'Choose Notebook',
                isMove: true,
--- a/apps/mobile/src/components/NotesList/index.js
+++ b/apps/mobile/src/components/NotesList/index.js
@@ -40,6 +40,7 @@ export const NotesList = ({
    <>
      <FlatList
        data={notes}
+        keyExtractor={(item, index) => item.dateCreated.toString()}
        ListFooterComponent={
          <View
            style={{
--- a/apps/mobile/src/components/Recents/index.js
+++ b/apps/mobile/src/components/Recents/index.js
@@ -1,102 +0,0 @@
-// Component to be removed soon.
-
-import React, {useState, useEffect} from 'react';
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  ScrollView,
-  Dimensions,
-  FlatList,
-  Platform,
-} from 'react-native';
-
-import {
-  COLOR_SCHEME,
-  SIZE,
-  br,
-  ph,
-  pv,
-  opacity,
-  FONT,
-  WEIGHT,
-  onThemeUpdate,
-  clearThemeUpdateListener,
-} from '../../common/common';
-
-import Icon from 'react-native-vector-icons/Feather';
-import {Reminder} from '../Reminder';
-import {getElevation} from '../../utils/utils';
-import NoteItem from '../NoteItem';
-import NavigationService from '../../services/NavigationService';
-import {storage} from '../../../App';
-
-export const RecentList = ({update, onScroll, margin}) => {
-  const [colors, setColors] = useState(COLOR_SCHEME);
-  const [notes, setNotes] = useState([]);
-  const fetchNotes = async () => {
-    let allNotes = await storage.getNotes();
-    console.log(allNotes);
-    if (allNotes) {
-      setNotes(allNotes);
-    }
-  };
-  useEffect(() => {
-    fetchNotes();
-  }, [update]);
-
-  useEffect(() => {
-    onThemeUpdate(() => {
-      setColors(COLOR_SCHEME);
-    });
-    return () => {
-      clearThemeUpdateListener(() => {
-        setColors(COLOR_SCHEME);
-      });
-    };
-  }, []);
-
-  return (
-    <>
-      <FlatList
-        data={notes}
-        onScroll={event => {
-          y = event.nativeEvent.contentOffset.y;
-          onScroll(y);
-        }}
-        style={{
-          height: '100%',
-          width: '100%',
-        }}
-        ListHeaderComponent={
-          <View
-            style={{
-              marginTop: margin,
-            }}
-          />
-        }
-        ListFooterComponent={
-          <View
-            style={{
-              height: 150,
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}>
-            <Text
-              style={{
-                color: colors.navbg,
-                fontSize: SIZE.sm,
-                fontFamily: WEIGHT.regular,
-              }}>
-              - End -
-            </Text>
-          </View>
-        }
-        keyExtractor={(item, index) => item.dateCreated.toString()}
-        renderItem={({item, index}) => (
-          <NoteItem refresh={fetchNotes} item={item} index={index} />
-        )}
-      />
-    </>
-  );
-};
--- a/apps/mobile/src/components/SearchInput/index.js
+++ b/apps/mobile/src/components/SearchInput/index.js
@@ -55,6 +55,7 @@ export const Search = props => {
          ref={inputRef}
          style={{
            fontFamily: WEIGHT.regular,
+            color: colors.pri,
            maxWidth: '90%',
            width: '90%',
            fontSize: SIZE.md,
--- a/apps/mobile/src/services/NavigationService.js
+++ b/apps/mobile/src/services/NavigationService.js
@@ -1,4 +1,8 @@
-import {createAppContainer, NavigationActions} from 'react-navigation';
+import {
+  createAppContainer,
+  NavigationActions,
+  StackActions,
+} from 'react-navigation';
 import {createStackNavigator} from 'react-navigation-stack';
 import Home from '../views/Home/index';
 import Editor from '../views/Editor';
@@ -81,7 +85,9 @@ const TopLevelNavigator = createStackNavigator(
  },
  {
    initialRouteName: 'Home',
-    cardStyle: false,
+    defaultNavigationOptions: {
+      gesturesEnabled: false,
+    },
  },
 );

@@ -102,9 +108,19 @@ function navigate(routeName, params) {
  );
 }

+function push(routeName, params) {
+  _navigator.dispatch(
+    StackActions.push({
+      routeName,
+      params,
+    }),
+  );
+}
+
 // add other navigation functions that you need and export them

 export default {
  navigate,
+  push,
  setTopLevelNavigator,
 };
--- a/apps/mobile/src/views/AccountSettings/index.js
+++ b/apps/mobile/src/views/AccountSettings/index.js
@@ -29,6 +29,7 @@ import {ListItem} from '../../components/ListItem';
 import {Header} from '../../components/header';
 import NoteItem from '../../components/NoteItem';
 import {useForceUpdate} from '../ListsEditor';
+import {AnimatedSafeAreaView} from '../Home';

 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
@@ -47,7 +48,9 @@ export const AccountSettings = ({navigation}) => {
    };
  }, []);
  return (
-    <SafeAreaView
+    <AnimatedSafeAreaView
+      transition="backgroundColor"
+      duration={1000}
      style={{
        height: '100%',
        backgroundColor: colors.bg,
@@ -169,7 +172,7 @@ export const AccountSettings = ({navigation}) => {
          Logout
        </Text>
      </TouchableOpacity>
-    </SafeAreaView>
+    </AnimatedSafeAreaView>
  );
 };

--- a/apps/mobile/src/views/Favorites/index.js
+++ b/apps/mobile/src/views/Favorites/index.js
@@ -27,6 +27,7 @@ import {Reminder} from '../../components/Reminder';
 import {ListItem} from '../../components/ListItem';
 import {Header} from '../../components/header';
 import {useForceUpdate} from '../ListsEditor';
+import {AnimatedSafeAreaView} from '../Home';

 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
@@ -46,9 +47,15 @@ export const Favorites = ({navigation}) => {
    };
  }, []);
  return (
-    <SafeAreaView>
+    <AnimatedSafeAreaView
+      transition="backgroundColor"
+      duration={1000}
+      style={{
+        height: '100%',
+        backgroundColor: colors.bg,
+      }}>
      <Header colors={colors} heading="Favorites" canGoBack={false} />
-    </SafeAreaView>
+    </AnimatedSafeAreaView>
  );
 };

--- a/apps/mobile/src/views/Folders/index.js
+++ b/apps/mobile/src/views/Folders/index.js
@@ -35,7 +35,9 @@ import {NotebookItem} from '../../components/NotebookItem';
 import {Search} from '../../components/SearchInput';
 import {storage} from '../../../App';
 import {Header} from '../../components/header';
-
+import {AnimatedSafeAreaView} from '../Home';
+import * as Animatable from 'react-native-animatable';
+import {NavigationEvents} from 'react-navigation';
 export const Folders = ({navigation}) => {
  const [colors, setColors] = useState(COLOR_SCHEME);
  const [addNotebook, setAddNotebook] = useState(false);
@@ -82,11 +84,18 @@ export const Folders = ({navigation}) => {
  }, []);

  return (
-    <SafeAreaView
+    <AnimatedSafeAreaView
+      transition="backgroundColor"
+      duration={1000}
      style={{
        height: '100%',
        backgroundColor: colors.bg,
      }}>
+      <NavigationEvents
+        onDidBlur={() => {
+          marginSet = false;
+        }}
+      />
      <AddNotebookDialog
        visible={addNotebook}
        close={newNotes => {
@@ -100,7 +109,9 @@ export const Folders = ({navigation}) => {
        style={{
          height: '100%',
        }}>
-        <View
+        <Animatable.View
+          transition="backgroundColor"
+          duration={1000}
          style={{
            position: 'absolute',
            backgroundColor: colors.bg,
@@ -127,7 +138,7 @@ export const Folders = ({navigation}) => {
            placeholder="Search your notebook"
            hide={hideHeader}
          />
-        </View>
+        </Animatable.View>

        <FlatList
          style={{
@@ -200,7 +211,7 @@ export const Folders = ({navigation}) => {
          </Text>
        </TouchableOpacity>
      </KeyboardAvoidingView>
-    </SafeAreaView>
+    </AnimatedSafeAreaView>
  );
 };

--- a/apps/mobile/src/views/Home/index.js
+++ b/apps/mobile/src/views/Home/index.js
@@ -21,7 +21,6 @@ import {
 } from '../../common/common';
 import {styles} from './styles';
 import {Search} from '../../components/SearchInput';
-import {RecentList} from '../../components/Recents';
 import {w, h} from '../../utils/utils';
 import {Header} from '../../components/header';
 import {NavigationEvents} from 'react-navigation';
@@ -29,7 +28,6 @@ import {NotesList} from '../../components/NotesList';
 import {storage} from '../../../App';
 import Icon from 'react-native-vector-icons/Feather';
 import NavigationService from '../../services/NavigationService';
-import {ScrollView} from 'react-native-gesture-handler';
 import {useForceUpdate} from '../ListsEditor';
 import * as Animatable from 'react-native-animatable';

@@ -41,13 +39,14 @@ export const Home = ({navigation}) => {
  // State
  const [loading, setLoading] = useState(true);
  const [colors, setColors] = useState(COLOR_SCHEME);
-  const [hidden, setHidden] = useState(false);
+  const [search, setSearch] = useState(false);
  const [text, setText] = useState('');
-  const [searchResults, setSearchResults] = useState([]);
  const [update, setUpdate] = useState(0);
  const [hideHeader, setHideHeader] = useState(false);
  const [margin, setMargin] = useState(150);
  const [buttonHide, setButtonHide] = useState(false);
+  const [notes, setNotes] = useState([]);
+  const [keyword, setKeyword] = useState('');
  const forceUpdate = useForceUpdate();

  // Variables
@@ -57,6 +56,9 @@ export const Home = ({navigation}) => {
  let headerHeight = 0;
  let searchHeight = 0;
  let marginSet = false;
+  let searchResults = null;
+  let allNotes = [];
+
  // Effects

  useEffect(() => {
@@ -76,6 +78,10 @@ export const Home = ({navigation}) => {
    };
  }, []);

+  useEffect(() => {
+    fetchNotes();
+  }, []);
+
  useEffect(() => {
    Keyboard.addListener('keyboardDidShow', () => {
      setButtonHide(true);
@@ -104,29 +110,45 @@ export const Home = ({navigation}) => {
  };
  const onSubmitEditing = async () => {
    if (!text || text.length < 1) {
-      setHidden(false);
+      setSearch(false);
+      if (allNotes) {
+        setNotes(allNotes);
+      } else {
+        fetchNotes();
+      }
    } else {
-      setHidden(true);
-      let results = await storage.searchNotes(text);
-      if (results) {
-        setSearchResults(results);
+      setSearch(true);
+      setKeyword(text);
+      searchResults = await storage.searchNotes(text);
+      if (searchResults) {
+        setNotes(searchResults);
      }
    }
  };

  const onBlur = () => {
    if (text && text.length < 2) {
-      setHidden(false);
+      setSearch(false);
+      if (allNotes) {
+        setNotes(allNotes);
+      } else {
+        fetchNotes();
+      }
    }
  };

  const onFocus = () => {
-    setHidden(false);
+    setSearch(false);
  };

  const clearSearch = () => {
-    setSearchResults([]);
-    setHidden(false);
+    searchResults = null;
+    setSearch(false);
+    if (allNotes) {
+      setNotes(allNotes);
+    } else {
+      fetchNotes();
+    }
  };

  const setMarginTop = () => {
@@ -144,6 +166,13 @@ export const Home = ({navigation}) => {
    }
  };

+  const fetchNotes = async () => {
+    allNotes = await storage.getNotes();
+    if (allNotes) {
+      setNotes(allNotes);
+    }
+  };
+
  // Render

  return Platform.isPad ? (
@@ -154,6 +183,9 @@ export const Home = ({navigation}) => {
            DeviceEventEmitter.emit('openSidebar');
            setUpdate(update + 1);
          }}
+          onDidBlur={() => {
+            marginSet = false;
+          }}
        />

        <Header colors={colors} heading="Home" canGoBack={false} />
@@ -232,60 +264,30 @@ export const Home = ({navigation}) => {
            value={text}
          />
        </Animatable.View>
-        {hidden ? (
-          <NotesList
-            margin={margin}
-            onScroll={y => {
-              if (buttonHide) return;
-              if (y < 30) setHideHeader(false);
-              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;
-            }}
-            searchResults={searchResults}
-            keyword={text}
-          />
-        ) : (
-          <RecentList
-            onScroll={y => {
-              if (buttonHide) return;
-              if (y < 30) {
-                setHideHeader(false);
-                countDown = 0;
-                countUp = 1;
-              }

-              if (y > offsetY) {
-                if (y - offsetY < 100 || countDown > 0) return;
-                countDown = 1;
-                countUp = 0;
-                setHideHeader(true);
-                offsetY = y;
-                console.log(y, offsetY, 'down');
-              } else {
-                if (offsetY - y < 100 || countUp > 0) return;
-                countDown = 0;
-                countUp = 1;
-                setHideHeader(false);
-                offsetY = y;
-                console.log(y, offsetY, 'up');
-              }
-              offsetY = y;
-              console.log(offsetY);
-            }}
-            margin={margin}
-            update={update}
-          />
-        )}
+        <NotesList
+          margin={margin}
+          onScroll={y => {
+            if (buttonHide) return;
+            if (y < 30) setHideHeader(false);
+            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;
+          }}
+          isSearch={search}
+          notes={notes}
+          keyword={keyword}
+        />
+
        {buttonHide ? null : (
          <TouchableOpacity
            onPress={() => {
--- a/apps/mobile/src/views/Notebook/index.js
+++ b/apps/mobile/src/views/Notebook/index.js
@@ -33,7 +33,9 @@ import {NotebookItem} from '../../components/NotebookItem';
 import {Search} from '../../components/SearchInput';
 import {useForceUpdate} from '../ListsEditor';
 import {AddTopicDialog} from '../../components/AddTopicDialog';
-
+import {AnimatedSafeAreaView} from '../Home';
+import * as Animatable from 'react-native-animatable';
+import {NavigationEvents} from 'react-navigation';
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;

@@ -84,11 +86,18 @@ export const Notebook = ({navigation}) => {

  // Render
  return (
-    <SafeAreaView
+    <AnimatedSafeAreaView
+      transition="backgroundColor"
+      duration={1000}
      style={{
        height: '100%',
        backgroundColor: colors.bg,
      }}>
+      <NavigationEvents
+        onDidBlur={() => {
+          marginSet = false;
+        }}
+      />
      <KeyboardAvoidingView
        style={{
          height: '100%',
@@ -100,7 +109,9 @@ export const Notebook = ({navigation}) => {
            setAddTopic(false);
          }}
        />
-        <View
+        <Animatable.View
+          transition="backgroundColor"
+          duration={1000}
          style={{
            position: 'absolute',
            backgroundColor: colors.bg,
@@ -128,7 +139,7 @@ export const Notebook = ({navigation}) => {
            placeholder={`Search in ${params.title}`}
            hide={hideHeader}
          />
-        </View>
+        </Animatable.View>

        <FlatList
          style={{
@@ -232,7 +243,7 @@ export const Notebook = ({navigation}) => {
          </Text>
        </TouchableOpacity>
      </KeyboardAvoidingView>
-    </SafeAreaView>
+    </AnimatedSafeAreaView>
  );
 };

--- a/apps/mobile/src/views/Notes/index.js
+++ b/apps/mobile/src/views/Notes/index.js
@@ -32,7 +32,7 @@ import {useForceUpdate} from '../ListsEditor';
 import {NotesList} from '../../components/NotesList';
 import {AnimatedSafeAreaView} from '../Home';
 import {storage} from '../../../App';
-
+import * as Animatable from 'react-native-animatable';
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;

@@ -69,13 +69,18 @@ export const Notes = ({navigation}) => {
  }, []);

  useEffect(() => {
-    let notes = [];
+    let allNotes = [];

    params.notes.forEach(note => {
      let noteToAdd = storage.getNote(note);
-      notes[notes.length] = noteToAdd;
+      if (noteToAdd) {
+        allNotes[notes.length] = noteToAdd;
+      }
    });
-    setNotes(notes);
+
+    if (allNotes && allNotes.length > 0) {
+      setNotes(allNotes);
+    }
  }, []);

  const setMarginTop = () => {
@@ -95,19 +100,21 @@ export const Notes = ({navigation}) => {
  return (
    <AnimatedSafeAreaView
      transition="backgroundColor"
-      duration={250}
+      duration={1000}
      style={{
        height: '100%',
-        backgroundColor: colors.night ? colors.bg : colors.bg,
+        backgroundColor: colors.bg,
      }}>
      <KeyboardAvoidingView
        style={{
          height: '100%',
        }}>
-        <View
+        <Animatable.View
+          transition="backgroundColor"
+          duration={1000}
          style={{
            position: 'absolute',
-            backgroundColor: colors.night ? colors.bg : colors.bg,
+            backgroundColor: colors.bg,
            zIndex: 10,
            width: '100%',
          }}>
@@ -133,7 +140,7 @@ export const Notes = ({navigation}) => {
            placeholder={`Search in ${params.title}`}
            hide={hideHeader}
          />
-        </View>
+        </Animatable.View>

        <NotesList
          margin={margin}
@@ -153,7 +160,9 @@ export const Notes = ({navigation}) => {
            }
            offsetY = y;
          }}
+          isSearch={false}
          notes={notes}
+          keyword={null}
        />

        <TouchableOpacity
--- a/apps/mobile/src/views/Settings/index.js
+++ b/apps/mobile/src/views/Settings/index.js
@@ -33,6 +33,7 @@ import {Header} from '../../components/header';
 import {FlatList} from 'react-native-gesture-handler';
 import AsyncStorage from '@react-native-community/async-storage';
 import {useForceUpdate} from '../ListsEditor';
+import {AnimatedSafeAreaView} from '../Home';

 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
@@ -52,7 +53,9 @@ export const Settings = ({navigation}) => {
    };
  }, []);
  return (
-    <SafeAreaView
+    <AnimatedSafeAreaView
+      transition="backgroundColor"
+      duration={1000}
      style={{
        backgroundColor: colors.bg,
        height: '100%',
@@ -98,7 +101,6 @@ export const Settings = ({navigation}) => {
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  marginBottom: 10,
-                  backgroundColor: colors.bg,
                }}>
                <Text
                  style={{
@@ -288,7 +290,7 @@ export const Settings = ({navigation}) => {
          </Text>
        </TouchableOpacity>
      </View>
-    </SafeAreaView>
+    </AnimatedSafeAreaView>
  );
 };