error case added

This commit is contained in:
svetlagasheva 2019-11-01 14:33:31 +02:00
parent 29b55484ed
commit 8bf689bc54
3 changed files with 35 additions and 18 deletions

View file

@ -16,7 +16,7 @@ const Addons = ({ urlParams, queryParams }) => {
const queryOnChange = React.useCallback((event) => {
setQuery(event.currentTarget.value);
}, []);
const [[addons, dropdowns, setSelectedAddon, installedAddons], installSelectedAddon, uninstallSelectedAddon] = useAddons(urlParams, queryParams);
const [[addons, dropdowns, setSelectedAddon, installedAddons, error], installSelectedAddon, uninstallSelectedAddon] = useAddons(urlParams, queryParams);
const [addAddonModalOpened, setAddAddonModalOpened] = React.useState(false);
const [selectedAddon, clearSelectedAddon] = useSelectedAddon(queryParams.get('addon'));
const [sharedAddon, setSharedAddon] = React.useState(null);
@ -80,20 +80,30 @@ const Addons = ({ urlParams, queryParams }) => {
</div>
<div className={styles['addons-list-container']}>
{
addons.filter((addon) => query.length === 0 ||
((typeof addon.manifest.name === 'string' && addon.manifest.name.toLowerCase().includes(query.toLowerCase())) ||
(typeof addon.manifest.description === 'string' && addon.manifest.description.toLowerCase().includes(query.toLowerCase()))
))
.map((addon, index) => (
<Addon
{...addon.manifest}
key={index}
installed={setInstalledAddon(addon)}
className={styles['addon']}
toggle={() => setSelectedAddon(addon.transportUrl)}
onShareButtonClicked={() => setSharedAddon(addon)}
/>
))
error !== null ?
<div className={styles['message-container']}>
{error.type}{error.type === 'Other' ? ` - ${error.content}` : null}
</div>
:
Array.isArray(addons) ?
addons.filter((addon) => query.length === 0 ||
((typeof addon.manifest.name === 'string' && addon.manifest.name.toLowerCase().includes(query.toLowerCase())) ||
(typeof addon.manifest.description === 'string' && addon.manifest.description.toLowerCase().includes(query.toLowerCase()))
))
.map((addon, index) => (
<Addon
{...addon.manifest}
key={index}
installed={setInstalledAddon(addon)}
className={styles['addon']}
toggle={() => setSelectedAddon(addon.transportUrl)}
onShareButtonClicked={() => setSharedAddon(addon)}
/>
))
:
<div className={styles['message-container']}>
Loading
</div>
}
</div>
{

View file

@ -113,6 +113,12 @@
width: 100%;
margin-bottom: 2rem;
}
.message-container {
padding: 0 2rem;
font-size: 2rem;
color: var(--color-surfacelighter);
}
}
}
}

View file

@ -6,7 +6,7 @@ const DEFAULT_CATEGORY = 'thirdparty';
const useAddons = (urlParams, queryParams) => {
const { core } = useServices();
const [addons, setAddons] = React.useState([[], [], [], []]);
const [addons, setAddons] = React.useState([[], [], [], [], null]);
const installAddon = React.useCallback(descriptor => {
core.dispatch({
action: 'AddonOp',
@ -37,7 +37,7 @@ const useAddons = (urlParams, queryParams) => {
)]
.map((type) => (
{
is_selected: urlParams.type === type && urlParams.category === 'my',
is_selected: urlParams.category === 'my' && urlParams.type === type,
name: 'my',
load: {
base: 'https://v3-cinemeta.strem.io/manifest.json',
@ -101,7 +101,8 @@ const useAddons = (urlParams, queryParams) => {
state.addons.content.content
:
[];
setAddons([addonsItems, selectInputs, selectAddon, installedAddons]);
const error = state.addons.content.type === 'Err' ? state.addons.content.content : null;
setAddons([addonsItems, selectInputs, selectAddon, installedAddons, error]);
};
core.on('NewModel', onNewState);
core.dispatch({