Add callbacks to ServerSideRenderer to handle failures with custom re…

…nderers (WordPress#16512) * Add callbacks to ServerSideRenderer to handle failures * Update variable naming and set default renderers * LoadingResponsePlaceholder * swtich case * fetchComplete * Remove fetchcomplete method * Pass render props * add changelog entry * add documentation for new props
donmhico · Aug 27, 2019 · be881a3 · be881a3
1 parent ccea4f2
commit be881a3
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 18 deletions.
diff --git a/packages/server-side-render/CHANGELOG.md b/packages/server-side-render/CHANGELOG.md
@@ -1,3 +1,8 @@
+## Master
+
+### Feature
+- Add `EmptyResponsePlaceholder`, `ErrorResponsePlaceholder` and `LoadingResponsePlaceholder` render props for parent components to swap out alternate placeholders for the various states (see https://github.com/WordPress/gutenberg/pull/16512).
+
 ## 1.0.0 (2019-06-12)
 
 ### Initial Release

diff --git a/packages/server-side-render/README.md b/packages/server-side-render/README.md
@@ -55,6 +55,25 @@ E.g: `{ post_id: 12 }`.
 - Type: `Object`
 - Required: No
 
+### EmptyResponsePlaceholder
+
+This is a [render prop](https://reactjs.org/docs/render-props.html). When the api response is empty, the value of this prop is rendered. The render prop will receive the value of the api response as well as all props passed into `ServerSideRenderer`.
+- Type: `WPElement`
+- Required: No
+
+### ErrorResponsePlaceholder
+
+This is a [render prop](https://reactjs.org/docs/render-props.html). When the api response is an error, the value of this prop is rendered. The render prop will receive the value of the api response as well as all props passed into `ServerSideRenderer`.
+- Type: `WPElement`
+- Required: No
+
+### LoadingResponsePlaceholder
+
+This is a [render prop](https://reactjs.org/docs/render-props.html). While the request is being processed (loading state), the value of this prop is rendered. The render prop will receive the value of the api response as well as all props passed into `ServerSideRenderer`.
+- Type: `WPElement`
+- Required: No
+
+
 ## Usage
 
 Render core/archives preview.

diff --git a/packages/server-side-render/src/server-side-render.js b/packages/server-side-render/src/server-side-render.js
@@ -83,32 +83,19 @@ export class ServerSideRender extends Component {
 
 	render() {
 		const response = this.state.response;
-		const { className } = this.props;
+		const { className, EmptyResponsePlaceholder, ErrorResponsePlaceholder, LoadingResponsePlaceholder } = this.props;
+
 		if ( response === '' ) {
 			return (
-				<Placeholder
-					className={ className }
-				>
-					{ __( 'Block rendered as empty.' ) }
-				</Placeholder>
+				<EmptyResponsePlaceholder response={ response } { ...this.props } />
 			);
 		} else if ( ! response ) {
 			return (
-				<Placeholder
-					className={ className }
-				>
-					<Spinner />
-				</Placeholder>
+				<LoadingResponsePlaceholder response={ response } { ...this.props } />
 			);
 		} else if ( response.error ) {
-			// translators: %s: error message describing the problem
-			const errorMessage = sprintf( __( 'Error loading block: %s' ), response.errorMsg );
 			return (
-				<Placeholder
-					className={ className }
-				>
-					{ errorMessage }
-				</Placeholder>
+				<ErrorResponsePlaceholder response={ response } { ...this.props } />
 			);
 		}
 
@@ -123,4 +110,34 @@ export class ServerSideRender extends Component {
 	}
 }
 
+ServerSideRender.defaultProps = {
+	EmptyResponsePlaceholder: ( { className } ) => (
+		<Placeholder
+			className={ className }
+		>
+			{ __( 'Block rendered as empty.' ) + className }
+		</Placeholder>
+	),
+	ErrorResponsePlaceholder: ( { response, className } ) => {
+		// translators: %s: error message describing the problem
+		const errorMessage = sprintf( __( 'Error loading block: %s' ), response.errorMsg );
+		return (
+			<Placeholder
+				className={ className }
+			>
+				{ errorMessage }
+			</Placeholder>
+		);
+	},
+	LoadingResponsePlaceholder: ( { className } ) => {
+		return (
+			<Placeholder
+				className={ className }
+			>
+				<Spinner />
+			</Placeholder>
+		);
+	},
+};
+
 export default ServerSideRender;