add folders and favorites

apps/mobile/src/services/NavigationService.js

@@ -4,6 +4,8 @@ import Home from '../views/Home/index';
 import Editor from '../views/Editor';
 import Reminders from '../views/Reminders';
 import Lists from '../views/Lists';
+import Folders from '../views/Folders';
+import Favorites from '../views/Favorites';
 
 const TopLevelNavigator = createStackNavigator(
   {
@@ -19,6 +21,12 @@ const TopLevelNavigator = createStackNavigator(
     Lists: {
       screen: Lists,
     },
+    Folders: {
+      screen: Folders,
+    },
+    Favorites: {
+      screen: Favorites,
+    },
   },
   {
     initialRouteName: 'Home',

apps/mobile/src/views/Favorites/index.js

@@ -0,0 +1,62 @@
+import React, {useEffect, useState} from 'react';
+import {
+  ScrollView,
+  View,
+  Text,
+  TouchableOpacity,
+  Dimensions,
+  Image,
+  SafeAreaView,
+  Platform,
+} from 'react-native';
+import NavigationService from '../../services/NavigationService';
+import {
+  COLOR_SCHEME,
+  SIZE,
+  br,
+  ph,
+  pv,
+  opacity,
+  FONT,
+  WEIGHT,
+} from '../../common/common';
+import Icon from 'react-native-vector-icons/Ionicons';
+import {Reminder} from '../../components/Reminder';
+import {ListItem} from '../../components/ListItem';
+
+const w = Dimensions.get('window').width;
+const h = Dimensions.get('window').height;
+
+export const Favorites = ({navigation}) => {
+  const [colors, setColors] = useState(COLOR_SCHEME);
+
+  return (
+    <SafeAreaView>
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          paddingHorizontal: '5%',
+          marginTop: Platform.OS == 'ios' ? h * 0.02 : h * 0.04,
+          marginBottom: h * 0.04,
+        }}>
+        <Text
+          style={{
+            fontSize: SIZE.xxl,
+            color: colors.pri,
+            fontFamily: WEIGHT.bold,
+          }}>
+          Favorites
+        </Text>
+        <Icon name="md-more" color={colors.icon} size={SIZE.xxl} />
+      </View>
+    </SafeAreaView>
+  );
+};
+
+Favorites.navigationOptions = {
+  header: null,
+};
+
+export default Favorites;

apps/mobile/src/views/Folders/index.js

@@ -0,0 +1,124 @@
+import React, {useEffect, useState} from 'react';
+import {
+  ScrollView,
+  View,
+  Text,
+  TouchableOpacity,
+  Dimensions,
+  Image,
+  SafeAreaView,
+  Platform,
+} from 'react-native';
+import NavigationService from '../../services/NavigationService';
+import {
+  COLOR_SCHEME,
+  SIZE,
+  br,
+  ph,
+  pv,
+  opacity,
+  FONT,
+  WEIGHT,
+} from '../../common/common';
+import Icon from 'react-native-vector-icons/Ionicons';
+import {Reminder} from '../../components/Reminder';
+import {ListItem} from '../../components/ListItem';
+import {getElevation} from '../../utils/utils';
+import {FlatList} from 'react-native-gesture-handler';
+
+const w = Dimensions.get('window').width;
+const h = Dimensions.get('window').height;
+
+export const Folders = ({navigation}) => {
+  const [colors, setColors] = useState(COLOR_SCHEME);
+
+  return (
+    <SafeAreaView>
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          paddingHorizontal: '5%',
+          marginTop: Platform.OS == 'ios' ? h * 0.02 : h * 0.04,
+          marginBottom: h * 0.04,
+        }}>
+        <Text
+          style={{
+            fontSize: SIZE.xxl,
+            color: colors.pri,
+            fontFamily: WEIGHT.bold,
+          }}>
+          Folders
+        </Text>
+        <Icon name="md-more" color={colors.icon} size={SIZE.xxl} />
+      </View>
+
+      <FlatList
+        numColumns={2}
+        style={{
+          width: '100%',
+        }}
+        columnWrapperStyle={{
+          paddingHorizontal: '5%',
+          justifyContent: 'space-between',
+          width: '100%',
+        }}
+        data={[
+          {
+            name: 'Class Notes',
+            Qty: '8',
+          },
+          {
+            name: 'Notes of water tabs',
+            Qty: '3',
+          },
+          {
+            name: 'My Lists',
+            Qty: '3',
+          },
+        ]}
+        renderItem={({item, index}) => (
+          <View>
+            <View
+              style={{
+                ...getElevation(5),
+                width: w * 0.4,
+                height: w * 0.3,
+                borderRadius: 5,
+                backgroundColor: colors.accent,
+                alignItems: 'flex-end',
+                justifyContent: 'flex-end',
+                padding: 5,
+              }}>
+              <Text
+                style={{
+                  fontFamily: WEIGHT.regular,
+                  fontSize: SIZE.lg,
+                  color: 'white',
+                  opacity: 0.5,
+                }}>
+                {item.Qty} Files
+              </Text>
+            </View>
+            <Text
+              style={{
+                fontFamily: WEIGHT.bold,
+                fontSize: SIZE.md,
+                color: colors.pri,
+                maxWidth: w * 0.4,
+              }}>
+              {item.name}
+            </Text>
+          </View>
+        )}
+      />
+    </SafeAreaView>
+  );
+};
+
+Folders.navigationOptions = {
+  header: null,
+};
+
+export default Folders;

apps/mobile/src/views/Home/index.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useState, createRef} from 'react';
 import {
   ScrollView,
   View,
@@ -35,25 +35,13 @@ const h = Dimensions.get('window').height;
 export const Home = ({navigation}) => {
   const [loading, setLoading] = useState(true);
   const [colors, setColors] = useState(COLOR_SCHEME);
-
+  const [isOpen, setOpen] = useState(false);
   const RenderSideMenu = (
     <SafeAreaView
       style={{
         height: '100%',
         justifyContent: 'center',
       }}>
-      <View
-        style={{
-          backgroundColor: colors.accent,
-          height: h * 0.5,
-          width: h * 0.5,
-          position: 'absolute',
-          top: h * -0.15,
-          left: h * -0.2,
-          transform: [{rotateZ: '340deg'}],
-          borderRadius: 100,
-        }}
-      />
       <View
         style={{
           height: '25%',
@@ -61,6 +49,7 @@ export const Home = ({navigation}) => {
           justifyContent: 'center',
           alignItems: 'center',
           alignSelf: 'center',
+          backgroundColor: colors.accent,
         }}>
         <Image
           style={{
@@ -111,8 +100,7 @@ export const Home = ({navigation}) => {
 
       <View
         style={{
-          backgroundColor: colors.navbg,
-          width: '90%',
+          width: '100%',
           alignSelf: 'center',
           height: '60%',
           marginVertical: 10,
@@ -123,12 +111,27 @@ export const Home = ({navigation}) => {
             {
               name: 'Home',
               icon: 'ios-home',
+              func: () => NavigationService.navigate('Home'),
+            },
+            {
+              name: 'Favorites',
+              icon: 'md-star',
+              func: () => NavigationService.navigate('Favorites'),
+            },
+            {
+              name: 'Folders',
+              icon: 'md-folder',
+              func: () => NavigationService.navigate('Folders'),
             },
           ]}
           keyExtractor={(item, index) => item.name}
           renderItem={({item, index}) => (
             <TouchableOpacity
               activeOpacity={opacity}
+              onPress={() => {
+                item.func();
+                setOpen(false);
+              }}
               style={{
                 width: '100%',
                 alignSelf: 'center',
@@ -162,7 +165,7 @@ export const Home = ({navigation}) => {
       <View
         style={{
           backgroundColor: '#F3A712',
-          width: '90%',
+          width: '95%',
           alignSelf: 'center',
           borderRadius: 5,
           flexDirection: 'row',
@@ -202,7 +205,11 @@ export const Home = ({navigation}) => {
 
   return (
     <SideMenu
+      isOpen={isOpen}
       bounceBackOnOverdraw={false}
+      onChange={args => {
+        setOpen(args);
+      }}
       menu={RenderSideMenu}
       openMenuOffset={w / 1.5}>
       <SafeAreaView style={styles.container}>