From 014bd7a02bea135b3868ba3f1492bdbe6340c78a Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Sat, 25 Jan 2020 00:02:13 +0500
Subject: [PATCH] add some basic animations

---
 apps/mobile/App.js                            | 167 +++++++++---------
 apps/mobile/src/components/NotesList/index.js |   1 +
 .../src/components/SelectionWrapper/index.js  |  12 +-
 apps/mobile/src/views/Home/index.js           |   8 +-
 4 files changed, 100 insertions(+), 88 deletions(-)

diff --git a/apps/mobile/App.js b/apps/mobile/App.js
index 67900b92e..49cbaf89d 100644
--- a/apps/mobile/App.js
+++ b/apps/mobile/App.js
@@ -68,7 +68,6 @@ const App = () => {
   };
 
   useEffect(() => {
-    console.log(colors);
     _recieveEvent('openSidebar', openSidebar);
     _recieveEvent('closeSidebar', closeSidebar);
 
@@ -154,96 +153,102 @@ const App = () => {
   }
   return (
     <>
-      <Animatable.View
-        transition="backgroundColor"
-        duration={300}
-        style={{
-          width: '100%',
-          height: '100%',
-          flexDirection: 'row',
-          backgroundColor: colors.bg,
-        }}
-        onLayout={e => {
-          setWidth(Dimensions.get('window').width);
-        }}>
-        {DDS.isTab ? (
-          <>
-            <ModalMenu colors={colors} />
+      <Animatable.View animation="fadeIn" useNativeDriver={true} duration={600}>
+        <Animatable.View
+          transition="backgroundColor"
+          duration={300}
+          style={{
+            width: '100%',
+            height: '100%',
+            flexDirection: 'row',
+            backgroundColor: colors.bg,
+          }}
+          onLayout={e => {
+            setWidth(Dimensions.get('window').width);
+          }}>
+          {DDS.isTab ? (
+            <>
+              <ModalMenu colors={colors} />
 
-            <View
-              style={{
-                width: '4%',
-              }}>
-              <Menu
-                hide={false}
-                noTextMode={true}
-                colors={colors}
-                close={() => {
-                  //setSidebar('0%');
-                }}
-              />
-            </View>
+              <Animatable.View
+                animation="fadeIn"
+                useNativeDriver={true}
+                duration={300}
+                delay={450}
+                style={{
+                  width: '4%',
+                }}>
+                <Menu
+                  hide={false}
+                  noTextMode={true}
+                  colors={colors}
+                  close={() => {
+                    //setSidebar('0%');
+                  }}
+                />
+              </Animatable.View>
 
-            <Animatable.View
-              transition="backgroundColor"
-              duration={300}
-              style={{
-                width: '28%',
-                height: '100%',
-                borderRightColor: colors.nav,
-                borderRightWidth: 2,
-              }}>
+              <Animatable.View
+                transition="backgroundColor"
+                duration={300}
+                style={{
+                  width: '28%',
+                  height: '100%',
+                  borderRightColor: colors.nav,
+                  borderRightWidth: 2,
+                }}>
+                <AppContainer
+                  style={{
+                    width: '100%',
+                    height: '100%',
+                  }}
+                  ref={navigatorRef => {
+                    NavigationService.setTopLevelNavigator(navigatorRef);
+                  }}
+                />
+              </Animatable.View>
+
+              <View
+                ref={ref => (editorRef = ref)}
+                style={{
+                  width: '68%',
+                  height: '100%',
+                  backgroundColor: 'transparent',
+                }}>
+                <Editor noMenu={fullscreen ? false : true} />
+              </View>
+            </>
+          ) : (
+            <SideMenu
+              ref={ref => (sideMenuRef = ref)}
+              bounceBackOnOverdraw={false}
+              contentContainerStyle={{
+                opacity: 0,
+                backgroundColor: colors.bg,
+              }}
+              menu={
+                <Menu
+                  hide={false}
+                  colors={colors}
+                  close={() => sideMenuRef.openMenu(!sideMenuRef.isOpen)}
+                />
+              }
+              openMenuOffset={w / 1.3}>
               <AppContainer
                 style={{
-                  width: '100%',
+                  width: DDS.isTab ? '70%' : '100%',
                   height: '100%',
+                  backgroundColor: colors.bg,
                 }}
                 ref={navigatorRef => {
                   NavigationService.setTopLevelNavigator(navigatorRef);
                 }}
               />
-            </Animatable.View>
-
-            <View
-              ref={ref => (editorRef = ref)}
-              style={{
-                width: '68%',
-                height: '100%',
-                backgroundColor: 'transparent',
-              }}>
-              <Editor noMenu={fullscreen ? false : true} />
-            </View>
-          </>
-        ) : (
-          <SideMenu
-            ref={ref => (sideMenuRef = ref)}
-            bounceBackOnOverdraw={false}
-            contentContainerStyle={{
-              opacity: 0,
-              backgroundColor: colors.bg,
-            }}
-            menu={
-              <Menu
-                hide={false}
-                colors={colors}
-                close={() => sideMenuRef.openMenu(!sideMenuRef.isOpen)}
-              />
-            }
-            openMenuOffset={w / 1.3}>
-            <AppContainer
-              style={{
-                width: DDS.isTab ? '70%' : '100%',
-                height: '100%',
-                backgroundColor: colors.bg,
-              }}
-              ref={navigatorRef => {
-                NavigationService.setTopLevelNavigator(navigatorRef);
-              }}
-            />
-          </SideMenu>
-        )}
-        <Toast />
-        <DialogManager colors={colors} />
+            </SideMenu>
+          )}
+          <Toast />
+          <DialogManager colors={colors} />
+        </Animatable.View>
       </Animatable.View>
     </>
   );
diff --git a/apps/mobile/src/components/NotesList/index.js b/apps/mobile/src/components/NotesList/index.js
index ef46f2b1f..b6b3ba8e5 100644
--- a/apps/mobile/src/components/NotesList/index.js
+++ b/apps/mobile/src/components/NotesList/index.js
@@ -24,6 +24,7 @@ export const NotesList = ({
 
   const _renderItem = ({item, index}) => (
     <SelectionWrapper
+      index={index}
       currentEditingNote={
         currentEditingNote === item.dateCreated ? currentEditingNote : null
       }
diff --git a/apps/mobile/src/components/SelectionWrapper/index.js b/apps/mobile/src/components/SelectionWrapper/index.js
index 11eea2090..5a9284bab 100644
--- a/apps/mobile/src/components/SelectionWrapper/index.js
+++ b/apps/mobile/src/components/SelectionWrapper/index.js
@@ -5,13 +5,17 @@ import Icon from 'react-native-vector-icons/Feather';
 import {w} from '../../utils/utils';
 import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
-
-const SelectionWrapper = ({children, item, currentEditingNote}) => {
+import * as Animatable from 'react-native-animatable';
+const SelectionWrapper = ({children, item, currentEditingNote, index}) => {
   const [state, dispatch] = useTracked();
   const {colors, selectionMode, selectedItemsList} = state;
 
   return (
-    <View
+    <Animatable.View
+      animation="fadeIn"
+      useNativeDriver={true}
+      duration={300 * index + 1}
+      delay={index * 300}
       style={{
         flexDirection: 'row',
         justifyContent: 'space-between',
@@ -56,7 +60,7 @@ const SelectionWrapper = ({children, item, currentEditingNote}) => {
       </View>
 
       {children}
-    </View>
+    </Animatable.View>
   );
 };
 
diff --git a/apps/mobile/src/views/Home/index.js b/apps/mobile/src/views/Home/index.js
index cdac98087..fc23c0535 100755
--- a/apps/mobile/src/views/Home/index.js
+++ b/apps/mobile/src/views/Home/index.js
@@ -23,12 +23,11 @@ export const Home = ({navigation}) => {
   // State
   const [state, dispatch] = useTracked();
   const {colors, selectionMode, notes} = state;
-  const [refreshing, setRefreshing] = useState(false);
   const [text, setText] = useState('');
   const [hideHeader, setHideHeader] = useState(false);
   const [keyword, setKeyword] = useState('');
   const [searchResults, setSearchResults] = useState([]);
-
+  const [loading, setLoading] = useState([]);
   const isFocused = useIsFocused();
   // Variables
 
@@ -40,7 +39,10 @@ export const Home = ({navigation}) => {
   // Effects
 
   useEffect(() => {
-    dispatch({type: ACTIONS.NOTES, payload: 'hello there'});
+    dispatch({type: ACTIONS.NOTES});
+    setTimeout(() => {
+      setLoading(false);
+    }, 2500);
   }, [isFocused]);
 
   // Functions