import { isNull , isUndefined } from 'lodash' ; import { memo , useEffect , useState } from 'react' ; import { GoPackage } from 'react-icons/go' ; import { Recommendation , RecommendedPackage , RepositoryKind } from '../../../types' ; import { getRepoKind } from '../../../utils/repoKind' ; import RecommendedPackageCard from './Card' ; import styles from './RecommendedPackages.module.css' ; interface Props { recommendations ? : Recommendation [ ] ; className ? : string ; } const URL_regex = /^https:\/\/([^\/?]+)\/packages\/([a-z-]+)\/([a-z0-9-]+)\/([a-z0-9-]+)$/ ; const prepareRecommendations = ( recommendations ? ) : RecommendedPackage [ ] => { let list = [ ] ; if ( ! isUndefined ( recommendations ) ) { recommendations . forEach ( ( recommendation ) => { const match = recommendation . url . match ( URL_regex ) ; if ( match ) { const repoKind = getRepoKind ( match [ 2 ] ) ; if ( ! isNull ( repoKind ) ) { list . push ( { url : `/packages/${ match [ 2 ] }/${ match [ 3 ] }/${ match [ 4 ] }` , kind : repoKind , normalizedName : match [ 4 ] , repoName : match [ 3 ] , } ) ; } } } ) ; } return list ; } ; const RecommendedPackages = ( props ) => { const [ recommendations , setRecommendations ] = useState < RecommendedPackage [ ] > ( prepareRecommendations ( props . recommendations ) ) ; useEffect ( ( ) => { const cleanRecommendations = prepareRecommendations ( props . recommendations ) ; setRecommendations ( cleanRecommendations ) ; } , [ props . recommendations ] ) ; if ( recommendations . length === 0 ) return null ; return ( < div className = { `w-100 ${ props . className }` } > < div className = "w-100 text-nowrap mb-2" > < span className = { `position-relative ${ styles . pkgIcon }` } > < GoPackage /> < /span> < small className = "text-muted ms-2" > Other packages recommended by the publisher : < /small> < small className = "fw-bold ms-2" > { recommendations . length } < /small> < /div> < div className = { `d-flex flex-column pb-3 pt-1 ${ styles . content }` } > < div className = { `position-relative w-100 overflow-hidden ${ styles . content }` } > < div className = "w-100" > { recommendations . map ( ( pkg ) => ( < RecommendedPackageCard key = { `recommended_${ pkg . normalizedName }` } recommendation = { pkg } / > ) ) } < /div> < /div> < /div> < /div>); } ; export default memo ( RecommendedPackages ) ;