Merge pull request #2 from Expensify/master

Merge

.github/actions/bumpVersion/bumpVersion.js

@@ -33,7 +33,7 @@ do {
 
                 // Get the highest build version git tag from the repo
                 console.log('Fetching tags from github...');
-                const octokit = github.getOctokit(core.getInput('githubToken'));
+                const octokit = github.getOctokit(core.getInput('GITHUB_TOKEN', {required: true}));
                 octokit.repos.listTags({
                     owner: repoOwner,
                     repo: repoName,

.github/actions/bumpVersion/index.js

@@ -43,7 +43,7 @@ do {
 
                 // Get the highest build version git tag from the repo
                 console.log('Fetching tags from github...');
-                const octokit = github.getOctokit(core.getInput('githubToken'));
+                const octokit = github.getOctokit(core.getInput('GITHUB_TOKEN', {required: true}));
                 octokit.repos.listTags({
                     owner: repoOwner,
                     repo: repoName,

.github/scripts/buildActions.sh

@@ -4,7 +4,8 @@
 # This bundles them with their dependencies into a single executable node.js script.
 
 # In order for this script to be safely run from anywhere, we cannot use the raw relative path '../actions'
-declare -r ACTIONS_DIR="$(dirname "$(dirname "$(realpath "$0")")")/actions"
+declare ACTIONS_DIR
+ACTIONS_DIR="$(dirname "$(dirname "$0")")/actions"
 
 # List of paths to all JS files that implement our GH Actions
 declare -r GITHUB_ACTIONS=(

.github/workflows/cla.yml

@@ -23,7 +23,7 @@ jobs:
             - name: CLA Assistant
               if: ${{ steps.recheck.outputs.match != '' || steps.sign.outputs.match != '' }} || github.event_name == 'pull_request_target'
               # Version: 2.0.3-alpha
-              uses: cla-assistant/github-action@c89158d361bea4a5a06ff7781b6c4e8aa49dbcc9
+              uses: cla-assistant/github-action@50267bf6156835b55d5f7b74d0da0cf0bf26cfe5
               env:
                   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
                   PERSONAL_ACCESS_TOKEN : ${{ secrets.CLA_BOTIFY_TOKEN }}

.github/workflows/desktop.yml

@@ -18,7 +18,7 @@ jobs:
                 node-version: '14.x'
 
             - name: Install node packages
-              run: npm ci
+              run: npm ci -ddd
 
             - name: Decrypt Developer ID Certificate
               run: cd desktop && gpg --quiet --batch --yes --decrypt --passphrase="$DEVELOPER_ID_SECRET_PASSPHRASE" --output developer_id.p12 developer_id.p12.gpg

.github/workflows/ios.yml

@@ -15,6 +15,11 @@ jobs:
         steps:
             - uses: actions/checkout@v2
 
+            - name: Setup Node
+              uses: actions/setup-node@v1
+              with:
+                node-version: '14.x'
+
             - uses: actions/setup-ruby@v1
               with:
                   ruby-version: '2.7'
@@ -26,7 +31,7 @@ jobs:
               run: bundle install
 
             - name: Install node packages
-              run: npm ci
+              run: npm ci -ddd
 
             - name: Install cocoapods
               run: cd ios && pod install
@@ -41,10 +46,14 @@ jobs:
               env:
                   LARGE_SECRET_PASSPHRASE: ${{ secrets.LARGE_SECRET_PASSPHRASE }}
 
+            - name: Decrypt App Store Connect API key
+              run: cd ios && gpg --quiet --batch --yes --decrypt --passphrase="$LARGE_SECRET_PASSPHRASE" --output ios-fastlane-json-key.json ios-fastlane-json-key.json.gpg
+              env:
+                LARGE_SECRET_PASSPHRASE: ${{ secrets.LARGE_SECRET_PASSPHRASE }}
+
             - name: Run Fastlane
               run: bundle exec fastlane ios beta
               env:
-                  FASTLANE_PASSWORD: ${{ secrets.APPLE_ID_PASSWORD }}
                   APPLE_CONTACT_EMAIL: ${{ secrets.APPLE_CONTACT_EMAIL }}
                   APPLE_CONTACT_PHONE: ${{ secrets.APPLE_CONTACT_PHONE }}
                   APPLE_DEMO_EMAIL: ${{ secrets.APPLE_DEMO_EMAIL }}

Gemfile

@@ -1,5 +1,5 @@
 source "https://rubygems.org"
 
-gem "fastlane"
-gem "cocoapods"
-gem "xcpretty"
+gem "cocoapods", "~> 1"
+gem "fastlane", "~> 2"
+gem "xcpretty", "~> 0"

Gemfile.lock

@@ -255,9 +255,9 @@ PLATFORMS
   x86_64-darwin-19
 
 DEPENDENCIES
-  cocoapods
-  fastlane
-  xcpretty
+  cocoapods (~> 1)
+  fastlane (~> 2)
+  xcpretty (~> 0)
 
 BUNDLED WITH
    2.2.5

PERFORMANCE.md

@@ -0,0 +1,41 @@
+# React Performance Tips
+
+- Always test performance with the production build as development mode is not optimized.
+- Use [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent), [`React.memo()`](https://reactjs.org/docs/react-api.html#reactmemo), and [`shouldComponentUpdate()`](https://reactjs.org/docs/react-component.html#shouldcomponentupdate) to prevent re-rendering expensive components.
+- Using a combination of [React DevTools Profiler](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) and [Chrome Dev Tools Performance Timing](https://calibreapp.com/blog/react-performance-profiling-optimization) can help identify unnecessary re-renders. Both tools can be used to time an interaction like the app starting up or navigating to a new screen.
+- Watch out for [very large lists](https://reactnative.dev/docs/optimizing-flatlist-configuration) and things like `Image` components re-fetching images on render when a remote uri did not change.
+- Avoid the temptation to over-optimize. There is added cost in both code complexity and performance when adding checks like `shouldComponentUpdate()`. Be selective about when you use this and make sure there is a measureable difference before proposing the change. As a very general rule it should be measurably faster to run logic to avoid the re-render (e.g. do a deep comparison) than it would be to let React take care of it without any extra intervention from us.
+- Use caution when adding subscriptions that might re-render very large trees of components e.g. subscribing to state that changes often (current report, current route, etc) in the app root.
+- Avoid using arrow function callbacks in components that are expensive to re-render. React will re-render this component since each time the parent renders it creates a new instance of that function. **Alternative:** Bind the method in the constructor instead.
+
+## Tools
+
+### Chrome Dev Tools > Performance > Timing
+
+- Profiling in Chrome Dev Tools performance tab in the "Timing" section
+- This will show various components and how long they took to render. It can be a little intense to dig through it all at first, but the more time you spend with it the easier it gets to separate the signal from noise.
+- The timing information might be inaccurate in development mode since this slows things down a ton. However, it's still useful for seeing which things take the longest and it's not too difficult to look and see which things are re-rendering.
+
+**Suggested:** [React Performance Profiling](https://calibreapp.com/blog/react-performance-profiling-optimization)
+
+### React DevTools Profiler
+- The React DevTools Profiler can also be used to detect similar information to Chrome Dev Tools, but is a little more streamlined. There is also an options cog where you can filter events by cutting at a specified millisecond (length it took for the thing to happen)
+- Try checking the option to "Record why each component rendered while profiling". This may provide insights into why the component rendered unnecessarily.
+
+**Suggested:** [Deep Dive with the React DevTools creator](https://www.youtube.com/watch?v=nySib7ipZdk)
+
+## Reconciliation
+
+React is pretty smart and in many cases is able to tell if something needs to update. The process by which React goes about updating the "tree" or view heirarchy is called reconciliation. If React thinks something needs to update it will render it again. React also assumes that if a parent component rendered then it's child should also re-render.
+
+Re-rendering can be expensive at times and when dealing with nested props or state React may render when it doesn't need to which can be wasteful. A good example of this is a component that is being passed an object as a prop. Let's say the component only requires one or two properties from that object in order to build it's view, but doesn't care about some others. React will still re-render that component even if nothing it cares about has changed. Most of the time this is fine since reconciliation is pretty fast. But we might run into performance issues when re-rendering massive lists.
+
+In this example, the most preferable solution would be to **only pass the properties that the object needs to know about** to the component in the first place.
+
+Another option would be to use `shouldComponentUpdate` or `React.memo()` to add more specific rules comparing `props` to **explicitly  tell React not to perform a re-render**.
+
+React might still take some time to re-render a component when it's parent component renders. If it takes a long time to re-render the child even though we have no props changing then we can use `PureComponent` or `React.memo()` (without a callback) which will "shallow compare" the `props` to see if a component should re-render.
+
+If you aren't sure what exactly is changing about some deeply nested object prop you can use `Performance.diffObject()` method in `componentDidUpdate()` which should show you exactly what is changing from one update to the next.
+
+**Suggested:** [React Docs - Reconciliation](https://reactjs.org/docs/reconciliation.html)

android/app/build.gradle

@@ -148,8 +148,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 398
-        versionName "1.0.1-397"
+        versionCode 432
+        versionName "1.0.1-433"
     }
     splits {
         abi {

assets/css/fonts.css

@@ -61,6 +61,13 @@
     src: url("https://www.expensify.com/font/GT-America-Standard-Bold-Italic.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Bold-Italic.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Bold-Italic.woff2") format("woff2");
 }
 
+@font-face {
+    font-family: GTAmericaExpMono-Rg;
+    font-weight: 400;
+    font-style: normal;
+    src: url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular.eot') format('embedded-opentype'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular.woff') format('woff'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular.woff2') format('woff2');
+}
+
 * {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;

config/electron.config.js

@@ -7,7 +7,7 @@ module.exports = {
     afterSign: 'desktop/notarize.js',
     mac: {
         category: 'public.app-category.finance',
-        icon: './android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png',
+        icon: './desktop/icon.png',
         hardenedRuntime: true,
         entitlements: 'desktop/entitlements.mac.plist',
         entitlementsInherit: 'desktop/entitlements.mac.plist',

config/webpack/webpack.common.js

@@ -59,7 +59,7 @@ module.exports = {
                  */
                 exclude: [
                     // eslint-disable-next-line max-len
-                    /node_modules\/(?!(react-native-webview|react-native-onyx)\/).*|\.native\.js$/,
+                    /node_modules\/(?!(react-native-animatable|react-native-modal|react-native-webview|react-native-onyx)\/).*|\.native\.js$/,
                     platformExclude,
                 ],
             },
@@ -115,7 +115,6 @@ module.exports = {
             'react-native-config': 'react-web-config',
             'react-native$': 'react-native-web',
             'react-native-webview': 'react-native-web-webview',
-            'react-native-modal': 'modal-enhanced-react-native-web',
         },
 
         // React Native libraries may have web-specific module implementations that appear with the extension `.web.js`

fastlane/Fastfile

@@ -88,6 +88,7 @@ platform :ios do
     )
 
     upload_to_testflight(
+        api_key_path: "./ios/ios-fastlane-json-key.json",
         distribute_external: true,
         reject_build_waiting_for_review: true,
         changelog: "Thank you for beta testing Expensify.cash, this version includes bug fixes and improvements.",

ios/ExpensifyCash/Info.plist

@@ -21,7 +21,7 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>398</string>
+	<string>432</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false />
 	<key>LSRequiresIPhoneOS</key>

ios/ExpensifyCashTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>398</string>
+	<string>432</string>
 </dict>
 </plist>

ios/ios-fastlane-json-key.json.gpg

@@ -0,0 +1,2 @@
+�	H46)������
�E$�R`�L�Iu�0؄�<;�\���ՠF�I��ι���{[����3���EįL?ʼ��-V���6v�W�6�}뾆�c�k�����)��>O�#��#E:A�A��x|���FQe���"6�QЄ��7��Y�Q������
��+�p�c���8~�������Ǔb�D�Y���RA����!�\T	��`�����-��yG�y>I�G������U��e����jYC�<��H}���?�9J`�2 �T
+���,�a���>�"J(,�}��v;�F�>i��9��
�����ѠaQ���r�N�;��m�M���M�_�D3L͖�sVDa1n�h����9�ɍX���9�

package.json

@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.1-397",
+  "version": "1.0.1-433",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.cash",
   "description": "Expensify.cash is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",
@@ -41,15 +41,15 @@
     "electron-log": "^4.2.4",
     "electron-serve": "^1.0.0",
     "electron-updater": "^4.3.4",
-    "expensify-common": "git+https://github.com/Expensify/expensify-common.git#abf27f7cc163c37256e0bae7a9cbac64853e9073",
+    "expensify-common": "git+https://github.com/Expensify/expensify-common.git#285aeb7f5f327db5d513b44659709980198d1bfc",
     "file-loader": "^6.0.0",
     "html-entities": "^1.3.1",
     "lodash.get": "^4.4.2",
     "lodash.has": "^4.5.2",
     "lodash.orderby": "^4.6.0",
+    "lodash.transform": "^4.6.0",
     "metro-config": "^0.64.0",
     "mime-types": "^2.1.28",
-    "modal-enhanced-react-native-web": "^0.2.0",
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.31",
     "prop-types": "^15.7.2",
@@ -63,7 +63,7 @@
     "react-native-image-picker": "^2.3.3",
     "react-native-keyboard-spacer": "^0.4.1",
     "react-native-modal": "^11.5.6",
-    "react-native-onyx": "git+https://github.com/Expensify/react-native-onyx.git#c12a1e7e2dccf06e61e4afb905d85d822521d9ee",
+    "react-native-onyx": "git+https://github.com/Expensify/react-native-onyx.git#53888f367db7a958eb51bb598dd966564b4b6340",
     "react-native-pdf": "^6.2.2",
     "react-native-render-html": "^6.0.0-alpha.10",
     "react-native-safe-area-context": "^3.1.4",

src/App.js

@@ -1,4 +1,13 @@
 import React from 'react';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
 import Expensify from './Expensify';
 
-export default () => <Expensify />;
+const App = () => (
+    <SafeAreaProvider>
+        <Expensify />
+    </SafeAreaProvider>
+);
+
+App.displayName = 'App';
+
+export default App;

src/CONST.js

@@ -27,6 +27,15 @@ const CONST = {
         HOT: 'hot',
         COLD: 'cold',
     },
+    MESSAGES: {
+        // eslint-disable-next-line max-len
+        NO_CONTACTS_FOUND: 'Don\'t see who you\'re looking for? Type their email or phone number to invite them to chat.',
+        MAXIMUM_PARTICIPANTS_REACHED: 'You\'ve reached the maximum number of participants for a group chat.',
+    },
+    PRIORITY_MODE: {
+        GSD: 'gsd',
+        DEFAULT: 'default',
+    },
 };
 
 export default CONST;

src/Expensify.js

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {PureComponent} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import Onyx, {withOnyx} from 'react-native-onyx';
@@ -56,7 +56,7 @@ const defaultProps = {
     redirectTo: '',
 };
 
-class Expensify extends Component {
+class Expensify extends PureComponent {
     constructor(props) {
         super(props);
 
@@ -132,11 +132,11 @@ class Expensify extends Component {
                     <Route path={[ROUTES.SIGNIN_WITH_EXITTO, ROUTES.SIGNIN]} component={SignInPage} />
                     <Route
                         path={[ROUTES.HOME, ROUTES.ROOT]}
-                        render={match => (
+                        render={() => (
 
                             // Need to do this for every page that the user needs to be logged in to access
                             this.state.authToken
-                                ? <HomePage match={match} />
+                                ? <HomePage />
                                 : <Redirect to={ROUTES.SIGNIN} />
                         )}
                     />