-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[RNMobile] Add withIsConnected higher order component #56966
Conversation
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 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 );
|
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.
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.
* 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>
What?
Adds a mobile connectivity status HOC.
Why?
To be able to use the value returned from
useIsConnected
hook as a higher-order component.How?
Creates a higher-order component called
withIsConnected
that returns the value ofuseIsConnected
to the WrappedComponent.Testing Instructions
Apply the following patch:
Test Diff