From ec261fc02bed5336743798e2536cc1ebea7dbf42 Mon Sep 17 00:00:00 2001 From: NikolaBorislavovHristov Date: Mon, 21 Oct 2019 15:45:25 +0300 Subject: [PATCH] handle error cases in discover --- src/routes/Discover/Discover.js | 39 +++++++++++---- src/routes/Discover/styles.less | 76 +++++++++++++++++++----------- src/routes/Discover/useDiscover.js | 4 +- 3 files changed, 80 insertions(+), 39 deletions(-) diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js index 7fcf73b9e..8837b9bc1 100644 --- a/src/routes/Discover/Discover.js +++ b/src/routes/Discover/Discover.js @@ -20,7 +20,7 @@ const Discover = ({ urlParams, queryParams }) => { } }, [metaItems]); React.useEffect(() => { - const metaItem = metaItems.length > 0 ? metaItems[0] : null; + const metaItem = Array.isArray(metaItems) && metaItems.length > 0 ? metaItems[0] : null; setSelectedMetaItem(metaItem); }, [metaItems]); return ( @@ -36,15 +36,34 @@ const Discover = ({ urlParams, queryParams }) => { /> ))} -
- {metaItems.map((metaItem, index) => ( - - ))} +
+ { + error ? +
+ {error} +
+ : + Array.isArray(metaItems) ? + metaItems.length > 0 ? +
+ {metaItems.map((metaItem, index) => ( + + ))} +
+ : +
+ Empty catalog +
+ : +
+ Loading +
+ }
{ selectedMetaItem !== null ? diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index 3834d168c..83e775770 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -20,7 +20,7 @@ grid-template-rows: 7rem 1fr; grid-template-areas: "multiselects-area meta-preview-area" - "meta-items-area meta-preview-area"; + "catalog-content-area meta-preview-area"; .multiselects-container { grid-area: multiselects-area; @@ -36,23 +36,33 @@ } } - .meta-items-container { - grid-area: meta-items-area; - display: grid; - grid-auto-rows: max-content; - grid-gap: 1.5rem; - align-items: center; - padding: 0 2rem; - overflow-y: auto; + .catalog-content-container { + grid-area: catalog-content-area; - .meta-item { - &:global(.selected) { - &::after { - outline-width: calc(1.5 * var(--focus-outline-size)); - outline-offset: calc(-1.5 * var(--focus-outline-size)); + .meta-items-container { + display: grid; + max-height: 100%; + grid-auto-rows: max-content; + grid-gap: 1.5rem; + align-items: center; + padding: 0 2rem; + overflow-y: auto; + + .meta-item { + &:global(.selected) { + &::after { + outline-width: calc(1.5 * var(--focus-outline-size)); + outline-offset: calc(-1.5 * var(--focus-outline-size)); + } } } } + + .message-container { + padding: 0 2rem; + font-size: 2rem; + color: var(--color-surfacelighter); + } } .meta-preview-container { @@ -65,8 +75,10 @@ @media only screen and (min-width: @xxlarge) { .discover-container { .discover-content { - .meta-items-container { - grid-template-columns: repeat(8, auto); + .catalog-content-container { + .meta-items-container { + grid-template-columns: repeat(8, auto); + } } } } @@ -75,8 +87,10 @@ @media only screen and (max-width: @xxlarge) { .discover-container { .discover-content { - .meta-items-container { - grid-template-columns: repeat(7, auto); + .catalog-content-container { + .meta-items-container { + grid-template-columns: repeat(7, auto); + } } } } @@ -85,8 +99,10 @@ @media only screen and (max-width: @normal) { .discover-container { .discover-content { - .meta-items-container { - grid-template-columns: repeat(6, auto); + .catalog-content-container { + .meta-items-container { + grid-template-columns: repeat(6, auto); + } } } } @@ -95,8 +111,10 @@ @media only screen and (max-width: @medium) { .discover-container { .discover-content { - .meta-items-container { - grid-template-columns: repeat(5, auto); + .catalog-content-container { + .meta-items-container { + grid-template-columns: repeat(5, auto); + } } } } @@ -105,8 +123,10 @@ @media only screen and (max-width: @small) { .discover-container { .discover-content { - .meta-items-container { - grid-template-columns: repeat(4, auto); + .catalog-content-container { + .meta-items-container { + grid-template-columns: repeat(4, auto); + } } } } @@ -119,14 +139,16 @@ grid-template-rows: fit-content(19rem) 1fr; grid-template-areas: "multiselects-area" - "meta-items-area"; + "catalog-content-area"; .multiselects-container { grid-template-columns: repeat(4, 1fr); } - .meta-items-container { - grid-template-columns: repeat(5, auto); + .catalog-content-container { + .meta-items-container { + grid-template-columns: repeat(5, auto); + } } .meta-preview-container { diff --git a/src/routes/Discover/useDiscover.js b/src/routes/Discover/useDiscover.js index 4bb23e779..8abbb9a51 100644 --- a/src/routes/Discover/useDiscover.js +++ b/src/routes/Discover/useDiscover.js @@ -7,7 +7,7 @@ const DEFAULT_TYPE = 'movie'; const useCatalog = (urlParams, queryParams) => { const { core } = useServices(); - const [discover, setDiscover] = React.useState([[], [], null]); + const [discover, setDiscover] = React.useState([[], null, null]); React.useEffect(() => { const addonTransportUrl = typeof urlParams.addonTransportUrl === 'string' ? urlParams.addonTransportUrl : DEFAULT_ADDON_TRANSPORT_URL; const catalogId = typeof urlParams.catalogId === 'string' ? urlParams.catalogId : DEFAULT_CATALOG_ID; @@ -49,7 +49,7 @@ const useCatalog = (urlParams, queryParams) => { } } ]; - const items = state.discover.content.type === 'Ready' ? state.discover.content.content : []; + const items = state.discover.content.type === 'Ready' ? state.discover.content.content : null; const error = state.discover.content.type === 'Err' ? JSON.stringify(state.discover.content.content) : null; setDiscover([selectInputs, items, error]); };