feat: Implement no data component

- Implement customizeable component for no data display - Added component to homepage Signed-off-by: Raul-Cristian Kele <[email protected]>
project-zot · Aug 18, 2023 · 96008d6 · 96008d6
1 parent 087b426
commit 96008d6
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 4 deletions.
diff --git a/.github/workflows/end-to-end-test.yml b/.github/workflows/end-to-end-test.yml
@@ -116,6 +116,11 @@ jobs:
         cd $GITHUB_WORKSPACE
         make playwright-browsers
 
+
+    - name: Trigger catalog
+      run: |
+        while true; do x=0; curl -f http://$REGISTRY_HOST:$REGISTRY_PORT/v2/_catalog || x=1; if [ $x -eq 0 ]; then break; fi; sleep 1; done
+
     - name: Run integration tests
       run: |
         cd $GITHUB_WORKSPACE

diff --git a/src/assets/noData.svg b/src/assets/noData.svg
diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
@@ -10,6 +10,7 @@ import { useNavigate, createSearchParams } from 'react-router-dom';
 import { sortByCriteria } from 'utilities/sortCriteria';
 import { HOME_POPULAR_PAGE_SIZE, HOME_RECENT_PAGE_SIZE, HOME_BOOKMARKS_PAGE_SIZE } from 'utilities/paginationConstants';
 import { isEmpty } from 'lodash';
+import NoDataComponent from 'components/Shared/NoDataComponent';
 
 const useStyles = makeStyles((theme) => ({
   gridWrapper: {
@@ -199,7 +200,11 @@ function Home() {
     navigate({ pathname: `/explore`, search: createSearchParams({ [type]: value }).toString() });
   };
 
-  const renderCards = (cardArray) => {
+  const renderCards = (cardArray, isLoading) => {
+    if (cardArray && cardArray.length < 1 && !isLoading) {
+      return <NoDataComponent text="No images" />;
+    }
+
     return (
       cardArray &&
       cardArray.map((item, index) => {
@@ -244,7 +249,7 @@ function Home() {
               </Typography>
             </div>
           </Stack>
-          {isLoadingPopular ? <Loading /> : renderCards(popularData)}
+          {isLoadingPopular ? <Loading /> : renderCards(popularData, isLoadingPopular)}
           {/* currently most popular will be by downloads until stars are implemented */}
           <Stack className={classes.sectionHeaderContainer}>
             <div>
@@ -262,7 +267,7 @@ function Home() {
               </Typography>
             </div>
           </Stack>
-          {isLoadingRecent ? <Loading /> : renderCards(recentData)}
+          {isLoadingRecent ? <Loading /> : renderCards(recentData, isLoadingRecent)}
           {!isEmpty(bookmarkData) && (
             <>
               <Stack className={classes.sectionHeaderContainer}>
@@ -281,7 +286,7 @@ function Home() {
                   </Typography>
                 </div>
               </Stack>
-              {isLoadingBookmarks ? <Loading /> : renderCards(bookmarkData)}
+              {isLoadingBookmarks ? <Loading /> : renderCards(bookmarkData, isLoadingBookmarks)}
             </>
           )}
         </Stack>

diff --git a/src/components/Shared/NoDataComponent.jsx b/src/components/Shared/NoDataComponent.jsx
@@ -0,0 +1,40 @@
+// react global
+import React from 'react';
+
+// components
+import { Stack, Typography } from '@mui/material';
+
+//styling
+import makeStyles from '@mui/styles/makeStyles';
+
+import nodataImage from '../../assets/noData.svg';
+
+const useStyles = makeStyles((theme) => ({
+  noDataContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  noDataImage: {
+    maxWidth: '233px',
+    maxHeight: '240px'
+  },
+  noDataText: {
+    fontSize: '1.5rem',
+    fontWeight: '600',
+    color: theme.palette.secondary.main
+  }
+}));
+
+function NoDataComponent({ text }) {
+  const classes = useStyles();
+
+  return (
+    <Stack className={classes.noDataContainer}>
+      <img src={nodataImage} className={classes.noDataImage} />
+      <Typography className={classes.noDataText}>{text ? text : 'No Data'}</Typography>
+    </Stack>
+  );
+}
+
+export default NoDataComponent;