[RNMobile] Add withIsConnected higher order component #56966
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
derekblank
added
Mobile App - i.e. Android or iOS
derekblank
added
the
Mobile App - Automation
|
Size Change: +1.09 kB (0%) Total Size: 1.71 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in b91fc16. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7200372801
|
For future reference, I encountered a Image of diff changes
Diff of the Diffdiff --git a/packages/block-editor/src/components/media-upload-progress/index.native.js b/packages/block-editor/src/components/media-upload-progress/index.native.js
index b64b08eec0..4f3671dc7c 100644
--- a/packages/block-editor/src/components/media-upload-progress/index.native.js
+++ b/packages/block-editor/src/components/media-upload-progress/index.native.js
@@ -10,6 +10,7 @@ import { Component } from '@wordpress/element';
import { Spinner } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { subscribeMediaUpload } from '@wordpress/react-native-bridge';
+import { withIsConnected } from '@wordpress/compose';
/**
* Internal dependencies
@@ -32,6 +33,7 @@ export class MediaUploadProgress extends Component {
};
this.mediaUpload = this.mediaUpload.bind( this );
+ this.getRetryMessage = this.getRetryMessage.bind( this );
}
componentDidMount() {
@@ -115,19 +117,27 @@ export class MediaUploadProgress extends Component {
}
}
+ getRetryMessage() {
+ if ( this.props.isConnected ) {
+ // eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace
+ return __( 'Failed to insert media.\nTap for more info.' );
+ }
+
+ return __( 'You are currently offline.' );
+ }
+
render() {
const { renderContent = () => null } = this.props;
const { isUploadInProgress, isUploadFailed } = this.state;
const showSpinner = this.state.isUploadInProgress;
const progress = this.state.progress * 100;
- // eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace
- const retryMessage = __(
- 'Failed to insert media.\nTap for more info.'
- );
+ const retryMessage = this.getRetryMessage();
const progressBarStyle = [
styles.progressBar,
- showSpinner || styles.progressBarHidden,
+ showSpinner && this.props.isConnected
+ ? styles.progressBarHidden
+ : null,
this.props.progressBarStyle,
];
@@ -158,4 +168,4 @@ export class MediaUploadProgress extends Component {
}
}
-export default MediaUploadProgress;
+export default withIsConnected( MediaUploadProgress );
diff --git a/test.diff b/test.diff
index c66821a7bb..b29ba3085c 100644
--- a/test.diff
+++ b/test.diff
@@ -1,58 +1,59 @@
diff --git a/packages/block-editor/src/components/media-upload-progress/index.native.js b/packages/block-editor/src/components/media-upload-progress/index.native.js
-index b64b08eec0..cf4b26f267 100644
+index b64b08eec0..4f3671dc7c 100644
--- a/packages/block-editor/src/components/media-upload-progress/index.native.js
+++ b/packages/block-editor/src/components/media-upload-progress/index.native.js
@@ -10,6 +10,7 @@ import { Component } from '@wordpress/element';
-import { Spinner } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { subscribeMediaUpload } from '@wordpress/react-native-bridge';
+ import { Spinner } from '@wordpress/components';
+ import { __ } from '@wordpress/i18n';
+ import { subscribeMediaUpload } from '@wordpress/react-native-bridge';
+import { withIsConnected } from '@wordpress/compose';
-
-/**
- * Internal dependencies
+
+ /**
+ * Internal dependencies
@@ -32,6 +33,7 @@ export class MediaUploadProgress extends Component {
- };
-
- this.mediaUpload = this.mediaUpload.bind( this );
+ };
+
+ this.mediaUpload = this.mediaUpload.bind( this );
+ this.getRetryMessage = this.getRetryMessage.bind( this );
- }
-
- componentDidMount() {
-@@ -115,19 +117,26 @@ export class MediaUploadProgress extends Component {
- }
- }
-
+ }
+
+ componentDidMount() {
+@@ -115,19 +117,27 @@ export class MediaUploadProgress extends Component {
+ }
+ }
+
+ getRetryMessage() {
-+ if ( this.props.isConnected === true ) {
++ if ( this.props.isConnected ) {
+ // eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace
+ return __( 'Failed to insert media.\nTap for more info.' );
+ }
++
+ return __( 'You are currently offline.' );
+ }
+
- render() {
- const { renderContent = () => null } = this.props;
- const { isUploadInProgress, isUploadFailed } = this.state;
- const showSpinner = this.state.isUploadInProgress;
- const progress = this.state.progress * 100;
+ render() {
+ const { renderContent = () => null } = this.props;
+ const { isUploadInProgress, isUploadFailed } = this.state;
+ const showSpinner = this.state.isUploadInProgress;
+ const progress = this.state.progress * 100;
- // eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace
- const retryMessage = __(
- 'Failed to insert media.\nTap for more info.'
- );
+ const retryMessage = this.getRetryMessage();
-
- const progressBarStyle = [
- styles.progressBar,
+
+ const progressBarStyle = [
+ styles.progressBar,
- showSpinner || styles.progressBarHidden,
+ showSpinner && this.props.isConnected
+ ? styles.progressBarHidden
+ : null,
- this.props.progressBarStyle,
- ];
-
-@@ -158,4 +167,4 @@ export class MediaUploadProgress extends Component {
- }
-}
-
+ this.props.progressBarStyle,
+ ];
+
+@@ -158,4 +168,4 @@ export class MediaUploadProgress extends Component {
+ }
+ }
+
-export default MediaUploadProgress;
-+export default withIsConnected( MediaUploadProgress );
\ No newline at end of file
++export default withIsConnected( MediaUploadProgress );
|
dcalhoun
reviewed
Dec 13, 2023
packages/compose/src/higher-order/with-is-connected/index.native.js
Outdated
Show resolved
Hide resolved
The previous value was always `undefined`.
Permalinks would likely referenced outdated code at some point. Documentation is generally expected to be up-to-date.
dcalhoun
approved these changes
Dec 13, 2023
I was unable to get the provided testing diff work as expected in the app, even after manually applying the changes. The following diff represents the testing approach I took. Alternative Testing Diffdiff --git a/packages/block-library/src/paragraph/edit.native.js b/packages/block-library/src/paragraph/edit.native.js
index 98662ba21c..1ef8e4ff07 100644
--- a/packages/block-library/src/paragraph/edit.native.js
+++ b/packages/block-library/src/paragraph/edit.native.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { Text } from 'react-native';
+
/**
* WordPress dependencies
*/
@@ -11,6 +16,7 @@ import {
} from '@wordpress/block-editor';
import { useCallback } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
+import { withIsConnected } from '@wordpress/compose';
const name = 'core/paragraph';
@@ -24,6 +30,7 @@ function ParagraphBlock( {
style,
clientId,
parentBlockAlignment,
+ isConnected,
} ) {
const isRTL = useSelect( ( select ) => {
return !! select( blockEditorStore ).getSettings().isRTL;
@@ -52,6 +59,7 @@ function ParagraphBlock( {
const textAlignment = align || parentTextAlignment;
+ console.log( '>>>', { isConnected } );
return (
<>
<BlockControls group="block">
@@ -61,6 +69,11 @@ function ParagraphBlock( {
onChange={ onAlignmentChange }
/>
</BlockControls>
+ <Text>
+ { typeof isConnected === 'boolean'
+ ? isConnected.toString()
+ : 'null' }
+ </Text>
<RichText
identifier="content"
tagName="p"
@@ -101,4 +114,4 @@ function ParagraphBlock( {
);
}
-export default ParagraphBlock;
+export default withIsConnected( ParagraphBlock ); |
The test environment threw errors due to `@wordpress/compose` importing itself.
Fix lint error.
artemiomorales
pushed a commit
that referenced
this pull request
Jan 4, 2024
* Add withIsConnected HOC * fix: Destructure isConnected value from useIsConnected Hook The previous value was always `undefined`. * docs: Avoid permalink in documentation Permalinks would likely referenced outdated code at some point. Documentation is generally expected to be up-to-date. --------- Co-authored-by: David Calhoun <github@davidcalhoun.me>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Adds a mobile connectivity status HOC.
Why?
To be able to use the value returned from
useIsConnectedhook as a higher-order component.How?
Creates a higher-order component called
withIsConnectedthat returns the value ofuseIsConnectedto the WrappedComponent.Testing Instructions
Apply the following patch:
Test Diff