alt/zot-wo-auth
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

patch: update nodata display on homepage

Browse Source 
Signed-off-by: Raul-Cristian Kele <raulkeleblk@gmail.com>
This commit is contained in:
Raul-Cristian Kele 2023-10-02 21:09:47 +03:00 committed by Ramkumar Chinchani
parent b787273b84
commit b41fb2f841
2 changed files with 72 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
src/components/Home/Home.jsx
View File

@ -200,11 +200,16 @@ function Home() {
navigate({ pathname: `/explore`, search: createSearchParams({ [type]: value }).toString() }); navigate({ pathname: `/explore`, search: createSearchParams({ [type]: value }).toString() });
}; };
const renderCards = (cardArray, isLoading) => { const isNoData = () =>
if (cardArray && cardArray.length < 1 && !isLoading) { !isLoading &&
return <NoDataComponent text="No images" />; !isLoadingBookmarks &&
} !isLoadingPopular &&
!isLoadingRecent &&
bookmarkData.length === 0 &&
popularData.length === 0 &&
recentData.length === 0;
const renderCards = (cardArray) => {
return ( return (
cardArray && cardArray &&
cardArray.map((item, index) => { cardArray.map((item, index) => {
@ -232,68 +237,68 @@ function Home() {
); );
}; };
return ( const renderContent = () => {
<> return isNoData() === true ? (
{isLoading ? ( <NoDataComponent text="No images" />
<Loading /> ) : (
) : ( <Stack alignItems="center" className={classes.gridWrapper}>
<Stack alignItems="center" className={classes.gridWrapper}> <Stack className={classes.sectionHeaderContainer} sx={{ paddingTop: '3rem' }}>
<Stack className={classes.sectionHeaderContainer} sx={{ paddingTop: '3rem' }}> <div>
<div> <Typography variant="h4" align="left" className={classes.sectionTitle}>
<Typography variant="h4" align="left" className={classes.sectionTitle}> Most popular images
Most popular images </Typography>
</Typography> </div>
</div> <div onClick={() => handleClickViewAll('sortby', sortByCriteria.downloads.value)}>
<div onClick={() => handleClickViewAll('sortby', sortByCriteria.downloads.value)}> <Typography variant="body2" className={classes.viewAll}>
<Typography variant="body2" className={classes.viewAll}> View all
View all </Typography>
</Typography> </div>
</div>
</Stack>
{isLoadingPopular ? <Loading /> : renderCards(popularData, isLoadingPopular)}
{/* currently most popular will be by downloads until stars are implemented */}
<Stack className={classes.sectionHeaderContainer}>
<div>
<Typography variant="h4" align="left" className={classes.sectionTitle}>
Recently updated images
</Typography>
</div>
<div>
<Typography
variant="body2"
className={classes.viewAll}
onClick={() => handleClickViewAll('sortby', sortByCriteria.updateTime.value)}
>
View all
</Typography>
</div>
</Stack>
{isLoadingRecent ? <Loading /> : renderCards(recentData, isLoadingRecent)}
{!isEmpty(bookmarkData) && (
<>
<Stack className={classes.sectionHeaderContainer}>
<div>
<Typography variant="h4" align="left" className={classes.sectionTitle}>
Bookmarks
</Typography>
</div>
<div>
<Typography
variant="body2"
className={classes.viewAll}
onClick={() => handleClickViewAll('filter', 'IsBookmarked')}
>
View all
</Typography>
</div>
</Stack>
{isLoadingBookmarks ? <Loading /> : renderCards(bookmarkData, isLoadingBookmarks)}
</>
)}
</Stack> </Stack>
)} {isLoadingPopular ? <Loading /> : renderCards(popularData, isLoadingPopular)}
</> {/* currently most popular will be by downloads until stars are implemented */}
); <Stack className={classes.sectionHeaderContainer}>
<div>
<Typography variant="h4" align="left" className={classes.sectionTitle}>
Recently updated images
</Typography>
</div>
<div>
<Typography
variant="body2"
className={classes.viewAll}
onClick={() => handleClickViewAll('sortby', sortByCriteria.updateTime.value)}
>
View all
</Typography>
</div>
</Stack>
{isLoadingRecent ? <Loading /> : renderCards(recentData, isLoadingRecent)}
{!isEmpty(bookmarkData) && (
<>
<Stack className={classes.sectionHeaderContainer}>
<div>
<Typography variant="h4" align="left" className={classes.sectionTitle}>
Bookmarks
</Typography>
</div>
<div>
<Typography
variant="body2"
className={classes.viewAll}
onClick={() => handleClickViewAll('filter', 'IsBookmarked')}
>
View all
</Typography>
</div>
</Stack>
{isLoadingBookmarks ? <Loading /> : renderCards(bookmarkData, isLoadingBookmarks)}
</>
)}
</Stack>
);
};
return <>{isLoading ? <Loading /> : renderContent()}</>;
} }
export default Home; export default Home;

4
tests/values/test-constants.js
View File

@ -23,9 +23,9 @@ const endpoints = {
globalSearch: (searchTerm, sortCriteria, pageNumber = 1, pageSize = 10) => globalSearch: (searchTerm, sortCriteria, pageNumber = 1, pageSize = 10) =>
`/v2/_zot/ext/search?query={GlobalSearch(query:%22${searchTerm}%22,%20requestedPage:%20{limit:${pageSize}%20offset:${ `/v2/_zot/ext/search?query={GlobalSearch(query:%22${searchTerm}%22,%20requestedPage:%20{limit:${pageSize}%20offset:${
10 * (pageNumber - 1) 10 * (pageNumber - 1)
}%20sortBy:%20${sortCriteria}}%20)%20{Page%20{TotalCount%20ItemCount}%20Repos%20{Name%20LastUpdated%20Size%20Platforms%20{%20Os%20Arch%20}%20IsStarred%20IsBookmarked%20NewestImage%20{%20Tag%20Vulnerabilities%20{MaxSeverity%20Count}%20Description%20IsSigned%20Licenses%20Vendor%20Labels%20}%20DownloadCount}}}`, }%20sortBy:%20${sortCriteria}}%20)%20{Page%20{TotalCount%20ItemCount}%20Repos%20{Name%20LastUpdated%20Size%20Platforms%20{%20Os%20Arch%20}%20IsStarred%20IsBookmarked%20NewestImage%20{%20Tag%20Vulnerabilities%20{MaxSeverity%20Count}%20Description%20IsSigned%20SignatureInfo%20{%20Tool%20IsTrusted%20Author%20}%20Licenses%20Vendor%20Labels%20}%20DownloadCount}}}`,
image: (name) => image: (name) =>
`/v2/_zot/ext/search?query={Image(image:%20%22${name}%22){RepoName%20IsSigned%20Vulnerabilities%20{MaxSeverity%20Count}%20%20Referrers%20{MediaType%20ArtifactType%20Size%20Digest%20Annotations{Key%20Value}}%20Tag%20Manifests%20{History%20{Layer%20{Size%20Digest}%20HistoryDescription%20{CreatedBy%20EmptyLayer}}%20Digest%20ConfigDigest%20LastUpdated%20Size%20Platform%20{Os%20Arch}}%20Vendor%20Licenses%20}}` `/v2/_zot/ext/search?query={Image(image:%20%22${name}%22){RepoName%20IsSigned%20SignatureInfo%20{%20Tool%20IsTrusted%20Author%20}%20Vulnerabilities%20{MaxSeverity%20Count}%20%20Referrers%20{MediaType%20ArtifactType%20Size%20Digest%20Annotations{Key%20Value}}%20Tag%20Manifests%20{History%20{Layer%20{Size%20Digest}%20HistoryDescription%20{CreatedBy%20EmptyLayer}}%20Digest%20ConfigDigest%20LastUpdated%20Size%20Platform%20{Os%20Arch}}%20Vendor%20Licenses%20}}`
}; };
export { hosts, endpoints, sortCriteria, pageSizes }; export { hosts, endpoints, sortCriteria, pageSizes };