Updated repo cards to include download counter

Signed-off-by: Amelia-Maria Breda <ambreda@cisco.com>

src/components/Explore.jsx

@@ -108,6 +108,7 @@ function Explore() {
             name={item.name}
             version={item.latestVersion}
             description={item.description}
+            downloads={item.downloads}
             isSigned={item.isSigned}
             vendor={item.vendor}
             platforms={item.platforms}

src/components/Home.jsx

@@ -135,6 +135,7 @@ function Home() {
             name={item.name}
             version={item.latestVersion}
             description={item.description}
+            downloads={item.downloads}
             isSigned={item.isSigned}
             vendor={item.vendor}
             platforms={item.platforms}

src/components/RepoCard.jsx

@@ -82,7 +82,7 @@ const useStyles = makeStyles(() => ({
 function RepoCard(props) {
   const classes = useStyles();
   const navigate = useNavigate();
-  const { name, vendor, platforms, description, isSigned, lastUpdated, version } = props;
+  const { name, vendor, platforms, description, downloads, isSigned, lastUpdated, version } = props;
 
   //function that returns a random element from an array
   // function getRandom(list) {
@@ -225,12 +225,8 @@ function RepoCard(props) {
                 className={classes.contentRight}
               >
                 <Stack direction="column" alignItems="flex-end">
-                  {/* <Typography variant="body2">
-                    Downloads • {downloads || "-"}
-                  </Typography>
-                  <Typography variant="body2">
-                    Rating • {rating || "-"}
-                  </Typography> */}
+                  <Typography variant="body2">Downloads • {!isNaN(downloads) ? downloads : `not available`}</Typography>
+                  {/* <Typography variant="body2">Rating • {rating || '-'}</Typography> */}
                 </Stack>
                 {/* <BookmarkIcon sx={{color:"#52637A"}}/> */}
               </Stack>

src/utilities/objectModels.js

@@ -9,7 +9,8 @@ const mapToRepo = (responseRepo) => {
     licenses: responseRepo.NewestImage?.Licenses,
     size: responseRepo.Size,
     vendor: responseRepo.NewestImage?.Vendor,
-    lastUpdated: responseRepo.LastUpdated
+    lastUpdated: responseRepo.LastUpdated,
+    downloads: responseRepo.DownloadCount
   };
 };