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 {
-      refs[index + 1].focus();
+      setTimeout(() => {
+        refs[index + 1].focus();
+      }, 400);
     }
   };
   const onFocus = index => {
@@ -82,146 +87,166 @@ 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 visible={visible} transparent={true}>
+    <Modal
+      visible={visible}
+      transparent={true}
+      onRequestClose={() => (refs = [])}>
+      <View
+        style={{
+          width: '100%',
+          height: '100%',
+          backgroundColor: 'rgba(255,255,255,0.3)',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
         <View
           style={{
-            width: '100%',
-            height: '100%',
-            backgroundColor: 'rgba(255,255,255,0.3)',
-            justifyContent: 'center',
-            alignItems: 'center',
+            width: '80%',
+            maxHeight: 350,
+            elevation: 5,
+            borderRadius: 5,
+            backgroundColor: colors.bg,
+            paddingHorizontal: ph,
+            paddingVertical: pv,
           }}>
           <View
             style={{
-              width: '80%',
-              maxHeight: '80%',
-              elevation: 5,
-              borderRadius: 5,
-              backgroundColor: colors.bg,
-              paddingHorizontal: ph,
-              paddingVertical: pv,
+              flexDirection: 'row',
+              justifyContent: 'center',
+              alignItems: 'center',
             }}>
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'center',
-                alignItems: 'center',
-              }}>
-              <Icon name="book-open" color={colors.accent} size={SIZE.lg} />
-              <Text
-                style={{
-                  color: colors.accent,
-                  fontFamily: WEIGHT.medium,
-                  marginLeft: 10,
-                  fontSize: SIZE.lg,
-                  marginTop: -5,
-                }}>
-                New Notebook
-              </Text>
-            </View>
-
-            <TextInput
-              style={{
-                padding: pv - 5,
-                borderWidth: 1.5,
-                borderColor: '#f0f0f0',
-                paddingHorizontal: ph,
-                borderRadius: 5,
-                fontSize: SIZE.sm,
-                fontFamily: WEIGHT.regular,
-                marginTop: 20,
-                marginBottom: 10,
-              }}
-              placeholder="Enter title of notebook"
-              placeholderTextColor={colors.icon}
-            />
-
+            <Icon name="book-open" color={colors.accent} size={SIZE.lg} />
             <Text
               style={{
-                fontSize: SIZE.sm,
+                color: colors.accent,
                 fontFamily: WEIGHT.semibold,
+                marginLeft: 10,
+                fontSize: SIZE.lg,
+                marginTop: -5,
               }}>
-              Topics
+              New Notebook
             </Text>
+          </View>
 
-            <FlatList
-              data={topicsToAdd}
-              renderItem={({item, index}) => (
-                <TopicItem
-                  item={item}
-                  index={index}
-                  colors={colors}
-                  onSubmit={onSubmit}
-                  onChange={onChange}
-                  onFocus={onFocus}
-                  onDelete={onDelete}
-                />
-              )}
-            />
+          <TextInput
+            style={{
+              padding: pv - 5,
+              borderWidth: 1.5,
+              borderColor: '#f0f0f0',
+              paddingHorizontal: ph,
+              borderRadius: 5,
+              fontSize: SIZE.sm,
+              fontFamily: WEIGHT.regular,
+              marginTop: 20,
+              marginBottom: 10,
+            }}
+            placeholder="Title of notebook"
+            placeholderTextColor={colors.icon}
+          />
 
-            <View
+          <Text
+            style={{
+              fontSize: SIZE.sm,
+              fontFamily: WEIGHT.semibold,
+            }}>
+            Topics
+          </Text>
+
+          <FlatList
+            data={topicsToAdd}
+            ref={listRef}
+            removeClippedSubviews={false}
+            enableEmptySections={false}
+            getItemLayout={(data, index) => ({
+              length: 50,
+              offset: 50 * index,
+              index,
+            })}
+            renderItem={({item, index}) => (
+              <TopicItem
+                item={item}
+                index={index}
+                colors={colors}
+                onSubmit={onSubmit}
+                onChange={onChange}
+                onFocus={onFocus}
+                onDelete={onDelete}
+              />
+            )}
+          />
+
+          <View
+            style={{
+              justifyContent: 'space-around',
+              alignItems: 'center',
+              flexDirection: 'row',
+              marginTop: 20,
+            }}>
+            <TouchableOpacity
+              activeOpacity={opacity}
               style={{
-                justifyContent: 'space-around',
+                paddingVertical: pv,
+                paddingHorizontal: ph,
+                borderRadius: 5,
+                width: '45%',
+                justifyContent: 'center',
                 alignItems: 'center',
-                flexDirection: 'row',
-                marginTop: 20,
+                borderColor: colors.accent,
+                backgroundColor: colors.accent,
+                borderWidth: 1,
               }}>
-              <TouchableOpacity
-                activeOpacity={opacity}
+              <Text
                 style={{
-                  paddingVertical: pv,
-                  paddingHorizontal: ph,
-                  borderRadius: 5,
-                  width: '45%',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  borderColor: colors.accent,
-                  backgroundColor: colors.accent,
-                  borderWidth: 1,
+                  fontFamily: WEIGHT.medium,
+                  color: 'white',
+                  fontSize: SIZE.sm,
                 }}>
-                <Text
-                  style={{
-                    fontFamily: WEIGHT.medium,
-                    color: 'white',
-                    fontSize: SIZE.sm,
-                  }}>
-                  Add
-                </Text>
-              </TouchableOpacity>
+                Add
+              </Text>
+            </TouchableOpacity>
 
-              <TouchableOpacity
-                activeOpacity={opacity}
+            <TouchableOpacity
+              activeOpacity={opacity}
+              onPress={() => {
+                setTopicsToAdd(['']);
+                prevIndex = null;
+                prevItem = null;
+                currentSelectedItem = null;
+                close();
+              }}
+              style={{
+                paddingVertical: pv,
+                paddingHorizontal: ph,
+                borderRadius: 5,
+                width: '45%',
+                justifyContent: 'center',
+                alignItems: 'center',
+                backgroundColor: '#f0f0f0',
+              }}>
+              <Text
                 style={{
-                  paddingVertical: pv,
-                  paddingHorizontal: ph,
-                  borderRadius: 5,
-                  width: '45%',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  backgroundColor: '#f0f0f0',
+                  fontFamily: WEIGHT.medium,
+                  color: colors.icon,
+                  fontSize: SIZE.sm,
                 }}>
-                <Text
-                  style={{
-                    fontFamily: WEIGHT.medium,
-                    color: colors.icon,
-                    fontSize: SIZE.sm,
-                  }}>
-                  Cancel
-                </Text>
-              </TouchableOpacity>
-            </View>
+                Cancel
+              </Text>
+            </TouchableOpacity>
           </View>
         </View>
-      </Modal>
-    </SafeAreaView>
+      </View>
+    </Modal>
   );
 };
 
@@ -281,24 +306,18 @@ const TopicItem = ({
         placeholderTextColor={colors.icon}
       />
 
-      {index == 0 && !focus ? (
-        <TouchableOpacity
-          onPress={() =>
-            !focus && index !== 0
-              ? onDelete(index)
-              : onSubmit(text, index, true)
-          }
-          style={{
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}>
-          <Icon
-            name={!focus && index !== 0 ? 'minus' : 'plus'}
-            size={SIZE.lg}
-            color={colors.accent}
-          />
-        </TouchableOpacity>
-      ) : null}
+      <TouchableOpacity
+        onPress={() => (!focus ? onDelete(index) : onSubmit(text, index, true))}
+        style={{
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
+        <Icon
+          name={!focus ? 'minus' : 'plus'}
+          size={SIZE.lg}
+          color={colors.accent}
+        />
+      </TouchableOpacity>
     </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%',
           }}>
-          <TextInput
-            ref={titleRef}
-            placeholder="Untitled Note"
-            placeholderTextColor={colors.icon}
+          <View
             style={{
-              width: '100%',
-              fontFamily: WEIGHT.bold,
-              fontSize: SIZE.xxl,
-              paddingHorizontal: '3%',
-              paddingVertical: 0,
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              width: '96%',
+              alignSelf: 'center',
               marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.04,
-            }}
-            onChangeText={value => {
-              title = value;
-            }}
-            onSubmitEditing={async () => await saveNote()}
-          />
+            }}>
+            <Icon
+              style={{
+                paddingRight: 10,
+              }}
+              name="chevron-left"
+              color={colors.pri}
+              size={SIZE.xxl}
+            />
+
+            <TextInput
+              ref={titleRef}
+              placeholder="Untitled Note"
+              placeholderTextColor={colors.icon}
+              style={{
+                width: '90%',
+                fontFamily: WEIGHT.bold,
+                fontSize: SIZE.xxl,
+                maxWidth: '90%',
+                paddingVertical: 0,
+              }}
+              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
-            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>
+          <NotebookItem item={item} index={index} colors={colors} />
         )}
       />
     </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;