Skip to content

Commit

Permalink
patch: update nodata display on homepage
Browse files Browse the repository at this point in the history 
Signed-off-by: Raul-Cristian Kele <[email protected]>
  • Loading branch information
@raulkele @rchincha
raulkele authored and rchincha committed Oct 2, 2023
1 parent b787273 commit b41fb2f
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 67 deletions.
135 changes: 70 additions & 65 deletions src/components/Home/Home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,11 +200,16 @@ function Home() {
navigate({ pathname: `/explore`, search: createSearchParams({ [type]: value }).toString() });
};

const renderCards = (cardArray, isLoading) => {
if (cardArray && cardArray.length < 1 && !isLoading) {
return <NoDataComponent text="No images" />;
}
const isNoData = () =>
!isLoading &&
!isLoadingBookmarks &&
!isLoadingPopular &&
!isLoadingRecent &&
bookmarkData.length === 0 &&
popularData.length === 0 &&
recentData.length === 0;

const renderCards = (cardArray) => {
return (
cardArray &&
cardArray.map((item, index) => {
Expand Down Expand Up @@ -232,68 +237,68 @@ function Home() {
);
};

return (
<>
{isLoading ? (
<Loading />
) : (
<Stack alignItems="center" className={classes.gridWrapper}>
<Stack className={classes.sectionHeaderContainer} sx={{ paddingTop: '3rem' }}>
<div>
<Typography variant="h4" align="left" className={classes.sectionTitle}>
Most popular images
</Typography>
</div>
<div onClick={() => handleClickViewAll('sortby', sortByCriteria.downloads.value)}>
<Typography variant="body2" className={classes.viewAll}>
View all
</Typography>
</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)}
</>
)}
const renderContent = () => {
return isNoData() === true ? (
<NoDataComponent text="No images" />
) : (
<Stack alignItems="center" className={classes.gridWrapper}>
<Stack className={classes.sectionHeaderContainer} sx={{ paddingTop: '3rem' }}>
<div>
<Typography variant="h4" align="left" className={classes.sectionTitle}>
Most popular images
</Typography>
</div>
<div onClick={() => handleClickViewAll('sortby', sortByCriteria.downloads.value)}>
<Typography variant="body2" className={classes.viewAll}>
View all
</Typography>
</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>
);
};

return <>{isLoading ? <Loading /> : renderContent()}</>;
}

export default Home;
4 changes: 2 additions & 2 deletions tests/values/test-constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ const endpoints = {
globalSearch: (searchTerm, sortCriteria, pageNumber = 1, pageSize = 10) =>
`/v2/_zot/ext/search?query={GlobalSearch(query:%22${searchTerm}%22,%20requestedPage:%20{limit:${pageSize}%20offset:${
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) =>
`/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 };

0 comments on commit b41fb2f

Please sign in to comment.