diff --git a/demo-smart/index.html b/demo-smart/index.html index 68a781cb0..2a6916e3d 100644 --- a/demo-smart/index.html +++ b/demo-smart/index.html @@ -56,9 +56,9 @@
  • cc-addon-linked-apps.smart
    • - - - +
  • + cc-article-list.smart +
    • @@ -118,6 +118,7 @@
    + diff --git a/src/components/cc-article-list/cc-article-list.js b/src/components/cc-article-list/cc-article-list.js index 928bde232..879220b52 100644 --- a/src/components/cc-article-list/cc-article-list.js +++ b/src/components/cc-article-list/cc-article-list.js @@ -1,12 +1,12 @@ -import { css, html, LitElement } from 'lit'; -import { i18n } from '../../lib/i18n.js'; import '../cc-article-card/cc-article-card.js'; import '../cc-notice/cc-notice.js'; +import { css, html, LitElement } from 'lit'; +import { i18n } from '../../lib/i18n.js'; const ARTICLE_SKELETON_NUMBER = 9; /** - * @typedef {import('./cc-article-list.types.js').Article} Article + * @typedef {import('./cc-article-list.types.js').ArticleListState} ArticleListState */ /** @@ -18,37 +18,33 @@ export class CcArticleList extends LitElement { static get properties () { return { - articles: { type: Array }, - error: { type: Boolean }, + state: { type: Object }, }; } constructor () { super(); - /** @type {Article[]} Sets an array that contains for each element an object with the content of a card article. */ - this.articles = null; - - /** @type {boolean} Displays an error message. */ - this.error = false; + /** @type {ArticleListState} Sets the articles list state. */ + this.state = { type: 'loading' }; } render () { - const skeleton = (this.articles == null); - return html`
    - ${this.error ? html` + ${this.state.type === 'error' ? html` ` : ''} - ${skeleton && !this.error ? html` + + ${this.state.type === 'loading' ? html` ${new Array(ARTICLE_SKELETON_NUMBER).fill(html` `)} ` : ''} - ${!skeleton && !this.error ? html` - ${this.articles.map((article) => html` + + ${this.state.type === 'loaded' ? html` + ${this.state.articles.map((article) => html` (component.error = true)), - articles_lp.value$.subscribe((articles) => (component.articles = articles)), - - context$.subscribe(({ lang, limit }) => { - - component.error = false; - component.articles = null; - - // limit has a defaut value - if (lang != null) { - articles_lp.push((signal) => fetchArticleList({ signal, lang, limit })); - } - - }), - - ]); - + onContextUpdate ({ context, updateComponent, signal }) { + updateComponent('state', { type: 'loading' }); + + const { lang, limit } = context; + + fetchArticleList({ signal, lang, limit }) + .then((articles) => { + updateComponent('state', { type: 'loaded', articles: articles }); + }) + .catch((error) => { + console.error(error); + updateComponent('state', { type: 'error' }); + }); }, }); @@ -59,7 +47,5 @@ async function fetchArticleList ({ signal, lang, limit = 9 }) { FOUR_HOURS, () => request(requestParams)); - const articleList = parseRssFeed(rssFeed, limit); - - return articleList; + return parseRssFeed(rssFeed, limit); } diff --git a/src/components/cc-article-list/cc-article-list.smart.md b/src/components/cc-article-list/cc-article-list.smart.md index 3c094bb87..dd62d7231 100644 --- a/src/components/cc-article-list/cc-article-list.smart.md +++ b/src/components/cc-article-list/cc-article-list.smart.md @@ -18,7 +18,7 @@ title: '💡 Smart'
    Name Type Details Default
    lang String Sets the language the feed should be fetched in -
    limit Number Sets the number of articles from the feed you should get9 +
    limit Number Sets the number of articles from the feed you should get
    ## 🌐 API endpoints @@ -34,35 +34,23 @@ title: '💡 Smart' ### English ```html - + ``` - + ### French ```html - - - -``` - - - - - -### Limit (number of articles) - -```html - + ``` - + diff --git a/src/components/cc-article-list/cc-article-list.stories.js b/src/components/cc-article-list/cc-article-list.stories.js index d17c3cc6d..63f11e8a1 100644 --- a/src/components/cc-article-list/cc-article-list.stories.js +++ b/src/components/cc-article-list/cc-article-list.stories.js @@ -66,34 +66,40 @@ const conf = { export const defaultStory = makeStory(conf, { items: [ { - articles: ARTICLES, + state: { + type: 'loaded', + articles: ARTICLES, + }, }, ], }); -export const skeleton = makeStory(conf, { - items: [{}], +export const loading = makeStory(conf, { + items: [{ state: { type: 'loading' } }], }); // No need to invest time on empty story right now. export const error = makeStory(conf, { - items: [{ error: true }], + items: [{ state: { type: 'error' } }], }); export const dataLoaded = makeStory(conf, { items: [ { - articles: ARTICLES, + state: { + type: 'loaded', + articles: ARTICLES, + }, }, ], }); -export const simulationsWithSucess = makeStory(conf, { +export const simulationsWithSuccess = makeStory(conf, { items: [{}], simulations: [ storyWait(2000, ([component]) => { - component.articles = ARTICLES; + component.state = { type: 'loaded', articles: ARTICLES }; }), ], }); @@ -102,16 +108,16 @@ export const simulationsWithError = makeStory(conf, { items: [{}], simulations: [ storyWait(2000, ([componentError]) => { - componentError.error = true; + componentError.state = { type: 'error' }; }), ], }); enhanceStoriesNames({ defaultStory, + loading, error, - skeleton, dataLoaded, - simulationsWithSucess, + simulationsWithSuccess, simulationsWithError, }); diff --git a/src/components/cc-article-list/cc-article-list.types.d.ts b/src/components/cc-article-list/cc-article-list.types.d.ts index d94b7d1e3..c2b1edf96 100644 --- a/src/components/cc-article-list/cc-article-list.types.d.ts +++ b/src/components/cc-article-list/cc-article-list.types.d.ts @@ -1,4 +1,19 @@ -export interface Article { +export type ArticleListState = ArticleListStateLoading | ArticleListStateError | ArticleListStateLoaded; + +interface ArticleListStateLoading { + type: 'loading'; +} + +interface ArticleListStateError { + type: 'error'; +} + +interface ArticleListStateLoaded { + type: 'loaded'; + articles: Array
    ; +} + +interface Article { banner: string; title: string; link: string;