fix: some catalog bugs

Signed-off-by: Amit Amrutiya <[email protected]>

src/custom/CatalogDesignTable/CatalogDesignTable.tsx

@@ -144,10 +144,9 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
       page,
       elevation: 0,
       sortOrder: {
-        name: 'updated_at',
-        direction: 'desc'
+        name: sortOrder.split(' ')[0],
+        direction: sortOrder.split(' ')[1]
       },
-
       onTableChange: handleTableChange,
       customToolbarSelect: _.isNil(filter)
         ? (selected: any) => (
@@ -175,6 +174,7 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
       filter,
       totalCount,
       pageSize,
+      sortOrder,
       page,
       handleTableChange,
       patterns,
@@ -194,6 +194,7 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
         columns={processedColumns}
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         //@ts-ignore
+        rowsPerPageOptions={[15, 30, 45, 60, 75]}
         data={patterns || []}
         options={options}
         colViews={colViews}

src/custom/CatalogDetail/RelatedDesigns.tsx

@@ -36,13 +36,13 @@ const RelatedDesigns: React.FC<RelatedDesignsProps> = ({
   );
 
   if (!filteredPatternsPerUser?.length) return null;
-
+  const organizationName = fetchingOrgError || !orgName ? 'Unknown Organization' : orgName;
   return (
     <AdditionalContainer>
       <ContentHeading>
         <h2 style={{ margin: '0', textTransform: 'uppercase' }}>
           Other published design by {formatToTitleCase(userProfile?.first_name ?? '')}{' '}
-          {fetchingOrgError ? '' : `under ${orgName}`}
+          {fetchingOrgError ? '' : `under ${organizationName}`}
         </h2>
       </ContentHeading>
       <DesignCardContainer>

src/custom/CatalogDetail/SocialSharePopper.tsx

@@ -1,3 +1,4 @@
+import { Lock, Public } from '@mui/icons-material';
 import { Box, IconButton, Menu, MenuItem } from '@mui/material';
 import React, { useState } from 'react';
 import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from 'react-share';
@@ -7,13 +8,9 @@ import { useTheme } from '../../theme';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { CustomTooltip } from '../CustomTooltip';
 import { ErrorBoundary } from '../ErrorBoundary';
-import {
-  CopyShareIconWrapper,
-  ShareButton,
-  ShareButtonGroup,
-  ShareSideButton,
-  VisibilityChip
-} from './style';
+import { VisibilityChipMenu } from '../VisibilityChipMenu';
+import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
+import { CopyShareIconWrapper, ShareButton, ShareButtonGroup, ShareSideButton } from './style';
 
 interface SocialSharePopperProps {
   details: Pattern;
@@ -53,14 +50,15 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
   return (
     <ErrorBoundary>
       <CopyShareIconWrapper style={{ marginBottom: '2rem' }}>
-        <VisibilityChip
-          style={{
-            color: theme.palette.text.default
-          }}
-        >
-          {details?.visibility}
-        </VisibilityChip>
-
+        <VisibilityChipMenu
+          value={details?.visibility as VIEW_VISIBILITY}
+          onChange={() => {}}
+          enabled={false}
+          options={[
+            [VIEW_VISIBILITY.PUBLIC, Public],
+            [VIEW_VISIBILITY.PRIVATE, Lock]
+          ]}
+        />
         {showShareAction ? (
           <ShareButtonGroup variant="contained">
             <CustomTooltip title="Change access and visibility">

src/custom/CatalogDetail/style.tsx

@@ -1,8 +1,8 @@
-import { Button, ButtonGroup, Link, ListItemButton, Paper, Typography } from '../../base';
+import { Button, ButtonGroup, Link, ListItemButton, Typography } from '../../base';
 import { styled } from '../../theme';
 import { Theme } from './types';
 
-export const StyledActionWrapper = styled(Paper)(() => ({
+export const StyledActionWrapper = styled('div')(({ theme }) => ({
   boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.2)',
   justifyContent: 'center',
   width: '100%',
@@ -12,7 +12,8 @@ export const StyledActionWrapper = styled(Paper)(() => ({
   flexDirection: 'column',
   gap: '1rem',
   padding: '0.6rem',
-  alignItems: 'center'
+  alignItems: 'center',
+  backgroundColor: theme.palette.background.default
 }));
 
 interface ActionButtonProps {
@@ -139,7 +140,8 @@ export const ContentDetailsPoints = styled(Typography)(() => ({
   fontFamily: 'inherit'
 }));
 
-export const MetricsSection = styled('div')(() => ({
+export const MetricsSection = styled('div')(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
   padding: '1.1rem',
   marginTop: '0.5rem',
   display: 'flex',
@@ -152,7 +154,8 @@ export const MetricsSection = styled('div')(() => ({
   }
 }));
 
-export const MetricsContainer = styled('div')(() => ({
+export const MetricsContainer = styled('div')(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
@@ -236,13 +239,14 @@ export const AdditionalContainer = styled('div')(({ theme }) => ({
   borderRadius: '0.4rem'
 }));
 
-export const DesignCardContainer = styled('div')(() => ({
+export const DesignCardContainer = styled('div')(({ theme }) => ({
   display: 'flex',
   flexWrap: 'wrap',
   flex: '0 0 75%',
   gap: '2rem',
   justifyContent: 'space-around',
-  height: 'fit-content'
+  height: 'fit-content',
+  backgroundColor: theme.palette.background.default
 }));
 
 export const CopyShareIconWrapper = styled(ContentHeading)(() => ({
@@ -251,15 +255,6 @@ export const CopyShareIconWrapper = styled(ContentHeading)(() => ({
   width: 'fit-content'
 }));
 
-export const VisibilityChip = styled('div')(() => ({
-  borderRadius: '0.5rem',
-  border: '1px solid gray',
-  padding: '0.2rem 0.5rem',
-  textTransform: 'capitalize',
-  color: '#1a1a1acc',
-  width: 'fit-content'
-}));
-
 export const RedirectLink = styled(Link)(({ theme }) => ({
   color: theme.palette.background.brand?.default,
   textDecoration: 'none',

src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx

@@ -1,12 +1,20 @@
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import { Theme } from '@mui/material';
+import { Theme, useTheme } from '@mui/material';
 import { MouseEvent, useState } from 'react';
 import { Button, Menu, MenuItem } from '../../base';
 import { iconXSmall } from '../../constants/iconsSizes';
 import { ALICE_BLUE, CHINESE_SILVER, NOT_FOUND, styled } from '../../theme';
 
+export const VIEW_VISIBILITY = {
+  PUBLIC: 'public',
+  PRIVATE: 'private',
+  PUBLISHED: 'published'
+} as const;
+
+export type VIEW_VISIBILITY = (typeof VIEW_VISIBILITY)[keyof typeof VIEW_VISIBILITY];
+
 interface VisibilityChipMenuProps {
-  value: string;
+  value: VIEW_VISIBILITY;
   onChange: (value: string) => void;
   options: [string, React.ElementType][];
   enabled: boolean;
@@ -42,24 +50,25 @@ const StyledButton = styled(Button)(() => ({
   width: '100%'
 }));
 
-const StyledDiv = styled('div')(({ theme, enabled }: { theme?: Theme; enabled: boolean }) => ({
-  paddingLeft: '0.3rem',
-  height: '1.5rem',
-  paddingRight: enabled ? '0' : '0.3rem',
-  borderRadius: '0.25rem',
-  border: `1px solid ${NOT_FOUND}`,
-  background:
-    theme?.palette.mode === 'light' ? ALICE_BLUE : theme?.palette.background.constant?.table,
-
-  textTransform: 'uppercase',
-  color: theme?.palette.text.default,
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  width: '3.8rem',
-  fontSize: '0.75rem',
-  fontFamily: theme?.typography.fontFamily
-}));
+const StyledDiv = styled('div')(
+  ({ theme, enabled, type }: { theme: Theme; enabled: boolean; type: VIEW_VISIBILITY }) => ({
+    paddingLeft: '0.3rem',
+    height: '1.5rem',
+    paddingRight: enabled ? '0' : '0.3rem',
+    borderRadius: '0.25rem',
+    border: `1px solid ${NOT_FOUND}`,
+    background:
+      theme?.palette.mode === 'light' ? ALICE_BLUE : theme?.palette.background.constant?.table,
+    textTransform: 'uppercase',
+    color: theme?.palette.text.default,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: type !== 'published' ? '3.8rem' : 'auto',
+    fontSize: '0.75rem',
+    fontFamily: theme?.typography.fontFamily
+  })
+);
 
 const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
   textTransform: 'capitalize',
@@ -92,14 +101,15 @@ const VisibilityChipMenu: React.FC<VisibilityChipMenuProps> = ({
     onChange(value);
     close(e);
   };
+  const theme = useTheme();
   return (
     <>
       <StyledButton
         disabled={!enabled}
         onClick={handleOpen}
         data-testid={`design-visibility-${value.toLowerCase()}`}
       >
-        <StyledDiv enabled={enabled}>
+        <StyledDiv theme={theme} enabled={enabled} type={value}>
           <span style={{ fontSize: '0.7rem' }}>{value}</span>
           {enabled && <ArrowDropDownIcon style={{ ...iconXSmall }} />}
         </StyledDiv>