[No QA] Update App Readme to include flow chart. Fix error in style guide.

README.md

@@ -64,21 +64,21 @@ You can use any IDE or code editing tool for developing on any platform. Use you
 **Note:** Expensify engineers that will be testing with the API in your local dev environment please refer to [these additional instructions](https://stackoverflow.com/c/expensify/questions/7699/7700).
 
 ## Environment variables
-Creating an `.env` file is not necessary. We advise external contributors against it. It can lead to errors when 
+Creating an `.env` file is not necessary. We advise external contributors against it. It can lead to errors when
 variables referenced here get updated since your local `.env` file is ignored.
- 
+
 - `EXPENSIFY_URL_CASH` - The root URL used for the website
 - `EXPENSIFY_URL_SECURE` - The URL used to hit the Expensify secure API
 - `EXPENSIFY_URL_COM` - The URL used to hit the Expensify API
 - `EXPENSIFY_PARTNER_NAME` - Constant used for the app when authenticating.
-- `EXPENSIFY_PARTNER_PASSWORD` - Another constant used for the app when authenticating. (This is OK to be public) 
+- `EXPENSIFY_PARTNER_PASSWORD` - Another constant used for the app when authenticating. (This is OK to be public)
 - `PUSHER_APP_KEY` - Key used to authenticate with Pusher.com
 - `SECURE_NGROK_URL` - Secure URL used for `ngrok` when testing
 - `NGROK_URL` - URL used for `ngrok` when testing
 - `USE_NGROK` - Flag to turn `ngrok` testing on or off
 - `USE_WDYR` - Flag to turn [`Why Did You Render`](https://github.com/welldone-software/why-did-you-render) testing on or off
 - `USE_WEB_PROXY`⚠️- Used in web/desktop development, it starts a server along the local development server to proxy
-   requests to the backend. External contributors should set this to `true` otherwise they'll have CORS errors.  
+   requests to the backend. External contributors should set this to `true` otherwise they'll have CORS errors.
    If you don't want to start the proxy server set this explicitly to `false`
 - `CAPTURE_METRICS` (optional) - Set this to `true` to capture performance metrics and see them in Flipper
    see [PERFORMANCE.md](PERFORMANCE.md#performance-metrics-opt-in-on-local-release-builds) for more information
@@ -226,12 +226,14 @@ export default withOnyx({
 # Philosophy
 This application is built with the following principles.
 1. **Data Flow** - Ideally, this is how data flows through the app:
-    1. Server pushes data to the disk of any client (Server -> Pusher event -> Action listening to pusher event -> Onyx). Currently the code only does this with report comments. Until we make more server changes, this steps is actually done by the client requesting data from the server via XHR and then storing the response in Onyx.
-    1. Disk pushes data to the UI (Onyx -> withOnyx()/connect() -> React component).
-    1. UI pushes data to people's brains (React component -> device screen).
-    1. Brain pushes data into UI inputs (Device input -> React component).
-    1. UI inputs push data to the server (React component -> Action -> XHR to server).
-    1. Go to 1
+    1. Server pushes data to the disk of any client (Server -> Pusher event -> Action listening to pusher event -> Onyx).
+    >**Note:** Currently the code only does this with report comments. Until we make more server changes, this steps is actually done by the client requesting data from the server via XHR and then storing the response in Onyx.
+    2. Disk pushes data to the UI (Onyx -> withOnyx() -> React component).
+    3. UI pushes data to people's brains (React component -> device screen).
+    4. Brain pushes data into UI inputs (Device input -> React component).
+    5. UI inputs push data to the server (React component -> Action -> XHR to server).
+    6. Go to 1
+    ![New Expensify Data Flow Chart](/web/data_flow.png)
 1. **Offline first**
     - All data that is brought into the app and is necessary to display the app when offline should be stored on disk in persistent storage (eg. localStorage on browser platforms). [AsyncStorage](https://reactnative.dev/docs/asyncstorage) is a cross-platform abstraction layer that is used to access persistent storage.
     - All data that is displayed, comes from persistent storage.

STYLE.md

@@ -177,7 +177,7 @@ Empty functions (noop) should be declare as arrow functions with no whitespace i
 
 ## Accessing Object Properties and Default Values
 
-Use `_.get()` to safely access object properties and `||` to short circuit null or undefined values that are not guaranteed to exist in a consistent way throughout the codebase. In the rare case that you want to consider a falsy value as usable and the `||` operator prevents this then be explicit about this in your code and check for the type using an underscore method e.g. `_.isBoolean(value)` or `_.isEqual(0)`.
+Use `lodashGet()` to safely access object properties and `||` to short circuit null or undefined values that are not guaranteed to exist in a consistent way throughout the codebase. In the rare case that you want to consider a falsy value as usable and the `||` operator prevents this then be explicit about this in your code and check for the type using an underscore method e.g. `_.isBoolean(value)` or `_.isEqual(0)`.
 
    ```javascript
    // Bad
@@ -189,7 +189,7 @@ Use `_.get()` to safely access object properties and `||` to short circuit null
    // Bad
    const value = (someObject && someObject.possiblyUndefinedProperty && someObject.possiblyUndefinedProperty.nestedProperty) || 'default';
    // Good
-   const value = _.get(someObject, 'possiblyUndefinedProperty.nestedProperty', 'default');
+   const value = lodashGet(someObject, 'possiblyUndefinedProperty.nestedProperty', 'default');
    ```
 
 ## JSDocs
@@ -309,8 +309,8 @@ So, if a new language feature isn't something we have agreed to support it's off
 Here are a couple of things we would ask that you *avoid* to help maintain consistency in our codebase:
 
 - **Async/Await** - Use the native `Promise` instead
-- **Optional Chaining** - Use `_.get()` to fetch a nested value instead
-- **Null Coalescing Operator** - Use `_.get()` or `||` to set a default value for a possibly `undefined` or `null` variable
+- **Optional Chaining** - Use `lodashGet()` to fetch a nested value instead
+- **Null Coalescing Operator** - Use `lodashGet()` or `||` to set a default value for a possibly `undefined` or `null` variable
 
 # React Coding Standards