feat: add new components

apps/mobile/src/components/AddNotebookDialog/index.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useState, createRef} from 'react';
 import {
   ScrollView,
   View,
@@ -29,10 +29,11 @@ import {useForceUpdate} from '../../views/ListsEditor';
 
 const refs = [];
 
-export const AddNotebookDialog = ({visible}) => {
+export const AddNotebookDialog = ({visible, close}) => {
   const [colors, setColors] = useState(COLOR_SCHEME);
   const [topicsToAdd, setTopicsToAdd] = useState(['']);
   const forceUpdate = useForceUpdate();
+  let listRef = createRef();
   let prevItem = null;
   let prevIndex = null;
   let currentSelectedItem = null;
@@ -53,13 +54,17 @@ export const AddNotebookDialog = ({visible}) => {
     forceUpdate();
     currentSelectedItem = null;
 
-    if (!willFocus) return;
+    //if (!willFocus) return;
     if (!refs[index + 1]) {
       setTimeout(() => {
+        if (!refs[index + 1]) return;
+
         refs[index + 1].focus();
       }, 400);
     } else {
+      setTimeout(() => {
         refs[index + 1].focus();
+      }, 400);
     }
   };
   const onFocus = index => {
@@ -82,15 +87,21 @@ export const AddNotebookDialog = ({visible}) => {
     prevItem = text;
   };
   const onDelete = index => {
+    console.log('deleting');
     let listData = topicsToAdd;
+    if (listData.length === 1) return;
+    refs.splice(index, 1);
     listData.splice(index, 1);
+    console.log(refs, listData);
     setTopicsToAdd(listData);
     forceUpdate();
   };
 
   return (
-    <SafeAreaView>
+    <Modal
-      <Modal visible={visible} transparent={true}>
+      visible={visible}
+      transparent={true}
+      onRequestClose={() => (refs = [])}>
       <View
         style={{
           width: '100%',
@@ -102,7 +113,7 @@ export const AddNotebookDialog = ({visible}) => {
         <View
           style={{
             width: '80%',
-              maxHeight: '80%',
+            maxHeight: 350,
             elevation: 5,
             borderRadius: 5,
             backgroundColor: colors.bg,
@@ -119,7 +130,7 @@ export const AddNotebookDialog = ({visible}) => {
             <Text
               style={{
                 color: colors.accent,
-                  fontFamily: WEIGHT.medium,
+                fontFamily: WEIGHT.semibold,
                 marginLeft: 10,
                 fontSize: SIZE.lg,
                 marginTop: -5,
@@ -140,7 +151,7 @@ export const AddNotebookDialog = ({visible}) => {
               marginTop: 20,
               marginBottom: 10,
             }}
-              placeholder="Enter title of notebook"
+            placeholder="Title of notebook"
             placeholderTextColor={colors.icon}
           />
 
@@ -154,6 +165,14 @@ export const AddNotebookDialog = ({visible}) => {
 
           <FlatList
             data={topicsToAdd}
+            ref={listRef}
+            removeClippedSubviews={false}
+            enableEmptySections={false}
+            getItemLayout={(data, index) => ({
+              length: 50,
+              offset: 50 * index,
+              index,
+            })}
             renderItem={({item, index}) => (
               <TopicItem
                 item={item}
@@ -199,6 +218,13 @@ export const AddNotebookDialog = ({visible}) => {
 
             <TouchableOpacity
               activeOpacity={opacity}
+              onPress={() => {
+                setTopicsToAdd(['']);
+                prevIndex = null;
+                prevItem = null;
+                currentSelectedItem = null;
+                close();
+              }}
               style={{
                 paddingVertical: pv,
                 paddingHorizontal: ph,
@@ -221,7 +247,6 @@ export const AddNotebookDialog = ({visible}) => {
         </View>
       </View>
     </Modal>
-    </SafeAreaView>
   );
 };
 
@@ -281,24 +306,18 @@ const TopicItem = ({
         placeholderTextColor={colors.icon}
       />
 
-      {index == 0 && !focus ? (
       <TouchableOpacity
-          onPress={() =>
+        onPress={() => (!focus ? onDelete(index) : onSubmit(text, index, true))}
-            !focus && index !== 0
-              ? onDelete(index)
-              : onSubmit(text, index, true)
-          }
         style={{
           justifyContent: 'center',
           alignItems: 'center',
         }}>
         <Icon
-            name={!focus && index !== 0 ? 'minus' : 'plus'}
+          name={!focus ? 'minus' : 'plus'}
           size={SIZE.lg}
           color={colors.accent}
         />
       </TouchableOpacity>
-      ) : null}
     </View>
   );
 };

apps/mobile/src/components/NotebookItem/index.js

@@ -0,0 +1,62 @@
+import React, {useEffect, useState} from 'react';
+import {View, Text, TouchableOpacity} 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/Feather';
+export const NotebookItem = ({item, index, colors}) => {
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        NavigationService.navigate('Notebook', {
+          notebook: item,
+        });
+      }}
+      style={{
+        paddingHorizontal: ph,
+        marginHorizontal: '5%',
+        borderBottomWidth: 1,
+        borderBottomColor: '#f0f0f0',
+        paddingVertical: pv + 5,
+      }}>
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}>
+        <View>
+          <Text
+            style={{
+              fontFamily: WEIGHT.bold,
+              fontSize: SIZE.md,
+              color: colors.pri,
+              maxWidth: '100%',
+            }}>
+            {item.name}
+          </Text>
+
+          <Text
+            style={{
+              fontFamily: WEIGHT.regular,
+              fontSize: SIZE.xs,
+              paddingTop: pv / 2,
+            }}>
+            15 notes
+          </Text>
+        </View>
+
+        <Icon name="more-vertical" size={SIZE.lg} color={colors.icon} />
+      </View>
+    </TouchableOpacity>
+  );
+};

apps/mobile/src/components/Recents/index.js

@@ -148,7 +148,7 @@ export const RecentList = ({update}) => {
               style={{
                 width: Platform.isPad ? '95%' : '90%',
                 alignSelf: 'center',
-                backgroundColor: 'red',
+                backgroundColor: colors.errorBg,
                 padding: pv,
                 borderRadius: 5,
                 flexDirection: 'row',
@@ -158,16 +158,16 @@ export const RecentList = ({update}) => {
               <Text
                 style={{
                   fontFamily: WEIGHT.bold,
-                  color: 'white',
+                  color: colors.errorText,
                 }}>
-                Sync Disabled
+                Sync is disabled
               </Text>
               <Text
                 style={{
                   fontFamily: WEIGHT.medium,
-                  color: 'white',
+                  color: colors.errorText,
                 }}>
-                Fix Now
+                Fix now
               </Text>
             </TouchableOpacity>
           </>

apps/mobile/src/services/NavigationService.js

@@ -15,6 +15,7 @@ import Settings from '../views/Settings';
 import Trash from '../views/Trash';
 import Notes from '../views/Notes';
 import Tags from '../views/Tags';
+import Notebook from '../views/Notebook';
 
 const TopLevelNavigator = createStackNavigator(
   {
@@ -63,6 +64,9 @@ const TopLevelNavigator = createStackNavigator(
     Tags: {
       screen: Tags,
     },
+    Notebook: {
+      screen: Notebook,
+    },
   },
   {
     initialRouteName: 'Home',

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

@@ -22,7 +22,7 @@ import {
   WEIGHT,
 } from '../../common/common';
 import WebView from 'react-native-webview';
-import Icon from 'react-native-vector-icons/Ionicons';
+import Icon from 'react-native-vector-icons/Feather';
 import {useForceUpdate} from '../ListsEditor';
 import {NavigationEvents} from 'react-navigation';
 import {storage} from '../../../App';
@@ -92,23 +92,41 @@ const Editor = ({navigation}) => {
           style={{
             height: '100%',
           }}>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              width: '96%',
+              alignSelf: 'center',
+              marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.04,
+            }}>
+            <Icon
+              style={{
+                paddingRight: 10,
+              }}
+              name="chevron-left"
+              color={colors.pri}
+              size={SIZE.xxl}
+            />
+
             <TextInput
               ref={titleRef}
               placeholder="Untitled Note"
               placeholderTextColor={colors.icon}
               style={{
-              width: '100%',
+                width: '90%',
                 fontFamily: WEIGHT.bold,
                 fontSize: SIZE.xxl,
-              paddingHorizontal: '3%',
+                maxWidth: '90%',
                 paddingVertical: 0,
-              marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.04,
               }}
               onChangeText={value => {
                 title = value;
               }}
               onSubmitEditing={async () => await saveNote()}
             />
+          </View>
 
           <WebView
             ref={EditorWebView}

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

@@ -28,6 +28,7 @@ import {getElevation, h, w, timeSince} from '../../utils/utils';
 import {FlatList, TextInput} from 'react-native-gesture-handler';
 import {useForceUpdate} from '../ListsEditor';
 import {AddNotebookDialog} from '../../components/AddNotebookDialog';
+import {NotebookItem} from '../../components/NotebookItem';
 
 const refs = [];
 
@@ -36,7 +37,10 @@ export const Folders = ({navigation}) => {
   const [addNotebook, setAddNotebook] = useState(false);
   return (
     <SafeAreaView>
-      <AddNotebookDialog visible={addNotebook} />
+      <AddNotebookDialog
+        visible={addNotebook}
+        close={() => setAddNotebook(false)}
+      />
       <View
         style={{
           flexDirection: 'row',
@@ -98,55 +102,16 @@ export const Folders = ({navigation}) => {
             <Text
               style={{
                 fontSize: SIZE.md,
-                fontFamily: WEIGHT.bold,
+                fontFamily: WEIGHT.semibold,
                 color: 'white',
               }}>
-              Create new notebook
+              Create a new notebook
             </Text>
             <Icon name="plus" color="white" size={SIZE.lg} />
           </TouchableOpacity>
         }
         renderItem={({item, index}) => (
-          <View
+          <NotebookItem item={item} index={index} colors={colors} />
-            style={{
-              paddingHorizontal: ph,
-              marginHorizontal: '5%',
-              borderBottomWidth: 1,
-              borderBottomColor: '#f0f0f0',
-              paddingVertical: pv + 5,
-            }}>
-            <Text
-              style={{
-                fontFamily: WEIGHT.bold,
-                fontSize: SIZE.md,
-                color: colors.pri,
-                maxWidth: '100%',
-              }}>
-              {item.name}
-            </Text>
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                paddingTop: pv,
-              }}>
-              <Text
-                style={{
-                  fontFamily: WEIGHT.regular,
-                  fontSize: SIZE.xs,
-                  color: colors.accent,
-                }}>
-                June 21
-              </Text>
-              <Text
-                style={{
-                  fontFamily: WEIGHT.regular,
-                  fontSize: SIZE.xs,
-                }}>
-                15 notes
-              </Text>
-            </View>
-          </View>
         )}
       />
     </SafeAreaView>

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

@@ -0,0 +1,136 @@
+import React, {useEffect, useState} from 'react';
+import {
+  ScrollView,
+  View,
+  Text,
+  TouchableOpacity,
+  Dimensions,
+  Image,
+  SafeAreaView,
+  Platform,
+  FlatList,
+} 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/Feather';
+import {Reminder} from '../../components/Reminder';
+import {ListItem} from '../../components/ListItem';
+import {Header} from '../../components/header';
+import NoteItem from '../../components/NoteItem';
+import {NotebookItem} from '../../components/NotebookItem';
+
+const w = Dimensions.get('window').width;
+const h = Dimensions.get('window').height;
+
+export const Notebook = ({navigation}) => {
+  const [colors, setColors] = useState(COLOR_SCHEME);
+
+  return (
+    <SafeAreaView>
+      <Header
+        colors={colors}
+        heading={navigation.state.params.notebook.name}
+        canGoBack={false}
+      />
+
+      <FlatList
+        style={{
+          width: '100%',
+        }}
+        data={[
+          {
+            name: 'Class Notes',
+            Qty: '8',
+          },
+          {
+            name: 'Notes of water tabs',
+            Qty: '3',
+          },
+          {
+            name: 'My Lists',
+            Qty: '3',
+          },
+        ]}
+        ListHeaderComponent={
+          <>
+            <TouchableOpacity
+              activeOpacity={opacity}
+              onPress={() => {
+                setAddNotebook(true);
+              }}
+              style={{
+                borderWidth: 1,
+                borderRadius: 5,
+                width: '90%',
+                marginHorizontal: '5%',
+                paddingHorizontal: ph,
+                borderColor: '#f0f0f0',
+                paddingVertical: pv + 5,
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                marginBottom: 15,
+                backgroundColor: colors.accent,
+              }}>
+              <Text
+                style={{
+                  fontSize: SIZE.md,
+                  fontFamily: WEIGHT.semibold,
+                  color: 'white',
+                }}>
+                Add a new topic
+              </Text>
+              <Icon name="plus" color="white" size={SIZE.lg} />
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              activeOpacity={opacity}
+              onPress={() => {
+                setAddNotebook(true);
+              }}
+              style={{
+                borderWidth: 1,
+                borderRadius: 5,
+                width: '90%',
+                marginHorizontal: '5%',
+                paddingHorizontal: ph,
+                borderColor: '#f0f0f0',
+                paddingVertical: pv + 5,
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                marginBottom: 15,
+              }}>
+              <Text
+                style={{
+                  fontSize: SIZE.md,
+                  fontFamily: WEIGHT.bold,
+                  color: colors.pri,
+                }}>
+                View All Notes
+              </Text>
+            </TouchableOpacity>
+          </>
+        }
+        renderItem={({item, index}) => (
+          <NotebookItem item={item} index={index} colors={colors} />
+        )}
+      />
+    </SafeAreaView>
+  );
+};
+
+Notebook.navigationOptions = {
+  header: null,
+};
+
+export default Notebook;