chore: some of the props and update funtions

amitamrutiya · amitamrutiya · commit 88cf288b6212 · 2024-10-29T17:52:54.000+05:30
Signed-off-by: Amit Amrutiya &lt;amitamrutiya2210@gmail.com&gt;
diff --git a/src/custom/CatalogDetail/ChallengesSection.tsx b/src/custom/CatalogDetail/ChallengesSection.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { ListItemIcon } from '../../base';
+import { Link, ListItemIcon } from '../../base';
 import { ChallengesIcon } from '../../icons';
 import { useTheme } from '../../theme';
 import CollapsibleSection from './CollapsibleSection';
@@ -27,21 +27,24 @@ const ChallengesSection: React.FC<ChallengesSectionProps> = ({ filteredAcademyDa
     setAutoUpdate(false);
   };
 
-  const navigateToChallenge = (item: string) => {
-    window.location.href = `/academy/challenges/${slugify('' + item)}`;
-  };
-
   const renderChallengeItem = (item: string, index: number) => (
-    <LabelDiv key={index} clickable={true} onClick={() => navigateToChallenge(item)}>
-      <ListItemIcon sx={{ minWidth: '1.5rem', marginRight: 1 }}>
-        <ChallengesIcon
-          primaryFill={theme.palette.icon.default}
-          secondaryFill={theme.palette.icon.secondary}
-          brandFill={theme.palette.icon.secondary}
-        />
-      </ListItemIcon>
-      {item}
-    </LabelDiv>
+    <Link
+      href={`https://meshery.layer5.io/academy/challenges/${slugify('' + item)}`}
+      target="_blank"
+      rel="noopener noreferrer"
+      style={{ textDecoration: 'none', color: 'inherit' }}
+    >
+      <LabelDiv key={index} clickable={true}>
+        <ListItemIcon sx={{ minWidth: '1.5rem', marginRight: 1 }}>
+          <ChallengesIcon
+            primaryFill={theme.palette.icon.default}
+            secondaryFill={theme.palette.icon.secondary}
+            brandFill={theme.palette.icon.secondary}
+          />
+        </ListItemIcon>
+        {item}
+      </LabelDiv>
+    </Link>
   );
 
   return (
diff --git a/src/custom/CatalogDetail/LearningSection.tsx b/src/custom/CatalogDetail/LearningSection.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { ListItemIcon } from '../../base';
+import { Link, ListItemIcon } from '../../base';
 import { LearningIcon } from '../../icons';
 import { useTheme } from '../../theme';
 import CollapsibleSection from './CollapsibleSection';
@@ -27,20 +27,23 @@ const LearningSection: React.FC<LearningSectionProps> = ({ filteredAcademyData }
     setAutoUpdate(false);
   };
 
-  const navigateToLearningPath = (item: string): void => {
-    window.location.href = `/academy/learning-paths/${slugify('' + item)}`;
-  };
-
   const renderLearningItem = (item: string, index: number) => (
-    <LabelDiv key={index} clickable={true} onClick={() => navigateToLearningPath(item)}>
-      <ListItemIcon sx={{ minWidth: '1.5rem', marginRight: 1 }}>
-        <LearningIcon
-          primaryFill={theme.palette.icon.default}
-          secondaryFill={theme.palette.icon.secondary}
-        />
-      </ListItemIcon>
-      {item}
-    </LabelDiv>
+    <Link
+      href={`https://meshery.layer5.io/academy/learning-paths/${slugify('' + item)}`}
+      target="_blank"
+      rel="noopener noreferrer"
+      style={{ textDecoration: 'none', color: 'inherit' }}
+    >
+      <LabelDiv key={index} clickable={true}>
+        <ListItemIcon sx={{ minWidth: '1.5rem', marginRight: 1 }}>
+          <LearningIcon
+            primaryFill={theme.palette.icon.default}
+            secondaryFill={theme.palette.icon.secondary}
+          />
+        </ListItemIcon>
+        {item}
+      </LabelDiv>
+    </Link>
   );
 
   return (
diff --git a/src/custom/CatalogDetail/OverviewSection.tsx b/src/custom/CatalogDetail/OverviewSection.tsx
@@ -13,34 +13,31 @@ interface OverviewSectionProps {
   details: Pattern;
   type: string;
   cardId: string;
-  handleClick: (event: React.MouseEvent) => void;
   title: string;
-  id: string;
-  anchorEl: HTMLElement | null;
-  handleClose: () => void;
   getUrl: (type: string, id: string) => string;
   showContentDetails: boolean;
   ViewsComponent?: React.ReactNode;
   showVersion: boolean;
   classes: Class[];
   handleCopyUrl: (type: string, name: string, id: string) => void;
+  fontFamily?: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  userProfile?: any;
 }
 
 const OverviewSection: React.FC<OverviewSectionProps> = ({
   details,
   type,
   cardId,
-  handleClick,
   title,
-  id,
-  anchorEl,
-  handleClose,
   getUrl,
   showContentDetails,
   ViewsComponent,
   showVersion,
   classes,
-  handleCopyUrl
+  handleCopyUrl,
+  fontFamily,
+  userProfile
 }) => {
   return (
     <OverviewContainer>
@@ -49,27 +46,24 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
           display: 'flex',
           flexDirection: 'row',
           width: '100%',
-          flexWrap: 'wrap'
+          flexWrap: 'wrap',
+          fontFamily: fontFamily || 'inherit'
         }}
       >
         <DesignHeading>{details?.name}</DesignHeading>
         <SocialSharePopper
           details={details}
           type={type}
           cardId={cardId}
-          handleClick={handleClick}
           title={title}
-          id={id}
-          anchorEl={anchorEl}
-          handleClose={handleClose}
           getUrl={getUrl}
           handleCopyUrl={handleCopyUrl}
         />
       </div>
       <Grid container spacing={2}>
         <Grid item lg={4} md={4} sm={12} xs={12}>
           <Grid container>
-            <Grid item lg={12} md={12} sm={6} xs={6}>
+            <Grid item lg={12} md={12} sm={6} xs={6} style={{ fontFamily: fontFamily }}>
               {details?.catalog_data?.content_class && (
                 <ContentRow>
                   <ContentClassInfo
@@ -78,7 +72,7 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
                   />
                 </ContentRow>
               )}
-              <UserInfo details={details} showVersion={showVersion} />
+              <UserInfo details={details} showVersion={showVersion} userProfile={userProfile} />
             </Grid>
           </Grid>
         </Grid>
diff --git a/src/custom/CatalogDetail/RelatedDesigns.tsx b/src/custom/CatalogDetail/RelatedDesigns.tsx
@@ -2,6 +2,7 @@ import { CatalogCardDesignLogo } from '../CustomCatalog';
 import CustomCatalogCard, { Pattern } from '../CustomCatalog/CustomCard';
 import { formatToTitleCase } from './helper';
 import { AdditionalContainer, ContentHeading, DesignCardContainer } from './style';
+import { UserProfile } from './types';
 
 export interface PatternsPerUser {
   patterns: Pattern[];
@@ -11,9 +12,17 @@ interface RelatedDesignsProps {
   details: Pattern;
   type: string;
   patternsPerUser: PatternsPerUser;
+  onSuggestedPatternClick: (pattern: Pattern) => void;
+  userProfile?: UserProfile;
 }
 
-const RelatedDesigns: React.FC<RelatedDesignsProps> = ({ details, type, patternsPerUser }) => {
+const RelatedDesigns: React.FC<RelatedDesignsProps> = ({
+  details,
+  type,
+  patternsPerUser,
+  onSuggestedPatternClick,
+  userProfile
+}) => {
   const filteredPatternsPerUser = patternsPerUser?.patterns?.filter(
     (pattern) => pattern.id !== details.id
   );
@@ -24,15 +33,26 @@ const RelatedDesigns: React.FC<RelatedDesignsProps> = ({ details, type, patterns
     <AdditionalContainer>
       <ContentHeading>
         <h2 style={{ margin: '0', textTransform: 'uppercase' }}>
-          Other published design by {formatToTitleCase(details.user.first_name)}
+          Other published design by
+          {formatToTitleCase(userProfile?.first_name ?? '')}
         </h2>
       </ContentHeading>
       <DesignCardContainer>
         {filteredPatternsPerUser.map((pattern, index) => (
-          <CustomCatalogCard key={`design-${index}`} pattern={pattern} patternType={type}>
+          <CustomCatalogCard
+            key={`design-${index}`}
+            pattern={pattern}
+            patternType={type}
+            onCardClick={() => onSuggestedPatternClick(pattern)}
+            UserName={`${userProfile?.first_name ?? ''} ${userProfile?.last_name ?? ''}`}
+            avatarUrl={userProfile?.avatar_url}
+            basePath="/static/img/meshmodels"
+            subBasePath="color"
+            cardTechnologies={true}
+          >
             <CatalogCardDesignLogo
               imgURL={pattern?.catalog_data?.imageURL}
-              height={'100%'}
+              height={'7.5rem'}
               width={'100%'}
               zoomEffect={false}
               type={{ type: type }}
diff --git a/src/custom/CatalogDetail/RightPanel.tsx b/src/custom/CatalogDetail/RightPanel.tsx
@@ -8,64 +8,68 @@ import { Class } from './types';
 interface RightPanelProps {
   details: Pattern;
   type: string;
-  cardId: string;
-  handleClick: (event: React.MouseEvent) => void;
+  cardId?: string;
   title: string;
-  id?: string;
-  anchorEl: HTMLElement | null;
-  handleClose: () => void;
   getUrl: (type: string, id: string) => string;
   showContentDetails: boolean;
   ViewsComponent?: React.ReactNode;
   showVersion: boolean;
   showCaveats: boolean;
   classes: Class[];
   patternsPerUser: PatternsPerUser;
+  onSuggestedPatternClick: (pattern: Pattern) => void;
   handleCopyUrl: (type: string, name: string, id: string) => void;
   fontFamily?: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  useGetUserProfileByIdQuery: any;
 }
 
 const RightPanel: React.FC<RightPanelProps> = ({
   details,
   type,
-  cardId,
-  handleClick,
+  cardId = details.id,
   title,
-  id = '',
-  anchorEl,
-  handleClose,
   getUrl,
   showContentDetails,
   ViewsComponent,
   showVersion,
   showCaveats,
   classes,
   patternsPerUser,
+  onSuggestedPatternClick,
   handleCopyUrl,
-  fontFamily
+  fontFamily,
+  useGetUserProfileByIdQuery
 }) => {
   const cleanedType = type.replace('my-', '').replace(/s$/, '');
+  const { data: userProfile } = useGetUserProfileByIdQuery({
+    id: details.user_id
+  });
 
   return (
     <div style={{ fontFamily }}>
       <OverviewSection
         details={details}
         type={cleanedType}
         cardId={cardId}
-        handleClick={handleClick}
         title={title}
-        id={id}
-        anchorEl={anchorEl}
-        handleClose={handleClose}
         getUrl={getUrl}
         showContentDetails={showContentDetails}
         ViewsComponent={ViewsComponent}
         showVersion={showVersion}
         classes={classes}
         handleCopyUrl={handleCopyUrl}
+        fontFamily={fontFamily}
+        userProfile={userProfile}
       />
       {showCaveats && <CaveatsSection details={details} />}
-      <RelatedDesigns details={details} type={type} patternsPerUser={patternsPerUser} />
+      <RelatedDesigns
+        details={details}
+        type={type}
+        patternsPerUser={patternsPerUser}
+        onSuggestedPatternClick={onSuggestedPatternClick}
+        userProfile={userProfile}
+      />
     </div>
   );
 };
