feat: some improvements

Signed-off-by: TheFaheem <faheemmushtaq89@gmail.com>

Author: FaheemOnHub

src/custom/CatalogDetail/RelatedDesigns.tsx

@@ -15,37 +15,47 @@ import { UserProfile } from './types';
 export interface PatternsPerUser {
   patterns: Pattern[];
 }
-
+export interface DetailsByType {
+  patterns: Pattern[];
+}
 interface RelatedDesignsProps {
   details: Pattern;
   type: string;
   patternsPerUser: PatternsPerUser;
+  detailsByType?: DetailsByType;
   onSuggestedPatternClick: (pattern: Pattern) => void;
   userProfile?: UserProfile;
   technologySVGPath: string;
   technologySVGSubpath: string;
   orgName: string;
   fetchingOrgError: boolean;
+  filterByType?: boolean;
 }
 
 const RelatedDesigns: React.FC<RelatedDesignsProps> = ({
   details,
   type,
   patternsPerUser,
+  detailsByType,
   onSuggestedPatternClick,
   userProfile,
   technologySVGPath,
   technologySVGSubpath,
   orgName,
-  fetchingOrgError
+  fetchingOrgError,
+  filterByType
 }) => {
   const carouselRef = useRef<HTMLDivElement>(null);
-  const filteredPatternsPerUser = patternsPerUser?.patterns?.filter(
-    (pattern) => pattern.id !== details.id
-  );
+  const filteredPatterns = filterByType
+    ? detailsByType?.patterns?.filter((pattern) => pattern.id !== details.id) || []
+    : patternsPerUser?.patterns?.filter((pattern) => pattern.id !== details.id) || [];
 
-  if (!filteredPatternsPerUser?.length) return null;
-  const organizationName = fetchingOrgError || !orgName ? 'Unknown Organization' : orgName;
+  if (!filteredPatterns.length) return null;
+  const organizationName = filterByType
+    ? 'Similar Designs by Type'
+    : fetchingOrgError || !orgName
+    ? 'Unknown Organization'
+    : orgName;
 
   const scroll = (direction: 'left' | 'right') => {
     if (carouselRef.current) {
@@ -60,15 +70,17 @@ const RelatedDesigns: React.FC<RelatedDesignsProps> = ({
     <AdditionalContainer>
       <ContentHeading>
         <h2 style={{ margin: '0', textTransform: 'uppercase' }}>
-          {getHeadingText({ type, userProfile, organizationName, fetchingOrgError })}
+          {filterByType
+            ? organizationName
+            : getHeadingText({ type, userProfile, organizationName, fetchingOrgError })}
         </h2>
       </ContentHeading>
       <CarouselWrapper>
         <CarouselButton onClick={() => scroll('left')}>
           <ChevronLeft />
         </CarouselButton>
         <CarouselContainer ref={carouselRef}>
-          {filteredPatternsPerUser.map((pattern, index) => (
+          {filteredPatterns.map((pattern, index) => (
             <div key={`design-${index}`} className="carousel-item">
               <CustomCatalogCard
                 pattern={pattern}

src/custom/CatalogDetail/RightPanel.tsx

@@ -3,8 +3,7 @@ import { Pattern } from '../CustomCatalog/CustomCard';
 import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
 import CaveatsSection from './CaveatsSection';
 import OverviewSection from './OverviewSection';
-import RelatedDesigns, { PatternsPerUser } from './RelatedDesigns';
-import SimilarDesign, { DetailsByType } from './SimilarDesign';
+import RelatedDesigns, { DetailsByType, PatternsPerUser } from './RelatedDesigns';
 import { Class } from './types';
 
 interface RightPanelProps {
@@ -89,6 +88,7 @@ const RightPanel: React.FC<RightPanelProps> = ({
       {showCaveats && <CaveatsSection details={details} />}
       <RelatedDesigns
         details={details}
+        detailsByType={detailsByType}
         orgName={orgName}
         fetchingOrgError={fetchingOrgError}
         type={type}
@@ -97,8 +97,9 @@ const RightPanel: React.FC<RightPanelProps> = ({
         userProfile={userProfile}
         technologySVGPath={technologySVGPath}
         technologySVGSubpath={technologySVGSubpath}
+        filterByType={false}
       />
-      <SimilarDesign
+      <RelatedDesigns
         details={details}
         detailsByType={detailsByType}
         orgName={orgName}
@@ -109,6 +110,7 @@ const RightPanel: React.FC<RightPanelProps> = ({
         userProfile={userProfile}
         technologySVGPath={technologySVGPath}
         technologySVGSubpath={technologySVGSubpath}
+        filterByType={true}
       />
     </div>
   );

src/custom/CatalogDetail/SimilarDesign.tsx

@@ -101,10 +101,10 @@ export const CarouselButton = styled('button')(({ theme }) => ({
     color: '#fff'
   },
   '&:first-of-type': {
-    left: '-2rem'
+    left: '-1.2rem'
   },
   '&:last-of-type': {
-    right: '-2rem'
+    right: '-1.2rem'
   }
 }));
 export const CarouselWrapper = styled('div')({

src/custom/CatalogDetail/style.tsx

@@ -106,7 +106,7 @@ const VisibilityChipMenu: React.FC<VisibilityChipMenuProps> = ({
         onClick={handleOpen}
         data-testid={`design-visibility-${value.toLowerCase()}`}
       >
-        <StyledDiv theme={theme} enabled={enabled} type={value}>
+        <StyledDiv theme={theme} enabled={enabled}>
           <span style={{ fontSize: '0.7rem' }}>{value}</span>
           {enabled && <ArrowDropDownIcon style={{ ...iconXSmall }} />}
         </StyledDiv>