Add section about directory/file naming to the Readme

README.md

@@ -100,15 +100,6 @@ Our React Native Android app now uses the `Hermes` JS engine which requires your
 1. The application uses [React-Router](https://reactrouter.com/native/guides/quick-start) for navigating between parts of the app.
 1. [Higher Order Components](https://reactjs.org/docs/higher-order-components.html) are used to connect React components to persistent storage via Ion.
 
-## Platform-Specific File Extensions
-In most cases, the code written for this repo should be platform-independent. In such cases, each module should have a single file, `index.js`, which defines the module's exports. There are, however, some cases in which a feature is intrinsically tied to the underlying platform. In such cases, the following file extensions can be used to export platform-specific code from a module:
-- Mobile => `index.native.js`
-- iOS/Android => `index.ios.js`/`index.android.js`
-- Web => `index.website.js`
-- Desktop => `index.desktop.js`
-
-Note that `index.js` should be the default. i.e: If you have mobile-specific implementation in `index.native.js`, then the desktop/web implementation can be contained in a shared `index.js`. Furthermore, `index.native.js` should not be included in the same module as `index.ios.js` or `index.android.js`, nor should `index.js` be included in the same module as `index.website.js` or `index.desktop.js`.
-
 ## Structure of the app
 These are the main pieces of the application.
 
@@ -138,6 +129,43 @@ This layer is solely responsible for:
 - Reflecting exactly the data that is in persistent storage by using `withIon()` to bind to Ion data.
 - Taking user input and passing it to an action
 
+### Directory structure
+
+Almost all the code is located in the `src` folder, inside it there's some organization, we chose to name directories that are 
+created to house a collection of items in plural form and using camelCase (eg: pages, libs, etc), the main ones we have for now are:
+
+- components: React native components that are re-used in several places.
+- libs: Library classes/functions, these are not React native components (ie: they are not UI)
+- pages: These are components that define pages in the app. The component that defines the page itself should be named 
+`<pageName>Page` if there are components used only inside one page, they should live in its own directory named after the `<pageName>`.
+- styles: These files define styles used among components/pages
+
+### File naming/structure
+
+Files should be named after the component/function/constants they export, respecting the casing used for it. ie: 
+
+- If you export a constant named `CONST` it's file/directory should be named the `CONST`.
+- If you export a component named `Text` the file/directory should be named `Text` 
+- If you export a function named `guid` the file/directory should be named `guid`. 
+- For files that are utilities that export several functions/classes use the UpperCamelCase version ie: `DateUtils`.
+- HOCs should be named in camelCase like withIon.
+- All React components should be PascalCase (a.k.a. UpperCamelCase 🐫).
+
+## Platform-Specific File Extensions
+In most cases, the code written for this repo should be platform-independent. In such cases, each module should have a single file, `index.js`, which defines the module's exports. There are, however, some cases in which a feature is intrinsically tied to the underlying platform. In such cases, the following file extensions can be used to export platform-specific code from a module:
+- Mobile => `index.native.js`
+- iOS/Android => `index.ios.js`/`index.android.js`
+- Web => `index.website.js`
+- Desktop => `index.desktop.js`
+
+Note that `index.js` should be the default. i.e: If you have mobile-specific implementation in `index.native.js`, then the desktop/web implementation can be contained in a shared `index.js`. Furthermore, `index.native.js` should not be included in the same module as `index.ios.js` or `index.android.js`, nor should `index.js` be included in the same module as `index.website.js` or `index.desktop.js`.
+
+### API building
+
+When adding new API commands (and preferrably when starting using a new one that was not yet used in this codebase) always
+prefer to return the created/updated data in the command itself, instead of saving and reloading. ie: if we call `CreateTransaction`,
+we should prefer making `CreateTransaction` return the data it just created instead of calling `CreateTransaction` then `Get` rvl=transactionList
+
 # Deploying 
 ##  Continuous deployment / GitHub workflows
 Every PR merged into `master` will kick off the **Create a new version** GitHub workflow defined in `.github/workflows/version.yml`.

src/Expensify.js

@@ -1,21 +1,21 @@
 import React, {Component} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import {recordCurrentlyViewedReportID, recordCurrentRoute} from './lib/actions/App';
-import SignInPage from './page/SignInPage';
-import HomePage from './page/home/HomePage';
-import Ion from './lib/Ion';
-import * as ActiveClientManager from './lib/ActiveClientManager';
+import {recordCurrentlyViewedReportID, recordCurrentRoute} from './libs/actions/App';
+import SignInPage from './pages/SignInPage';
+import HomePage from './pages/home/HomePage';
+import Ion from './libs/Ion';
+import * as ActiveClientManager from './libs/ActiveClientManager';
 import IONKEYS from './IONKEYS';
 import withIon from './components/withIon';
-import styles from './style/StyleSheet';
+import styles from './styles/StyleSheet';
 
 import {
     Route,
     Router,
     Redirect,
     Switch
-} from './lib/Router';
+} from './libs/Router';
 import ROUTES from './ROUTES';
 
 // Initialize the store when the app loads for the first time

src/components/InlineCodeBlock/index.android.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
-import {webViewStyles} from '../../style/StyleSheet';
+import {webViewStyles} from '../../styles/StyleSheet';
 
 const propTypes = {
     children: PropTypes.node.isRequired,

src/components/InlineCodeBlock/index.ios.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
-import styles, {webViewStyles} from '../../style/StyleSheet';
+import styles, {webViewStyles} from '../../styles/StyleSheet';
 
 const propTypes = {
     children: PropTypes.node.isRequired,

src/components/InlineCodeBlock/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Text} from 'react-native';
-import {webViewStyles} from '../../style/StyleSheet';
+import {webViewStyles} from '../../styles/StyleSheet';
 
 const propTypes = {
     children: PropTypes.node.isRequired,

src/components/InvertedFlatList/BaseInvertedFlatList.js

@@ -2,7 +2,7 @@ import _ from 'underscore';
 import React, {forwardRef, Component} from 'react';
 import PropTypes from 'prop-types';
 import {FlatList, View} from 'react-native';
-import {lastItem} from '../../lib/CollectionUtils';
+import {lastItem} from '../../libs/CollectionUtils';
 
 const propTypes = {
     // Same as FlatList can be any array of anything

src/components/PressableLink/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Link} from '../../lib/Router';
+import {Link} from '../../libs/Router';
 
 /**
  * On web, no changes to Link are required to make links pressable

src/components/PressableLink/index.native.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Link} from '../../lib/Router';
+import {Link} from '../../libs/Router';
 
 /**
  * On the native layers, we need to convert the onClick prop to onPress for react-router-native

src/components/Text.js

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import {Text as RNText} from 'react-native';
-import fontFamily from '../style/fontFamily';
-import {colors} from '../style/StyleSheet';
+import fontFamily from '../styles/fontFamily';
+import {colors} from '../styles/StyleSheet';
 
 const propTypes = {
     // The color of the text

src/components/withIon.js

@@ -5,7 +5,7 @@
  */
 import React from 'react';
 import _ from 'underscore';
-import Ion from '../lib/Ion';
+import Ion from '../libs/Ion';
 
 /**
  * Returns the display name of a component

src/lib/API.js → src/libs/API.js

@@ -7,7 +7,7 @@ import CONFIG from '../CONFIG';
 import * as Pusher from './Pusher/pusher';
 import ROUTES from '../ROUTES';
 import Str from './Str';
-import Guid from './Guid';
+import guid from './guid';
 import redirectToSignIn from './actions/SignInRedirect';
 
 // Queue for network requests so we don't lose actions done by the user while offline
@@ -364,7 +364,7 @@ function authenticate(parameters) {
         // After the user authenticates, create a new login for the user so that we can reauthenticate when the
         // authtoken expires
         .then(response => (
-            createLogin(Str.generateDeviceLoginID(), Guid())
+            createLogin(Str.generateDeviceLoginID(), guid())
                 .then(() => setSuccessfulSignInData(response, parameters.exitTo))
         ))
         .catch((error) => {

src/lib/ActiveClientManager/index.js → src/libs/ActiveClientManager/index.js

@@ -1,9 +1,9 @@
 import _ from 'underscore';
-import Guid from '../Guid';
+import guid from '../guid';
 import Ion from '../Ion';
 import IONKEYS from '../../IONKEYS';
 
-const clientID = Guid();
+const clientID = guid();
 const maxClients = 20;
 
 let activeClients;

src/lib/Str.js → src/libs/Str.js

@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import {AllHtmlEntities} from 'html-entities';
-import Guid from './Guid';
+import guid from './guid';
 
 
 const Str = {
@@ -59,7 +59,7 @@ const Str = {
      * @returns {string}
      */
     generateDeviceLoginID() {
-        return `react-native-chat-${Guid()}`;
+        return `react-native-chat-${guid()}`;
     },
 
     /**

src/page/SignInPage.js → src/pages/SignInPage.js

@@ -12,12 +12,12 @@ import {
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import CONFIG from '../CONFIG';
-import compose from '../lib/compose';
-import {withRouter} from '../lib/Router';
-import {signIn} from '../lib/actions/Session';
+import compose from '../libs/compose';
+import {withRouter} from '../libs/Router';
+import {signIn} from '../libs/actions/Session';
 import IONKEYS from '../IONKEYS';
 import withIon from '../components/withIon';
-import styles, {colors} from '../style/StyleSheet';
+import styles, {colors} from '../styles/StyleSheet';
 import logo from '../../assets/images/expensify-logo_reversed.png';
 
 const propTypes = {

src/page/home/HeaderView.js → src/pages/home/HeaderView.js

@@ -2,12 +2,12 @@ import React from 'react';
 import {View, Image, TouchableOpacity} from 'react-native';
 import PropTypes from 'prop-types';
 import Text from '../../components/Text';
-import styles from '../../style/StyleSheet';
+import styles from '../../styles/StyleSheet';
 import IONKEYS from '../../IONKEYS';
 import withIon from '../../components/withIon';
-import {withRouter} from '../../lib/Router';
+import {withRouter} from '../../libs/Router';
 import LHNToggle from '../../../assets/images/icon-menu-toggle.png';
-import compose from '../../lib/compose';
+import compose from '../../libs/compose';
 
 const propTypes = {
     // Toggles the hamburger menu open and closed

src/page/home/HomePage.js → src/pages/home/HomePage.js

@@ -7,17 +7,17 @@ import {
     Easing
 } from 'react-native';
 import {SafeAreaInsetsContext, SafeAreaProvider} from 'react-native-safe-area-context';
-import {Route} from '../../lib/Router';
-import styles, {getSafeAreaPadding} from '../../style/StyleSheet';
+import {Route} from '../../libs/Router';
+import styles, {getSafeAreaPadding} from '../../styles/StyleSheet';
 import Header from './HeaderView';
 import Sidebar from './sidebar/SidebarView';
 import Main from './MainView';
-import {subscribeToReportCommentEvents, fetchAll as fetchAllReports} from '../../lib/actions/Report';
-import {fetch as fetchPersonalDetails} from '../../lib/actions/PersonalDetails';
-import * as Pusher from '../../lib/Pusher/pusher';
-import UnreadIndicatorUpdater from '../../lib/UnreadIndicatorUpdater';
+import {subscribeToReportCommentEvents, fetchAll as fetchAllReports} from '../../libs/actions/Report';
+import {fetch as fetchPersonalDetails} from '../../libs/actions/PersonalDetails';
+import * as Pusher from '../../libs/Pusher/pusher';
+import UnreadIndicatorUpdater from '../../libs/UnreadIndicatorUpdater';
 import ROUTES from '../../ROUTES';
-import NetworkConnection from '../../lib/NetworkConnection';
+import NetworkConnection from '../../libs/NetworkConnection';
 
 const windowSize = Dimensions.get('window');
 const widthBreakPoint = 1000;

src/page/home/MainView.js → src/pages/home/MainView.js

@@ -5,9 +5,9 @@ import _ from 'underscore';
 import ReportView from './report/ReportView';
 import withIon from '../../components/withIon';
 import IONKEYS from '../../IONKEYS';
-import styles from '../../style/StyleSheet';
-import {withRouter} from '../../lib/Router';
-import compose from '../../lib/compose';
+import styles from '../../styles/StyleSheet';
+import {withRouter} from '../../libs/Router';
+import compose from '../../libs/compose';
 
 const propTypes = {
     // This comes from withRouter

src/page/home/report/ReportActionCompose.js → src/pages/home/report/ReportActionCompose.js

@@ -2,14 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {View, Image, TouchableOpacity} from 'react-native';
 import _ from 'underscore';
-import styles, {colors} from '../../../style/StyleSheet';
+import styles, {colors} from '../../../styles/StyleSheet';
 import TextInputFocusable from '../../../components/TextInputFocusable';
 import sendIcon from '../../../../assets/images/icon-send.png';
 import IONKEYS from '../../../IONKEYS';
 import paperClipIcon from '../../../../assets/images/icon-paper-clip.png';
-import ImagePicker from '../../../lib/ImagePicker';
+import ImagePicker from '../../../libs/ImagePicker';
 import withIon from '../../../components/withIon';
-import {addAction, saveReportComment} from '../../../lib/actions/Report';
+import {addAction, saveReportComment} from '../../../libs/actions/Report';
 
 const propTypes = {
     // A method to call when the form is submitted

src/page/home/report/ReportActionItemDate.js → src/pages/home/report/ReportActionItemDate.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Text} from 'react-native';
-import DateUtils from '../../../lib/DateUtils';
-import styles from '../../../style/StyleSheet';
+import DateUtils from '../../../libs/DateUtils';
+import styles from '../../../styles/StyleSheet';
 
 const propTypes = {
     // UTC timestamp for when the action was created

src/page/home/report/ReportActionItemFragment.js → src/pages/home/report/ReportActionItemFragment.js

@@ -4,12 +4,12 @@ import {
     Linking, ActivityIndicator, View, Dimensions
 } from 'react-native';
 import PropTypes from 'prop-types';
-import Str from '../../../lib/Str';
+import Str from '../../../libs/Str';
 import ReportActionFragmentPropTypes from './ReportActionFragmentPropTypes';
-import styles, {webViewStyles, colors} from '../../../style/StyleSheet';
+import styles, {webViewStyles, colors} from '../../../styles/StyleSheet';
 import Text from '../../../components/Text';
 import AnchorForCommentsOnly from '../../../components/AnchorForCommentsOnly';
-import {getAuthToken} from '../../../lib/API';
+import {getAuthToken} from '../../../libs/API';
 import InlineCodeBlock from '../../../components/InlineCodeBlock';
 
 const propTypes = {

src/page/home/report/ReportActionItemGrouped.js → src/pages/home/report/ReportActionItemGrouped.js

@@ -3,7 +3,7 @@ import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import ReportActionPropTypes from './ReportActionPropTypes';
 import ReportActionItemMessage from './ReportActionItemMessage';
-import styles from '../../../style/StyleSheet';
+import styles from '../../../styles/StyleSheet';
 
 const propTypes = {
     // All the data of the action

src/page/home/report/ReportActionItemMessage.js → src/pages/home/report/ReportActionItemMessage.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
-import styles from '../../../style/StyleSheet';
+import styles from '../../../styles/StyleSheet';
 import ReportActionItemFragment from './ReportActionItemFragment';
 import ReportActionPropTypes from './ReportActionPropTypes';
 

src/page/home/report/ReportActionItemSingle.js → src/pages/home/report/ReportActionItemSingle.js

@@ -5,7 +5,7 @@ import _ from 'underscore';
 import ReportActionPropTypes from './ReportActionPropTypes';
 import ReportActionItemMessage from './ReportActionItemMessage';
 import ReportActionItemFragment from './ReportActionItemFragment';
-import styles from '../../../style/StyleSheet';
+import styles from '../../../styles/StyleSheet';
 import CONST from '../../../CONST';
 import ReportActionItemDate from './ReportActionItemDate';
 

src/page/home/report/ReportActionsView.js → src/pages/home/report/ReportActionsView.js

@@ -5,13 +5,13 @@ import _ from 'underscore';
 import lodashGet from 'lodash.get';
 import Text from '../../../components/Text';
 import withIon from '../../../components/withIon';
-import {fetchActions, updateLastReadActionID} from '../../../lib/actions/Report';
+import {fetchActions, updateLastReadActionID} from '../../../libs/actions/Report';
 import IONKEYS from '../../../IONKEYS';
 import ReportActionItem from './ReportActionItem';
-import styles from '../../../style/StyleSheet';
+import styles from '../../../styles/StyleSheet';
 import ReportActionPropTypes from './ReportActionPropTypes';
 import InvertedFlatList from '../../../components/InvertedFlatList';
-import {lastItem} from '../../../lib/CollectionUtils';
+import {lastItem} from '../../../libs/CollectionUtils';
 
 const propTypes = {
     // The ID of the report actions will be created for

src/page/home/report/ReportView.js → src/pages/home/report/ReportView.js

@@ -3,9 +3,9 @@ import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import ReportActionView from './ReportActionsView';
 import ReportActionCompose from './ReportActionCompose';
-import {addAction} from '../../../lib/actions/Report';
+import {addAction} from '../../../libs/actions/Report';
 import KeyboardSpacer from '../../../components/KeyboardSpacer';
-import styles from '../../../style/StyleSheet';
+import styles from '../../../styles/StyleSheet';
 
 const propTypes = {
     // The ID of the report actions will be created for

src/page/home/sidebar/AppLinks/index.desktop.js → src/pages/home/sidebar/AppLinks/index.desktop.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import styles from '../../../../style/StyleSheet';
-import openURLInNewTab from '../../../../lib/openURLInNewTab';
+import styles from '../../../../styles/StyleSheet';
+import openURLInNewTab from '../../../../libs/openURLInNewTab';
 import Text from '../../../../components/Text';
 
 const AppLinks = () => (

src/page/home/sidebar/AppLinks/index.native.js → src/pages/home/sidebar/AppLinks/index.native.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import styles from '../../../../style/StyleSheet';
-import openURLInNewTab from '../../../../lib/openURLInNewTab';
+import styles from '../../../../styles/StyleSheet';
+import openURLInNewTab from '../../../../libs/openURLInNewTab';
 import Text from '../../../../components/Text';
 
 const AppLinks = () => (