refactor

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

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Platform } from 'react-native';
 import { ActivityIndicator, Modal, TouchableOpacity, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -13,7 +12,7 @@ import {
   eSendEvent,
   eSubscribeEvent,
   eUnSubscribeEvent,
-  ToastEvent,
+  ToastEvent
 } from '../../services/EventManager';
 import { clearMessage, setEmailVerifyMessage } from '../../services/Message';
 import PremiumService from '../../services/PremiumService';
@@ -22,16 +21,15 @@ import {db} from '../../utils/DB';
 import {
   eOpenLoginDialog,
   eOpenRecoveryKeyDialog,
-  refreshNotesPage,
+  refreshNotesPage
 } from '../../utils/Events';
 import { MMKV } from '../../utils/mmkv';
 import { SIZE } from '../../utils/SizeUtils';
 import { sleep } from '../../utils/TimeUtils';
 import { ActionIcon } from '../ActionIcon';
 import BaseDialog from '../Dialog/base-dialog';
-import DialogContainer from '../Dialog/dialog-container';
 import Input from '../Input';
-import {ListHeaderComponent} from '../SimpleList/ListHeaderComponent';
+import { Header } from '../SimpleList/header';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
 
@@ -457,7 +455,7 @@ const LoginDialog = () => {
             <View />
           </View>
 
-          <ListHeaderComponent
+          <Header
             color="transparent"
             type="settings"
             shouldShow

apps/mobile/src/components/NoteItem/wrapper.js

@@ -1,6 +1,6 @@
 import React, {useEffect, useMemo, useState} from 'react';
-import NoteItem from '../../components/NoteItem';
+import NoteItem from '.';
-import SelectionWrapper from '../../components/SelectionWrapper';
+import SelectionWrapper from '../SelectionWrapper';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
 import {
@@ -17,7 +17,7 @@ import {DDS} from '../../services/DeviceDetection';
 import {tabBarRef} from '../../utils/Refs';
 import {notesnook} from '../../../e2e/test.ids';
 
-export const NoteItemWrapper = ({item, index, isTrash = false}) => {
+export const NoteWrapper = ({item, index, isTrash = false}) => {
   const [state, dispatch] = useTracked();
   const {colors, selectionMode} = state;
   const [note, setNote] = useState(item);

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

@@ -1,13 +1,13 @@
 import React, {useMemo} from 'react';
 import {notesnook} from '../../../e2e/test.ids';
-import {NotebookItem} from '../../components/NotebookItem';
+import {NotebookItem} from '.';
-import SelectionWrapper from '../../components/SelectionWrapper';
+import SelectionWrapper from '../SelectionWrapper';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
 import Navigation from '../../services/Navigation';
 import {rootNavigatorRef} from '../../utils/Refs';
 
-export const NotebookItemWrapper = ({
+export const NotebookWrapper = ({
   item,
   index,
   isTrash = false,

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

@@ -60,10 +60,6 @@ const SelectionWrapper = ({
     setActionStrip(false);
   };
 
-  const closeStrip = () => {
-    setActionStrip(false);
-  };
-
   useEffect(() => {
     eSubscribeEvent('navigate', closeStrip);
 

apps/mobile/src/components/SimpleList/card.js

@@ -8,7 +8,7 @@ import { getElevation } from '../../utils';
 import {SIZE} from '../../utils/SizeUtils';
 import Paragraph from '../Typography/Paragraph';
 
-export const MessageCard = ({data, color}) => {
+export const Card = ({data, color}) => {
   const [state] = useTracked();
   const {selectionMode, messageBoardState} = state;
 
@@ -25,7 +25,7 @@ export const MessageCard = ({data, color}) => {
         right: 0,
         top: 0,
         zIndex: 999,
-        backgroundColor: messageBoardState.type === "error" ? "red" : color,
+        backgroundColor: messageBoardState.type === 'error' ? 'red' : color,
         width: '100%',
       }}>
       <View
@@ -45,9 +45,13 @@ export const MessageCard = ({data, color}) => {
             width: 20,
             justifyContent: 'center',
             alignItems: 'center',
-            ...getElevation(5)
+            ...getElevation(5),
           }}>
-          <Icon name={messageBoardState.icon} size={SIZE.sm} color={messageBoardState.type === "error" ? "red" : color} />
+          <Icon
+            name={messageBoardState.icon}
+            size={SIZE.sm}
+            color={messageBoardState.type === 'error' ? 'red' : color}
+          />
         </View>
 
         <Paragraph size={SIZE.sm} color="white">

apps/mobile/src/components/SimpleList/empty.js

@@ -0,0 +1,85 @@
+import React, {useEffect, useState} from 'react';
+import {ActivityIndicator, useWindowDimensions, View} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {useTracked} from '../../provider';
+import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
+import Navigation from '../../services/Navigation';
+import {COLORS_NOTE} from '../../utils/Colors';
+import {SIZE} from '../../utils/SizeUtils';
+import {Button} from '../Button';
+import Seperator from '../Seperator';
+import Heading from '../Typography/Heading';
+import Paragraph from '../Typography/Paragraph';
+
+export const Empty = ({loading = true, placeholderData}) => {
+  const [state] = useTracked();
+  const {colors} = state;
+  const [headerTextState, setHeaderTextState] = useState(
+    Navigation.getHeaderState(),
+  );
+  const insets = useSafeAreaInsets();
+  const {height} = useWindowDimensions();
+
+  const onHeaderStateChange = (event) => {
+    if (!event) return;
+    setHeaderTextState(event);
+  };
+  useEffect(() => {
+    eSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
+    return () => {
+      eUnSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
+    };
+  }, []);
+
+  return (
+    <View
+      style={[
+        {
+          backgroundColor: colors.bg,
+          height: height - 250 - insets.top,
+          width: '100%',
+        },
+      ]}>
+      <View
+        style={{
+          flexGrow: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
+        <Heading>{placeholderData.heading}</Heading>
+        <Paragraph
+          style={{
+            textAlign: 'center',
+            width: '80%',
+          }}
+          color={colors.icon}>
+          {loading ? placeholderData.loading : placeholderData.paragraph}
+        </Paragraph>
+        <Seperator />
+        {placeholderData.button && !loading ? (
+          <Button
+            onPress={placeholderData.action}
+            title={placeholderData.button}
+            icon="plus"
+            type="accent"
+            fontSize={SIZE.md}
+            accentColor="bg"
+            accentText={
+              COLORS_NOTE[headerTextState?.heading?.toLowerCase()]
+                ? headerTextState.heading?.toLowerCase()
+                : 'accent'
+            }
+          />
+        ) : loading ? (
+          <ActivityIndicator
+            color={
+              COLORS_NOTE[headerTextState?.heading?.toLowerCase()]
+                ? COLORS_NOTE[headerTextState?.heading?.toLowerCase()]
+                : colors.accent
+            }
+          />
+        ) : null}
+      </View>
+    </View>
+  );
+};

apps/mobile/src/components/SimpleList/footer.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import {View} from 'react-native';
+
+export const Footer = () => {
+  return <View style={{height: 300}} />;
+};

apps/mobile/src/components/SimpleList/header.js

@@ -1,19 +1,16 @@
-import React, {useEffect} from 'react';
+import React from 'react';
-import {Text, View} from 'react-native';
+import { View } from 'react-native';
-import Animated from 'react-native-reanimated';
 import { useTracked } from '../../provider';
 import { DDS } from '../../services/DeviceDetection';
-import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
 import { COLORS_NOTE } from '../../utils/Colors';
 import { hexToRGBA } from '../../utils/ColorUtils';
-import {eScrollEvent} from '../../utils/Events';
 import { normalize, SIZE } from '../../utils/SizeUtils';
 import { Placeholder } from '../ListPlaceholders';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
-import {MessageCard} from './MessageCard';
+import { Card } from './card';
 
-export const ListHeaderComponent = ({
+export const Header = ({
   type,
   messageCard = true,
   title,
@@ -36,9 +33,7 @@ export const ListHeaderComponent = ({
         alignItems: 'center',
       }}>
       {messageCard && (
-        <MessageCard
+        <Card color={COLORS_NOTE[title.toLowerCase()] || colors.accent} />
-          color={COLORS_NOTE[title.toLowerCase()] || colors.accent}
-        />
       )}
     </View>
   ) : (
@@ -47,9 +42,7 @@ export const ListHeaderComponent = ({
         width: '100%',
       }}>
       {messageCard && (
-        <MessageCard
+        <Card color={COLORS_NOTE[title.toLowerCase()] || colors.accent} />
-          color={COLORS_NOTE[title.toLowerCase()] || colors.accent}
-        />
       )}
       <View
         style={{

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

@@ -1,35 +1,20 @@
 import React, { useEffect, useState } from 'react';
-import {
+import { RefreshControl, useWindowDimensions } from 'react-native';
-  ActivityIndicator,
-  RefreshControl,
-  useWindowDimensions,
-  View,
-} from 'react-native';
-import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { DataProvider, LayoutProvider, RecyclerListView } from 'recyclerlistview';
 import { useTracked } from '../../provider';
 import { DDS } from '../../services/DeviceDetection';
-import {
+import { eSendEvent } from '../../services/EventManager';
-  eSendEvent,
-  eSubscribeEvent,
-  eUnSubscribeEvent,
-} from '../../services/EventManager';
-import Navigation from '../../services/Navigation';
 import Sync from '../../services/Sync';
 import { dHeight } from '../../utils';
-import {COLORS_NOTE} from '../../utils/Colors';
+import { eScrollEvent } from '../../utils/Events';
-import {eOpenJumpToDialog, eScrollEvent} from '../../utils/Events';
+import { NotebookWrapper } from '../NotebookItem/wrapper';
-import {SIZE} from '../../utils/SizeUtils';
+import { NoteWrapper } from '../NoteItem/wrapper';
-import {Button} from '../Button';
-import {HeaderMenu} from '../Header/HeaderMenu';
-import Seperator from '../Seperator';
 import TagItem from '../TagItem';
-import Heading from '../Typography/Heading';
+import { Empty } from './empty';
-import Paragraph from '../Typography/Paragraph';
+import { Footer } from './footer';
-import {ListHeaderComponent} from './ListHeaderComponent';
+import { Header } from './header';
-import {NotebookItemWrapper} from './NotebookItemWrapper';
+import { SectionHeader } from './section-header';
-import {NoteItemWrapper} from './NoteItemWrapper';
 
 const header = {
   type: 'MAIN_HEADER',
@@ -138,18 +123,16 @@ const SimpleList = ({
   const _renderRow = (type, data, index) => {
     switch (type) {
       case 'note':
-        return (
+        return <NoteWrapper item={data} pinned={data.pinned} index={index} />;
-          <NoteItemWrapper item={data} pinned={data.pinned} index={index} />
-        );
       case 'notebook':
         return (
-          <NotebookItemWrapper item={data} pinned={data.pinned} index={index} />
+          <NotebookWrapper item={data} pinned={data.pinned} index={index} />
         );
       case 'tag':
         return <TagItem item={data} index={index} />;
       case 'topic':
         return (
-          <NotebookItemWrapper
+          <NotebookWrapper
             item={data}
             isTopic={true}
             pinned={data.pinned}
@@ -158,13 +141,13 @@ const SimpleList = ({
         );
       case 'trash':
         return data.itemType === 'note' ? (
-          <NoteItemWrapper item={data} index={index} isTrash={true} />
+          <NoteWrapper item={data} index={index} isTrash={true} />
         ) : (
-          <NotebookItemWrapper item={data} index={index} isTrash={true} />
+          <NotebookWrapper item={data} index={index} isTrash={true} />
         );
       case 'MAIN_HEADER':
         return (
-          <ListHeaderComponent
+          <Header
             title={headerProps.heading}
             type={dataType}
             index={index}
@@ -173,7 +156,7 @@ const SimpleList = ({
         );
       case 'header':
         return (
-          <RenderSectionHeader
+          <SectionHeader
             item={data}
             index={index}
             headerProps={headerProps}
@@ -182,12 +165,7 @@ const SimpleList = ({
           />
         );
       case 'empty':
-        return (
+        return <Empty loading={loading} placeholderData={placeholderData} />;
-          <ListEmptyComponent
-            loading={loading}
-            placeholderData={placeholderData}
-          />
-        );
     }
   };
 
@@ -222,7 +200,7 @@ const SimpleList = ({
     width: '100%',
   };
 
-  const renderFooter = () => <View style={{height: 300}} />;
+
 
   return (
     <RecyclerListView
@@ -234,7 +212,7 @@ const SimpleList = ({
       canChangeSize={true}
       optimizeForInsertDeleteAnimations
       //forceNonDeterministicRendering
-      renderFooter={renderFooter}
+      renderFooter={ Footer}
       scrollViewProps={scrollProps}
       style={styles}
     />
@@ -242,130 +220,3 @@ const SimpleList = ({
 };
 
 export default SimpleList;
-
-const RenderSectionHeader = ({
-  item,
-  index,
-  headerProps,
-  jumpToDialog,
-  sortMenuButton,
-}) => {
-  const [state] = useTracked();
-  const {colors} = state;
-
-  return (
-    <View
-      style={{
-        flexDirection: 'row',
-        alignItems: 'center',
-        width: '100%',
-        justifyContent: 'space-between',
-        paddingHorizontal: 12,
-        height: 30,
-        backgroundColor:
-          index === 1
-            ? headerProps.color
-              ? colors[headerProps.color]
-              : colors.shade
-            : colors.nav,
-        marginTop: index === 1 ? 0 : 5,
-      }}>
-      <TouchableWithoutFeedback
-        onPress={() => {
-          if (jumpToDialog) {
-            eSendEvent(eOpenJumpToDialog);
-          }
-        }}
-        hitSlop={{top: 10, left: 10, right: 30, bottom: 15}}
-        style={{
-          height: '100%',
-          justifyContent: 'center',
-        }}>
-        <Heading
-          color={colors.accent}
-          size={SIZE.sm}
-          style={{
-            minWidth: 60,
-            alignSelf: 'center',
-            textAlignVertical: 'center',
-          }}>
-          {!item.title || item.title === '' ? 'Pinned' : item.title}
-        </Heading>
-      </TouchableWithoutFeedback>
-      {index === 1 && sortMenuButton ? <HeaderMenu /> : null}
-    </View>
-  );
-};
-
-const ListEmptyComponent = ({loading = true, placeholderData}) => {
-  const [state] = useTracked();
-  const {colors} = state;
-  const [headerTextState, setHeaderTextState] = useState(
-    Navigation.getHeaderState(),
-  );
-  const insets = useSafeAreaInsets();
-  const {height} = useWindowDimensions();
-
-  const onHeaderStateChange = (event) => {
-    if (!event) return;
-    setHeaderTextState(event);
-  };
-  useEffect(() => {
-    eSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
-    return () => {
-      eUnSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
-    };
-  }, []);
-
-  return (
-    <View
-      style={[
-        {
-          backgroundColor: colors.bg,
-          height: height - 250 - insets.top,
-          width: '100%',
-        },
-      ]}>
-      <View
-        style={{
-          flexGrow: 1,
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}>
-        <Heading>{placeholderData.heading}</Heading>
-        <Paragraph
-          style={{
-            textAlign: 'center',
-            width: '80%',
-          }}
-          color={colors.icon}>
-          {loading ? placeholderData.loading : placeholderData.paragraph}
-        </Paragraph>
-        <Seperator />
-        {placeholderData.button && !loading ? (
-          <Button
-            onPress={placeholderData.action}
-            title={placeholderData.button}
-            icon="plus"
-            type="accent"
-            fontSize={SIZE.md}
-            accentColor="bg"
-            accentText={
-              COLORS_NOTE[headerTextState?.heading?.toLowerCase()]
-                ? headerTextState.heading?.toLowerCase()
-                : 'accent'
-            }
-          />
-        ) : loading ? (
-          <ActivityIndicator
-            color={
-              COLORS_NOTE[headerTextState?.heading?.toLowerCase()]
-                ? COLORS_NOTE[headerTextState?.heading?.toLowerCase()]
-                : colors.accent
-            }
-          />
-        ) : null}
-      </View>
-    </View>
-  );
-};

apps/mobile/src/components/SimpleList/sectionheader.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import {
+	View
+} from 'react-native';
+import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
+import { useTracked } from '../../provider';
+import {
+	eSendEvent
+} from '../../services/EventManager';
+import { eOpenJumpToDialog } from '../../utils/Events';
+import { SIZE } from '../../utils/SizeUtils';
+import { HeaderMenu } from '../Header/HeaderMenu';
+import Heading from '../Typography/Heading';
+
+export const SectionHeader = ({
+	item,
+	index,
+	headerProps,
+	jumpToDialog,
+	sortMenuButton,
+  }) => {
+	const [state] = useTracked();
+	const {colors} = state;
+  
+	return (
+	  <View
+		style={{
+		  flexDirection: 'row',
+		  alignItems: 'center',
+		  width: '100%',
+		  justifyContent: 'space-between',
+		  paddingHorizontal: 12,
+		  height: 30,
+		  backgroundColor:
+			index === 1
+			  ? headerProps.color
+				? colors[headerProps.color]
+				: colors.shade
+			  : colors.nav,
+		  marginTop: index === 1 ? 0 : 5,
+		}}>
+		<TouchableWithoutFeedback
+		  onPress={() => {
+			if (jumpToDialog) {
+			  eSendEvent(eOpenJumpToDialog);
+			}
+		  }}
+		  hitSlop={{top: 10, left: 10, right: 30, bottom: 15}}
+		  style={{
+			height: '100%',
+			justifyContent: 'center',
+		  }}>
+		  <Heading
+			color={colors.accent}
+			size={SIZE.sm}
+			style={{
+			  minWidth: 60,
+			  alignSelf: 'center',
+			  textAlignVertical: 'center',
+			}}>
+			{!item.title || item.title === '' ? 'Pinned' : item.title}
+		  </Heading>
+		</TouchableWithoutFeedback>
+		{index === 1 && sortMenuButton ? <HeaderMenu /> : null}
+	  </View>
+	);
+  };

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

@@ -2,7 +2,6 @@ import React, {useCallback, useEffect, useState} from 'react';
 import {AddNotebookEvent} from '../../components/DialogManager/recievers';
 import {Placeholder} from '../../components/ListPlaceholders';
 import SimpleList from '../../components/SimpleList';
-import {NotebookItemWrapper} from '../../components/SimpleList/NotebookItemWrapper';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
 import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton';
@@ -84,7 +83,6 @@ export const Folders = ({route, navigation}) => {
         data={notebooks}
         type="notebooks"
         focused={() => navigation.isFocused()}
-        RenderItem={NotebookItemWrapper}
         loading={loading}
         placeholderData={{
           heading: 'Your Notebooks',

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

@@ -2,7 +2,6 @@ import React, {useCallback, useEffect, useState} from 'react';
 import {InteractionManager, Platform} from 'react-native';
 import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton';
 import SimpleList from '../../components/SimpleList';
-import {NoteItemWrapper} from '../../components/SimpleList/NoteItemWrapper';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
 import {DDS} from '../../services/DeviceDetection';
@@ -217,7 +216,6 @@ export const Notes = ({route, navigation}) => {
         }}
         loading={loading || localLoad}
         focused={() => navigation.isFocused()}
-        RenderItem={NoteItemWrapper}
         placeholderText={`Add some notes to this" ${
           params.type ? params.type : 'topic.'
         }`}