diff --git a/package-lock.json b/package-lock.json
index c6cdf54af695..d207e358dc56 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7083,8 +7083,7 @@
"html-entities": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.3.1.tgz",
- "integrity": "sha512-rhE/4Z3hIhzHAUKbW8jVcCyuT5oJCXXqhN/6mXXVCpzTmvJnoH2HL/bt3EZ6p55jbFJBeAe1ZNpL5BugLujxNA==",
- "dev": true
+ "integrity": "sha512-rhE/4Z3hIhzHAUKbW8jVcCyuT5oJCXXqhN/6mXXVCpzTmvJnoH2HL/bt3EZ6p55jbFJBeAe1ZNpL5BugLujxNA=="
},
"html-escaper": {
"version": "2.0.2",
@@ -11720,6 +11719,15 @@
"prop-types": "^15.6.2"
}
},
+ "react-beforeunload": {
+ "version": "2.2.2",
+ "resolved": "https://registry.npmjs.org/react-beforeunload/-/react-beforeunload-2.2.2.tgz",
+ "integrity": "sha512-U2ZMbVj58ziIYEwQAKJTsCbe9jXyltnKIrU47OTqk8amXzopL/S4fK7kqg0ph8O4aQoSy5ydvKL+KLg+jIUe0Q==",
+ "requires": {
+ "prop-types": "^15.7.2",
+ "use-latest": "^1.1.0"
+ }
+ },
"react-devtools-core": {
"version": "4.8.2",
"resolved": "https://registry.npmjs.org/react-devtools-core/-/react-devtools-core-4.8.2.tgz",
@@ -14101,6 +14109,19 @@
"resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
"integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
},
+ "use-isomorphic-layout-effect": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.0.0.tgz",
+ "integrity": "sha512-JMwJ7Vd86NwAt1jH7q+OIozZSIxA4ND0fx6AsOe2q1H8ooBUp5aN6DvVCqZiIaYU6JaMRJGyR0FO7EBCIsb/Rg=="
+ },
+ "use-latest": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.1.0.tgz",
+ "integrity": "sha512-gF04d0ZMV3AMB8Q7HtfkAWe+oq1tFXP6dZKwBHQF5nVXtGsh2oAYeeqma5ZzxtlpOcW8Ro/tLcfmEodjDeqtuw==",
+ "requires": {
+ "use-isomorphic-layout-effect": "^1.0.0"
+ }
+ },
"use-subscription": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.4.1.tgz",
diff --git a/package.json b/package.json
index 4c8aa9e1a702..c4b68aa1c1c0 100644
--- a/package.json
+++ b/package.json
@@ -13,10 +13,13 @@
},
"dependencies": {
"@react-native-community/async-storage": "^1.11.0",
+ "html-entities": "^1.3.1",
"jquery": "^3.5.1",
"lodash.get": "^4.4.2",
"moment": "^2.27.0",
+ "prop-types": "^15.7.2",
"react": "^16.13.1",
+ "react-beforeunload": "^2.2.2",
"react-dom": "^16.13.1",
"react-native": "0.63.2",
"react-native-web": "^0.13.5",
diff --git a/src/CONFIG.js b/src/CONFIG.js
index 7dcfe5902d07..44ff19f20faa 100644
--- a/src/CONFIG.js
+++ b/src/CONFIG.js
@@ -1,8 +1,10 @@
import {Platform} from 'react-native';
+// eslint-disable-next-line no-undef
const IS_IN_PRODUCTION = Platform.OS === 'web' ? process.env.NODE_ENV === 'production' : !__DEV__;
export default {
+ IS_IN_PRODUCTION,
PUSHER: {
APP_KEY: IS_IN_PRODUCTION ? '268df511a204fbb60884' : 'ac6d22b891daae55283a',
AUTH_URL: IS_IN_PRODUCTION ? 'https://www.expensify.com' : 'https://www.expensify.com.dev',
diff --git a/src/CONST.js b/src/CONST.js
new file mode 100644
index 000000000000..88147aa0a726
--- /dev/null
+++ b/src/CONST.js
@@ -0,0 +1,5 @@
+const CONST = {
+ CLOUDFRONT_URL: 'https://d2k5nsl2zxldvw.cloudfront.net',
+};
+
+export default CONST;
diff --git a/src/Expensify.js b/src/Expensify.js
index 306b7c468529..74b0cb7683de 100644
--- a/src/Expensify.js
+++ b/src/Expensify.js
@@ -1,10 +1,12 @@
import React, {Component} from 'react';
+import {Beforeunload} from 'react-beforeunload';
import SignInPage from './page/SignInPage';
import HomePage from './page/HomePage/HomePage';
import * as Store from './store/Store';
import * as ActiveClientManager from './lib/ActiveClientManager';
import {verifyAuthToken} from './store/actions/SessionActions';
import STOREKEYS from './store/STOREKEYS';
+import WithStore from './components/WithStore';
import {
Route,
Router,
@@ -15,44 +17,34 @@ import {
// Initialize the store when the app loads for the first time
Store.init();
-export default class Expensify extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- redirectTo: null,
- };
- }
-
- async componentDidMount() {
- // Listen for when the app wants to redirect to a specific URL
- Store.subscribe(STOREKEYS.APP_REDIRECT_TO, (redirectTo) => {
- this.setState({redirectTo});
- });
-
- // Verify that our authToken is OK to use
- verifyAuthToken();
-
- // Initialize this client as being an active client
- await ActiveClientManager.init();
-
- // TODO: Refactor window events
- // window.addEventListener('beforeunload', () => {
- // ActiveClientManager.removeClient();
- // });
- }
-
+class Expensify extends Component {
render() {
return (
-
- {/* If there is ever a property for redirecting, we do the redirect here */}
- {this.state.redirectTo && }
-
-
-
-
-
-
+ // TODO: Mobile does not support Beforeunload
+ //
+
+ {/* If there is ever a property for redirecting, we do the redirect here */}
+ {this.state && this.state.redirectTo && }
+
+
+
+
+
+
+ //
);
}
}
+
+export default WithStore({
+ redirectTo: {
+ key: STOREKEYS.APP_REDIRECT_TO,
+ loader: () => {
+ // Verify that our authToken is OK to use
+ verifyAuthToken();
+
+ // Initialize this client as being an active client
+ ActiveClientManager.init();
+ },
+ },
+})(Expensify);
diff --git a/src/components/WithStore.js b/src/components/WithStore.js
new file mode 100644
index 000000000000..a4cf95b89603
--- /dev/null
+++ b/src/components/WithStore.js
@@ -0,0 +1,94 @@
+/**
+ * This is a higher order component that provides the ability to map a state property directly to
+ * something in the store. That way, as soon as the store changes, the state will be set and the view
+ * will automatically change to reflect the new data.
+ */
+import React from 'react';
+import _ from 'underscore';
+import * as Store from '../store/Store';
+
+export default function (mapStoreToStates) {
+ return WrappedComponent => class WithStore extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.subscriptionIDs = [];
+ this.bind = this.bind.bind(this);
+ this.unbind = this.unbind.bind(this);
+
+ // Initialize the state with each of our property names
+ this.state = _.reduce(_.keys(mapStoreToStates), (finalResult, propertyName) => ({
+ ...finalResult,
+ [propertyName]: null,
+ }), {});
+ }
+
+ componentDidMount() {
+ this.bindStoreToStates(mapStoreToStates, this.wrappedComponent);
+ }
+
+ componentWillUnmount() {
+ this.unbind();
+ }
+
+ /**
+ * A method that is convenient to bind the state to the store. Typically used when you can't pass
+ * mapStoreToStates to this HOC. For example: if the key that you want to subscribe to has a piece of
+ * information that can only come from the component's props, then you want to use bind() directly from inside
+ * componentDidMount(). All subscriptions will automatically be unbound when unmounted.
+ *
+ * The options passed to bind are the exact same that you would pass to the HOC.
+ *
+ * @param {object} mapping
+ * @param {object} component
+ */
+ bind(mapping, component) {
+ this.bindStoreToStates(mapping, component);
+ }
+
+ bindStoreToStates(statesToStoreMap, component) {
+ // Subscribe each of the state properties to the proper store key
+ _.each(statesToStoreMap, (stateToStoreMap, propertyName) => {
+ const {
+ key,
+ path,
+ prefillWithKey,
+ loader,
+ loaderParams,
+ defaultValue,
+ } = stateToStoreMap;
+
+ this.subscriptionIDs.push(Store.bind(key, path, defaultValue, propertyName, component));
+ if (prefillWithKey) {
+ Store.get(prefillWithKey, path, defaultValue)
+ .then(data => component.setState({[propertyName]: data}));
+ }
+ if (loader) {
+ loader(...loaderParams || []);
+ }
+ });
+ }
+
+ /**
+ * Unsubscribe from any subscriptions
+ */
+ unbind() {
+ _.each(this.subscriptionIDs, Store.unbind);
+ }
+
+ render() {
+ // Spreading props and state is necessary in an HOC where the data cannot be predicted
+ return (
+ this.wrappedComponent = el}
+ bind={this.bind}
+ unbind={this.unbind}
+ />
+ );
+ }
+ };
+}
diff --git a/src/lib/ActiveClientManager.js b/src/lib/ActiveClientManager.js
index dabd2958f4eb..e73b0d2c05bd 100644
--- a/src/lib/ActiveClientManager.js
+++ b/src/lib/ActiveClientManager.js
@@ -1,3 +1,4 @@
+import _ from 'underscore';
import Guid from './Guid';
import * as Store from '../store/Store';
import STOREKEYS from '../store/STOREKEYS';
@@ -6,33 +7,34 @@ const clientID = Guid();
/**
* Add our client ID to the list of active IDs
+ *
+ * @returns {Promise}
*/
-const init = async () => {
- const activeClientIDs = (await Store.get(STOREKEYS.ACTIVE_CLIENT_IDS)) || [];
- activeClientIDs.push(clientID);
- Store.set(STOREKEYS.ACTIVE_CLIENT_IDS, activeClientIDs);
-};
+const init = () => Store.merge(STOREKEYS.ACTIVE_CLIENT_IDS, {clientID});
/**
* Remove this client ID from the array of active client IDs when this client is exited
+ *
+ * @returns {Promise}
*/
function removeClient() {
- const activeClientIDs = Store.get(STOREKEYS.ACTIVE_CLIENT_IDS) || [];
- const newActiveClientIDs = activeClientIDs.filter(activeClientID => activeClientID !== clientID);
- Store.set(STOREKEYS.ACTIVE_CLIENT_IDS, newActiveClientIDs);
+ return Store.get(STOREKEYS.ACTIVE_CLIENT_IDS)
+ .then(activeClientIDs => _.omit(activeClientIDs, clientID))
+ .then(newActiveClientIDs => Store.set(STOREKEYS.ACTIVE_CLIENT_IDS, newActiveClientIDs));
}
/**
* Checks if the current client is the leader (the first one in the list of active clients)
*
- * @returns {boolean}
+ * @returns {Promise}
*/
function isClientTheLeader() {
- const activeClientIDs = Store.get(STOREKEYS.ACTIVE_CLIENT_IDS) || [];
- if (!activeClientIDs.length) {
- return false;
- }
- return activeClientIDs[0] === clientID;
+ return Store.get(STOREKEYS.ACTIVE_CLIENT_IDS)
+ .then(activeClientIDs => _.first(activeClientIDs) === clientID);
}
-export {init, removeClient, isClientTheLeader};
+export {
+ init,
+ removeClient,
+ isClientTheLeader
+};
diff --git a/src/lib/ExpensiMark.js b/src/lib/ExpensiMark.js
index ea49c834a25f..4ddf63a1fdeb 100644
--- a/src/lib/ExpensiMark.js
+++ b/src/lib/ExpensiMark.js
@@ -17,16 +17,19 @@ export default class ExpensiMark {
},
{
/**
- * Use \b in this case because it will match on words, letters, and _: https://www.rexegg.com/regex-boundaries.html#wordboundary
+ * Use \b in this case because it will match on words, letters, and _:
+ * https://www.rexegg.com/regex-boundaries.html#wordboundary
* The !_blank is to prevent the `target="_blank">` section of the link replacement from being captured
- * Additionally, something like `\b\_([^<>]*?)\_\b` doesn't work because it won't replace `_https://www.test.com_`
+ * Additionally, something like `\b\_([^<>]*?)\_\b` doesn't work because it won't replace
+ * `_https://www.test.com_`
*/
name: 'italic',
regex: '(?!_blank">)\\b\\_(.*?)\\_\\b',
replacement: '$1',
},
{
- // Use \B in this case because \b doesn't match * or ~. \B will match everything that \b doesn't, so it works for * and ~: https://www.rexegg.com/regex-boundaries.html#notb
+ // Use \B in this case because \b doesn't match * or ~. \B will match everything that \b doesn't, so it
+ // works for * and ~: https://www.rexegg.com/regex-boundaries.html#notb
name: 'bold',
regex: '\\B\\*(.*?)\\*\\B',
replacement: '$1',
@@ -52,12 +55,12 @@ export default class ExpensiMark {
*/
replace(text) {
// This ensures that any html the user puts into the comment field shows as raw html
- text = Str.safeEscape(text);
+ let safeText = Str.safeEscape(text);
this.rules.forEach((rule) => {
- text = text.replace(new RegExp(rule.regex, 'g'), rule.replacement);
+ safeText = safeText.replace(new RegExp(rule.regex, 'g'), rule.replacement);
});
- return text;
+ return safeText;
}
}
diff --git a/src/lib/Network.js b/src/lib/Network.js
index f915b6318a4e..f6f21e97f897 100644
--- a/src/lib/Network.js
+++ b/src/lib/Network.js
@@ -26,6 +26,12 @@ function request(command, data, type = 'post') {
body: formData,
}))
.then(response => response.json())
+ .then((responseData) => {
+ if (responseData.jsonCode === 200) {
+ return responseData;
+ }
+ console.error('[API] Error', responseData);
+ })
// eslint-disable-next-line no-unused-vars
.catch(() => isAppOffline = true);
}
diff --git a/src/lib/PersistentStorage.js b/src/lib/PersistentStorage.js
deleted file mode 100644
index 0416366dcbf4..000000000000
--- a/src/lib/PersistentStorage.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * This module is an abstraction around a persistent storage system. This file can be modified to use whatever
- * persistent storage method is desired.
- */
-import AsyncStorage from '@react-native-community/async-storage';
-import _ from 'underscore';
-
-/**
- * Get a key from storage
- *
- * @param {string} key
- * @returns {Promise}
- */
-function get(key) {
- return AsyncStorage.getItem(key)
- .then(val => JSON.parse(val))
- .catch(err => console.error(`Unable to get item from persistent storage. Key: ${key} Error: ${err}`));
-}
-
-/**
- * Get the data for multiple keys
- *
- * @param {string[]} keys
- * @returns {Promise}
- */
-function multiGet(keys) {
- // AsyncStorage returns the data in an array format like:
- // [ ['@MyApp_user', 'myUserValue'], ['@MyApp_key', 'myKeyValue'] ]
- // This method will transform the data into a better JSON format like:
- // {'@MyApp_user': 'myUserValue', '@MyApp_key': 'myKeyValue'}
- return AsyncStorage.multiGet(keys)
- .then(arrayOfData => _.reduce(arrayOfData, (finalData, keyValuePair) => ({
- ...finalData,
- [keyValuePair[0]]: JSON.parse(keyValuePair[1]),
- }), {}))
- .catch(err => console.error(`Unable to get item from persistent storage. Keys: ${JSON.stringify(keys)} Error: ${err}`));
-}
-
-/**
- * Write a key to storage
- *
- * @param {string} key
- * @param {mixed} val
- * @returns {Promise}
- */
-function set(key, val) {
- return AsyncStorage.setItem(key, JSON.stringify(val));
-}
-
-/**
- * Set multiple keys at once
- *
- * @param {object} data where the keys and values will be stored
- * @returns {Promise|Promise|*}
- */
-function multiSet(data) {
- // AsyncStorage expenses the data in an array like:
- // [["@MyApp_user", "value_1"], ["@MyApp_key", "value_2"]]
- // This method will transform the params from a better JSON format like:
- // {'@MyApp_user': 'myUserValue', '@MyApp_key': 'myKeyValue'}
- const keyValuePairs = _.reduce(data, (finalArray, val, key) => ([
- ...finalArray,
- [key, JSON.stringify(val)],
- ]), []);
- return AsyncStorage.multiSet(keyValuePairs);
-}
-
-/**
- * Empty out the storage (like when the user signs out)
- *
- * @returns {Promise}
- */
-function clear() {
- return AsyncStorage.clear();
-}
-
-/**
- * Merges `val` into an existing key. Best used when updating an existing object
- *
- * @param {string} key
- * @param {mixed} val
- * @returns {Promise}
- */
-function merge(key, val) {
- return AsyncStorage.mergeItem(key, val);
-}
-
-export {
- get,
- multiGet,
- set,
- multiSet,
- merge,
- clear,
-};
diff --git a/src/lib/Router/index.js b/src/lib/Router/index.js
index 02a430d7d165..15923a042e87 100644
--- a/src/lib/Router/index.js
+++ b/src/lib/Router/index.js
@@ -1,5 +1,5 @@
import {
- BrowserRouter as Router,
+ HashRouter as Router,
Link,
Route,
Redirect,
diff --git a/src/lib/Str.js b/src/lib/Str.js
index b768528bc0c5..d8f97dba2df9 100644
--- a/src/lib/Str.js
+++ b/src/lib/Str.js
@@ -1,7 +1,8 @@
-/* globals $, _ */
-
+import _ from 'underscore';
+import {AllHtmlEntities} from 'html-entities';
import Guid from './Guid';
+
const Str = {
/**
* Returns the proper phrase depending on the count that is passed.
@@ -39,7 +40,7 @@ const Str = {
* @return {String} The decoded string.
*/
htmlDecode(s) {
- return $('').html(s).text();
+ return AllHtmlEntities.decode(s);
},
/**
diff --git a/src/lib/md5.js b/src/lib/md5.js
new file mode 100644
index 000000000000..bb572097ca88
--- /dev/null
+++ b/src/lib/md5.js
@@ -0,0 +1,194 @@
+/**
+ * md5 hash implementation
+ * http://www.myersdaily.org/joseph/javascript/md5-text.html
+ *
+ * Expensify modification: Wrap in a function to avoid global
+ * namespace pollution
+ *
+ */
+/* eslint-disable */
+function md5cycle(x, k) {
+ var a = x[0],
+ b = x[1],
+ c = x[2],
+ d = x[3];
+
+ a = ff(a, b, c, d, k[0], 7, -680876936);
+ d = ff(d, a, b, c, k[1], 12, -389564586);
+ c = ff(c, d, a, b, k[2], 17, 606105819);
+ b = ff(b, c, d, a, k[3], 22, -1044525330);
+ a = ff(a, b, c, d, k[4], 7, -176418897);
+ d = ff(d, a, b, c, k[5], 12, 1200080426);
+ c = ff(c, d, a, b, k[6], 17, -1473231341);
+ b = ff(b, c, d, a, k[7], 22, -45705983);
+ a = ff(a, b, c, d, k[8], 7, 1770035416);
+ d = ff(d, a, b, c, k[9], 12, -1958414417);
+ c = ff(c, d, a, b, k[10], 17, -42063);
+ b = ff(b, c, d, a, k[11], 22, -1990404162);
+ a = ff(a, b, c, d, k[12], 7, 1804603682);
+ d = ff(d, a, b, c, k[13], 12, -40341101);
+ c = ff(c, d, a, b, k[14], 17, -1502002290);
+ b = ff(b, c, d, a, k[15], 22, 1236535329);
+
+ a = gg(a, b, c, d, k[1], 5, -165796510);
+ d = gg(d, a, b, c, k[6], 9, -1069501632);
+ c = gg(c, d, a, b, k[11], 14, 643717713);
+ b = gg(b, c, d, a, k[0], 20, -373897302);
+ a = gg(a, b, c, d, k[5], 5, -701558691);
+ d = gg(d, a, b, c, k[10], 9, 38016083);
+ c = gg(c, d, a, b, k[15], 14, -660478335);
+ b = gg(b, c, d, a, k[4], 20, -405537848);
+ a = gg(a, b, c, d, k[9], 5, 568446438);
+ d = gg(d, a, b, c, k[14], 9, -1019803690);
+ c = gg(c, d, a, b, k[3], 14, -187363961);
+ b = gg(b, c, d, a, k[8], 20, 1163531501);
+ a = gg(a, b, c, d, k[13], 5, -1444681467);
+ d = gg(d, a, b, c, k[2], 9, -51403784);
+ c = gg(c, d, a, b, k[7], 14, 1735328473);
+ b = gg(b, c, d, a, k[12], 20, -1926607734);
+
+ a = hh(a, b, c, d, k[5], 4, -378558);
+ d = hh(d, a, b, c, k[8], 11, -2022574463);
+ c = hh(c, d, a, b, k[11], 16, 1839030562);
+ b = hh(b, c, d, a, k[14], 23, -35309556);
+ a = hh(a, b, c, d, k[1], 4, -1530992060);
+ d = hh(d, a, b, c, k[4], 11, 1272893353);
+ c = hh(c, d, a, b, k[7], 16, -155497632);
+ b = hh(b, c, d, a, k[10], 23, -1094730640);
+ a = hh(a, b, c, d, k[13], 4, 681279174);
+ d = hh(d, a, b, c, k[0], 11, -358537222);
+ c = hh(c, d, a, b, k[3], 16, -722521979);
+ b = hh(b, c, d, a, k[6], 23, 76029189);
+ a = hh(a, b, c, d, k[9], 4, -640364487);
+ d = hh(d, a, b, c, k[12], 11, -421815835);
+ c = hh(c, d, a, b, k[15], 16, 530742520);
+ b = hh(b, c, d, a, k[2], 23, -995338651);
+
+ a = ii(a, b, c, d, k[0], 6, -198630844);
+ d = ii(d, a, b, c, k[7], 10, 1126891415);
+ c = ii(c, d, a, b, k[14], 15, -1416354905);
+ b = ii(b, c, d, a, k[5], 21, -57434055);
+ a = ii(a, b, c, d, k[12], 6, 1700485571);
+ d = ii(d, a, b, c, k[3], 10, -1894986606);
+ c = ii(c, d, a, b, k[10], 15, -1051523);
+ b = ii(b, c, d, a, k[1], 21, -2054922799);
+ a = ii(a, b, c, d, k[8], 6, 1873313359);
+ d = ii(d, a, b, c, k[15], 10, -30611744);
+ c = ii(c, d, a, b, k[6], 15, -1560198380);
+ b = ii(b, c, d, a, k[13], 21, 1309151649);
+ a = ii(a, b, c, d, k[4], 6, -145523070);
+ d = ii(d, a, b, c, k[11], 10, -1120210379);
+ c = ii(c, d, a, b, k[2], 15, 718787259);
+ b = ii(b, c, d, a, k[9], 21, -343485551);
+
+ x[0] = add32(a, x[0]);
+ x[1] = add32(b, x[1]);
+ x[2] = add32(c, x[2]);
+ x[3] = add32(d, x[3]);
+
+}
+
+function cmn(q, a, b, x, s, t) {
+ a = add32(add32(a, q), add32(x, t));
+ return add32((a << s) | (a >>> (32 - s)), b);
+}
+
+function ff(a, b, c, d, x, s, t) {
+ return cmn((b & c) | ((~b) & d), a, b, x, s, t);
+}
+
+function gg(a, b, c, d, x, s, t) {
+ return cmn((b & d) | (c & (~d)), a, b, x, s, t);
+}
+
+function hh(a, b, c, d, x, s, t) {
+ return cmn(b ^ c ^ d, a, b, x, s, t);
+}
+
+function ii(a, b, c, d, x, s, t) {
+ return cmn(c ^ (b | (~d)), a, b, x, s, t);
+}
+
+function md51(s) {
+ var n = s.length,
+ state = [1732584193, -271733879, -1732584194, 271733878],
+ i;
+ for (i = 64; i <= s.length; i += 64) {
+ md5cycle(state, md5blk(s.substring(i - 64, i)));
+ }
+ s = s.substring(i - 64);
+ var tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+ for (i = 0; i < s.length; i++)
+ tail[i >> 2] |= s.charCodeAt(i) << ((i % 4) << 3);
+ tail[i >> 2] |= 0x80 << ((i % 4) << 3);
+ if (i > 55) {
+ md5cycle(state, tail);
+ for (i = 0; i < 16; i++) tail[i] = 0;
+ }
+ tail[14] = n * 8;
+ md5cycle(state, tail);
+ return state;
+}
+
+/* there needs to be support for Unicode here,
+ * unless we pretend that we can redefine the MD-5
+ * algorithm for multi-byte characters (perhaps
+ * by adding every four 16-bit characters and
+ * shortening the sum to 32 bits). Otherwise
+ * I suggest performing MD-5 as if every character
+ * was two bytes--e.g., 0040 0025 = @%--but then
+ * how will an ordinary MD-5 sum be matched?
+ * There is no way to standardize text to something
+ * like UTF-8 before transformation; speed cost is
+ * utterly prohibitive. The JavaScript standard
+ * itself needs to look at this: it should start
+ * providing access to strings as preformed UTF-8
+ * 8-bit unsigned value arrays.
+ */
+function md5blk(s) { /* I figured global was faster. */
+ var md5blks = [],
+ i; /* Andy King said do it this way. */
+ for (i = 0; i < 64; i += 4) {
+ md5blks[i >> 2] = s.charCodeAt(i) + (s.charCodeAt(i + 1) << 8) + (s.charCodeAt(i + 2) << 16) + (s.charCodeAt(i + 3) << 24);
+ }
+ return md5blks;
+}
+
+var hex_chr = '0123456789abcdef'.split('');
+
+function rhex(n) {
+ var s = '',
+ j = 0;
+ for (; j < 4; j++)
+ s += hex_chr[(n >> (j * 8 + 4)) & 0x0F] + hex_chr[(n >> (j * 8)) & 0x0F];
+ return s;
+}
+
+function hex(x) {
+ for (var i = 0; i < x.length; i++)
+ x[i] = rhex(x[i]);
+ return x.join('');
+}
+
+function md5(s) {
+ return hex(md51(s));
+}
+
+/* this function is much faster,
+ so if possible we use it. Some IEs
+ are the only ones I know of that
+ need the idiotic second function,
+ generated by an if clause. */
+
+function add32(a, b) {
+ return (a + b) & 0xFFFFFFFF;
+}
+
+if (md5('hello') != '5d41402abc4b2a76b9719d911017c592') {
+ function add32(x, y) {
+ var lsw = (x & 0xFFFF) + (y & 0xFFFF),
+ msw = (x >> 16) + (y >> 16) + (lsw >> 16);
+ return (msw << 16) | (lsw & 0xFFFF);
+ }
+}
+export default md5;
diff --git a/src/page/HomePage/HeaderView.js b/src/page/HomePage/HeaderView.js
new file mode 100644
index 000000000000..f671b4c5c151
--- /dev/null
+++ b/src/page/HomePage/HeaderView.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import {Button, View, Text} from 'react-native';
+import {signOut} from '../../store/actions/SessionActions';
+import {fetch as getPersonalDetails} from '../../store/actions/PersonalDetailsActions';
+import styles from '../../style/StyleSheet';
+import STOREKEYS from '../../store/STOREKEYS';
+import WithStore from '../../components/WithStore';
+
+class HeaderView extends React.Component {
+ render() {
+ return (
+
+ Expensify Chat
+ {this.state && this.state.currentReportName && (
+
+ {this.state.currentReportName}
+
+ )}
+
+ {this.state && this.state.userDisplayName && (
+
+ {`Welcome ${this.state.userDisplayName}!`}
+
+ )}
+
+
+ );
+ }
+}
+
+export default WithStore({
+ // Map this.state.name to the personal details key in the store and bind it to the displayName property
+ // and load it with data from getPersonalDetails()
+ userDisplayName: {
+ key: STOREKEYS.MY_PERSONAL_DETAILS,
+ path: 'displayName',
+ loader: getPersonalDetails,
+ prefillWithKey: STOREKEYS.MY_PERSONAL_DETAILS,
+ },
+ currentReportName: {
+ key: STOREKEYS.CURRENT_REPORT,
+ path: 'reportName',
+ prefillWithKey: STOREKEYS.CURRENT_REPORT,
+ },
+})(HeaderView);
diff --git a/src/page/HomePage/HomePage.js b/src/page/HomePage/HomePage.js
index f69b28678615..1e6ba115569e 100644
--- a/src/page/HomePage/HomePage.js
+++ b/src/page/HomePage/HomePage.js
@@ -1,48 +1,30 @@
-/**
- * @format
- * @flow strict-local
- */
-import React, {Component} from 'react';
+import React from 'react';
import {
SafeAreaView,
- Text,
StatusBar,
View,
- Button
} from 'react-native';
-import {signOut} from '../../store/actions/SessionActions';
+import {Route} from '../../lib/Router';
+import styles from '../../style/StyleSheet';
+import Header from './HeaderView';
+import Sidebar from './SidebarView';
+import Main from './MainView';
-export default class App extends Component {
- constructor(props) {
- super(props);
-
- this.signOut = this.signOut.bind(this);
- }
-
- async signOut() {
- await signOut();
- }
-
- render() {
- return (
- <>
-
-
-
-
- React Native Chat Homepage!
-
-
+const App = () => (
+ <>
+
+
+
+
+
+
+
+
-
-
- );
- }
-}
+
+
+
+
+);
+App.displayName = 'App';
+export default App;
diff --git a/src/page/HomePage/MainView.js b/src/page/HomePage/MainView.js
new file mode 100644
index 000000000000..c4bbc1d238da
--- /dev/null
+++ b/src/page/HomePage/MainView.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import {View} from 'react-native';
+import styles from '../../style/StyleSheet';
+import ReportView from './Report/ReportView';
+
+const MainView = () => (
+
+
+
+);
+
+export default MainView;
diff --git a/src/page/HomePage/Report/ReportHistoryFragmentPropTypes.js b/src/page/HomePage/Report/ReportHistoryFragmentPropTypes.js
new file mode 100644
index 000000000000..9b495a399e70
--- /dev/null
+++ b/src/page/HomePage/Report/ReportHistoryFragmentPropTypes.js
@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+
+export default PropTypes.shape({
+ // The type of the history fragment. Used to render a corresponding component
+ type: PropTypes.string.isRequired,
+
+ // The text content of the fragment.
+ text: PropTypes.string.isRequired,
+
+ // Used to apply additional styling. Style refers to a predetermined constant and not a class name. e.g. 'normal' or 'strong'
+ style: PropTypes.string,
+
+ // ID of a report
+ reportID: PropTypes.number,
+
+ // ID of a policy
+ policyID: PropTypes.string,
+
+ // The target of a link fragment e.g. '_blank'
+ target: PropTypes.string,
+
+ // The destination of a link fragment e.g. 'https://www.expensify.com'
+ href: PropTypes.string,
+
+ // An additional avatar url - not the main avatar url but used within a message.
+ iconUrl: PropTypes.string,
+});
diff --git a/src/page/HomePage/Report/ReportHistoryItem.js b/src/page/HomePage/Report/ReportHistoryItem.js
new file mode 100644
index 000000000000..b1d04628f420
--- /dev/null
+++ b/src/page/HomePage/Report/ReportHistoryItem.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import ReportHistoryItemSingle from './ReportHistoryItemSingle';
+import ReportHistoryPropsTypes from './ReportHistoryPropsTypes';
+
+const propTypes = {
+ // All the data of the history item
+ historyItem: PropTypes.shape(ReportHistoryPropsTypes).isRequired,
+};
+
+class ReportHistoryItem extends React.Component {
+ render() {
+ return (
+
+
+
+ );
+ }
+}
+ReportHistoryItem.propTypes = propTypes;
+
+export default ReportHistoryItem;
diff --git a/src/page/HomePage/Report/ReportHistoryItemDate.js b/src/page/HomePage/Report/ReportHistoryItemDate.js
new file mode 100644
index 000000000000..801fcf692406
--- /dev/null
+++ b/src/page/HomePage/Report/ReportHistoryItemDate.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Text} from 'react-native';
+import DateUtils from '../../../lib/DateUtils';
+
+const propTypes = {
+ // UTC timestamp for when the action was created
+ timestamp: PropTypes.number.isRequired,
+};
+
+class ReportHistoryItemDate extends React.Component {
+ render() {
+ return (
+
+ {DateUtils.timestampToRelative(this.props.timestamp)}
+
+ );
+ }
+}
+
+ReportHistoryItemDate.propTypes = propTypes;
+ReportHistoryItemDate.displayName = 'ReportHistoryItemDate';
+
+export default ReportHistoryItemDate;
diff --git a/src/page/HomePage/Report/ReportHistoryItemFragment.js b/src/page/HomePage/Report/ReportHistoryItemFragment.js
new file mode 100644
index 000000000000..ab1b78e01593
--- /dev/null
+++ b/src/page/HomePage/Report/ReportHistoryItemFragment.js
@@ -0,0 +1,96 @@
+import React from 'react';
+import {Text} from 'react-native';
+import Str from '../../../lib/Str';
+import ReportHistoryFragmentPropTypes from './ReportHistoryFragmentPropTypes';
+
+const propTypes = {
+ // The message fragment needing to be displayed
+ fragment: ReportHistoryFragmentPropTypes.isRequired,
+};
+
+const ReportHistoryItemFragment = ({fragment}) => {
+ const styleClass = fragment.style === 'strong' ? 'quote' : '';
+ switch (fragment.type) {
+ case 'COMMENT':
+ return {Str.htmlDecode(fragment.text)};
+ // return fragment.html
+ // ? (
+ //
+ // // {
+ // // const src = get(img, ['dataset', 'expensifySource'], img.src);
+ // // PubSub.publish(EVENT.REPORT.SHOW_ATTACHMENT, {src});
+ // // }}
+ // // />
+ // )
+ // : {Str.htmlDecode(fragment.text)};
+ case 'TEXT':
+ return {Str.htmlDecode(fragment.text)};
+ case 'LINK':
+ return LINK;
+ // return (
+ //
+ // {Str.htmlDecode(fragment.text)}
+ //
+ // );
+ case 'INTEGRATION_COMMENT':
+ return REPORT_LINK;
+ // return (
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //