From 8bddc65f84133c50d0f54e392d6b1be8c309ee66 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Sun, 6 Feb 2022 23:05:37 +0530 Subject: [PATCH 01/46] feat: Added react-content-loader dependency --- package-lock.json | 5 +++++ package.json | 1 + 2 files changed, 6 insertions(+) diff --git a/package-lock.json b/package-lock.json index ba6db0d7c88..b21af782a71 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36226,6 +36226,11 @@ "integrity": "sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg==", "dev": true }, + "react-content-loader": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/react-content-loader/-/react-content-loader-6.1.0.tgz", + "integrity": "sha512-S4/+doQrNs0PGDgUYCGGfdFjGax8dMQzYkWcSSxfaUcUjFkbnikWARuX9lWkglocIVhxnn3lxNb6uEWFFUzNUw==" + }, "react-dev-utils": { "version": "11.0.4", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz", diff --git a/package.json b/package.json index 6d4480eed16..b6b7a57a192 100644 --- a/package.json +++ b/package.json @@ -80,6 +80,7 @@ "pusher-js": "^7.0.0", "react": "^17.0.2", "react-collapse": "^5.1.0", + "react-content-loader": "^6.1.0", "react-dom": "^17.0.2", "react-native": "0.66.4", "react-native-collapsible": "^1.6.0", From 416bc77c19c284e7a984febd1f2db103b8ad95be Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Sun, 6 Feb 2022 23:06:18 +0530 Subject: [PATCH 02/46] feat: Basic setup of content loader added --- src/components/ChatGhostUI/index.js | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 src/components/ChatGhostUI/index.js diff --git a/src/components/ChatGhostUI/index.js b/src/components/ChatGhostUI/index.js new file mode 100644 index 00000000000..434f74c61c8 --- /dev/null +++ b/src/components/ChatGhostUI/index.js @@ -0,0 +1,29 @@ +import React from 'react'; +import {Dimensions} from 'react-native'; +import ContentLoader from 'react-content-loader'; +import _ from 'underscore'; + + +const ChatList = (props) => { + const windowHeight = Dimensions.get('window').height; + + const height = 140; + const numberOfRows = Math.floor(windowHeight / height); + const contentItems = Array.from({length: numberOfRows}, (v, i) => i); + + return ( + <> + { + _.map(contentItems, item => ( + + + + + + + )) + } + + ); +}; +export default ChatList; From 851952b7d959ef1ac1ce1313eb6abafd218e7757 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Mon, 7 Feb 2022 11:08:27 +0530 Subject: [PATCH 03/46] feat: Added content loaders with svgs --- .../ContentLoadingOneLine/index.js | 17 +++++++++++++++++ .../ContentLoadingThreeLines/index.js | 19 +++++++++++++++++++ .../ContentLoadingTwoLines/index.js | 18 ++++++++++++++++++ 3 files changed, 54 insertions(+) create mode 100644 src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingOneLine/index.js create mode 100644 src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingThreeLines/index.js create mode 100644 src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingTwoLines/index.js diff --git a/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingOneLine/index.js b/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingOneLine/index.js new file mode 100644 index 00000000000..95bbc2a5f50 --- /dev/null +++ b/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingOneLine/index.js @@ -0,0 +1,17 @@ +import React from 'react'; +import ContentLoader from 'react-content-loader'; + +const ContentLoadingOneLine = () => ( + + + + + +); + +ContentLoadingOneLine.displayName = 'ContentLoadingOneLine'; +export default ContentLoadingOneLine; diff --git a/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingThreeLines/index.js b/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingThreeLines/index.js new file mode 100644 index 00000000000..14107d72fc1 --- /dev/null +++ b/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingThreeLines/index.js @@ -0,0 +1,19 @@ +import React from 'react'; +import ContentLoader from 'react-content-loader'; + +const ContentLoadingThreeLines = () => ( + + + + + + + +); + +ContentLoadingThreeLines.displayName = 'ContentLoadingThreeLines'; +export default ContentLoadingThreeLines; diff --git a/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingTwoLines/index.js b/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingTwoLines/index.js new file mode 100644 index 00000000000..b2c6a6adb3a --- /dev/null +++ b/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingTwoLines/index.js @@ -0,0 +1,18 @@ +import React from 'react'; +import ContentLoader from 'react-content-loader'; + +const ContentLoadingTwoLines = () => ( + + + + + + +); + +ContentLoadingTwoLines.displayName = 'ContentLoadingTwoLines'; +export default ContentLoadingTwoLines; From d98a67c9bc23c95fe92d025f7d6a19ed0fcdeccc Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Mon, 7 Feb 2022 11:08:50 +0530 Subject: [PATCH 04/46] feat: Updated chat ghost ui with dynamic loaders --- src/components/ChatGhostUI/index.js | 28 +++++++++++++++++----------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/src/components/ChatGhostUI/index.js b/src/components/ChatGhostUI/index.js index 434f74c61c8..30f5bdbc2a5 100644 --- a/src/components/ChatGhostUI/index.js +++ b/src/components/ChatGhostUI/index.js @@ -1,28 +1,34 @@ import React from 'react'; import {Dimensions} from 'react-native'; -import ContentLoader from 'react-content-loader'; import _ from 'underscore'; +import ContentLoadingOneLine from './ContentLoadingElements/ContentLoadingOneLine'; +import ContentLoadingTwoLines from './ContentLoadingElements/ContentLoadingTwoLines'; +import ContentLoadingThreeLines from './ContentLoadingElements/ContentLoadingThreeLines'; -const ChatList = (props) => { +const ChatList = () => { const windowHeight = Dimensions.get('window').height; - const height = 140; + const height = 80; const numberOfRows = Math.floor(windowHeight / height); const contentItems = Array.from({length: numberOfRows}, (v, i) => i); return ( <> { - _.map(contentItems, item => ( - - - - - - - )) + _.map(contentItems, (item, index) => { + const iconIndex = (index + 1) % 4; + switch (iconIndex) { + case 2: + return ; + case 0: + return ; + default: + return ; + } + }) } + ); }; From 92dd9a1870955940e8120e611eebf12e39ecce4e Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Mon, 7 Feb 2022 15:55:00 +0530 Subject: [PATCH 05/46] feat: Added native files for content loading elements --- .../ContentLoadingOneLine/index.native.js | 17 +++++++++++++++++ .../ContentLoadingThreeLines/index.native.js | 19 +++++++++++++++++++ .../ContentLoadingTwoLines/index.native.js | 18 ++++++++++++++++++ 3 files changed, 54 insertions(+) create mode 100644 src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingOneLine/index.native.js create mode 100644 src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingThreeLines/index.native.js create mode 100644 src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingTwoLines/index.native.js diff --git a/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingOneLine/index.native.js b/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingOneLine/index.native.js new file mode 100644 index 00000000000..7b15b139600 --- /dev/null +++ b/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingOneLine/index.native.js @@ -0,0 +1,17 @@ +import React from 'react'; +import ContentLoader, {Circle, Rect} from 'react-content-loader/native'; + +const ContentLoadingOneLine = () => ( + + + + + +); + +ContentLoadingOneLine.displayName = 'ContentLoadingOneLine'; +export default ContentLoadingOneLine; diff --git a/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingThreeLines/index.native.js b/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingThreeLines/index.native.js new file mode 100644 index 00000000000..e9e03e8d38a --- /dev/null +++ b/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingThreeLines/index.native.js @@ -0,0 +1,19 @@ +import React from 'react'; +import ContentLoader, {Circle, Rect} from 'react-content-loader/native'; + +const ContentLoadingThreeLines = () => ( + + + + + + + +); + +ContentLoadingThreeLines.displayName = 'ContentLoadingThreeLines'; +export default ContentLoadingThreeLines; diff --git a/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingTwoLines/index.native.js b/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingTwoLines/index.native.js new file mode 100644 index 00000000000..3f708deee92 --- /dev/null +++ b/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingTwoLines/index.native.js @@ -0,0 +1,18 @@ +import React from 'react'; +import ContentLoader, {Rect, Circle} from 'react-content-loader/native'; + +const ContentLoadingTwoLines = () => ( + + + + + + +); + +ContentLoadingTwoLines.displayName = 'ContentLoadingTwoLines'; +export default ContentLoadingTwoLines; From 4060abcd48b2ebd18faa770f22478f194f6379e9 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Mon, 7 Feb 2022 16:07:19 +0530 Subject: [PATCH 06/46] feat: Added isLoadingReportData flag for loader on Report --- src/pages/home/ReportScreen.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 3dc006c423e..2f260f5ca93 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -18,6 +18,7 @@ import KeyboardSpacer from '../../components/KeyboardSpacer'; import SwipeableView from '../../components/SwipeableView'; import CONST from '../../CONST'; import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator'; +import ChatGhostUI from '../../components/ChatGhostUI'; import reportActionPropTypes from './report/reportActionPropTypes'; const propTypes = { @@ -58,6 +59,8 @@ const propTypes = { /** Beta features list */ betas: PropTypes.arrayOf(PropTypes.string), + + isLoadingReportData: PropTypes.bool, }; const defaultProps = { @@ -72,6 +75,7 @@ const defaultProps = { hasOutstandingIOU: false, }, betas: [], + isLoadingReportData: false, }; /** @@ -129,7 +133,7 @@ class ReportScreen extends React.Component { * @returns {Boolean} */ shouldShowLoader() { - return this.state.isLoading || !getReportID(this.props.route); + return (this.state.isLoading || !getReportID(this.props.route)) && !this.props.isLoadingReportData; } /** @@ -174,6 +178,9 @@ class ReportScreen extends React.Component { nativeID={CONST.REPORT.DROP_NATIVE_ID} style={[styles.flex1, styles.justifyContentEnd, styles.overflowHidden]} > + { + this.props.isLoadingReportData && + } {!this.shouldShowLoader() && ( Date: Tue, 8 Mar 2022 22:58:16 +0530 Subject: [PATCH 07/46] fix: added state variable for ghostscreen --- src/pages/home/ReportScreen.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 2f260f5ca93..6935d860dbc 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -99,12 +99,16 @@ class ReportScreen extends React.Component { this.state = { isLoading: true, + isGhostScreenVisible: true, }; } componentDidMount() { this.prepareTransition(); this.storeCurrentlyViewedReport(); + setTimeout(() => { + this.setState({isGhostScreenVisible: false}); + }, 3000); } componentDidUpdate(prevProps) { @@ -179,10 +183,10 @@ class ReportScreen extends React.Component { style={[styles.flex1, styles.justifyContentEnd, styles.overflowHidden]} > { - this.props.isLoadingReportData && - } - - {!this.shouldShowLoader() && ( + this.state.isGhostScreenVisible && + } + + {!this.state.isGhostScreenVisible && !this.shouldShowLoader() && ( Date: Tue, 8 Mar 2022 23:05:57 +0530 Subject: [PATCH 08/46] fix: added derivedstatefromprops function to update state one time --- src/pages/home/ReportScreen.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 6935d860dbc..b9904ee8858 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -106,9 +106,6 @@ class ReportScreen extends React.Component { componentDidMount() { this.prepareTransition(); this.storeCurrentlyViewedReport(); - setTimeout(() => { - this.setState({isGhostScreenVisible: false}); - }, 3000); } componentDidUpdate(prevProps) { @@ -124,6 +121,21 @@ class ReportScreen extends React.Component { clearTimeout(this.loadingTimerId); } + /** + * When the report data is loaded, hide the ghost screen + * + * @static + * @param {Object} props + * @param {Object} state + * @return {Object|null} + */ + static getDerivedStateFromProps(props, state) { + if (state.isGhostScreenVisible && props.isLoadingReportData === false) { + return {isGhostScreenVisible: false}; + } + return null; + } + /** * @param {String} text */ From 0c60227bc3a81fcfa87b453bc46b4484dc599eb9 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 8 Mar 2022 23:15:41 +0530 Subject: [PATCH 09/46] fix: removed props check from loader --- src/pages/home/ReportScreen.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index b9904ee8858..6eacb5f36a0 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -149,7 +149,7 @@ class ReportScreen extends React.Component { * @returns {Boolean} */ shouldShowLoader() { - return (this.state.isLoading || !getReportID(this.props.route)) && !this.props.isLoadingReportData; + return this.state.isLoading || !getReportID(this.props.route); } /** From 8665824a38690b7f00b17d6ada9dd9aba368f4b2 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Wed, 9 Mar 2022 00:07:17 +0530 Subject: [PATCH 10/46] fix: changed width for native devices --- .../ContentLoadingOneLine/index.native.js | 2 +- .../ContentLoadingThreeLines/index.native.js | 4 ++-- .../ContentLoadingTwoLines/index.native.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingOneLine/index.native.js b/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingOneLine/index.native.js index 7b15b139600..11c9a839001 100644 --- a/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingOneLine/index.native.js +++ b/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingOneLine/index.native.js @@ -9,7 +9,7 @@ const ContentLoadingOneLine = () => ( > - + ); diff --git a/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingThreeLines/index.native.js b/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingThreeLines/index.native.js index e9e03e8d38a..975190b28b2 100644 --- a/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingThreeLines/index.native.js +++ b/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingThreeLines/index.native.js @@ -9,8 +9,8 @@ const ContentLoadingThreeLines = () => ( > - - + + ); diff --git a/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingTwoLines/index.native.js b/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingTwoLines/index.native.js index 3f708deee92..12481a8359b 100644 --- a/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingTwoLines/index.native.js +++ b/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingTwoLines/index.native.js @@ -9,7 +9,7 @@ const ContentLoadingTwoLines = () => ( > - + ); From 95d113094a0560c8ee04fdc4e95ffa2904846b99 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Wed, 9 Mar 2022 00:40:38 +0530 Subject: [PATCH 11/46] fix: code cleanup with style guidelines --- src/CONST.js | 1 + src/components/ChatGhostUI/index.js | 27 +++++++++++++++++---------- src/pages/home/ReportScreen.js | 1 + 3 files changed, 19 insertions(+), 10 deletions(-) diff --git a/src/CONST.js b/src/CONST.js index d340757cd11..12b9a5c78c9 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -376,6 +376,7 @@ const CONST = { EMOJI_PICKER_HEADER_HEIGHT: 38, COMPOSER_MAX_HEIGHT: 116, + CHAT_GHOST_ROW_HEIGHT: 80, EMAIL: { CONCIERGE: 'concierge@expensify.com', diff --git a/src/components/ChatGhostUI/index.js b/src/components/ChatGhostUI/index.js index 30f5bdbc2a5..463b1a1d66b 100644 --- a/src/components/ChatGhostUI/index.js +++ b/src/components/ChatGhostUI/index.js @@ -1,30 +1,34 @@ import React from 'react'; -import {Dimensions} from 'react-native'; import _ from 'underscore'; +import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; import ContentLoadingOneLine from './ContentLoadingElements/ContentLoadingOneLine'; import ContentLoadingTwoLines from './ContentLoadingElements/ContentLoadingTwoLines'; import ContentLoadingThreeLines from './ContentLoadingElements/ContentLoadingThreeLines'; +import CONST from '../../CONST'; +const propTypes = { + ...windowDimensionsPropTypes, +}; -const ChatList = () => { - const windowHeight = Dimensions.get('window').height; +const ChatList = (props) => { + const windowHeight = props.windowHeight; - const height = 80; + const height = CONST.CHAT_GHOST_ROW_HEIGHT; const numberOfRows = Math.floor(windowHeight / height); - const contentItems = Array.from({length: numberOfRows}, (v, i) => i); + const contentItems = new Array(numberOfRows); return ( <> { - _.map(contentItems, (item, index) => { + _.keys(contentItems, (index) => { const iconIndex = (index + 1) % 4; switch (iconIndex) { case 2: - return ; + return ; case 0: - return ; + return ; default: - return ; + return ; } }) } @@ -32,4 +36,7 @@ const ChatList = () => { ); }; -export default ChatList; + +ChatList.displayName = 'ChatList'; +ChatList.propTypes = propTypes; +export default withWindowDimensions(ChatList); diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 6eacb5f36a0..0fdde249eb9 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -60,6 +60,7 @@ const propTypes = { /** Beta features list */ betas: PropTypes.arrayOf(PropTypes.string), + /** Flag to check if report data is being loaded */ isLoadingReportData: PropTypes.bool, }; From 7229d3d879836b642bcb2c4ba1c2959419489099 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Wed, 9 Mar 2022 01:03:27 +0530 Subject: [PATCH 12/46] fix: added _.map for _.keys --- src/components/ChatGhostUI/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ChatGhostUI/index.js b/src/components/ChatGhostUI/index.js index 463b1a1d66b..75d91f9eb49 100644 --- a/src/components/ChatGhostUI/index.js +++ b/src/components/ChatGhostUI/index.js @@ -20,7 +20,7 @@ const ChatList = (props) => { return ( <> { - _.keys(contentItems, (index) => { + _.map(contentItems, (_item, index) => { const iconIndex = (index + 1) % 4; switch (iconIndex) { case 2: From 8fce186978ada2e8cb1e29e9c6d2d34883f673ae Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Sat, 26 Mar 2022 02:53:20 +0530 Subject: [PATCH 13/46] fix: reusing shapes from rn-svg and replacing content-loader wrapper --- .../ContentLoadingOneLine/index.js | 17 --------------- .../ContentLoadingThreeLines/index.js | 19 ----------------- .../ContentLoadingTwoLines/index.js | 18 ---------------- ...dex.native.js => ContentLoadingOneLine.js} | 11 +++++----- ....native.js => ContentLoadingThreeLines.js} | 13 ++++++------ ...ex.native.js => ContentLoadingTwoLines.js} | 9 ++++---- .../ContentLoadingWrapper/index.js | 21 +++++++++++++++++++ .../ContentLoadingWrapper/index.native.js | 20 ++++++++++++++++++ 8 files changed, 56 insertions(+), 72 deletions(-) delete mode 100644 src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingOneLine/index.js delete mode 100644 src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingThreeLines/index.js delete mode 100644 src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingTwoLines/index.js rename src/components/ChatGhostUI/{ContentLoadingElements/ContentLoadingOneLine/index.native.js => ContentLoadingOneLine.js} (57%) rename src/components/ChatGhostUI/{ContentLoadingElements/ContentLoadingThreeLines/index.native.js => ContentLoadingThreeLines.js} (56%) rename src/components/ChatGhostUI/{ContentLoadingElements/ContentLoadingTwoLines/index.native.js => ContentLoadingTwoLines.js} (71%) create mode 100644 src/components/ChatGhostUI/ContentLoadingWrapper/index.js create mode 100644 src/components/ChatGhostUI/ContentLoadingWrapper/index.native.js diff --git a/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingOneLine/index.js b/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingOneLine/index.js deleted file mode 100644 index 95bbc2a5f50..00000000000 --- a/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingOneLine/index.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import ContentLoader from 'react-content-loader'; - -const ContentLoadingOneLine = () => ( - - - - - -); - -ContentLoadingOneLine.displayName = 'ContentLoadingOneLine'; -export default ContentLoadingOneLine; diff --git a/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingThreeLines/index.js b/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingThreeLines/index.js deleted file mode 100644 index 14107d72fc1..00000000000 --- a/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingThreeLines/index.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import ContentLoader from 'react-content-loader'; - -const ContentLoadingThreeLines = () => ( - - - - - - - -); - -ContentLoadingThreeLines.displayName = 'ContentLoadingThreeLines'; -export default ContentLoadingThreeLines; diff --git a/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingTwoLines/index.js b/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingTwoLines/index.js deleted file mode 100644 index b2c6a6adb3a..00000000000 --- a/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingTwoLines/index.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import ContentLoader from 'react-content-loader'; - -const ContentLoadingTwoLines = () => ( - - - - - - -); - -ContentLoadingTwoLines.displayName = 'ContentLoadingTwoLines'; -export default ContentLoadingTwoLines; diff --git a/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingOneLine/index.native.js b/src/components/ChatGhostUI/ContentLoadingOneLine.js similarity index 57% rename from src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingOneLine/index.native.js rename to src/components/ChatGhostUI/ContentLoadingOneLine.js index 11c9a839001..3667525ef64 100644 --- a/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingOneLine/index.native.js +++ b/src/components/ChatGhostUI/ContentLoadingOneLine.js @@ -1,16 +1,15 @@ import React from 'react'; -import ContentLoader, {Circle, Rect} from 'react-content-loader/native'; +import {Rect, Circle} from 'react-native-svg'; +import ContentLoadingWrapper from './ContentLoadingWrapper'; const ContentLoadingOneLine = () => ( - - - + + ); ContentLoadingOneLine.displayName = 'ContentLoadingOneLine'; diff --git a/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingThreeLines/index.native.js b/src/components/ChatGhostUI/ContentLoadingThreeLines.js similarity index 56% rename from src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingThreeLines/index.native.js rename to src/components/ChatGhostUI/ContentLoadingThreeLines.js index 975190b28b2..4978c0d488a 100644 --- a/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingThreeLines/index.native.js +++ b/src/components/ChatGhostUI/ContentLoadingThreeLines.js @@ -1,18 +1,17 @@ import React from 'react'; -import ContentLoader, {Circle, Rect} from 'react-content-loader/native'; +import {Rect, Circle} from 'react-native-svg'; +import ContentLoadingWrapper from './ContentLoadingWrapper'; const ContentLoadingThreeLines = () => ( - - - + + - + ); ContentLoadingThreeLines.displayName = 'ContentLoadingThreeLines'; diff --git a/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingTwoLines/index.native.js b/src/components/ChatGhostUI/ContentLoadingTwoLines.js similarity index 71% rename from src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingTwoLines/index.native.js rename to src/components/ChatGhostUI/ContentLoadingTwoLines.js index 12481a8359b..df555ada40b 100644 --- a/src/components/ChatGhostUI/ContentLoadingElements/ContentLoadingTwoLines/index.native.js +++ b/src/components/ChatGhostUI/ContentLoadingTwoLines.js @@ -1,17 +1,16 @@ import React from 'react'; -import ContentLoader, {Rect, Circle} from 'react-content-loader/native'; +import {Rect, Circle} from 'react-native-svg'; +import ContentLoadingWrapper from './ContentLoadingWrapper'; const ContentLoadingTwoLines = () => ( - - + ); ContentLoadingTwoLines.displayName = 'ContentLoadingTwoLines'; diff --git a/src/components/ChatGhostUI/ContentLoadingWrapper/index.js b/src/components/ChatGhostUI/ContentLoadingWrapper/index.js new file mode 100644 index 00000000000..ada2ec6baca --- /dev/null +++ b/src/components/ChatGhostUI/ContentLoadingWrapper/index.js @@ -0,0 +1,21 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ContentLoader from 'react-content-loader'; + +const propTypes = { + /* Children to wrap within the Content Loader */ + children: PropTypes.node.isRequired, + + /* Height of the content-loader */ + height: PropTypes.number.isRequired, +}; + +const ContentLoadingWrapper = (props) => { + + {props.children} + ; +}; + +ContentLoadingWrapper.protoTypes = propTypes; +ContentLoadingWrapper.displayName = 'ContentLoadingWrapper'; +export default ContentLoadingWrapper; diff --git a/src/components/ChatGhostUI/ContentLoadingWrapper/index.native.js b/src/components/ChatGhostUI/ContentLoadingWrapper/index.native.js new file mode 100644 index 00000000000..1703bf7a717 --- /dev/null +++ b/src/components/ChatGhostUI/ContentLoadingWrapper/index.native.js @@ -0,0 +1,20 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ContentLoader from 'react-content-loader/native'; + +const propTypes = { + /* Children to wrap within the Content Loader */ + children: PropTypes.node.isRequired, + + /* Height of the content-loader */ + height: PropTypes.number.isRequired, +}; + +const ContentLoadingWrapper = (props) => { + + {props.children} + ; +}; + +ContentLoadingWrapper.protoTypes = propTypes; +ContentLoadingWrapper.displayName = 'ContentLoadingWrapper'; From 6bb0c363304012947db99669c36b12129f897d18 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Sat, 26 Mar 2022 03:10:52 +0530 Subject: [PATCH 14/46] fix: moved setstate to componentDidUpdate --- src/pages/home/ReportScreen.js | 22 +++++++--------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index f080f4366a3..b044d8daeac 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -112,6 +112,9 @@ class ReportScreen extends React.Component { } componentDidUpdate(prevProps) { + if (this.state.isGhostScreenVisible && this.props.isLoadingReportData === false) { + this.setGhostScreenVisible(); + } if (this.props.route.params.reportID === prevProps.route.params.reportID) { return; } @@ -124,21 +127,6 @@ class ReportScreen extends React.Component { clearTimeout(this.loadingTimerId); } - /** - * When the report data is loaded, hide the ghost screen - * - * @static - * @param {Object} props - * @param {Object} state - * @return {Object|null} - */ - static getDerivedStateFromProps(props, state) { - if (state.isGhostScreenVisible && props.isLoadingReportData === false) { - return {isGhostScreenVisible: false}; - } - return null; - } - /** * @param {String} text */ @@ -146,6 +134,10 @@ class ReportScreen extends React.Component { Report.addAction(getReportID(this.props.route), text); } + setGhostScreenVisible() { + this.setState({isGhostScreenVisible: false}); + } + /** * When reports change there's a brief time content is not ready to be displayed * From f9d02b2ea3125bb5d08e9d1f821dab6babb161c0 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Sat, 26 Mar 2022 03:28:15 +0530 Subject: [PATCH 15/46] fix: remove full screen loader --- src/pages/home/ReportScreen.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index b044d8daeac..96d043dc72d 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -18,7 +18,6 @@ import ReportActionCompose from './report/ReportActionCompose'; import KeyboardSpacer from '../../components/KeyboardSpacer'; import SwipeableView from '../../components/SwipeableView'; import CONST from '../../CONST'; -import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator'; import ChatGhostUI from '../../components/ChatGhostUI'; import reportActionPropTypes from './report/reportActionPropTypes'; import ArchivedReportFooter from '../../components/ArchivedReportFooter'; @@ -113,7 +112,7 @@ class ReportScreen extends React.Component { componentDidUpdate(prevProps) { if (this.state.isGhostScreenVisible && this.props.isLoadingReportData === false) { - this.setGhostScreenVisible(); + this.hideGhostScreen(); } if (this.props.route.params.reportID === prevProps.route.params.reportID) { return; @@ -134,7 +133,7 @@ class ReportScreen extends React.Component { Report.addAction(getReportID(this.props.route), text); } - setGhostScreenVisible() { + hideGhostScreen() { this.setState({isGhostScreenVisible: false}); } @@ -197,9 +196,8 @@ class ReportScreen extends React.Component { style={[styles.flex1, styles.justifyContentEnd, styles.overflowHidden]} > { - this.state.isGhostScreenVisible && + (this.state.isGhostScreenVisible || this.shouldShowLoader()) && } - {!this.state.isGhostScreenVisible && !this.shouldShowLoader() && ( Date: Sat, 26 Mar 2022 03:28:24 +0530 Subject: [PATCH 16/46] fix: add delay in render --- src/pages/home/ReportScreen.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 96d043dc72d..8e3edb74989 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -152,7 +152,7 @@ class ReportScreen extends React.Component { prepareTransition() { this.setState({isLoading: true}); clearTimeout(this.loadingTimerId); - this.loadingTimerId = setTimeout(() => this.setState({isLoading: false}), 0); + this.loadingTimerId = setTimeout(() => this.setState({isLoading: false}), 100); } /** From 3ae559c55dfb19225c7f6cc680a878941b847652 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 12 Apr 2022 23:09:49 +0530 Subject: [PATCH 17/46] fix: added flag check to function --- src/components/ChatGhostUI/index.js | 1 - src/pages/home/ReportScreen.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/ChatGhostUI/index.js b/src/components/ChatGhostUI/index.js index 75d91f9eb49..d2f829f3a31 100644 --- a/src/components/ChatGhostUI/index.js +++ b/src/components/ChatGhostUI/index.js @@ -32,7 +32,6 @@ const ChatList = (props) => { } }) } - ); }; diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index a2db3cc80ec..984a51ccbf6 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -143,7 +143,7 @@ class ReportScreen extends React.Component { * @returns {Boolean} */ shouldShowLoader() { - return this.state.isLoading || !getReportID(this.props.route); + return (this.state.isLoading || !getReportID(this.props.route)) && this.state.isGhostScreenVisible; } /** From 0bfe1bac6fcbc0f2a304cab6811a5031d40e12da Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 3 May 2022 00:32:40 +0530 Subject: [PATCH 18/46] feat: updated component structure for skeleton views --- .../SkeletonViewLines.js | 45 +++++++++++++++++++ .../ReportActionsSkeletonView/index.js | 31 +++++++++++++ 2 files changed, 76 insertions(+) create mode 100644 src/components/ReportActionsSkeletonView/SkeletonViewLines.js create mode 100644 src/components/ReportActionsSkeletonView/index.js diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js new file mode 100644 index 00000000000..1b6eca08b21 --- /dev/null +++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js @@ -0,0 +1,45 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import {Rect, Circle} from 'react-native-svg'; +import SkeletonViewContentLoader from 'react-content-loader'; + +const propTypes = { + numberOfRows: PropTypes.number.isRequired, +}; + +const SkeletonViewLines = (props) => { + const renderOneLine = () => props.numberOfRows; + + return ( + + + + + + ); +}; + +SkeletonViewLines.displayName = 'SkeletonViewLines'; +SkeletonViewLines.propTypes = propTypes; +export default SkeletonViewLines; + +// +// +// +// +// +// +// + +// +// +// +// +// +// diff --git a/src/components/ReportActionsSkeletonView/index.js b/src/components/ReportActionsSkeletonView/index.js new file mode 100644 index 00000000000..38a46ff8a8b --- /dev/null +++ b/src/components/ReportActionsSkeletonView/index.js @@ -0,0 +1,31 @@ +import React from 'react'; +import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; +import SkeletonViewLines from './SkeletonViewLines'; +import CONST from '../../CONST'; + +const propTypes = { + ...windowDimensionsPropTypes, +}; + +const ReportActionsSkeletonView = (props) => { + const possibleVisibleContentItems = new Array(Math.floor(props.windowHeight / CONST.CHAT_GHOST_ROW_HEIGHT)); + const skeletonLines = []; + for (let index = 0; index < possibleVisibleContentItems; index++) { + const iconIndex = (index + 1) % 4; + switch (iconIndex) { + case 2: + skeletonLines.push(); + break; + case 0: + skeletonLines.push(); + break; + default: + skeletonLines.push(); + } + } + return {skeletonLines}; +}; + +ReportActionsSkeletonView.displayName = 'ReportActionsSkeletonView'; +ReportActionsSkeletonView.propTypes = propTypes; +export default withWindowDimensions(ReportActionsSkeletonView); From 9140ea1af69f7d09f313c9ad46e25703297b6b5a Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 3 May 2022 00:35:31 +0530 Subject: [PATCH 19/46] fix: removed old code --- .../ChatGhostUI/ContentLoadingOneLine.js | 16 -------- .../ChatGhostUI/ContentLoadingThreeLines.js | 18 -------- .../ChatGhostUI/ContentLoadingTwoLines.js | 17 -------- .../ContentLoadingWrapper/index.js | 21 ---------- .../ContentLoadingWrapper/index.native.js | 20 --------- src/components/ChatGhostUI/index.js | 41 ------------------- 6 files changed, 133 deletions(-) delete mode 100644 src/components/ChatGhostUI/ContentLoadingOneLine.js delete mode 100644 src/components/ChatGhostUI/ContentLoadingThreeLines.js delete mode 100644 src/components/ChatGhostUI/ContentLoadingTwoLines.js delete mode 100644 src/components/ChatGhostUI/ContentLoadingWrapper/index.js delete mode 100644 src/components/ChatGhostUI/ContentLoadingWrapper/index.native.js delete mode 100644 src/components/ChatGhostUI/index.js diff --git a/src/components/ChatGhostUI/ContentLoadingOneLine.js b/src/components/ChatGhostUI/ContentLoadingOneLine.js deleted file mode 100644 index 3667525ef64..00000000000 --- a/src/components/ChatGhostUI/ContentLoadingOneLine.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import {Rect, Circle} from 'react-native-svg'; -import ContentLoadingWrapper from './ContentLoadingWrapper'; - -const ContentLoadingOneLine = () => ( - - - - - -); - -ContentLoadingOneLine.displayName = 'ContentLoadingOneLine'; -export default ContentLoadingOneLine; diff --git a/src/components/ChatGhostUI/ContentLoadingThreeLines.js b/src/components/ChatGhostUI/ContentLoadingThreeLines.js deleted file mode 100644 index 4978c0d488a..00000000000 --- a/src/components/ChatGhostUI/ContentLoadingThreeLines.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import {Rect, Circle} from 'react-native-svg'; -import ContentLoadingWrapper from './ContentLoadingWrapper'; - -const ContentLoadingThreeLines = () => ( - - - - - - - -); - -ContentLoadingThreeLines.displayName = 'ContentLoadingThreeLines'; -export default ContentLoadingThreeLines; diff --git a/src/components/ChatGhostUI/ContentLoadingTwoLines.js b/src/components/ChatGhostUI/ContentLoadingTwoLines.js deleted file mode 100644 index df555ada40b..00000000000 --- a/src/components/ChatGhostUI/ContentLoadingTwoLines.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import {Rect, Circle} from 'react-native-svg'; -import ContentLoadingWrapper from './ContentLoadingWrapper'; - -const ContentLoadingTwoLines = () => ( - - - - - - -); - -ContentLoadingTwoLines.displayName = 'ContentLoadingTwoLines'; -export default ContentLoadingTwoLines; diff --git a/src/components/ChatGhostUI/ContentLoadingWrapper/index.js b/src/components/ChatGhostUI/ContentLoadingWrapper/index.js deleted file mode 100644 index ada2ec6baca..00000000000 --- a/src/components/ChatGhostUI/ContentLoadingWrapper/index.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import ContentLoader from 'react-content-loader'; - -const propTypes = { - /* Children to wrap within the Content Loader */ - children: PropTypes.node.isRequired, - - /* Height of the content-loader */ - height: PropTypes.number.isRequired, -}; - -const ContentLoadingWrapper = (props) => { - - {props.children} - ; -}; - -ContentLoadingWrapper.protoTypes = propTypes; -ContentLoadingWrapper.displayName = 'ContentLoadingWrapper'; -export default ContentLoadingWrapper; diff --git a/src/components/ChatGhostUI/ContentLoadingWrapper/index.native.js b/src/components/ChatGhostUI/ContentLoadingWrapper/index.native.js deleted file mode 100644 index 1703bf7a717..00000000000 --- a/src/components/ChatGhostUI/ContentLoadingWrapper/index.native.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import ContentLoader from 'react-content-loader/native'; - -const propTypes = { - /* Children to wrap within the Content Loader */ - children: PropTypes.node.isRequired, - - /* Height of the content-loader */ - height: PropTypes.number.isRequired, -}; - -const ContentLoadingWrapper = (props) => { - - {props.children} - ; -}; - -ContentLoadingWrapper.protoTypes = propTypes; -ContentLoadingWrapper.displayName = 'ContentLoadingWrapper'; diff --git a/src/components/ChatGhostUI/index.js b/src/components/ChatGhostUI/index.js deleted file mode 100644 index d2f829f3a31..00000000000 --- a/src/components/ChatGhostUI/index.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import _ from 'underscore'; -import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; -import ContentLoadingOneLine from './ContentLoadingElements/ContentLoadingOneLine'; -import ContentLoadingTwoLines from './ContentLoadingElements/ContentLoadingTwoLines'; -import ContentLoadingThreeLines from './ContentLoadingElements/ContentLoadingThreeLines'; -import CONST from '../../CONST'; - -const propTypes = { - ...windowDimensionsPropTypes, -}; - -const ChatList = (props) => { - const windowHeight = props.windowHeight; - - const height = CONST.CHAT_GHOST_ROW_HEIGHT; - const numberOfRows = Math.floor(windowHeight / height); - const contentItems = new Array(numberOfRows); - - return ( - <> - { - _.map(contentItems, (_item, index) => { - const iconIndex = (index + 1) % 4; - switch (iconIndex) { - case 2: - return ; - case 0: - return ; - default: - return ; - } - }) - } - - ); -}; - -ChatList.displayName = 'ChatList'; -ChatList.propTypes = propTypes; -export default withWindowDimensions(ChatList); From abdb0a98872b00d3378f0f4c50f4b419ea76eee5 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 3 May 2022 00:36:41 +0530 Subject: [PATCH 20/46] fix: updated conditions for showing loader --- src/pages/home/ReportScreen.js | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 984a51ccbf6..cf638fc16c5 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -18,7 +18,7 @@ import ReportActionCompose from './report/ReportActionCompose'; import KeyboardSpacer from '../../components/KeyboardSpacer'; import SwipeableView from '../../components/SwipeableView'; import CONST from '../../CONST'; -import ChatGhostUI from '../../components/ChatGhostUI'; +import ReportActionsSkeletonView from '../../components/ReportActionsSkeletonView'; import reportActionPropTypes from './report/reportActionPropTypes'; import ArchivedReportFooter from '../../components/ArchivedReportFooter'; @@ -152,7 +152,7 @@ class ReportScreen extends React.Component { prepareTransition() { this.setState({isLoading: true}); clearTimeout(this.loadingTimerId); - this.loadingTimerId = setTimeout(() => this.setState({isLoading: false}), 100); + this.loadingTimerId = setTimeout(() => this.setState({isLoading: false}), 0); } /** @@ -196,15 +196,16 @@ class ReportScreen extends React.Component { style={[styles.flex1, styles.justifyContentEnd, styles.overflowHidden]} > - {this.shouldShowLoader() && } - {!this.shouldShowLoader() && ( - - )} + {this.shouldShowLoader() + ? + : ( + + )} {(isArchivedRoom || this.props.session.shouldShowComposeInput) && ( { From 2052ba0222b699dc899897c5109e7941171ec1da Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 3 May 2022 00:54:57 +0530 Subject: [PATCH 21/46] fix: removed "ghost" word references --- src/CONST.js | 2 +- src/components/ReportActionsSkeletonView/index.js | 8 ++++---- src/pages/home/ReportScreen.js | 12 ++++++------ 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/CONST.js b/src/CONST.js index 50e1ab8f34b..843dc378936 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -418,7 +418,7 @@ const CONST = { EMOJI_PICKER_ITEM_HEIGHT: 40, EMOJI_PICKER_HEADER_HEIGHT: 38, COMPOSER_MAX_HEIGHT: 125, - CHAT_GHOST_ROW_HEIGHT: 80, + CHAT_SKELETON_VIEW_ROW_HEIGHT: 80, EMAIL: { CONCIERGE: 'concierge@expensify.com', HELP: 'help@expensify.com', diff --git a/src/components/ReportActionsSkeletonView/index.js b/src/components/ReportActionsSkeletonView/index.js index 38a46ff8a8b..766d091830a 100644 --- a/src/components/ReportActionsSkeletonView/index.js +++ b/src/components/ReportActionsSkeletonView/index.js @@ -8,19 +8,19 @@ const propTypes = { }; const ReportActionsSkeletonView = (props) => { - const possibleVisibleContentItems = new Array(Math.floor(props.windowHeight / CONST.CHAT_GHOST_ROW_HEIGHT)); + const possibleVisibleContentItems = new Array(Math.floor(props.windowHeight / CONST.CHAT_SKELETON_VIEW_ROW_HEIGHT)); const skeletonLines = []; for (let index = 0; index < possibleVisibleContentItems; index++) { const iconIndex = (index + 1) % 4; switch (iconIndex) { case 2: - skeletonLines.push(); + skeletonLines.push(); break; case 0: - skeletonLines.push(); + skeletonLines.push(); break; default: - skeletonLines.push(); + skeletonLines.push(); } } return {skeletonLines}; diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index cf638fc16c5..ec52401b7f7 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -101,7 +101,7 @@ class ReportScreen extends React.Component { this.state = { isLoading: true, - isGhostScreenVisible: true, + isSkeletonViewVisible: true, }; } @@ -111,8 +111,8 @@ class ReportScreen extends React.Component { } componentDidUpdate(prevProps) { - if (this.state.isGhostScreenVisible && this.props.isLoadingReportData === false) { - this.hideGhostScreen(); + if (this.state.isSkeletonViewVisible && this.props.isLoadingReportData === false) { + this.hideSkeletonView(); } if (this.props.route.params.reportID === prevProps.route.params.reportID) { return; @@ -133,8 +133,8 @@ class ReportScreen extends React.Component { Report.addAction(getReportID(this.props.route), text); } - hideGhostScreen() { - this.setState({isGhostScreenVisible: false}); + hideSkeletonView() { + this.setState({isSkeletonViewVisible: false}); } /** @@ -143,7 +143,7 @@ class ReportScreen extends React.Component { * @returns {Boolean} */ shouldShowLoader() { - return (this.state.isLoading || !getReportID(this.props.route)) && this.state.isGhostScreenVisible; + return (this.state.isLoading || !getReportID(this.props.route)) && this.state.isSkeletonViewVisible; } /** From 428e5452a5a360fe07d5389996c276fb6c3ab7e9 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 3 May 2022 01:31:59 +0530 Subject: [PATCH 22/46] fix: cleanup skeleton ui logic --- .../ReportActionsSkeletonView/SkeletonViewLines.js | 4 ++-- src/components/ReportActionsSkeletonView/index.js | 12 ++++++------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js index 1b6eca08b21..e78080795e1 100644 --- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js +++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {Rect, Circle} from 'react-native-svg'; -import SkeletonViewContentLoader from 'react-content-loader'; +import SkeletonViewContentLoader from 'react-content-loader/native'; const propTypes = { numberOfRows: PropTypes.number.isRequired, @@ -12,7 +12,7 @@ const SkeletonViewLines = (props) => { return ( diff --git a/src/components/ReportActionsSkeletonView/index.js b/src/components/ReportActionsSkeletonView/index.js index 766d091830a..11d70e85345 100644 --- a/src/components/ReportActionsSkeletonView/index.js +++ b/src/components/ReportActionsSkeletonView/index.js @@ -8,22 +8,22 @@ const propTypes = { }; const ReportActionsSkeletonView = (props) => { - const possibleVisibleContentItems = new Array(Math.floor(props.windowHeight / CONST.CHAT_SKELETON_VIEW_ROW_HEIGHT)); - const skeletonLines = []; + const possibleVisibleContentItems = Math.floor(props.windowHeight / CONST.CHAT_SKELETON_VIEW_ROW_HEIGHT); + const skeletonViewLines = []; for (let index = 0; index < possibleVisibleContentItems; index++) { const iconIndex = (index + 1) % 4; switch (iconIndex) { case 2: - skeletonLines.push(); + skeletonViewLines.push(); break; case 0: - skeletonLines.push(); + skeletonViewLines.push(); break; default: - skeletonLines.push(); + skeletonViewLines.push(); } } - return {skeletonLines}; + return skeletonViewLines; }; ReportActionsSkeletonView.displayName = 'ReportActionsSkeletonView'; From 22ba08db848607c31ab43b9789b6a4bb5e04bc1e Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 3 May 2022 01:32:31 +0530 Subject: [PATCH 23/46] fix: change condition for loader screen --- src/pages/home/ReportScreen.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index ec52401b7f7..e864d9f00d4 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -111,7 +111,7 @@ class ReportScreen extends React.Component { } componentDidUpdate(prevProps) { - if (this.state.isSkeletonViewVisible && this.props.isLoadingReportData === false) { + if (this.state.isSkeletonViewVisible && !this.props.isLoadingReportData) { this.hideSkeletonView(); } if (this.props.route.params.reportID === prevProps.route.params.reportID) { @@ -143,7 +143,7 @@ class ReportScreen extends React.Component { * @returns {Boolean} */ shouldShowLoader() { - return (this.state.isLoading || !getReportID(this.props.route)) && this.state.isSkeletonViewVisible; + return this.state.isLoading || !getReportID(this.props.route) || this.state.isSkeletonViewVisible; } /** @@ -183,7 +183,6 @@ class ReportScreen extends React.Component { if (isArchivedRoom) { reportClosedAction = lodashFindLast(this.props.reportActions, action => action.actionName === CONST.REPORT.ACTIONS.TYPE.CLOSED); } - return ( Date: Tue, 3 May 2022 01:34:14 +0530 Subject: [PATCH 24/46] fix: added alias to webpack for react-content-loader --- config/webpack/webpack.common.js | 1 + 1 file changed, 1 insertion(+) diff --git a/config/webpack/webpack.common.js b/config/webpack/webpack.common.js index 99cc83dfc5b..77b73d2a365 100644 --- a/config/webpack/webpack.common.js +++ b/config/webpack/webpack.common.js @@ -152,6 +152,7 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({ alias: { 'react-native-config': 'react-web-config', 'react-native$': 'react-native-web', + 'react-content-loader/native': 'react-content-loader', }, // React Native libraries may have web-specific module implementations that appear with the extension `.web.js` From 14e230c228c0f2fcf5b4ea12f5ab0c3347f8aebc Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 3 May 2022 01:44:28 +0530 Subject: [PATCH 25/46] fix: moved heights to const and cleanup code --- src/CONST.js | 9 +++- .../SkeletonViewLines.js | 44 +++++-------------- .../ReportActionsSkeletonView/index.js | 2 +- 3 files changed, 21 insertions(+), 34 deletions(-) diff --git a/src/CONST.js b/src/CONST.js index 843dc378936..c266eb9c872 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -418,7 +418,14 @@ const CONST = { EMOJI_PICKER_ITEM_HEIGHT: 40, EMOJI_PICKER_HEADER_HEIGHT: 38, COMPOSER_MAX_HEIGHT: 125, - CHAT_SKELETON_VIEW_ROW_HEIGHT: 80, + CHAT_SKELETON_VIEW: { + AVERAGE_ROW_HEIGHT: 80, + HEIGHT_FOR_ROW_COUNT: { + 1: 60, + 2: 80, + 3: 100, + }, + }, EMAIL: { CONCIERGE: 'concierge@expensify.com', HELP: 'help@expensify.com', diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js index e78080795e1..e2f1f2d63db 100644 --- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js +++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js @@ -2,44 +2,24 @@ import React from 'react'; import PropTypes from 'prop-types'; import {Rect, Circle} from 'react-native-svg'; import SkeletonViewContentLoader from 'react-content-loader/native'; +import CONST from '../../CONST'; const propTypes = { numberOfRows: PropTypes.number.isRequired, }; -const SkeletonViewLines = (props) => { - const renderOneLine = () => props.numberOfRows; - - return ( - - - - - - ); -}; +const SkeletonViewLines = props => ( + + + + + { props.numberOfRows < 3 && } + { props.numberOfRows < 4 && } + +); SkeletonViewLines.displayName = 'SkeletonViewLines'; SkeletonViewLines.propTypes = propTypes; export default SkeletonViewLines; - -// -// -// -// -// -// -// - -// -// -// -// -// -// diff --git a/src/components/ReportActionsSkeletonView/index.js b/src/components/ReportActionsSkeletonView/index.js index 11d70e85345..13279d2fcc2 100644 --- a/src/components/ReportActionsSkeletonView/index.js +++ b/src/components/ReportActionsSkeletonView/index.js @@ -8,7 +8,7 @@ const propTypes = { }; const ReportActionsSkeletonView = (props) => { - const possibleVisibleContentItems = Math.floor(props.windowHeight / CONST.CHAT_SKELETON_VIEW_ROW_HEIGHT); + const possibleVisibleContentItems = Math.floor(props.windowHeight / CONST.CHAT_SKELETON_VIEW.AVERAGE_ROW_HEIGHT); const skeletonViewLines = []; for (let index = 0; index < possibleVisibleContentItems; index++) { const iconIndex = (index + 1) % 4; From a021c5ed9f0fba54df45762eb1c20bd2d9e6d66a Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 3 May 2022 01:47:52 +0530 Subject: [PATCH 26/46] fix: updated num row logic --- src/components/ReportActionsSkeletonView/SkeletonViewLines.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js index e2f1f2d63db..35f5548ac7f 100644 --- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js +++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js @@ -15,8 +15,8 @@ const SkeletonViewLines = props => ( - { props.numberOfRows < 3 && } - { props.numberOfRows < 4 && } + { props.numberOfRows > 1 && } + { props.numberOfRows > 2 && } ); From a277fc2061a25409e42784a16ed9393e7ddc5a49 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 3 May 2022 03:25:20 +0530 Subject: [PATCH 27/46] style: fixed linting and added jsdoc --- .../ReportActionsSkeletonView/SkeletonViewLines.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js index 35f5548ac7f..48221b4fdcd 100644 --- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js +++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js @@ -5,6 +5,7 @@ import SkeletonViewContentLoader from 'react-content-loader/native'; import CONST from '../../CONST'; const propTypes = { + /** Number of rows to show in Skeletal UI block */ numberOfRows: PropTypes.number.isRequired, }; @@ -15,8 +16,8 @@ const SkeletonViewLines = props => ( - { props.numberOfRows > 1 && } - { props.numberOfRows > 2 && } + {props.numberOfRows > 1 && } + {props.numberOfRows > 2 && } ); From bb5b935c2e467b948799c3c6b45f87d29794b443 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Mon, 9 May 2022 01:15:49 +0530 Subject: [PATCH 28/46] fix: wrapped render component with fragment --- src/components/ReportActionsSkeletonView/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionsSkeletonView/index.js b/src/components/ReportActionsSkeletonView/index.js index 13279d2fcc2..59b3433ba1c 100644 --- a/src/components/ReportActionsSkeletonView/index.js +++ b/src/components/ReportActionsSkeletonView/index.js @@ -23,7 +23,7 @@ const ReportActionsSkeletonView = (props) => { skeletonViewLines.push(); } } - return skeletonViewLines; + return <>{skeletonViewLines}; }; ReportActionsSkeletonView.displayName = 'ReportActionsSkeletonView'; From ddd0def9ea59343d1d5842923a7bb460a4833fa3 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Mon, 9 May 2022 01:42:20 +0530 Subject: [PATCH 29/46] fix: switched to container height from window height to set the height for skeletal ui --- src/components/ReportActionsSkeletonView/index.js | 10 ++++++---- src/pages/home/ReportScreen.js | 8 +++++++- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/ReportActionsSkeletonView/index.js b/src/components/ReportActionsSkeletonView/index.js index 59b3433ba1c..6d04a2a5001 100644 --- a/src/components/ReportActionsSkeletonView/index.js +++ b/src/components/ReportActionsSkeletonView/index.js @@ -1,14 +1,16 @@ import React from 'react'; -import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; +import PropTypes from 'prop-types'; import SkeletonViewLines from './SkeletonViewLines'; import CONST from '../../CONST'; const propTypes = { - ...windowDimensionsPropTypes, + /** Height of the container component */ + containerHeight: PropTypes.number.isRequired, }; const ReportActionsSkeletonView = (props) => { - const possibleVisibleContentItems = Math.floor(props.windowHeight / CONST.CHAT_SKELETON_VIEW.AVERAGE_ROW_HEIGHT); + // Determines the number of content items based on container height + const possibleVisibleContentItems = Math.floor(props.containerHeight / CONST.CHAT_SKELETON_VIEW.AVERAGE_ROW_HEIGHT); const skeletonViewLines = []; for (let index = 0; index < possibleVisibleContentItems; index++) { const iconIndex = (index + 1) % 4; @@ -28,4 +30,4 @@ const ReportActionsSkeletonView = (props) => { ReportActionsSkeletonView.displayName = 'ReportActionsSkeletonView'; ReportActionsSkeletonView.propTypes = propTypes; -export default withWindowDimensions(ReportActionsSkeletonView); +export default ReportActionsSkeletonView; diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index e864d9f00d4..e81b553e58c 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -102,6 +102,7 @@ class ReportScreen extends React.Component { this.state = { isLoading: true, isSkeletonViewVisible: true, + skeletonViewContainerHeight: 0, }; } @@ -193,10 +194,15 @@ class ReportScreen extends React.Component { this.setState({skeletonViewContainerHeight: event.nativeEvent.layout.height})} > {this.shouldShowLoader() - ? + ? ( + + ) : ( Date: Tue, 14 Jun 2022 12:51:47 +0530 Subject: [PATCH 30/46] feat: merge report fetch action methods --- src/libs/actions/Report.js | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js index 3abd3ba1235..dce0d448fbc 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -795,6 +795,12 @@ function fetchActions(reportID, offset) { return; } + if (reportActionsOffset === -1) { + Onyx.set(ONYXKEYS.IS_LOADING_INITIAL_REPORT_ACTIONS, true); + } else { + Onyx.set(ONYXKEYS.IS_LOADING_MORE_REPORT_ACTIONS, true); + } + return DeprecatedAPI.Report_GetHistory({ reportID, reportActionsOffset, @@ -807,21 +813,15 @@ function fetchActions(reportID, offset) { const indexedData = _.indexBy(data.history, 'sequenceNumber'); Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, indexedData); + }).finally(() => { + if (reportActionsOffset === -1) { + Onyx.set(ONYXKEYS.IS_LOADING_INITIAL_REPORT_ACTIONS, false); + } else { + Onyx.set(ONYXKEYS.IS_LOADING_MORE_REPORT_ACTIONS, false); + } }); } -/** - * Get the actions of a report - * - * @param {Number} reportID - * @param {Number} [offset] - */ -function fetchActionsWithLoadingState(reportID, offset) { - Onyx.set(ONYXKEYS.IS_LOADING_REPORT_ACTIONS, true); - fetchActions(reportID, offset) - .finally(() => Onyx.set(ONYXKEYS.IS_LOADING_REPORT_ACTIONS, false)); -} - /** * Get all of our reports * @@ -1547,7 +1547,6 @@ export { navigateToConciergeChat, handleInaccessibleReport, setReportWithDraft, - fetchActionsWithLoadingState, createPolicyRoom, renameReport, getLastReadSequenceNumber, From 6567615d110db27b03fe46040ec9bec8486ba2f2 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 14 Jun 2022 12:52:12 +0530 Subject: [PATCH 31/46] feat: update loader logic for skeleton view --- src/ONYXKEYS.js | 5 ++++- src/pages/home/ReportScreen.js | 28 +++++----------------------- 2 files changed, 9 insertions(+), 24 deletions(-) diff --git a/src/ONYXKEYS.js b/src/ONYXKEYS.js index 9e198d07aad..17a535f6fa3 100755 --- a/src/ONYXKEYS.js +++ b/src/ONYXKEYS.js @@ -162,7 +162,10 @@ export default { INBOX_CALL_USER_WAIT_TIME: 'inboxCallUserWaitTime', // Are report actions loading? - IS_LOADING_REPORT_ACTIONS: 'isLoadingReportActions', + IS_LOADING_INITIAL_REPORT_ACTIONS: 'isLoadingInitialReportActions', + + // Are report actions loading with pagination? + IS_LOADING_MORE_REPORT_ACTIONS: 'isLoadingMoreReportActions', // Is report data loading? IS_LOADING_REPORT_DATA: 'isLoadingReportData', diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index d2b13fb71e6..254bd8da036 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -63,7 +63,7 @@ const propTypes = { betas: PropTypes.arrayOf(PropTypes.string), /** Flag to check if report data is being loaded */ - isLoadingReportData: PropTypes.bool, + isLoadingInitialReportActions: PropTypes.bool, }; const defaultProps = { @@ -78,7 +78,7 @@ const defaultProps = { hasOutstandingIOU: false, }, betas: [], - isLoadingReportData: false, + isLoadingInitialReportActions: false, }; /** @@ -101,8 +101,6 @@ class ReportScreen extends React.Component { this.onSubmitComment = this.onSubmitComment.bind(this); this.state = { - isLoading: true, - isSkeletonViewVisible: true, skeletonViewContainerHeight: 0, }; } @@ -113,9 +111,6 @@ class ReportScreen extends React.Component { } componentDidUpdate(prevProps) { - if (this.state.isSkeletonViewVisible && !this.props.isLoadingReportData) { - this.hideSkeletonView(); - } if (this.props.route.params.reportID === prevProps.route.params.reportID) { return; } @@ -135,26 +130,13 @@ class ReportScreen extends React.Component { Report.addAction(getReportID(this.props.route), text); } - hideSkeletonView() { - this.setState({isSkeletonViewVisible: false}); - } - /** * When reports change there's a brief time content is not ready to be displayed * * @returns {Boolean} */ shouldShowLoader() { - return this.state.isLoading || !getReportID(this.props.route) || this.state.isSkeletonViewVisible; - } - - /** - * Configures a small loading transition and proceeds with rendering available data - */ - prepareTransition() { - this.setState({isLoading: true}); - clearTimeout(this.loadingTimerId); - this.loadingTimerId = setTimeout(() => this.setState({isLoading: false}), 0); + return !getReportID(this.props.route) || (_.isEmpty(this.props.reportActions) && this.props.isLoadingInitialReportActions); } /** @@ -268,7 +250,7 @@ export default withOnyx({ betas: { key: ONYXKEYS.BETAS, }, - isLoadingReportData: { - key: ONYXKEYS.IS_LOADING_REPORT_DATA, + isLoadingInitialReportActions: { + key: ONYXKEYS.IS_LOADING_INITIAL_REPORT_ACTIONS, }, })(ReportScreen); From 662409e06563fe75f5093ea659580bebd32991d0 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 14 Jun 2022 12:52:34 +0530 Subject: [PATCH 32/46] feat: update references for isloading flags --- src/pages/home/report/ReportActionsList.js | 2 +- src/pages/home/report/ReportActionsView.js | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index 4af69adc667..ec7446be6d0 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -48,7 +48,7 @@ const propTypes = { mostRecentIOUReportSequenceNumber: PropTypes.number, /** Are we loading more report actions? */ - isLoadingReportActions: PropTypes.bool.isRequired, + isLoadingMoreReportActions: PropTypes.bool.isRequired, /** Callback executed on list layout */ onLayout: PropTypes.func.isRequired, diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index ef0520b143f..064d4652fc7 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/src/pages/home/report/ReportActionsView.js @@ -63,7 +63,7 @@ const propTypes = { }), /** Are we loading more report actions? */ - isLoadingReportActions: PropTypes.bool, + isLoadingMoreReportActions: PropTypes.bool, /** Are we waiting for more report data? */ isLoadingReportData: PropTypes.bool, @@ -84,7 +84,7 @@ const defaultProps = { }, reportActions: {}, session: {}, - isLoadingReportActions: false, + isLoadingMoreReportActions: false, isLoadingReportData: false, }; @@ -284,7 +284,7 @@ class ReportActionsView extends React.Component { // Retrieve the next REPORT.ACTIONS.LIMIT sized page of comments, unless we're near the beginning, in which // case just get everything starting from 0. const offset = Math.max(minSequenceNumber - CONST.REPORT.ACTIONS.LIMIT, 0); - Report.fetchActionsWithLoadingState(this.props.reportID, offset); + Report.fetchActions(this.props.reportID, offset); } /** @@ -417,7 +417,7 @@ class ReportActionsView extends React.Component { onLayout={this.recordTimeToMeasureItemLayout} sortedReportActions={this.sortedReportActions} mostRecentIOUReportSequenceNumber={this.mostRecentIOUReportSequenceNumber} - isLoadingReportActions={this.props.isLoadingReportActions} + isLoadingMoreReportActions={this.props.isLoadingMoreReportActions} loadMoreChats={this.loadMoreChats} /> @@ -441,8 +441,8 @@ export default compose( isLoadingReportData: { key: ONYXKEYS.IS_LOADING_REPORT_DATA, }, - isLoadingReportActions: { - key: ONYXKEYS.IS_LOADING_REPORT_ACTIONS, + isLoadingMoreReportActions: { + key: ONYXKEYS.IS_LOADING_MORE_REPORT_ACTIONS, initWithStoredValues: false, }, }), From 5a8c3e5fb2a5d85fa6962053e3e2f1eb1928e420 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 14 Jun 2022 13:09:06 +0530 Subject: [PATCH 33/46] fix: report actions loader --- src/pages/home/ReportScreen.js | 3 --- src/pages/home/report/ReportActionsList.js | 2 +- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 254bd8da036..08ae12ad1f4 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -106,7 +106,6 @@ class ReportScreen extends React.Component { } componentDidMount() { - this.prepareTransition(); this.storeCurrentlyViewedReport(); } @@ -114,8 +113,6 @@ class ReportScreen extends React.Component { if (this.props.route.params.reportID === prevProps.route.params.reportID) { return; } - - this.prepareTransition(); this.storeCurrentlyViewedReport(); } diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index ec7446be6d0..c4d9b1f4c5c 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -170,7 +170,7 @@ class ReportActionsList extends React.Component { initialNumToRender={this.calculateInitialNumToRender()} onEndReached={this.props.loadMoreChats} onEndReachedThreshold={0.75} - ListFooterComponent={this.props.isLoadingReportActions + ListFooterComponent={this.props.isLoadingMoreReportActions ? : null} keyboardShouldPersistTaps="handled" From b5c10e662e1c3e8f62912e72d6f2eec017030ae7 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 14 Jun 2022 15:34:46 +0530 Subject: [PATCH 34/46] fix: split functions for initial load and pagination --- src/libs/actions/Policy.js | 2 +- src/libs/actions/Report.js | 38 ++++++++++++++-------- src/pages/home/report/ReportActionsView.js | 4 +-- 3 files changed, 28 insertions(+), 16 deletions(-) diff --git a/src/libs/actions/Policy.js b/src/libs/actions/Policy.js index aa037a5cf69..00b2561d254 100644 --- a/src/libs/actions/Policy.js +++ b/src/libs/actions/Policy.js @@ -531,7 +531,7 @@ function subscribeToPolicyEvents() { if (!_.isEmpty(policyExpenseChatIDs)) { Report.fetchChatReportsByIDs(policyExpenseChatIDs); _.each(policyExpenseChatIDs, (reportID) => { - Report.fetchActions(reportID); + Report.fetchInitialActions(reportID); }); } diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js index dce0d448fbc..778386a8b8f 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -795,12 +795,6 @@ function fetchActions(reportID, offset) { return; } - if (reportActionsOffset === -1) { - Onyx.set(ONYXKEYS.IS_LOADING_INITIAL_REPORT_ACTIONS, true); - } else { - Onyx.set(ONYXKEYS.IS_LOADING_MORE_REPORT_ACTIONS, true); - } - return DeprecatedAPI.Report_GetHistory({ reportID, reportActionsOffset, @@ -813,15 +807,32 @@ function fetchActions(reportID, offset) { const indexedData = _.indexBy(data.history, 'sequenceNumber'); Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, indexedData); - }).finally(() => { - if (reportActionsOffset === -1) { - Onyx.set(ONYXKEYS.IS_LOADING_INITIAL_REPORT_ACTIONS, false); - } else { - Onyx.set(ONYXKEYS.IS_LOADING_MORE_REPORT_ACTIONS, false); - } }); } +/** + * Get the actions of a report during pagination + * + * @param {Number} reportID + * @param {Number} [offset] + */ +function fetchActionsWithPagination(reportID, offset) { + Onyx.set(ONYXKEYS.IS_LOADING_MORE_REPORT_ACTIONS, true); + fetchActions(reportID, offset) + .finally(() => Onyx.set(ONYXKEYS.IS_LOADING_MORE_REPORT_ACTIONS, false)); +} + +/** + * Get the initial actions of a report + * + * @param {Number} reportID + */ +function fetchInitialActions(reportID) { + Onyx.set(ONYXKEYS.IS_LOADING_INITIAL_REPORT_ACTIONS, true); + fetchActions(reportID) + .finally(() => Onyx.set(ONYXKEYS.IS_LOADING_INITIAL_REPORT_ACTIONS, false)); +} + /** * Get all of our reports * @@ -1522,7 +1533,6 @@ Onyx.connect({ export { fetchAllReports, - fetchActions, fetchOrCreateChatReport, fetchChatReportsByIDs, fetchIOUReportByID, @@ -1547,6 +1557,8 @@ export { navigateToConciergeChat, handleInaccessibleReport, setReportWithDraft, + fetchActionsWithPagination, + fetchInitialActions, createPolicyRoom, renameReport, getLastReadSequenceNumber, diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index 064d4652fc7..e8550292c55 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/src/pages/home/report/ReportActionsView.js @@ -259,7 +259,7 @@ class ReportActionsView extends React.Component { } fetchData() { - Report.fetchActions(this.props.reportID); + Report.fetchInitialActions(this.props.reportID); } /** @@ -284,7 +284,7 @@ class ReportActionsView extends React.Component { // Retrieve the next REPORT.ACTIONS.LIMIT sized page of comments, unless we're near the beginning, in which // case just get everything starting from 0. const offset = Math.max(minSequenceNumber - CONST.REPORT.ACTIONS.LIMIT, 0); - Report.fetchActions(this.props.reportID, offset); + Report.fetchActionsWithPagination(this.props.reportID, offset); } /** From 479e056701d69256f7cc054ad8a2cd0996b1bbe5 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 14 Jun 2022 15:44:18 +0530 Subject: [PATCH 35/46] fix: alignment of skeleton view --- .../ReportActionsSkeletonView/SkeletonViewLines.js | 10 +++++----- src/pages/home/report/ReportActionsList.js | 11 ++++++++--- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js index 48221b4fdcd..26ece46bd35 100644 --- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js +++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js @@ -13,11 +13,11 @@ const SkeletonViewLines = props => ( - - - - {props.numberOfRows > 1 && } - {props.numberOfRows > 2 && } + + + + {props.numberOfRows > 1 && } + {props.numberOfRows > 2 && } ); diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index c4d9b1f4c5c..79f4e0ac4e2 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -1,20 +1,21 @@ import PropTypes from 'prop-types'; import React from 'react'; -import {ActivityIndicator, View} from 'react-native'; +import {View} from 'react-native'; import InvertedFlatList from '../../../components/InvertedFlatList'; import withDrawerState, {withDrawerPropTypes} from '../../../components/withDrawerState'; import compose from '../../../libs/compose'; import * as ReportScrollManager from '../../../libs/ReportScrollManager'; import styles from '../../../styles/styles'; -import themeColors from '../../../styles/themes/default'; import * as ReportUtils from '../../../libs/ReportUtils'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; import {withPersonalDetails} from '../../../components/OnyxProvider'; import ReportActionItem from './ReportActionItem'; +import ReportActionsSkeletonView from '../../../components/ReportActionsSkeletonView'; import variables from '../../../styles/variables'; import participantPropTypes from '../../../components/participantPropTypes'; import * as ReportActionsUtils from '../../../libs/ReportActionsUtils'; import reportActionPropTypes from './reportActionPropTypes'; +import CONST from '../../../CONST'; const propTypes = { /** Personal details of all the users */ @@ -171,7 +172,11 @@ class ReportActionsList extends React.Component { onEndReached={this.props.loadMoreChats} onEndReachedThreshold={0.75} ListFooterComponent={this.props.isLoadingMoreReportActions - ? + ? ( + + ) : null} keyboardShouldPersistTaps="handled" onLayout={this.props.onLayout} From e468cbc30e6b6577f7bee31b0a06b8b895441765 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 14 Jun 2022 15:49:19 +0530 Subject: [PATCH 36/46] fix: update checks for shouldComponentUpdate --- src/pages/home/report/ReportActionsView.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index e8550292c55..17736042538 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/src/pages/home/report/ReportActionsView.js @@ -161,7 +161,7 @@ class ReportActionsView extends React.Component { return true; } - if (nextProps.isLoadingReportActions !== this.props.isLoadingReportActions) { + if (nextProps.isLoadingMoreReportActions !== this.props.isLoadingMoreReportActions) { return true; } @@ -268,7 +268,7 @@ class ReportActionsView extends React.Component { */ loadMoreChats() { // Only fetch more if we are not already fetching so that we don't initiate duplicate requests. - if (this.props.isLoadingReportActions) { + if (this.props.isLoadingMoreReportActions) { return; } From 8d9e5bb92c3e29da733d0dfb6aa96a6c666c8924 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 14 Jun 2022 17:37:13 +0530 Subject: [PATCH 37/46] feat: added animation transition to skeleton ui --- src/components/ReportActionsSkeletonView/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/ReportActionsSkeletonView/index.js b/src/components/ReportActionsSkeletonView/index.js index 6d04a2a5001..adff11e62c1 100644 --- a/src/components/ReportActionsSkeletonView/index.js +++ b/src/components/ReportActionsSkeletonView/index.js @@ -1,4 +1,7 @@ import React from 'react'; +import Animated, { + FadeIn, FadeOut, Layout, +} from 'react-native-reanimated'; import PropTypes from 'prop-types'; import SkeletonViewLines from './SkeletonViewLines'; import CONST from '../../CONST'; @@ -25,7 +28,7 @@ const ReportActionsSkeletonView = (props) => { skeletonViewLines.push(); } } - return <>{skeletonViewLines}; + return {skeletonViewLines}; }; ReportActionsSkeletonView.displayName = 'ReportActionsSkeletonView'; From cc66043f2acbd0dbffc9cec4f267072249145063 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Sat, 23 Jul 2022 01:31:54 +0530 Subject: [PATCH 38/46] refactor: chnged the latest version of skeleton ui code --- .../ReportActionsSkeletonView/SkeletonViewLines.js | 10 +++++----- src/components/ReportActionsSkeletonView/index.js | 5 +---- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js index 26ece46bd35..51b0fe54f73 100644 --- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js +++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js @@ -5,7 +5,7 @@ import SkeletonViewContentLoader from 'react-content-loader/native'; import CONST from '../../CONST'; const propTypes = { - /** Number of rows to show in Skeletal UI block */ + /** Number of rows to show in Skeleton UI block */ numberOfRows: PropTypes.number.isRequired, }; @@ -14,10 +14,10 @@ const SkeletonViewLines = props => ( height={CONST.CHAT_SKELETON_VIEW.HEIGHT_FOR_ROW_COUNT[props.numberOfRows]} > - - - {props.numberOfRows > 1 && } - {props.numberOfRows > 2 && } + + + {props.numberOfRows > 1 && } + {props.numberOfRows > 2 && } ); diff --git a/src/components/ReportActionsSkeletonView/index.js b/src/components/ReportActionsSkeletonView/index.js index adff11e62c1..6d04a2a5001 100644 --- a/src/components/ReportActionsSkeletonView/index.js +++ b/src/components/ReportActionsSkeletonView/index.js @@ -1,7 +1,4 @@ import React from 'react'; -import Animated, { - FadeIn, FadeOut, Layout, -} from 'react-native-reanimated'; import PropTypes from 'prop-types'; import SkeletonViewLines from './SkeletonViewLines'; import CONST from '../../CONST'; @@ -28,7 +25,7 @@ const ReportActionsSkeletonView = (props) => { skeletonViewLines.push(); } } - return {skeletonViewLines}; + return <>{skeletonViewLines}; }; ReportActionsSkeletonView.displayName = 'ReportActionsSkeletonView'; From aaa680626d241234d81a41fc2f249c6a5f61f537 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Sat, 23 Jul 2022 01:32:03 +0530 Subject: [PATCH 39/46] chore: package-lock changes --- package-lock.json | 147 ++++++++++++++++++++++++---------------------- 1 file changed, 76 insertions(+), 71 deletions(-) diff --git a/package-lock.json b/package-lock.json index c11b09ec25b..4a78459a7b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21848,7 +21848,7 @@ "@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", - "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=", + "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "dev": true }, "@types/lodash": { @@ -22655,7 +22655,7 @@ "absolute-path": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/absolute-path/-/absolute-path-0.0.0.tgz", - "integrity": "sha1-p4di+9rftSl76ZsV01p4Wy8JW/c=" + "integrity": "sha512-HQiug4c+/s3WOvEnDRxXVmNtSG5s2gJM9r19BTcqjp7BWcE48PB+Y2G6jE65kqI0LpsQeMZygt/b60Gi4KxGyA==" }, "accepts": { "version": "1.3.7", @@ -22674,7 +22674,7 @@ "acorn-dynamic-import": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-2.0.2.tgz", - "integrity": "sha1-x1K9IQvvZ5UBtsbLf8hPj0cVjMQ=", + "integrity": "sha512-GKp5tQ8h0KMPWIYGRHHXI1s5tUpZixZ3IHF2jAu42wSCf6In/G873s6/y4DdKdhWvzhu1T6mE1JgvnhAKqyYYQ==", "requires": { "acorn": "^4.0.3" }, @@ -22682,7 +22682,7 @@ "acorn": { "version": "4.0.13", "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz", - "integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=" + "integrity": "sha512-fu2ygVGuMmlzG8ZeRJ0bvR41nsAkxxhbyk8bZ1SS521Z7vmgJFTQQlfz/Mp/nJexGBz+v8sC9bM6+lNgskt4Ug==" } } }, @@ -22825,7 +22825,7 @@ "align-text": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz", - "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=", + "integrity": "sha512-GrTZLRpmp6wIC2ztrWW9MjjTgSKccffgFagbNDOX95/dcjEcYZibYTeaOntySQLcdw1ztBoFkviiUvTMbb9MYg==", "requires": { "kind-of": "^3.0.2", "longest": "^1.0.1", @@ -23172,7 +23172,7 @@ "app-root-dir": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/app-root-dir/-/app-root-dir-1.0.2.tgz", - "integrity": "sha1-OBh+wt6nV3//Az/8sSFyaS/24Rg=", + "integrity": "sha512-jlpIfsOoNoafl92Sz//64uQHGSyMrD2vYG5d8o2a4qGvyNCvXur7bzIsWtAC/6flI2RYAp3kv8rsfBtaLm7w0g==", "dev": true }, "appdirsjs": { @@ -23220,7 +23220,7 @@ "aria-query": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-3.0.0.tgz", - "integrity": "sha1-ZbP8wcoRVajJrmTW7uKX8V1RM8w=", + "integrity": "sha512-majUxHgLehQTeSA+hClx+DY09OVUqG3GtezWkF1krgLGNdlDu9l9V8DaqNMWbq4Eddc8wsyDA0hpDUtnYxQEXw==", "dev": true, "requires": { "ast-types-flow": "0.0.7", @@ -23230,7 +23230,7 @@ "arr-diff": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz", - "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=" + "integrity": "sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA==" }, "arr-flatten": { "version": "1.1.0", @@ -23240,12 +23240,12 @@ "arr-union": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz", - "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=" + "integrity": "sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==" }, "array-filter": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-0.0.1.tgz", - "integrity": "sha1-fajPLiZijtcygDWB/SH2fKzS7uw=" + "integrity": "sha512-VW0FpCIhjZdarWjIz8Vpva7U95fl2Jn+b+mmFFMLn8PIVscOQcAgEznwUzTEuUHuqZqIxwzRlcaN/urTFFQoiw==" }, "array-find-index": { "version": "1.0.2", @@ -23295,17 +23295,17 @@ "array-map": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/array-map/-/array-map-0.0.0.tgz", - "integrity": "sha1-iKK6tz0c97zVwbEYoAP2b2ZfpmI=" + "integrity": "sha512-123XMszMB01QKVptpDQ7x1m1pP5NmJIG1kbl0JSPPRezvwQChxAN0Gvzo7rvR1IZ2tOL2tmiy7kY/KKgnpVVpg==" }, "array-reduce": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/array-reduce/-/array-reduce-0.0.0.tgz", - "integrity": "sha1-FziZ0//Rx9k4PkR5Ul2+J4yrXys=" + "integrity": "sha512-8jR+StqaC636u7h3ye1co3lQRefgVVUQUhuAmRbDqIMeR2yuXzRvkCNQiQ5J/wbREmoBLNtp13dhaaVpZQDRUw==" }, "array-union": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", - "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=", + "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==", "dev": true, "requires": { "array-uniq": "^1.0.1" @@ -23314,13 +23314,13 @@ "array-uniq": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz", - "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=", + "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==", "dev": true }, "array-unique": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz", - "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=" + "integrity": "sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ==" }, "array.prototype.flat": { "version": "1.2.5", @@ -23933,7 +23933,7 @@ "asap": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", - "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" + "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==" }, "asar": { "version": "3.0.3", @@ -23959,7 +23959,7 @@ "ascii-table": { "version": "0.0.9", "resolved": "https://registry.npmjs.org/ascii-table/-/ascii-table-0.0.9.tgz", - "integrity": "sha1-BqZgTWpV1L9BqaR9mHLXp42jHnM=" + "integrity": "sha512-xpkr6sCDIYTPqzvjG8M3ncw1YOTaloWZOyrUmicoEifBEKzQzt+ooUpRpQ/AbOoJfO/p2ZKiyp79qHThzJDulQ==" }, "asn1": { "version": "0.2.4", @@ -24015,13 +24015,13 @@ "assert-plus": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz", - "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=", + "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==", "dev": true }, "assign-symbols": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz", - "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=" + "integrity": "sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==" }, "ast-types": { "version": "0.14.2", @@ -24041,7 +24041,7 @@ "ast-types-flow": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz", - "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0=", + "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==", "dev": true }, "async": { @@ -24071,7 +24071,7 @@ "asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", - "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", "dev": true }, "at-least-node": { @@ -24135,7 +24135,7 @@ "babel-code-frame": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz", - "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=", + "integrity": "sha512-XqYMR2dfdGMW+hd0IUZ2PwK+fGeFkOxZJ0wY+JaQAHzt1Zx8LcvpiZD2NiGkEG8qx0CfkAOr5xt76d1e8vG90g==", "dev": true, "requires": { "chalk": "^1.1.3", @@ -24146,19 +24146,19 @@ "ansi-regex": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", + "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==", "dev": true }, "ansi-styles": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", - "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", + "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==", "dev": true }, "chalk": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", - "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", + "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==", "dev": true, "requires": { "ansi-styles": "^2.2.1", @@ -24213,7 +24213,7 @@ "babel-helper-function-name": { "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz", - "integrity": "sha1-00dbjAPtmCQqJbSDUasYOZ01gKk=", + "integrity": "sha512-Oo6+e2iX+o9eVvJ9Y5eKL5iryeRdsIkwRYheCuhYdVHsdEQysbc2z2QkqCLIYnNxkT5Ss3ggrHdXiDI7Dhrn4Q==", "dev": true, "requires": { "babel-helper-get-function-arity": "^6.24.1", @@ -24226,7 +24226,7 @@ "babel-helper-get-function-arity": { "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz", - "integrity": "sha1-j3eCqpNAfEHTqlCQj4mwMbG2hT0=", + "integrity": "sha512-WfgKFX6swFB1jS2vo+DwivRN4NB8XUdM3ij0Y1gnC21y1tdBoe6xjVnd7NSI6alv+gZXCtJqvrTeMW3fR/c0ng==", "dev": true, "requires": { "babel-runtime": "^6.22.0", @@ -24598,7 +24598,7 @@ "babel-messages": { "version": "6.23.0", "resolved": "https://registry.npmjs.org/babel-messages/-/babel-messages-6.23.0.tgz", - "integrity": "sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=", + "integrity": "sha512-Bl3ZiA+LjqaMtNYopA9TYE9HP1tQ+E5dLxE0XrAzcIJeK2UqF0/EaqXwBn9esd4UmTfEab+P+UYQ1GnioFIb/w==", "dev": true, "requires": { "babel-runtime": "^6.22.0" @@ -24607,7 +24607,7 @@ "babel-plugin-add-react-displayname": { "version": "0.0.5", "resolved": "https://registry.npmjs.org/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz", - "integrity": "sha1-M51M3be2X9YtHfnbn+BN4TQSK9U=", + "integrity": "sha512-LY3+Y0XVDYcShHHorshrDbt4KFWL4bSeniCtl4SYZbask+Syngk1uMPCeN9+nSiZo6zX5s0RTq/J9Pnaaf/KHw==", "dev": true }, "babel-plugin-apply-mdx-type-prop": { @@ -25110,7 +25110,7 @@ "babel-plugin-syntax-class-properties": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz", - "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94=", + "integrity": "sha512-chI3Rt9T1AbrQD1s+vxw3KcwC9yHtF621/MacuItITfZX344uhQoANjpoSJZleAmW2tjlolqB/f+h7jIqXa7pA==", "dev": true }, "babel-plugin-syntax-trailing-function-commas": { @@ -25121,7 +25121,7 @@ "babel-plugin-transform-class-properties": { "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz", - "integrity": "sha1-anl2PqYdM9NvN7YRqp3vgagbRqw=", + "integrity": "sha512-n4jtBA3OYBdvG5PRMKsMXJXHfLYw/ZOmtxCLOOwz6Ro5XlrColkStLnz1AS1L2yfPA9BKJ1ZNlmVCLjAL9DSIg==", "dev": true, "requires": { "babel-helper-function-name": "^6.24.1", @@ -25133,7 +25133,7 @@ "babel-plugin-transform-remove-console": { "version": "6.9.4", "resolved": "https://registry.npmjs.org/babel-plugin-transform-remove-console/-/babel-plugin-transform-remove-console-6.9.4.tgz", - "integrity": "sha1-uYA2DAZzhOJLNXpYjYB9PINSd4A=" + "integrity": "sha512-88blrUrMX3SPiGkT1GnvVY8E/7A+k6oj3MNvUtTIxJflFzXTw1bHkuJ/y039ouhFMp2prRn5cQGzokViYi1dsg==" }, "babel-preset-current-node-syntax": { "version": "1.0.1", @@ -25202,7 +25202,7 @@ "babel-runtime": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", - "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=", + "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==", "dev": true, "requires": { "core-js": "^2.4.0", @@ -25220,7 +25220,7 @@ "babel-template": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-template/-/babel-template-6.26.0.tgz", - "integrity": "sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=", + "integrity": "sha512-PCOcLFW7/eazGUKIoqH97sO9A2UYMahsn/yRQ7uOk37iutwjq7ODtcTNF+iFDSHNfkctqsLRjLP7URnOx0T1fg==", "dev": true, "requires": { "babel-runtime": "^6.26.0", @@ -25233,7 +25233,7 @@ "babel-traverse": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-traverse/-/babel-traverse-6.26.0.tgz", - "integrity": "sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=", + "integrity": "sha512-iSxeXx7apsjCHe9c7n8VtRXGzI2Bk1rBSOJgCCjfyXb6v1aCqE1KSEpq/8SXuVN8Ka/Rh1WDTF0MDzkvTA4MIA==", "dev": true, "requires": { "babel-code-frame": "^6.26.0", @@ -25273,7 +25273,7 @@ "babel-types": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz", - "integrity": "sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=", + "integrity": "sha512-zhe3V/26rCWsEZK8kZN+HaQj5yQ1CilTObixFzKW1UWjqG7618Twz6YEsCnjfg5gBcJh02DrpCkS9h98ZqDY+g==", "dev": true, "requires": { "babel-runtime": "^6.26.0", @@ -25360,7 +25360,7 @@ "base-64": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz", - "integrity": "sha1-eAqZyE59YAJgNhURxId2E78k9rs=" + "integrity": "sha512-Y5gU45svrR5tI2Vt/X9GPd3L0HNIKzGu202EjxrXMpuc2V2CiKgemAbUUsqYmZJvPtCXoUKjNZwBJzsNScUbXA==" }, "base64-js": { "version": "1.3.1", @@ -25370,13 +25370,13 @@ "batch": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz", - "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=", + "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==", "dev": true }, "batch-processor": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz", - "integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=", + "integrity": "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==", "dev": true }, "bcrypt-pbkdf": { @@ -25544,7 +25544,7 @@ "bonjour": { "version": "3.5.0", "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz", - "integrity": "sha1-jokKGD2O6aI5OzhExpGkK897yfU=", + "integrity": "sha512-RaVTblr+OnEli0r/ud8InrU7D+G0y6aJhlxaLa6Pwty4+xoxboF1BsUI45tujvRpbj9dQVoglChqonGAsjEBYg==", "dev": true, "requires": { "array-flatten": "^2.1.0", @@ -25558,7 +25558,7 @@ "boolbase": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", - "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" }, "boolean": { "version": "3.2.0", @@ -25695,7 +25695,7 @@ "brorand": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz", - "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=" + "integrity": "sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w==" }, "browser-process-hrtime": { "version": "1.0.0", @@ -25852,13 +25852,13 @@ "buffer-crc32": { "version": "0.2.13", "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz", - "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=", + "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==", "dev": true }, "buffer-fill": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz", - "integrity": "sha1-+PeLdniYiO858gXNY39o5wISKyw=", + "integrity": "sha512-T7zexNBwiiaCOGDg9xNX9PBmjrubblRkENuptryuI64URkXDFum9il/JGL8Lm8wYfAXpredVXXZz7eMHilimiQ==", "dev": true }, "buffer-from": { @@ -25875,7 +25875,7 @@ "buffer-xor": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz", - "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=" + "integrity": "sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ==" }, "builder-util": { "version": "22.13.1", @@ -26022,12 +26022,12 @@ "builtin-status-codes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz", - "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=" + "integrity": "sha512-HpGFw18DgFWlncDfjTa2rcQ4W88O1mC8e8yZ2AvQY5KDaktSTwo+KRf6nHK6FRI5FyRyb/5T6+TSxfP7QyGsmQ==" }, "bytes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", - "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=" + "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==" }, "c8": { "version": "7.11.3", @@ -26305,13 +26305,13 @@ "call-me-maybe": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.1.tgz", - "integrity": "sha1-JtII6onje1y95gJQoV8DHBak1ms=", + "integrity": "sha512-wCyFsDQkKPwwF8BDwOiWNx/9K45L/hvggQiDbve+viMNMQnWhrlYIuBk09offfwCRtCO9P6XwUttufzU11WCVw==", "dev": true }, "caller-callsite": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz", - "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=", + "integrity": "sha512-JuG3qI4QOftFsZyOn1qq87fq5grLIyk1JYd5lJmdA+fG7aQ9pA/i3JIJGcO3q0MrRcHlOt1U+ZeHW8Dq9axALQ==", "requires": { "callsites": "^2.0.0" } @@ -26319,7 +26319,7 @@ "caller-path": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz", - "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=", + "integrity": "sha512-MCL3sf6nCSXOwCTzvPKhN18TU7AHTvdtam8DAogxcrJ8Rjfbbg7Lgng64H9Iy+vUV6VGFClN/TyxBkAebLRR4A==", "requires": { "caller-callsite": "^2.0.0" } @@ -26327,7 +26327,7 @@ "callsites": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz", - "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=" + "integrity": "sha512-ksWePWBloaWPxJYQ8TL0JHvtci6G5QTKwQ95RcWAa/lzoAKuAOflGdAK92hpHXjkwb8zLxoLNUoNYZgVsaJzvQ==" }, "camel-case": { "version": "4.1.1", @@ -26373,7 +26373,7 @@ "camelize": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", - "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" + "integrity": "sha512-W2lPwkBkMZwFlPCXhIlYgxu+7gC/NUlCtdK652DAJ1JdgV0sTrvuPFshNPrFa1TY2JOkLhgdeEBplB4ezEa+xg==" }, "caniuse-lite": { "version": "1.0.30001252", @@ -26410,7 +26410,7 @@ "center-align": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz", - "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=", + "integrity": "sha512-Baz3aNe2gd2LP2qk5U+sDk/m4oSuwSDcBfayTCTBoWpfIGO5XFxPmjILQII4NGiZjD6DoDI6kf7gKaxkf7s3VQ==", "requires": { "align-text": "^0.1.3", "lazy-cache": "^1.0.3" @@ -26544,7 +26544,7 @@ "chromium-pickle-js": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/chromium-pickle-js/-/chromium-pickle-js-0.2.0.tgz", - "integrity": "sha1-BKEGZywYsIWrd02YPfo+oTjyIgU=", + "integrity": "sha512-1R5Fho+jBq0DDydt+/vHWj5KJNJCKdARKOCwZUen84I5BreWoLqRLANH1U87eJy1tiASPtMnGqJJq0ZsLoRPOw==", "dev": true }, "ci-info": { @@ -26634,7 +26634,7 @@ "cli-cursor": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz", - "integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=", + "integrity": "sha512-8lgKz8LmCRYZZQDpRyT2m5rKJ08TnU4tR9FFFW2rxpxR1FzWi4PQ/NfyODchAatHaUgnSPVcx/R5w6NuTBzFiw==", "requires": { "restore-cursor": "^2.0.0" } @@ -30323,7 +30323,7 @@ "find-up": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz", - "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=", + "integrity": "sha512-NWzkk0jSJtTt08+FBFMvXoeZnOJD+jTtsRmBYbAIzJdX6l7dLgR7CTubCM5/eDdPUBvLCeVasP1brfVR/9/EZQ==", "dev": true, "requires": { "locate-path": "^2.0.0" @@ -30332,7 +30332,7 @@ "locate-path": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz", - "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=", + "integrity": "sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==", "dev": true, "requires": { "p-locate": "^2.0.0", @@ -30351,7 +30351,7 @@ "p-locate": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz", - "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=", + "integrity": "sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==", "dev": true, "requires": { "p-limit": "^1.1.0" @@ -30360,13 +30360,13 @@ "p-try": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz", - "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=", + "integrity": "sha512-U1etNYuMJoIz3ZXSrrySFjsXQTWOx2/jdi86L+2pRvph/qMKL6sbcCYdH23fqsbm8TH2Gn0OybpT4eSFlCVHww==", "dev": true }, "path-exists": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz", - "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=", + "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==", "dev": true } } @@ -32817,7 +32817,7 @@ "ansi-regex": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", + "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==", "dev": true } } @@ -33084,7 +33084,7 @@ "history": { "version": "4.5.1", "resolved": "https://registry.npmjs.org/history/-/history-4.5.1.tgz", - "integrity": "sha512-gfHeJeYeMzFtos61gdA1AloO0hGXPF2Yum+2FRdJvlylYQOz51OnT1zuwg9UYst1BRrONhcAh3Nmsg9iblgl6g==", + "integrity": "sha1-RJNaUQIeO45n66wmejVnVzKrpWk=", "requires": { "invariant": "^2.2.1", "loose-envify": "^1.2.0", @@ -33096,7 +33096,7 @@ "warning": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", - "integrity": "sha512-jMBt6pUrKn5I+OGgtQ4YZLdhIeJmObddh6CsibPxyQ5yPZm1XExSyzC1LCNX7BzhxWgiHmizBWJTHJIjMjTQYQ==", + "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", "requires": { "loose-envify": "^1.0.0" } @@ -43378,6 +43378,11 @@ "resolved": "https://registry.npmjs.org/react-collapse/-/react-collapse-5.1.0.tgz", "integrity": "sha512-5v0ywsn9HjiR/odNzbRDs0RZfrnbdSippJebWOBCFFDA12Vx8DddrbI4qWVf1P2wTiVagrpcSy07AU0b6+gM9Q==" }, + "react-content-loader": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/react-content-loader/-/react-content-loader-6.2.0.tgz", + "integrity": "sha512-r1dI6S+uHNLW68qraLE2njJYOuy6976PpCExuCZUcABWbfnF3FMcmuESRI8L4Bj45wnZ7n8g71hkPLzbma7/Cw==" + }, "react-devtools-core": { "version": "4.22.1", "resolved": "https://registry.npmjs.org/react-devtools-core/-/react-devtools-core-4.22.1.tgz", @@ -44294,7 +44299,7 @@ "ajv": { "version": "4.11.8", "resolved": "https://registry.npmjs.org/ajv/-/ajv-4.11.8.tgz", - "integrity": "sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=", + "integrity": "sha512-I/bSHSNEcFFqXLf91nchoNB9D1Kie3QKcWdchYUaoIg1+1bdWDkdfdlvdIOJbi9U8xR0y+MWc5D+won9v95WlQ==", "requires": { "co": "^4.6.0", "json-stable-stringify": "^1.0.1" @@ -44303,12 +44308,12 @@ "ajv-keywords": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-1.5.1.tgz", - "integrity": "sha1-MU3QpLM2j609/NxU7eYXG4htrzw=" + "integrity": "sha512-vuBv+fm2s6cqUyey2A7qYcvsik+GMDJsw8BARP2sDE76cqmaZVarsvHf7Vx6VJ0Xk8gLl+u3MoAPf6gKzJefeA==" }, "ansi-regex": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" + "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==" }, "big.js": { "version": "3.2.0", @@ -44318,7 +44323,7 @@ "camelcase": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz", - "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=" + "integrity": "sha512-wzLkDa4K/mzI1OSITC+DUyjgIl/ETNHE9QvYgy6J6Jvqyyz4C0Xfd+lQhb19sX2jMpZV4IssUn0VDVmglV+s4g==" }, "cliui": { "version": "2.1.0", @@ -44503,7 +44508,7 @@ "camelcase": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz", - "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=" + "integrity": "sha512-4nhGqUkc4BqbBBB4Q6zLuD7lzzrHYrjKGeYaEji/3tFR5VdJu9v+LilhGIVe8wxEJPPOeWo7eg8dwY13TZ1BNg==" }, "cliui": { "version": "3.2.0", @@ -44528,7 +44533,7 @@ "camelcase": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz", - "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=" + "integrity": "sha512-4nhGqUkc4BqbBBB4Q6zLuD7lzzrHYrjKGeYaEji/3tFR5VdJu9v+LilhGIVe8wxEJPPOeWo7eg8dwY13TZ1BNg==" } } } @@ -49079,7 +49084,7 @@ "value-equal": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.2.1.tgz", - "integrity": "sha512-yRL36Xb2K/HmFT5Fe3M86S7mu4+a12/3l7uytUh6eNPPjP77ldPBvsAvmnWff39sXn55naRMZN8LZWRO8PWaeQ==" + "integrity": "sha1-wiCjBDYfzmmU277ao8fhobiVhx0=" }, "vary": { "version": "1.1.2", @@ -50679,4 +50684,4 @@ "dev": true } } -} \ No newline at end of file +} From fb56647aa8a18623e4ba2fbd62a2aefed2d20383 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Sat, 23 Jul 2022 01:40:55 +0530 Subject: [PATCH 40/46] refactor: retain the latest changes ReportScreen --- src/pages/home/ReportScreen.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 27ef0a7f32b..97d814a896a 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -1,7 +1,7 @@ import React from 'react'; -import { withOnyx } from 'react-native-onyx'; +import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; -import { Keyboard, View } from 'react-native'; +import {Keyboard, View} from 'react-native'; import lodashGet from 'lodash/get'; import _ from 'underscore'; import lodashFindLast from 'lodash/findLast'; @@ -67,6 +67,7 @@ const propTypes = { /** Flag to check if report data is being loaded */ isLoadingInitialReportActions: PropTypes.bool, + /** The policies which the user has access to */ policies: PropTypes.objectOf(PropTypes.shape({ /** The policy name */ @@ -152,7 +153,7 @@ class ReportScreen extends React.Component { */ updateViewportOffsetTop(e) { const viewportOffsetTop = lodashGet(e, 'target.offsetTop', 0); - this.setState({ viewportOffsetTop }); + this.setState({viewportOffsetTop}); } /** @@ -203,7 +204,7 @@ class ReportScreen extends React.Component { reportClosedAction = lodashFindLast(this.props.reportActions, action => action.actionName === CONST.REPORT.ACTIONS.TYPE.CLOSED); } return ( - + Navigation.navigate(ROUTES.HOME)} @@ -212,7 +213,7 @@ class ReportScreen extends React.Component { this.setState({ skeletonViewContainerHeight: event.nativeEvent.layout.height })} + onLayout={event => this.setState({skeletonViewContainerHeight: event.nativeEvent.layout.height})} > {this.shouldShowLoader() ? ( @@ -226,6 +227,7 @@ class ReportScreen extends React.Component { reportActions={this.props.reportActions} report={this.props.report} session={this.props.session} + isComposerFullSize={this.props.isComposerFullSize} /> )} {(isArchivedRoom || this.props.session.shouldShowComposeInput) && ( @@ -268,14 +270,14 @@ export default withOnyx({ key: ONYXKEYS.SESSION, }, reportActions: { - key: ({ route }) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getReportID(route)}`, + key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getReportID(route)}`, canEvict: false, }, report: { - key: ({ route }) => `${ONYXKEYS.COLLECTION.REPORT}${getReportID(route)}`, + key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${getReportID(route)}`, }, isComposerFullSize: { - key: ({ route }) => `${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${getReportID(route)}`, + key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${getReportID(route)}`, }, betas: { key: ONYXKEYS.BETAS, From 2c35e7abfeab34b3e1ee03207d93ef7984f80a52 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Sat, 23 Jul 2022 01:48:08 +0530 Subject: [PATCH 41/46] refactor: change the flags for isLoadingMoreActions --- src/pages/home/report/ReportActionsList.js | 73 ++++++++++++++-------- src/pages/home/report/ReportActionsView.js | 24 +++---- src/styles/StyleUtils.js | 13 ++++ 3 files changed, 71 insertions(+), 39 deletions(-) diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index 79f4e0ac4e2..424353b09ca 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; -import {View} from 'react-native'; +import {View, Animated} from 'react-native'; import InvertedFlatList from '../../../components/InvertedFlatList'; import withDrawerState, {withDrawerPropTypes} from '../../../components/withDrawerState'; import compose from '../../../libs/compose'; @@ -16,6 +16,7 @@ import participantPropTypes from '../../../components/participantPropTypes'; import * as ReportActionsUtils from '../../../libs/ReportActionsUtils'; import reportActionPropTypes from './reportActionPropTypes'; import CONST from '../../../CONST'; +import * as StyleUtils from '../../../styles/StyleUtils'; const propTypes = { /** Personal details of all the users */ @@ -75,6 +76,22 @@ class ReportActionsList extends React.Component { this.renderItem = this.renderItem.bind(this); this.renderCell = this.renderCell.bind(this); this.keyExtractor = this.keyExtractor.bind(this); + + this.state = { + fadeInAnimation: new Animated.Value(0), + }; + } + + componentDidMount() { + this.fadeIn(); + } + + fadeIn() { + Animated.timing(this.state.fadeInAnimation, { + toValue: 1, + duration: 100, + useNativeDriver: true, + }).start(); } /** @@ -157,32 +174,34 @@ class ReportActionsList extends React.Component { const extraData = (!this.props.isDrawerOpen && this.props.isSmallScreenWidth) ? this.props.report.newMarkerSequenceNumber : undefined; const shouldShowReportRecipientLocalTime = ReportUtils.canShowReportRecipientLocalTime(this.props.personalDetails, this.props.report); return ( - - ) - : null} - keyboardShouldPersistTaps="handled" - onLayout={this.props.onLayout} - onScroll={this.props.onScroll} - extraData={extraData} - /> + + + ) + : null} + keyboardShouldPersistTaps="handled" + onLayout={this.props.onLayout} + onScroll={this.props.onScroll} + extraData={extraData} + /> + ); } } diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index 8dad9b234fd..0da1f82fe17 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/src/pages/home/report/ReportActionsView.js @@ -3,7 +3,7 @@ import { Keyboard, AppState, } from 'react-native'; -import { withOnyx } from 'react-native-onyx'; +import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import _ from 'underscore'; import lodashGet from 'lodash/get'; @@ -14,16 +14,16 @@ import Visibility from '../../../libs/Visibility'; import Timing from '../../../libs/actions/Timing'; import CONST from '../../../CONST'; import compose from '../../../libs/compose'; -import withWindowDimensions, { windowDimensionsPropTypes } from '../../../components/withWindowDimensions'; -import withDrawerState, { withDrawerPropTypes } from '../../../components/withDrawerState'; +import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; +import withDrawerState, {withDrawerPropTypes} from '../../../components/withDrawerState'; import * as ReportScrollManager from '../../../libs/ReportScrollManager'; -import withLocalize, { withLocalizePropTypes } from '../../../components/withLocalize'; +import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager'; import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu'; import PopoverReportActionContextMenu from './ContextMenu/PopoverReportActionContextMenu'; import Performance from '../../../libs/Performance'; import ONYXKEYS from '../../../ONYXKEYS'; -import { withNetwork } from '../../../components/OnyxProvider'; +import {withNetwork} from '../../../components/OnyxProvider'; import * as EmojiPickerAction from '../../../libs/actions/EmojiPickerAction'; import FloatingMessageCounter from './FloatingMessageCounter'; import networkPropTypes from '../../../components/networkPropTypes'; @@ -346,7 +346,7 @@ class ReportActionsView extends React.Component { ? this.props.report.unreadActionCount : prevState.messageCounterCount + this.props.report.unreadActionCount; this.updateNewMarkerPosition(messageCounterCount); - return { messageCounterCount }; + return {messageCounterCount}; }); } @@ -366,7 +366,7 @@ class ReportActionsView extends React.Component { * Show the new floating message counter */ showFloatingMessageCounter() { - this.setState({ isFloatingMessageCounterVisible: true }); + this.setState({isFloatingMessageCounterVisible: true}); } /** @@ -384,7 +384,7 @@ class ReportActionsView extends React.Component { * * @param {Object} {nativeEvent} */ - trackScroll({ nativeEvent }) { + trackScroll({nativeEvent}) { this.currentScrollOffset = -nativeEvent.contentOffset.y; this.toggleFloatingMessageCounter(); } @@ -431,7 +431,7 @@ class ReportActionsView extends React.Component { onLayout={this.recordTimeToMeasureItemLayout} sortedReportActions={this.sortedReportActions} mostRecentIOUReportSequenceNumber={this.mostRecentIOUReportSequenceNumber} - isLoadingReportActions={this.props.isLoadingReportActions} + isLoadingMoreReportActions={this.props.isLoadingMoreReportActions} loadMoreChats={this.loadMoreChats} /> @@ -448,7 +448,7 @@ ReportActionsView.propTypes = propTypes; ReportActionsView.defaultProps = defaultProps; export default compose( - Performance.withRenderTrace({ id: ' rendering' }), + Performance.withRenderTrace({id: ' rendering'}), withWindowDimensions, withDrawerState, withLocalize, @@ -457,8 +457,8 @@ export default compose( isLoadingReportData: { key: ONYXKEYS.IS_LOADING_REPORT_DATA, }, - isLoadingReportActions: { - key: ({ reportID }) => `${ONYXKEYS.COLLECTION.IS_LOADING_REPORT_ACTIONS}${reportID}`, + isLoadingMoreReportActions: { + key: ({reportID}) => `${ONYXKEYS.COLLECTION.IS_LOADING_REPORT_ACTIONS}${reportID}`, initWithStoredValues: false, }, }), diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index fe7113bb631..79018aa352a 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -448,6 +448,18 @@ function getPaddingLeft(paddingLeft) { }; } +/** + * Get animated opacity for report chat list + * @param {Animated.Value} fadeInAnimation + * @returns {Object} + */ +function getReportListAnimationStyle(fadeInAnimation) { + return { + ...styles.flex1, + opacity: fadeInAnimation, + }; +} + export { getAvatarSize, getAvatarStyle, @@ -475,4 +487,5 @@ export { getPaymentMethodMenuWidth, parseStyleAsArray, getPaddingLeft, + getReportListAnimationStyle, }; From 2efc3374d4cbcd16a2d4270bd6bf1c5eaa0bfed0 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Sat, 23 Jul 2022 02:07:45 +0530 Subject: [PATCH 42/46] feat: changed flags for loading actions with new format --- src/ONYXKEYS.js | 9 ++------- src/libs/actions/Report.js | 6 +++--- src/pages/home/ReportScreen.js | 3 ++- src/pages/home/report/ReportActionsView.js | 2 +- 4 files changed, 8 insertions(+), 12 deletions(-) diff --git a/src/ONYXKEYS.js b/src/ONYXKEYS.js index bbfa32242d9..6a0040f60c6 100755 --- a/src/ONYXKEYS.js +++ b/src/ONYXKEYS.js @@ -103,7 +103,8 @@ export default { POLICY: 'policy_', REPORTS_WITH_DRAFT: 'reportWithDraft_', REPORT_IS_COMPOSER_FULL_SIZE: 'reportIsComposerFullSize_', - IS_LOADING_REPORT_ACTIONS: 'isLoadingReportActions_', + IS_LOADING_INITIAL_REPORT_ACTIONS: 'isLoadingInitialReportActions_', + IS_LOADING_MORE_REPORT_ACTIONS: 'isLoadingMoreReportActions_', }, // Indicates which locale should be used @@ -163,12 +164,6 @@ export default { // The number of minutes a user has to wait for a call. INBOX_CALL_USER_WAIT_TIME: 'inboxCallUserWaitTime', - // Are report actions loading? - IS_LOADING_INITIAL_REPORT_ACTIONS: 'isLoadingInitialReportActions', - - // Are report actions loading with pagination? - IS_LOADING_MORE_REPORT_ACTIONS: 'isLoadingMoreReportActions', - // Is report data loading? IS_LOADING_REPORT_DATA: 'isLoadingReportData', diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js index 58d55544006..29411138326 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -1096,17 +1096,17 @@ function readOldestAction(reportID, oldestActionSequenceNumber) { { optimisticData: [{ onyxMethod: CONST.ONYX.METHOD.MERGE, - key: `${ONYXKEYS.COLLECTION.IS_LOADING_REPORT_ACTIONS}${reportID}`, + key: `${ONYXKEYS.COLLECTION.IS_LOADING_MORE_REPORT_ACTIONS}${reportID}`, value: true, }], successData: [{ onyxMethod: CONST.ONYX.METHOD.MERGE, - key: `${ONYXKEYS.COLLECTION.IS_LOADING_REPORT_ACTIONS}${reportID}`, + key: `${ONYXKEYS.COLLECTION.IS_LOADING_MORE_REPORT_ACTIONS}${reportID}`, value: false, }], failureData: [{ onyxMethod: CONST.ONYX.METHOD.MERGE, - key: `${ONYXKEYS.COLLECTION.IS_LOADING_REPORT_ACTIONS}${reportID}`, + key: `${ONYXKEYS.COLLECTION.IS_LOADING_MORE_REPORT_ACTIONS}${reportID}`, value: false, }], }); diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 97d814a896a..b1f3304181d 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -283,7 +283,8 @@ export default withOnyx({ key: ONYXKEYS.BETAS, }, isLoadingInitialReportActions: { - key: ONYXKEYS.IS_LOADING_INITIAL_REPORT_ACTIONS, + key: ({route}) => `${ONYXKEYS.COLLECTION.IS_LOADING_INITIAL_REPORT_ACTIONS}${getReportID(route)}`, + initWithStoredValues: false, }, policies: { key: ONYXKEYS.COLLECTION.POLICY, diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index 0da1f82fe17..ed80f0235ae 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/src/pages/home/report/ReportActionsView.js @@ -458,7 +458,7 @@ export default compose( key: ONYXKEYS.IS_LOADING_REPORT_DATA, }, isLoadingMoreReportActions: { - key: ({reportID}) => `${ONYXKEYS.COLLECTION.IS_LOADING_REPORT_ACTIONS}${reportID}`, + key: ({reportID}) => `${ONYXKEYS.COLLECTION.IS_LOADING_MORE_REPORT_ACTIONS}${reportID}`, initWithStoredValues: false, }, }), From d4cbe16ef1b25421b2b610d917dc75a512108b98 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Sat, 23 Jul 2022 02:09:43 +0530 Subject: [PATCH 43/46] style: lint fixes --- src/libs/actions/Report.js | 48 +++++++++++++++++++------------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js index 29411138326..44f0b78dc88 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -1,4 +1,4 @@ -import { Linking } from 'react-native'; +import {Linking} from 'react-native'; import moment from 'moment'; import _ from 'underscore'; import lodashGet from 'lodash/get'; @@ -114,7 +114,7 @@ function getMaxSequenceNumber(reportID) { * @param {Object} report * @return {String[]} */ -function getParticipantEmailsFromReport({ sharedReportList, reportNameValuePairs, ownerEmail }) { +function getParticipantEmailsFromReport({sharedReportList, reportNameValuePairs, ownerEmail}) { const emailArray = _.map(sharedReportList, participant => participant.email); if (ReportUtils.isChatRoom(reportNameValuePairs)) { return emailArray; @@ -302,9 +302,9 @@ function fetchIOUReportID(debtorEmail) { function fetchChatReportsByIDs(chatList, shouldRedirectIfInaccessible = false) { let fetchedReports; const simplifiedReports = {}; - return DeprecatedAPI.GetReportSummaryList({ reportIDList: chatList.join(',') }) - .then(({ reportSummaryList, jsonCode }) => { - Log.info('[Report] successfully fetched report data', false, { chatList }); + return DeprecatedAPI.GetReportSummaryList({reportIDList: chatList.join(',')}) + .then(({reportSummaryList, jsonCode}) => { + Log.info('[Report] successfully fetched report data', false, {chatList}); fetchedReports = reportSummaryList; // If we receive a 404 response while fetching a single report, treat that report as inaccessible. @@ -476,14 +476,14 @@ function subscribeToUserEvents() { // Live-update a report's actions when an 'edit comment' event is received. PusherUtils.subscribeToPrivateUserChannelEvent(Pusher.TYPE.REPORT_COMMENT_EDIT, currentUserAccountID, - ({ reportID, sequenceNumber, message }) => { + ({reportID, sequenceNumber, message}) => { // We only want the active client to process these events once otherwise multiple tabs would decrement the 'unreadActionCount' if (!ActiveClientManager.isClientTheLeader()) { return; } const actionsToMerge = {}; - actionsToMerge[sequenceNumber] = { message: [message] }; + actionsToMerge[sequenceNumber] = {message: [message]}; // If someone besides the current user deleted an action and the sequenceNumber is greater than our last read we will decrement the unread count // we skip this for the current user because we should already have decremented the count optimistically when they deleted the comment. @@ -505,13 +505,13 @@ function subscribeToUserEvents() { * Setup reportComment push notification callbacks. */ function subscribeToReportCommentPushNotifications() { - PushNotification.onReceived(PushNotification.TYPE.REPORT_COMMENT, ({ reportID, onyxData }) => { - Log.info('[Report] Handled event sent by Airship', false, { reportID }); + PushNotification.onReceived(PushNotification.TYPE.REPORT_COMMENT, ({reportID, onyxData}) => { + Log.info('[Report] Handled event sent by Airship', false, {reportID}); Onyx.update(onyxData); }); // Open correct report when push notification is clicked - PushNotification.onSelected(PushNotification.TYPE.REPORT_COMMENT, ({ reportID }) => { + PushNotification.onSelected(PushNotification.TYPE.REPORT_COMMENT, ({reportID}) => { if (Navigation.canNavigate('navigate')) { // If a chat is visible other than the one we are trying to navigate to, then we need to navigate back if (Navigation.getActiveRoute().slice(1, 2) === ROUTES.REPORT && !Navigation.isActiveRoute(`r/${reportID}`)) { @@ -541,7 +541,7 @@ function getNormalizedTypingStatus(typingStatus) { let normalizedTypingStatus = typingStatus; if (_.first(_.keys(typingStatus)) === 'userLogin') { - normalizedTypingStatus = { [typingStatus.userLogin]: true }; + normalizedTypingStatus = {[typingStatus.userLogin]: true}; } return normalizedTypingStatus; @@ -588,7 +588,7 @@ function subscribeToReportTypingEvents(reportID) { }, 1500); }) .catch((error) => { - Log.hmmm('[Report] Failed to initially subscribe to Pusher channel', false, { errorType: error.type, pusherChannelName }); + Log.hmmm('[Report] Failed to initially subscribe to Pusher channel', false, {errorType: error.type, pusherChannelName}); }); } @@ -938,7 +938,7 @@ function addActions(reportID, text = '', file) { optimisticData.push({ onyxMethod: CONST.ONYX.METHOD.MERGE, key: ONYXKEYS.PERSONAL_DETAILS, - value: { [currentUserEmail]: timezone }, + value: {[currentUserEmail]: timezone}, }); DateUtils.setTimezoneUpdated(); } @@ -998,7 +998,7 @@ function deleteReportComment(reportID, reportAction) { // Optimistic Response const sequenceNumber = reportAction.sequenceNumber; const reportActionsToMerge = {}; - const oldMessage = { ...reportAction.message }; + const oldMessage = {...reportAction.message}; reportActionsToMerge[sequenceNumber] = { ...reportAction, message: [ @@ -1191,14 +1191,14 @@ function togglePinnedState(report) { { onyxMethod: CONST.ONYX.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`, - value: { isPinned: pinnedValue }, + value: {isPinned: pinnedValue}, }, ]; API.write('TogglePinnedChat', { reportID: report.reportID, pinnedValue, - }, { optimisticData }); + }, {optimisticData}); } /** @@ -1288,7 +1288,7 @@ function editReportComment(reportID, originalReportAction, textForNewComment) { // Do not autolink if someone explicitly tries to remove a link from message. // https://github.com/Expensify/App/issues/9090 - const htmlForNewComment = parser.replace(textForNewComment, { filterRules: _.filter(_.pluck(parser.rules, 'name'), name => name !== 'autolink') }); + const htmlForNewComment = parser.replace(textForNewComment, {filterRules: _.filter(_.pluck(parser.rules, 'name'), name => name !== 'autolink')}); // Delete the comment if it's empty if (_.isEmpty(htmlForNewComment)) { @@ -1303,7 +1303,7 @@ function editReportComment(reportID, originalReportAction, textForNewComment) { // Optimistically update the report action with the new message const sequenceNumber = originalReportAction.sequenceNumber; - const newReportAction = { ...originalReportAction }; + const newReportAction = {...originalReportAction}; const actionToMerge = {}; newReportAction.message[0].isEdited = true; newReportAction.message[0].html = htmlForNewComment; @@ -1383,17 +1383,17 @@ function updateNotificationPreference(reportID, previousValue, newValue) { { onyxMethod: CONST.ONYX.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, - value: { notificationPreference: newValue }, + value: {notificationPreference: newValue}, }, ]; const failureData = [ { onyxMethod: CONST.ONYX.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, - value: { notificationPreference: previousValue }, + value: {notificationPreference: previousValue}, }, ]; - API.write('UpdateReportNotificationPreference', { reportID, notificationPreference: newValue }, { optimisticData, failureData }); + API.write('UpdateReportNotificationPreference', {reportID, notificationPreference: newValue}, {optimisticData, failureData}); } /** @@ -1426,7 +1426,7 @@ function handleInaccessibleReport() { */ function createPolicyRoom(policyID, reportName, visibility) { Onyx.set(ONYXKEYS.IS_LOADING_CREATE_POLICY_ROOM, true); - return DeprecatedAPI.CreatePolicyRoom({ policyID, reportName, visibility }) + return DeprecatedAPI.CreatePolicyRoom({policyID, reportName, visibility}) .then((response) => { if (response.jsonCode === CONST.JSON_CODE.UNABLE_TO_RETRY) { Growl.error(Localize.translateLocal('newRoomPage.growlMessageOnError')); @@ -1458,7 +1458,7 @@ function createPolicyRoom(policyID, reportName, visibility) { */ function renameReport(reportID, reportName) { Onyx.set(ONYXKEYS.IS_LOADING_RENAME_POLICY_ROOM, true); - DeprecatedAPI.RenameReport({ reportID, reportName }) + DeprecatedAPI.RenameReport({reportID, reportName}) .then((response) => { if (response.jsonCode === CONST.JSON_CODE.UNABLE_TO_RETRY) { Growl.error(Localize.translateLocal('newRoomPage.growlMessageOnRenameError')); @@ -1473,7 +1473,7 @@ function renameReport(reportID, reportName) { Growl.success(Localize.translateLocal('newRoomPage.policyRoomRenamed')); // Update the report name so that the LHN and header display the updated name - Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, { reportName }); + Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {reportName}); }) .finally(() => Onyx.set(ONYXKEYS.IS_LOADING_RENAME_POLICY_ROOM, false)); } From 8f09ac6f78e448f403e7c555b08d0daf3c1697a4 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Sat, 23 Jul 2022 02:20:16 +0530 Subject: [PATCH 44/46] fix: updated the flag with reportId --- src/libs/actions/Report.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js index 44f0b78dc88..4852bb24a5d 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -690,9 +690,9 @@ function fetchActionsWithPagination(reportID, offset) { * @param {Number} reportID */ function fetchInitialActions(reportID) { - Onyx.set(ONYXKEYS.IS_LOADING_INITIAL_REPORT_ACTIONS, true); + Onyx.set(`${ONYXKEYS.COLLECTION.IS_LOADING_INITIAL_REPORT_ACTIONS}${reportID}`, true); fetchActions(reportID) - .finally(() => Onyx.set(ONYXKEYS.IS_LOADING_INITIAL_REPORT_ACTIONS, false)); + .finally(() => Onyx.set(`${ONYXKEYS.COLLECTION.IS_LOADING_INITIAL_REPORT_ACTIONS}${reportID}`, false)); } /** From 0352b63c06c2d5e7df427eb5557b6fcffd9521c3 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Thu, 28 Jul 2022 22:35:36 +0530 Subject: [PATCH 45/46] refactor: remove unwanted pagination method --- src/libs/actions/Report.js | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js index 813cc2e37bf..31384254d8a 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -672,18 +672,6 @@ function fetchActions(reportID) { }); } -/** - * Get the actions of a report during pagination - * - * @param {Number} reportID - * @param {Number} [offset] - */ -function fetchActionsWithPagination(reportID, offset) { - Onyx.set(ONYXKEYS.IS_LOADING_MORE_REPORT_ACTIONS, true); - fetchActions(reportID, offset) - .finally(() => Onyx.set(ONYXKEYS.IS_LOADING_MORE_REPORT_ACTIONS, false)); -} - /** * Get the initial actions of a report * @@ -1620,7 +1608,6 @@ export { navigateToConciergeChat, handleInaccessibleReport, setReportWithDraft, - fetchActionsWithPagination, fetchInitialActions, createPolicyRoom, renameReport, From ab2189f53a465d7d57b095bf7eac43ca0bfa31c4 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Fri, 29 Jul 2022 09:11:49 +0530 Subject: [PATCH 46/46] style: corrected comment --- src/pages/home/ReportScreen.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index d172558a27f..fd9282a8802 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -66,7 +66,7 @@ const propTypes = { /** Beta features list */ betas: PropTypes.arrayOf(PropTypes.string), - /** Flag to check if report data is being loaded */ + /** Flag to check if the initial report actions data are loading */ isLoadingInitialReportActions: PropTypes.bool, /** The policies which the user has access to */