Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 07:32:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

useLibrary now returns selected, type_names, lib_items

Browse source
This commit is contained in:
svetlagasheva 2019-11-25 15:04:35 +02:00
parent 2e8909935e
commit 87f1f8b03c
2 changed files with 33 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/routes/Library/Library.js
View file

@ -1,4 +1,5 @@
const React = require('react'); const React = require('react');
const UrlUtils = require('url');
const classnames = require('classnames'); const classnames = require('classnames');
const { Button, Multiselect, MainNavBar, MetaItem } = require('stremio/common'); const { Button, Multiselect, MainNavBar, MetaItem } = require('stremio/common');
const useUser = require('stremio/common/useUser'); const useUser = require('stremio/common/useUser');
@ -8,11 +9,25 @@ const styles = require('./styles');
const Library = ({ urlParams, queryParams }) => { const Library = ({ urlParams, queryParams }) => {
const user = useUser(); const user = useUser();
const [metaItems, selectTypeInput, error] = useLibrary(urlParams); const [selectedType, typeNames, libItems] = useLibrary(urlParams);
const [selectSortInput, sortFunction] = useSort(urlParams, queryParams); const [selectSortInput, sortFunction] = useSort(urlParams, queryParams);
const loginButtonOnClick = React.useCallback(() => { const loginButtonOnClick = React.useCallback(() => {
window.location.replace('#/intro'); window.location.replace('#/intro');
}, []); }, []);
const selectTypeInput = React.useMemo(() => {
return {
selected: [selectedType],
options: typeNames
.map((type) => ({
label: type === '' ? '"Empty"' : type,
value: type
})),
onSelect: (event) => {
const { search } = UrlUtils.parse(window.location.hash.slice(1));
window.location.replace(`#/library/${event.value}${search !== null ? search : ''}`);
}
}
}, [selectedType, typeNames]);
return ( return (
<div className={styles['library-container']}> <div className={styles['library-container']}>
<MainNavBar className={styles['nav-bar']} /> <MainNavBar className={styles['nav-bar']} />
@ -36,27 +51,26 @@ const Library = ({ urlParams, queryParams }) => {
</Button> </Button>
</div> </div>
: :
error !== null ? selectedType !== null ?
<div className={styles['message-container']}> libItems.length > 0 ?
{error}
</div>
:
Array.isArray(metaItems) ?
<div className={styles['meta-items-container']}> <div className={styles['meta-items-container']}>
{ {libItems
metaItems .sort(sortFunction)
.sort(sortFunction) .map(({ removed, temp, ...libItem }, index) => (
.map(({ removed, temp, ...metaItem }, index) => ( <MetaItem
<MetaItem {...libItem}
{...metaItem} key={index}
key={index} />
/> ))}
))}
</div> </div>
: :
<div className={styles['message-container']}> <div className={styles['message-container']}>
Loading Empty library
</div> </div>
:
<div className={styles['message-container']}>
Loading
</div>
} }
</div> </div>
</div> </div>

18
src/routes/Library/useLibrary.js
View file

@ -1,10 +1,9 @@
const React = require('react'); const React = require('react');
const UrlUtils = require('url');
const { useServices } = require('stremio/services'); const { useServices } = require('stremio/services');
const useLibrary = (urlParams) => { const useLibrary = (urlParams) => {
const { core } = useServices(); const { core } = useServices();
const [library, setLibrary] = React.useState([[], null, null]); const [library, setLibrary] = React.useState([null, [], []]);
React.useEffect(() => { React.useEffect(() => {
const onNewState = () => { const onNewState = () => {
const state = core.getState(); const state = core.getState();
@ -20,20 +19,7 @@ const useLibrary = (urlParams) => {
}); });
return; return;
} }
const selectInput = { setLibrary([state.library.selected.type_name, state.library.type_names, state.library.lib_items]);
selected: [state.library.selected.type_name],
options: state.library.type_names
.map((type) => ({
label: type === '' ? '"Empty"' : type,
value: type
})),
onSelect: (event) => {
const { search } = UrlUtils.parse(window.location.hash.slice(1));
window.location.replace(`#/library/${event.value}${search !== null ? search : ''}`);
}
};
const error = state.library.library_state.type !== 'Ready' ? state.library.library_state.type : null;
setLibrary([state.library.lib_items, selectInput, error]);
}; };
core.on('NewModel', onNewState); core.on('NewModel', onNewState);
const state = core.getState(); const state = core.getState();