refactor: prevent require cycles warning

apps/mobile/index.mobile.js

@@ -1,22 +1,21 @@
-import React, {useEffect, createRef} from 'react';
+import React, { useEffect, createRef } from 'react';
 import Animated from 'react-native-reanimated';
-import {Menu} from './src/components/Menu';
+import { Menu } from './src/components/Menu';
 import * as Animatable from 'react-native-animatable';
 import SideMenu from './src/components/SideMenu';
-import NavigationService, {
+import { EditorPosition } from './src/utils/animations';
-  AppContainer,
+import { sideMenuRef } from './src/utils/refs';
-} from './src/services/NavigationService';
+import { DDS, w } from './src/utils/utils';
-import {EditorPosition} from './src/utils/animations';
-import {sideMenuRef} from './src/utils/refs';
-import {DDS, w} from './src/utils/utils';
 import Editor from './src/views/Editor';
-import {useTracked} from './src/provider';
+import { useTracked } from './src/provider';
-import {StatusBar, Platform} from 'react-native';
+import { StatusBar, Platform } from 'react-native';
+import { AppContainer } from './src/services/AppContainer';
+import NavigationService from './src/services/NavigationService';
 
 const editorRef = createRef();
 export const Initialize = () => {
   const [state, dispatch] = useTracked();
-  const {colors} = state;
+  const { colors } = state;
 
   useEffect(() => {
     if (Platform.OS === 'android') {

apps/mobile/index.tablet.js

@@ -1,26 +1,26 @@
-import React, {createRef, useEffect, useState} from 'react';
+import React, { createRef, useEffect, useState } from 'react';
-import {Platform, StatusBar, View} from 'react-native';
+import { Platform, StatusBar, View } from 'react-native';
 import * as Animatable from 'react-native-animatable';
-import {Menu} from './src/components/Menu';
+import { Menu } from './src/components/Menu';
-import {ModalMenu} from './src/components/ModalMenu';
+import { ModalMenu } from './src/components/ModalMenu';
-import {useTracked} from './src/provider';
+import { useTracked } from './src/provider';
-import NavigationService, {
+
-  AppContainer,
-} from './src/services/NavigationService';
 import Editor from './src/views/Editor';
-import {eSubscribeEvent, eSendEvent} from './src/services/eventManager';
+import { eSubscribeEvent, eSendEvent } from './src/services/eventManager';
 import {
   eOpenFullscreenEditor,
   eCloseFullscreenEditor,
   eOnLoadNote,
 } from './src/services/events';
+import { AppContainer } from './src/services/AppContainer';
+import NavigationService from './src/services/NavigationService';
 
 const editorRef = createRef();
 let outColors;
 
 export const Initialize = () => {
   const [state, dispatch] = useTracked();
-  const {colors} = state;
+  const { colors } = state;
 
   const [fullscreen, setFullscreen] = useState(false);
 
@@ -56,7 +56,7 @@ export const Initialize = () => {
   };
 
   useEffect(() => {
-    eSendEvent(eOnLoadNote, {type: 'new'});
+    eSendEvent(eOnLoadNote, { type: 'new' });
     eSubscribeEvent(eOpenFullscreenEditor, showFullScreenEditor);
     eSubscribeEvent(eCloseFullscreenEditor, closeFullScreenEditor);
 

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

@@ -1,4 +1,4 @@
-import React, {createRef, useEffect, useState} from 'react';
+import React, { createRef, useEffect, useState } from 'react';
 import {
   Dimensions,
   StatusBar,
@@ -22,18 +22,18 @@ import {
   SIZE,
   WEIGHT,
 } from '../../common/common';
-import {useTracked} from '../../provider';
+import { useTracked } from '../../provider';
-import {ACTIONS} from '../../provider/actions';
+import { ACTIONS } from '../../provider/actions';
 import NavigationService from '../../services/NavigationService';
-import {timeConverter, ToastEvent, DDS, db} from '../../utils/utils';
+import { timeConverter, ToastEvent, DDS, db } from '../../utils/utils';
-import {openVault} from '../../services/eventManager';
+import { openVault } from '../../services/eventManager';
 
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 
 const tagsInputRef = createRef();
 export const ActionSheetComponent = ({
-  close = () => {},
+  close = () => { },
   item,
   hasColors = false,
   hasTags = false,
@@ -41,7 +41,7 @@ export const ActionSheetComponent = ({
   columnItems = [],
 }) => {
   const [state, dispatch] = useTracked();
-  const {colors, tags, currentEditingNote} = state;
+  const { colors, tags, currentEditingNote } = state;
   const [focused, setFocused] = useState(false);
   const [note, setNote] = useState(
     item
@@ -64,12 +64,12 @@ export const ActionSheetComponent = ({
     let newColors = setColorScheme(colors, accent);
     StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
 
-    dispatch({type: ACTIONS.THEME, colors: newColors});
+    dispatch({ type: ACTIONS.THEME, colors: newColors });
   }
 
   useEffect(() => {
     if (item.dateCreated !== null) {
-      setNote({...item});
+      setNote({ ...item });
     }
   }, [item]);
 
@@ -95,8 +95,8 @@ export const ActionSheetComponent = ({
 
     await db.notes.note(note.id).tag(tag);
 
-    setNote({...db.notes.note(note.id).data});
+    setNote({ ...db.notes.note(note.id).data });
-    dispatch({type: ACTIONS.TAGS});
+    dispatch({ type: ACTIONS.TAGS });
     tagToAdd = '';
   };
 
@@ -111,14 +111,14 @@ export const ActionSheetComponent = ({
         backPressCount = 0;
 
         let tagInputValue = note.tags[note.tags.length - 1];
-        let oldProps = {...note};
+        let oldProps = { ...note };
         if (oldProps.tags.length === 0) return;
 
         await db.notes
           .note(note.id)
           .untag(oldProps.tags[oldProps.tags.length - 1]);
 
-        setNote({...db.notes.note(note.id).data});
+        setNote({ ...db.notes.note(note.id).data });
 
         tagsInputRef.current?.setNativeProps({
           text: tagInputValue,
@@ -182,11 +182,11 @@ export const ActionSheetComponent = ({
     if (!toAdd || !toAdd.id) return;
 
     if (!nodispatch) {
-      dispatch({type: type});
+      dispatch({ type: type });
-      dispatch({type: ACTIONS.PINNED});
+      dispatch({ type: ACTIONS.PINNED });
-      dispatch({type: ACTIONS.FAVORITES});
+      dispatch({ type: ACTIONS.FAVORITES });
     }
-    setNote({...toAdd});
+    setNote({ ...toAdd });
   };
 
   const rowItemsData = [
@@ -194,8 +194,8 @@ export const ActionSheetComponent = ({
       name: 'Add to',
       icon: 'book-outline',
       func: () => {
-        dispatch({type: ACTIONS.MODAL_NAVIGATOR, enabled: true});
+        dispatch({ type: ACTIONS.MODAL_NAVIGATOR, enabled: true });
-        dispatch({type: ACTIONS.SELECTED_ITEMS, item: note});
+        dispatch({ type: ACTIONS.SELECTED_ITEMS, item: note });
 
         close('movenote');
       },
@@ -259,7 +259,7 @@ export const ActionSheetComponent = ({
       icon: 'delete-restore',
       func: async () => {
         await db.trash.restore(note.id);
-        dispatch({type: ACTIONS.TRASH});
+        dispatch({ type: ACTIONS.TRASH });
         localRefresh(note.type);
         ToastEvent.show(
           item.type === 'note' ? 'Note restored' : 'Notebook restored',
@@ -283,10 +283,10 @@ export const ActionSheetComponent = ({
       icon: 'theme-light-dark',
       func: () => {
         if (!colors.night) {
-          MMKV.setStringAsync('theme', JSON.stringify({night: true}));
+          MMKV.setStringAsync('theme', JSON.stringify({ night: true }));
           changeColorScheme(COLOR_SCHEME_DARK);
         } else {
-          MMKV.setStringAsync('theme', JSON.stringify({night: false}));
+          MMKV.setStringAsync('theme', JSON.stringify({ night: false }));
           changeColorScheme(COLOR_SCHEME_LIGHT);
         }
       },
@@ -304,7 +304,7 @@ export const ActionSheetComponent = ({
         } else {
           await db.notebooks.notebook(note.id).pin();
         }
-        dispatch({type: ACTIONS.PINNED});
+        dispatch({ type: ACTIONS.PINNED });
         localRefresh(item.type);
       },
       close: false,
@@ -321,7 +321,7 @@ export const ActionSheetComponent = ({
         } else {
           await db.notebooks.notebook(note.id).favorite();
         }
-        dispatch({type: ACTIONS.FAVORITES});
+        dispatch({ type: ACTIONS.FAVORITES });
         localRefresh(item.type);
       },
       close: false,
@@ -372,13 +372,13 @@ export const ActionSheetComponent = ({
     <TouchableOpacity
       key={tag}
       onPress={async () => {
-        let oldProps = {...note};
+        let oldProps = { ...note };
         try {
           await db.notes
             .note(note.id)
             .untag(oldProps.tags[oldProps.tags.indexOf(tag)]);
           localRefresh(oldProps.type);
-          dispatch({type: ACTIONS.TAGS});
+          dispatch({ type: ACTIONS.TAGS });
         } catch (e) {
           localRefresh(oldProps.type);
         }
@@ -419,7 +419,7 @@ export const ActionSheetComponent = ({
         } else {
           await db.notes.note(note.id).color(color);
         }
-        dispatch({type: ACTIONS.COLORS});
+        dispatch({ type: ACTIONS.COLORS });
         localRefresh(note.type);
       }}
       style={{

apps/mobile/src/services/AppContainer.js

@@ -0,0 +1,6 @@
+import { TopLevelNavigator } from "./Navigator";
+import {
+  createAppContainer,
+} from 'react-navigation';
+
+export const AppContainer = createAppContainer(TopLevelNavigator);

apps/mobile/src/services/NavigationService.js

@@ -1,129 +1,9 @@
 import {
-  createAppContainer,
   NavigationActions,
   StackActions,
 } from 'react-navigation';
-import {createStackNavigator} from 'react-navigation-stack';
-import AccountSettings from '../views/AccountSettings';
-import Editor from '../views/Editor';
-import Favorites from '../views/Favorites';
-import Folders from '../views/Folders';
-import ForgotPassword from '../views/ForgotPassword';
-import Home from '../views/Home/index';
-import Lists from '../views/Lists';
-import ListsEditor from '../views/ListsEditor';
-import Login from '../views/Login';
-import Notebook from '../views/Notebook';
-import Notes from '../views/Notes';
-import ReminderEditor from '../views/ReminderEditor';
-import Reminders from '../views/Reminders';
-import Settings from '../views/Settings';
-import Signup from '../views/Signup';
-import Tags from '../views/Tags';
-import Trash from '../views/Trash';
-import AppearanceSettings from '../views/AppearanceSettings';
-import EditorSettings from '../views/EditorSettings';
 
-const fade = props => {
-  const {position, scene} = props;
 
-  const index = scene.index;
-
-  const translateX = 0;
-  const translateY = 0;
-
-  const opacity = position.interpolate({
-    inputRange: [index - 0.7, index, index + 0.7],
-    outputRange: [0.7, 1, 0.7],
-  });
-
-  return {
-    opacity,
-    transform: [{translateX}, {translateY}],
-  };
-};
-
-const TopLevelNavigator = createStackNavigator(
-  {
-    Home: {
-      screen: Home,
-    },
-    Editor: {
-      screen: Editor,
-      navigationOptions: {
-        gesturesEnabled: false,
-      },
-    },
-    Reminders: {
-      screen: Reminders,
-    },
-    Lists: {
-      screen: Lists,
-    },
-    Folders: {
-      screen: Folders,
-    },
-    Favorites: {
-      screen: Favorites,
-    },
-    ListsEditor: {
-      screen: ListsEditor,
-    },
-    ReminderEditor: {
-      screen: ReminderEditor,
-    },
-    Login: {
-      screen: Login,
-    },
-    Signup: {
-      screen: Signup,
-    },
-    ForgotPassword: {
-      screen: ForgotPassword,
-    },
-    Settings: {
-      screen: Settings,
-    },
-    Trash: {
-      screen: Trash,
-    },
-    Notes: {
-      screen: Notes,
-    },
-    Tags: {
-      screen: Tags,
-    },
-    Notebook: {
-      screen: Notebook,
-    },
-    AccountSettings: {
-      screen: AccountSettings,
-    },
-    AppearanceSettings: {
-      screen: AppearanceSettings,
-    },
-    EditorSettings: {
-      screen: EditorSettings,
-    },
-  },
-  {
-    initialRouteName: 'Home',
-
-    defaultNavigationOptions: {
-      gesturesEnabled: false,
-      headerStyle: {
-        backgroundColor: 'transparent',
-        borderBottomWidth: 0,
-        height: 0,
-      },
-    },
-    cardOverlayEnabled: true,
-    cardShadowEnabled: true,
-    animationEnabled: false,
-  },
-);
-
-export const AppContainer = createAppContainer(TopLevelNavigator);
 
 let _navigator;
 

apps/mobile/src/services/Navigator.js

@@ -0,0 +1,120 @@
+import AccountSettings from '../views/AccountSettings';
+import Editor from '../views/Editor';
+import Favorites from '../views/Favorites';
+import Folders from '../views/Folders';
+import ForgotPassword from '../views/ForgotPassword';
+import Home from '../views/Home/index';
+import Lists from '../views/Lists';
+import ListsEditor from '../views/ListsEditor';
+import Login from '../views/Login';
+import Notebook from '../views/Notebook';
+import Notes from '../views/Notes';
+import ReminderEditor from '../views/ReminderEditor';
+import Reminders from '../views/Reminders';
+import Settings from '../views/Settings';
+import Signup from '../views/Signup';
+import Tags from '../views/Tags';
+import Trash from '../views/Trash';
+import AppearanceSettings from '../views/AppearanceSettings';
+import EditorSettings from '../views/EditorSettings';
+import { createStackNavigator } from 'react-navigation-stack';
+
+const fade = props => {
+  const { position, scene } = props;
+
+  const index = scene.index;
+
+  const translateX = 0;
+  const translateY = 0;
+
+  const opacity = position.interpolate({
+    inputRange: [index - 0.7, index, index + 0.7],
+    outputRange: [0.7, 1, 0.7],
+  });
+
+  return {
+    opacity,
+    transform: [{ translateX }, { translateY }],
+  };
+};
+
+
+export const TopLevelNavigator = createStackNavigator(
+  {
+    Home: {
+      screen: Home,
+    },
+    Editor: {
+      screen: Editor,
+      navigationOptions: {
+        gesturesEnabled: false,
+      },
+    },
+    Reminders: {
+      screen: Reminders,
+    },
+    Lists: {
+      screen: Lists,
+    },
+    Folders: {
+      screen: Folders,
+    },
+    Favorites: {
+      screen: Favorites,
+    },
+    ListsEditor: {
+      screen: ListsEditor,
+    },
+    ReminderEditor: {
+      screen: ReminderEditor,
+    },
+    Login: {
+      screen: Login,
+    },
+    Signup: {
+      screen: Signup,
+    },
+    ForgotPassword: {
+      screen: ForgotPassword,
+    },
+    Settings: {
+      screen: Settings,
+    },
+    Trash: {
+      screen: Trash,
+    },
+    Notes: {
+      screen: Notes,
+    },
+    Tags: {
+      screen: Tags,
+    },
+    Notebook: {
+      screen: Notebook,
+    },
+    AccountSettings: {
+      screen: AccountSettings,
+    },
+    AppearanceSettings: {
+      screen: AppearanceSettings,
+    },
+    EditorSettings: {
+      screen: EditorSettings,
+    },
+  },
+  {
+    initialRouteName: 'Home',
+
+    defaultNavigationOptions: {
+      gesturesEnabled: false,
+      headerStyle: {
+        backgroundColor: 'transparent',
+        borderBottomWidth: 0,
+        height: 0,
+      },
+    },
+    cardOverlayEnabled: true,
+    cardShadowEnabled: true,
+    animationEnabled: false,
+  },
+);

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

@@ -1,26 +1,22 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
-import {Dimensions, Text, TouchableOpacity, View} from 'react-native';
+import { Dimensions, Text, TouchableOpacity, View } from 'react-native';
-import {useIsFocused} from 'react-navigation-hooks';
+import { useIsFocused } from 'react-navigation-hooks';
-import {pv, SIZE, WEIGHT} from '../../common/common';
+import { pv, SIZE, WEIGHT } from '../../common/common';
 import Container from '../../components/Container';
-import {TagsPlaceHolder} from '../../components/ListPlaceholders';
+import { TagsPlaceHolder } from '../../components/ListPlaceholders';
 import SimpleList from '../../components/SimpleList';
-import {useTracked} from '../../provider';
+import { useTracked } from '../../provider';
-import {ACTIONS} from '../../provider/actions';
+import { ACTIONS } from '../../provider/actions';
 import NavigationService from '../../services/NavigationService';
-import {db} from '../../utils/utils';
 
-const w = Dimensions.get('window').width;
+export const Tags = ({ navigation }) => {
-const h = Dimensions.get('window').height;
-
-export const Tags = ({navigation}) => {
   const [state, dispatch] = useTracked();
-  const {colors, tags} = state;
+  const { colors, tags } = state;
   const [refreshing, setRefreshing] = useState(false);
   const isFocused = useIsFocused();
   useEffect(() => {
     if (isFocused) {
-      dispatch({type: ACTIONS.TAGS});
+      dispatch({ type: ACTIONS.TAGS });
       dispatch({
         type: ACTIONS.CURRENT_SCREEN,
         screen: 'tags',
@@ -32,7 +28,7 @@ export const Tags = ({navigation}) => {
     //Handle
   };
 
-  const _renderItem = ({item, index}) => (
+  const _renderItem = ({ item, index }) => (
     <TouchableOpacity
       key={item.title}
       onPress={() => {

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

@@ -1,22 +1,20 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
-import {useIsFocused} from 'react-navigation-hooks';
+import { useIsFocused } from 'react-navigation-hooks';
 import Container from '../../components/Container';
-import {
+import { TrashPlaceHolder } from '../../components/ListPlaceholders';
-  simpleDialogEvent,
+import { NotebookItem } from '../../components/NotebookItem';
-  TEMPLATE_EMPTY_TRASH,
-} from '../../components/DialogManager';
-import {TrashPlaceHolder} from '../../components/ListPlaceholders';
-import {NotebookItem} from '../../components/NotebookItem';
 import NoteItem from '../../components/NoteItem';
 import SelectionWrapper from '../../components/SelectionWrapper';
 import SimpleList from '../../components/SimpleList';
-import {useTracked} from '../../provider';
+import { useTracked } from '../../provider';
-import {ACTIONS} from '../../provider/actions';
+import { ACTIONS } from '../../provider/actions';
-import {db, ToastEvent, w} from '../../utils/utils';
+import { db, ToastEvent, w } from '../../utils/utils';
+import { simpleDialogEvent } from '../../components/DialogManager/recievers';
+import { TEMPLATE_EMPTY_TRASH } from '../../components/DialogManager/templates';
 
-export const Trash = ({navigation}) => {
+export const Trash = ({ navigation }) => {
   const [state, dispatch] = useTracked();
-  const {colors, selectionMode, trash} = state;
+  const { colors, selectionMode, trash } = state;
   const [refreshing, setRefreshing] = useState(false);
   const isFocused = useIsFocused();
   useEffect(() => {
@@ -32,7 +30,7 @@ export const Trash = ({navigation}) => {
     }
   }, [isFocused]);
 
-  const _renderItem = ({item, index}) => (
+  const _renderItem = ({ item, index }) => (
     <SelectionWrapper colors={colors} item={item}>
       {item.type === 'note' ? (
         <NoteItem
@@ -90,8 +88,8 @@ export const Trash = ({navigation}) => {
     try {
       await db.sync();
 
-      dispatch({type: ACTIONS.TRASH});
+      dispatch({ type: ACTIONS.TRASH });
-      dispatch({type: ACTIONS.USER});
+      dispatch({ type: ACTIONS.USER });
       setRefreshing(false);
       ToastEvent.show('Sync Complete', 'success');
     } catch (e) {