Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix confusing UX when knowledge base card fails to retreive posts (https://github.com/woocommerce/woocommerce-admin/pull/4133) 

* Use EmptyContent component when there are no knowledge base posts

* Reduce transient timeout to 15 mins when remote get fails

* Satisfy phpcs

* Satisfy jslint
This commit is contained in:
Daniel Bitzer 2020-04-16 10:19:20 +09:30 committed by GitHub
parent 27c5e08315
commit ae526f7e1e
2 changed files with 57 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
plugins/woocommerce-admin/client/marketing/overview/knowledge-base/index.js
View File

@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { Component, Fragment } from '@wordpress/element';
import { Component } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
import { Spinner } from '@wordpress/components';
@ -11,7 +11,7 @@ import { withDispatch, withSelect } from '@wordpress/data';
/**
* WooCommerce dependencies
*/
import { Card, Pagination } from '@woocommerce/components';
import { Card, Pagination, EmptyContent } from '@woocommerce/components';
/**
* Internal dependencies
@ -109,14 +109,23 @@ class KnowledgeBase extends Component {
const { posts, isLoading } = this.props;
const { page, animate } = this.state;
const renderEmpty = () => {
const title = __(
'There was an error loading knowledge base posts. Please check again later.',
'woocommerce-admin'
);
return (
<EmptyContent
title={ title }
illustrationWidth={ 250 }
actionLabel=""
/>
);
};
const renderPosts = () => {
return (
<Card
title={ __( 'WooCommerce knowledge base', 'woocommerce-admin' ) }
description={ __( 'Learn the ins and outs of successful marketing from the experts at WooCommerce.', 'woocommerce-admin' ) }
className="woocommerce-marketing-knowledgebase-card"
>
<Fragment>
{ isLoading ? <Spinner /> : (
<div className="woocommerce-marketing-knowledgebase-card__posts">
<Slider animationKey={ page } animate={ animate }>
{ this.getCurrentSlide() }
@ -131,8 +140,23 @@ class KnowledgeBase extends Component {
showPageArrowsLabel={ false }
/>
</div>
) }
</Fragment>
)
};
const renderCardBody = () => {
if ( isLoading ) {
return <Spinner />;
}
return posts.length === 0 ? renderEmpty() : renderPosts();
};
return (
<Card
title={ __( 'WooCommerce knowledge base', 'woocommerce-admin' ) }
description={ __( 'Learn the ins and outs of successful marketing from the experts at WooCommerce.', 'woocommerce-admin' ) }
className="woocommerce-marketing-knowledgebase-card"
>
{ renderCardBody() }
</Card>
)
}

14
plugins/woocommerce-admin/src/Features/Marketing.php
View File

@ -129,8 +129,13 @@ class Marketing {
$plugins = json_decode( $request['body'], true );
}
set_transient(
self::RECOMMENDED_PLUGINS_TRANSIENT,
$plugins,
// Expire transient in 15 minutes if remote get failed.
// Cache an empty result to avoid repeated failed requests.
set_transient( self::RECOMMENDED_PLUGINS_TRANSIENT, $plugins, 3 * DAY_IN_SECONDS );
empty( $plugins ) ? 900 : 3 * DAY_IN_SECONDS
);
}
return array_values( $plugins );
@ -186,7 +191,12 @@ class Marketing {
}
}
set_transient( self::KNOWLEDGE_BASE_TRANSIENT, $posts, DAY_IN_SECONDS );
set_transient(
self::KNOWLEDGE_BASE_TRANSIENT,
$posts,
// Expire transient in 15 minutes if remote get failed.
empty( $posts ) ? 900 : DAY_IN_SECONDS
);
}
return $posts;