From a944abdc6dfc5bc2f05bd3c7ff60e3eea35627f7 Mon Sep 17 00:00:00 2001 From: Andrew Rosiclair Date: Thu, 30 Jun 2022 14:49:12 -0400 Subject: [PATCH 1/9] added shared BlockingView --- src/components/BlockingViews/BlockingView.js | 41 ++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 src/components/BlockingViews/BlockingView.js diff --git a/src/components/BlockingViews/BlockingView.js b/src/components/BlockingViews/BlockingView.js new file mode 100644 index 000000000000..5c1c41e06f53 --- /dev/null +++ b/src/components/BlockingViews/BlockingView.js @@ -0,0 +1,41 @@ +import React from 'react'; +import {View} from 'react-native'; +import PropTypes from 'prop-types'; +import styles from '../../styles/styles'; +import variables from '../../styles/variables'; +import Icon from '../Icon'; +import Text from '../Text'; + +const propTypes = { + /** Src url for the icon (should be from Expensicons) */ + icon: PropTypes.string.isRequired, + + /** Color for the icon (should be from theme) */ + iconColor: PropTypes.string.isRequired, + + /** Title message below the icon */ + title: PropTypes.string.isRequired, + + /** Subtitle message below the title */ + subtitle: PropTypes.string.isRequired, +}; + +const BlockingView = props => ( + + + {props.title} + {props.subtitle} + +); + +BlockingView.propTypes = propTypes; +BlockingView.displayName = 'BlockingView'; + +export default BlockingView; From a0653341508651172ed333629e1a61b12c219215 Mon Sep 17 00:00:00 2001 From: Andrew Rosiclair Date: Thu, 30 Jun 2022 14:50:14 -0400 Subject: [PATCH 2/9] use shared BlockingView --- .../FullPageOfflineBlockingView.js | 43 +++++++++++++++ src/components/FullPageOfflineBlockingView.js | 53 ------------------- 2 files changed, 43 insertions(+), 53 deletions(-) create mode 100644 src/components/BlockingViews/FullPageOfflineBlockingView.js delete mode 100644 src/components/FullPageOfflineBlockingView.js diff --git a/src/components/BlockingViews/FullPageOfflineBlockingView.js b/src/components/BlockingViews/FullPageOfflineBlockingView.js new file mode 100644 index 000000000000..ffd9b385ac3c --- /dev/null +++ b/src/components/BlockingViews/FullPageOfflineBlockingView.js @@ -0,0 +1,43 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import networkPropTypes from '../networkPropTypes'; +import {withNetwork} from '../OnyxProvider'; +import withLocalize, {withLocalizePropTypes} from '../withLocalize'; +import * as Expensicons from '../Icon/Expensicons'; +import themeColors from '../../styles/themes/default'; +import compose from '../../libs/compose'; +import BlockingView from './BlockingView'; + +const propTypes = { + /** Child elements */ + children: PropTypes.node.isRequired, + + /** Props to fetch translation features */ + ...withLocalizePropTypes, + + /** Props to detect online status */ + network: networkPropTypes.isRequired, +}; + +const FullPageOfflineBlockingView = (props) => { + if (props.network.isOffline) { + return ( + + ); + } + + return props.children; +}; + +FullPageOfflineBlockingView.propTypes = propTypes; +FullPageOfflineBlockingView.displayName = 'FullPageOfflineBlockingView'; + +export default compose( + withLocalize, + withNetwork(), +)(FullPageOfflineBlockingView); diff --git a/src/components/FullPageOfflineBlockingView.js b/src/components/FullPageOfflineBlockingView.js deleted file mode 100644 index 46af2cc4cfde..000000000000 --- a/src/components/FullPageOfflineBlockingView.js +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import {View} from 'react-native'; -import Icon from './Icon'; -import networkPropTypes from './networkPropTypes'; -import {withNetwork} from './OnyxProvider'; -import Text from './Text'; -import withLocalize, {withLocalizePropTypes} from './withLocalize'; -import * as Expensicons from './Icon/Expensicons'; -import themeColors from '../styles/themes/default'; -import styles from '../styles/styles'; -import compose from '../libs/compose'; -import variables from '../styles/variables'; - -const propTypes = { - /** Child elements */ - children: PropTypes.node.isRequired, - - /** Props to fetch translation features */ - ...withLocalizePropTypes, - - /** Props to detect online status */ - network: networkPropTypes.isRequired, -}; - -const FullPageOfflineBlockingView = (props) => { - if (props.network.isOffline) { - return ( - - - {props.translate('common.youAppearToBeOffline')} - {props.translate('common.thisFeatureRequiresInternet')} - - ); - } - - return props.children; -}; - -FullPageOfflineBlockingView.propTypes = propTypes; -FullPageOfflineBlockingView.displayName = 'FullPageOfflineBlockingView'; - -export default compose( - withLocalize, - withNetwork(), -)(FullPageOfflineBlockingView); From fb3845759dfc215e039d29625090875e2bea44f8 Mon Sep 17 00:00:00 2001 From: Andrew Rosiclair Date: Thu, 30 Jun 2022 14:59:37 -0400 Subject: [PATCH 3/9] fix icon proptype --- src/components/BlockingViews/BlockingView.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/BlockingViews/BlockingView.js b/src/components/BlockingViews/BlockingView.js index 5c1c41e06f53..ee27cfdfbdfd 100644 --- a/src/components/BlockingViews/BlockingView.js +++ b/src/components/BlockingViews/BlockingView.js @@ -7,8 +7,8 @@ import Icon from '../Icon'; import Text from '../Text'; const propTypes = { - /** Src url for the icon (should be from Expensicons) */ - icon: PropTypes.string.isRequired, + /** Expensicon for the page */ + icon: PropTypes.func.isRequired, /** Color for the icon (should be from theme) */ iconColor: PropTypes.string.isRequired, From 46d86a34fa6e2bea92fb3e751db03bc54cb3ceb5 Mon Sep 17 00:00:00 2001 From: Andrew Rosiclair Date: Thu, 30 Jun 2022 15:35:35 -0400 Subject: [PATCH 4/9] added FullPageNotFoundView --- .../BlockingViews/FullPageNotFoundView.js | 39 +++++++++++++++++++ src/languages/en.js | 2 + 2 files changed, 41 insertions(+) create mode 100644 src/components/BlockingViews/FullPageNotFoundView.js diff --git a/src/components/BlockingViews/FullPageNotFoundView.js b/src/components/BlockingViews/FullPageNotFoundView.js new file mode 100644 index 000000000000..386aec73a6b1 --- /dev/null +++ b/src/components/BlockingViews/FullPageNotFoundView.js @@ -0,0 +1,39 @@ + +import React from 'react'; +import PropTypes from 'prop-types'; +import BlockingView from './BlockingView'; +import * as Expensicons from '../Icon/Expensicons'; +import themeColors from '../../styles/themes/default'; +import withLocalize, {withLocalizePropTypes} from '../withLocalize'; + +const propTypes = { + /** Props to fetch translation features */ + ...withLocalizePropTypes, + + /** Child elements */ + children: PropTypes.node.isRequired, + + /** If true, child components are replaced with a blocking "not found" view */ + show: PropTypes.bool, +}; + +// eslint-disable-next-line rulesdir/no-negated-variables +const FullPageNotFoundView = (props) => { + if (props.show) { + return ( + + ); + } + + return props.children; +}; + +FullPageNotFoundView.propTypes = propTypes; +FullPageNotFoundView.displayName = 'FullPageNotFoundView'; + +export default withLocalize(FullPageNotFoundView); diff --git a/src/languages/en.js b/src/languages/en.js index 02bf873c3a9d..34169512b61c 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -107,6 +107,8 @@ export default { maxParticipantsReached: ({count}) => `You've selected the maximum number (${count}) of participants.`, youAppearToBeOffline: 'You appear to be offline.', thisFeatureRequiresInternet: 'This feature requires an active internet connection to be used.', + pageNotFound: 'Page not found', + cantFindWhatYoureLookingFor: "We can't find what you're looking for.", }, attachmentPicker: { cameraPermissionRequired: 'Camera permission required', From fc9c43f207725770f2809b7ec12a2fe59ead6af6 Mon Sep 17 00:00:00 2001 From: Andrew Rosiclair Date: Tue, 5 Jul 2022 13:58:18 -0400 Subject: [PATCH 5/9] added default props --- src/components/BlockingViews/FullPageNotFoundView.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/BlockingViews/FullPageNotFoundView.js b/src/components/BlockingViews/FullPageNotFoundView.js index 386aec73a6b1..f620333607df 100644 --- a/src/components/BlockingViews/FullPageNotFoundView.js +++ b/src/components/BlockingViews/FullPageNotFoundView.js @@ -17,6 +17,10 @@ const propTypes = { show: PropTypes.bool, }; +const defaultProps = { + show: false, +}; + // eslint-disable-next-line rulesdir/no-negated-variables const FullPageNotFoundView = (props) => { if (props.show) { @@ -34,6 +38,7 @@ const FullPageNotFoundView = (props) => { }; FullPageNotFoundView.propTypes = propTypes; +FullPageNotFoundView.defaultProps = defaultProps; FullPageNotFoundView.displayName = 'FullPageNotFoundView'; export default withLocalize(FullPageNotFoundView); From a29148f5079cbc82b9738762517b94897ac498b9 Mon Sep 17 00:00:00 2001 From: Andrew Rosiclair Date: Tue, 5 Jul 2022 14:31:37 -0400 Subject: [PATCH 6/9] added new not found text and spanish translation --- src/components/BlockingViews/FullPageNotFoundView.js | 4 ++-- src/languages/en.js | 4 ++-- src/languages/es.js | 2 ++ 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/BlockingViews/FullPageNotFoundView.js b/src/components/BlockingViews/FullPageNotFoundView.js index f620333607df..f0d0a7d8de5e 100644 --- a/src/components/BlockingViews/FullPageNotFoundView.js +++ b/src/components/BlockingViews/FullPageNotFoundView.js @@ -28,8 +28,8 @@ const FullPageNotFoundView = (props) => { ); } diff --git a/src/languages/en.js b/src/languages/en.js index 34169512b61c..1e5724e28fb2 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -107,8 +107,6 @@ export default { maxParticipantsReached: ({count}) => `You've selected the maximum number (${count}) of participants.`, youAppearToBeOffline: 'You appear to be offline.', thisFeatureRequiresInternet: 'This feature requires an active internet connection to be used.', - pageNotFound: 'Page not found', - cantFindWhatYoureLookingFor: "We can't find what you're looking for.", }, attachmentPicker: { cameraPermissionRequired: 'Camera permission required', @@ -509,6 +507,8 @@ export default { chatYouLookingForCannotBeFound: 'The chat you are looking for cannot be found.', getMeOutOfHere: 'Get me out of here', iouReportNotFound: 'The payment details you are looking for cannot be found.', + notHere: "Hmm... it's not here", + pageNotFound: 'That page is nowhere to be found.', }, setPasswordPage: { enterPassword: 'Enter a password', diff --git a/src/languages/es.js b/src/languages/es.js index d7751c630de9..360844a48841 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -507,6 +507,8 @@ export default { chatYouLookingForCannotBeFound: 'El chat que estás buscando no se ha podido encontrar.', getMeOutOfHere: 'Sácame de aquí', iouReportNotFound: 'Los detalles del pago que estás buscando no se han podido encontrar.', + notHere: 'Hmm… no está aquí', + pageNotFound: 'La página que buscas no existe.', }, setPasswordPage: { enterPassword: 'Escribe una contraseña', From b0054eb287a667e29a72e7ca9467191c5e0b1f03 Mon Sep 17 00:00:00 2001 From: Andrew Rosiclair Date: Tue, 5 Jul 2022 15:57:26 -0400 Subject: [PATCH 7/9] removed empty unused NotFound file --- src/pages/NotFound.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100755 src/pages/NotFound.js diff --git a/src/pages/NotFound.js b/src/pages/NotFound.js deleted file mode 100755 index e69de29bb2d1..000000000000 From bbc40d503ea4e294c0ac6628c802bf34c6613953 Mon Sep 17 00:00:00 2001 From: Andrew Rosiclair Date: Wed, 6 Jul 2022 11:52:49 -0400 Subject: [PATCH 8/9] use offline color as default icon color --- src/components/BlockingViews/BlockingView.js | 8 +++++++- src/components/BlockingViews/FullPageNotFoundView.js | 2 -- .../BlockingViews/FullPageOfflineBlockingView.js | 2 -- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/BlockingViews/BlockingView.js b/src/components/BlockingViews/BlockingView.js index ee27cfdfbdfd..279e4c86cf54 100644 --- a/src/components/BlockingViews/BlockingView.js +++ b/src/components/BlockingViews/BlockingView.js @@ -5,13 +5,14 @@ import styles from '../../styles/styles'; import variables from '../../styles/variables'; import Icon from '../Icon'; import Text from '../Text'; +import themeColors from '../../styles/themes/default'; const propTypes = { /** Expensicon for the page */ icon: PropTypes.func.isRequired, /** Color for the icon (should be from theme) */ - iconColor: PropTypes.string.isRequired, + iconColor: PropTypes.string, /** Title message below the icon */ title: PropTypes.string.isRequired, @@ -20,6 +21,10 @@ const propTypes = { subtitle: PropTypes.string.isRequired, }; +const defaultProps = { + iconColor: themeColors.offline, +}; + const BlockingView = props => ( ( ); BlockingView.propTypes = propTypes; +BlockingView.defaultProps = defaultProps; BlockingView.displayName = 'BlockingView'; export default BlockingView; diff --git a/src/components/BlockingViews/FullPageNotFoundView.js b/src/components/BlockingViews/FullPageNotFoundView.js index f0d0a7d8de5e..f84c1acefe11 100644 --- a/src/components/BlockingViews/FullPageNotFoundView.js +++ b/src/components/BlockingViews/FullPageNotFoundView.js @@ -3,7 +3,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import BlockingView from './BlockingView'; import * as Expensicons from '../Icon/Expensicons'; -import themeColors from '../../styles/themes/default'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; const propTypes = { @@ -27,7 +26,6 @@ const FullPageNotFoundView = (props) => { return ( diff --git a/src/components/BlockingViews/FullPageOfflineBlockingView.js b/src/components/BlockingViews/FullPageOfflineBlockingView.js index ffd9b385ac3c..44eb3426a400 100644 --- a/src/components/BlockingViews/FullPageOfflineBlockingView.js +++ b/src/components/BlockingViews/FullPageOfflineBlockingView.js @@ -4,7 +4,6 @@ import networkPropTypes from '../networkPropTypes'; import {withNetwork} from '../OnyxProvider'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import * as Expensicons from '../Icon/Expensicons'; -import themeColors from '../../styles/themes/default'; import compose from '../../libs/compose'; import BlockingView from './BlockingView'; @@ -24,7 +23,6 @@ const FullPageOfflineBlockingView = (props) => { return ( From 81fbbe85b85afaf505551d2c4c3f024932a55fc5 Mon Sep 17 00:00:00 2001 From: Andrew Rosiclair Date: Wed, 6 Jul 2022 11:54:39 -0400 Subject: [PATCH 9/9] better prop naming --- src/components/BlockingViews/FullPageNotFoundView.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/BlockingViews/FullPageNotFoundView.js b/src/components/BlockingViews/FullPageNotFoundView.js index f84c1acefe11..9b9afdcd8b83 100644 --- a/src/components/BlockingViews/FullPageNotFoundView.js +++ b/src/components/BlockingViews/FullPageNotFoundView.js @@ -13,16 +13,16 @@ const propTypes = { children: PropTypes.node.isRequired, /** If true, child components are replaced with a blocking "not found" view */ - show: PropTypes.bool, + shouldShow: PropTypes.bool, }; const defaultProps = { - show: false, + shouldShow: false, }; // eslint-disable-next-line rulesdir/no-negated-variables const FullPageNotFoundView = (props) => { - if (props.show) { + if (props.shouldShow) { return (