feat: add getversion and js-yaml library

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>

Author: amitamrutiya

package-lock.json

@@ -116,6 +116,7 @@
     "access": "public"
   },
   "dependencies": {
+    "js-yaml": "^4.1.0",
     "lodash": "^4.17.21"
   }
 }

package.json

@@ -1,14 +1,15 @@
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
-import { Avatar, styled, useTheme } from '@mui/material';
+import { Avatar, styled } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import { Grid } from '../../base';
 import { CloneIcon, CommunityClassIcon, OfficialClassIcon, OpenIcon, ShareIcon } from '../../icons';
 import VerificationClassIcon from '../../icons/ContentClassIcons/VerificationClassIcon';
 import DeploymentsIcon from '../../icons/Deployments/DeploymentsIcon';
 import { DownloadIcon } from '../../icons/Download';
-import { DARK_TEAL } from '../../theme';
+import { DARK_TEAL, useTheme } from '../../theme';
 import { SNOW_WHITE } from '../../theme/colors/colors';
 import { CustomTooltip } from '../CustomTooltip';
+import { getVersion, handleImage } from './Helper';
 import {
   CardBack,
   CardFront,
@@ -37,7 +38,10 @@ export const DesignCardUrl = styled('a')(() => ({
   textDecoration: 'none'
 }));
 
-interface Pattern {
+export interface Pattern {
+  id: string;
+  user_id: string;
+  pattern_file: string;
   name: string;
   download_count: number;
   clone_count: number;
@@ -53,8 +57,10 @@ interface Pattern {
   };
   catalog_data?: {
     content_class?: string;
-    imageURL?: string;
+    imageURL?: string[];
     compatibility?: string[];
+    published_version?: string;
+    type?: string;
   };
   visibility: string;
   updated_at: Date;
@@ -63,21 +69,15 @@ interface Pattern {
 type CatalogCardProps = {
   pattern: Pattern;
   patternType: string;
-  cardLink: string;
   cardHeight: string;
   cardWidth: string;
   cardStyles: React.CSSProperties;
-  version?: string;
   avatarUrl: string;
   shouldFlip?: boolean;
   cardTechnologies?: boolean;
   isDetailed?: boolean;
-  cardAvatarUrl?: boolean;
-  date?: boolean;
-  cardVersion?: boolean;
   UserName?: string;
   children?: React.ReactNode; // catalogImage
-  TechnologyComponent?: React.ReactNode;
   basePath?: string; // path of meshmodel img stored
   subBasePath?: string; // path of meshmodel img stored
   getHostUrl?: () => string;
@@ -111,7 +111,6 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
   shouldFlip,
   isDetailed,
   cardTechnologies,
-  cardVersion,
   avatarUrl,
   UserName,
   children,
@@ -127,45 +126,13 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
   };
   const theme = useTheme();
 
-  const technologies = pattern.catalog_data?.compatibility || []; // an array
+  const technologies = pattern.catalog_data?.compatibility || [];
   const techlimit = 5;
   const [availableTechnologies, setAvailableTechnologies] = useState<string[]>([]);
-  const checkImageUrlValidity = async (url: string, appendHostUrl = true) => {
-    return new Promise((resolve) => {
-      const img = new Image();
-      // Only append host if the URL does not start with "http" or "https"
-      if (appendHostUrl && !url.startsWith('http')) {
-        img.src = (getHostUrl ? getHostUrl() : '') + url;
-      } else {
-        img.src = url;
-      }
-      img.onload = () => {
-        // Check if the image loaded successfully
-        resolve(true);
-      };
-
-      img.onerror = () => {
-        // Handle the case where the image could not be loaded
-        resolve(false);
-      };
-    });
-  };
-
-  const handleImage = async () => {
-    const validSvgPaths = [];
-    for (const technology of technologies) {
-      const svgIconPath = `${basePath}/${technology.toLowerCase()}/${subBasePath}/${technology.toLowerCase()}-color.svg`;
-      const isSvgPathValid = await checkImageUrlValidity(svgIconPath as string);
-      if (isSvgPathValid) {
-        validSvgPaths.push(technology);
-      }
-    }
-
-    setAvailableTechnologies(validSvgPaths);
-  };
+  const version = getVersion(pattern);
 
   useEffect(() => {
-    handleImage();
+    handleImage(technologies, basePath, subBasePath, setAvailableTechnologies);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -336,9 +303,9 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
                 </Grid>
               </DesignDetailsDiv>
             )}
-            {cardVersion && (
+            {version && (
               <VersionDiv>
-                <VersionText>v{cardVersion}</VersionText>
+                <VersionText>v{version}</VersionText>
               </VersionDiv>
             )}
           </CardBack>

src/custom/CustomCatalog/CustomCard.tsx

@@ -0,0 +1,68 @@
+import jsyaml from 'js-yaml';
+import { Pattern } from './CustomCard';
+
+const checkImageUrlValidity = async (
+  url: string,
+  appendHostUrl = true,
+  getHostUrl?: () => string
+): Promise<boolean> => {
+  return new Promise((resolve) => {
+    const img = new Image();
+    // Only append host if the URL does not start with "http" or "https"
+    if (appendHostUrl && !url.startsWith('http')) {
+      img.src = (getHostUrl ? getHostUrl() : '') + url;
+    } else {
+      img.src = url;
+    }
+    img.onload = () => {
+      // Check if the image loaded successfully
+      resolve(true);
+    };
+
+    img.onerror = () => {
+      // Handle the case where the image could not be loaded
+      resolve(false);
+    };
+  });
+};
+
+const getValidSvgPaths = async (
+  technologies: string[],
+  basePath: string,
+  subBasePath: string
+): Promise<string[]> => {
+  const validSvgPaths: string[] = [];
+  for (const technology of technologies) {
+    const svgIconPath = `${basePath}/${technology.toLowerCase()}/${subBasePath}/${technology.toLowerCase()}-color.svg`;
+    const isSvgPathValid = await checkImageUrlValidity(svgIconPath as string);
+    if (isSvgPathValid) {
+      validSvgPaths.push(technology);
+    }
+  }
+  return validSvgPaths;
+};
+
+export const handleImage = async (
+  technologies: string[],
+  basePath: string = '',
+  subBasePath: string = '',
+  setAvailableTechnologies: (technologies: string[]) => void
+) => {
+  const validSvgPaths = await getValidSvgPaths(technologies, basePath, subBasePath);
+  setAvailableTechnologies(validSvgPaths);
+};
+
+export const DEFAULT_DESIGN_VERSION = '0.0.0';
+
+export const getVersion = (design: Pattern) => {
+  if (design.visibility === 'published') {
+    return design?.catalog_data?.published_version || DEFAULT_DESIGN_VERSION;
+  }
+  try {
+    const patternFile = jsyaml.load(design.pattern_file);
+    return patternFile?.version || DEFAULT_DESIGN_VERSION;
+  } catch (e) {
+    console.error(e);
+    return DEFAULT_DESIGN_VERSION;
+  }
+};