handle all state cases in library

This commit is contained in:
svetlagasheva 2019-11-26 10:59:12 +02:00
parent 343519b528
commit 42e8d7ddcd

View file

@ -9,7 +9,7 @@ const styles = require('./styles');
const Library = ({ urlParams, queryParams }) => { const Library = ({ urlParams, queryParams }) => {
const user = useUser(); const user = useUser();
const [selectedType, typeNames, libItems] = useLibrary(urlParams); const [libraryState, 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');
@ -51,26 +51,36 @@ const Library = ({ urlParams, queryParams }) => {
</Button> </Button>
</div> </div>
: :
selectedType !== null ? libraryState != 'Ready' ?
libItems.length > 0 ? <div className={styles['message-container']}>
<div className={styles['meta-items-container']}> Loading
{libItems </div>
.sort(sortFunction) :
.map(({ removed, temp, ...libItem }, index) => ( typeNames.length > 0 ?
<MetaItem selectedType !== null ?
{...libItem} libItems.length > 0 ?
key={index} <div className={styles['meta-items-container']}>
/> {libItems
))} .sort(sortFunction)
</div> .map(({ removed, temp, ...libItem }, index) => (
<MetaItem
{...libItem}
key={index}
/>
))}
</div>
:
<div className={styles['message-container']}>
Empty library
</div>
:
<div className={styles['message-container']}>
Select a type, please
</div>
: :
<div className={styles['message-container']}> <div className={styles['message-container']}>
Empty library Empty library
</div> </div>
:
<div className={styles['message-container']}>
Loading
</div>
} }
</div> </div>
</div> </div>