implemented see all functionality for chat sidebar (#1086)

* implemented see all functionality for chat sidebar

* added test and some fixes

* fix

* fix lint

src/components/all-content-modal/AllContentModal.styles.ts

@@ -1,11 +1,12 @@
 import { TypographyVariantEnum } from '~/types'
 
 export const styles = {
+  container: { p: '34px' },
   textWithIconWrapper: {
     display: 'flex',
     alignItems: 'center',
     gap: '8px',
-    m: { xs: '18px 0 10px 24px', md: '30px 0 10px 24px' },
+    mb: '15px',
     '& svg': {
       width: '20px',
       height: '20px'
@@ -14,8 +15,5 @@ export const styles = {
   text: {
     color: 'primary.800',
     typography: TypographyVariantEnum.Subtitle2
-  },
-  childrenWrapper: {
-    p: '15px'
   }
 }

src/components/all-content-modal/AllContentModal.tsx

@@ -1,27 +1,36 @@
 import { FC, ReactElement, ReactNode } from 'react'
-import { Box, Typography } from '@mui/material'
+import { SxProps } from '@mui/material'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
 
 import { styles } from '~/components/all-content-modal/AllContentModal.styles'
+import { spliceSx } from '~/utils/helper-functions'
 
 interface AllContentModalProps {
   icon?: ReactElement
   title: string
+  sx?: {
+    container?: SxProps
+    textWithIconWrapper?: SxProps
+    text?: SxProps
+  }
   children: ReactNode
 }
 
 const AllContentModal: FC<AllContentModalProps> = ({
   icon,
   title,
+  sx = {},
   children
 }) => {
   return (
-    <>
-      <Box sx={styles.textWithIconWrapper}>
+    <Box sx={spliceSx(styles.container, sx.container)}>
+      <Box sx={spliceSx(styles.textWithIconWrapper, sx.textWithIconWrapper)}>
         {icon}
-        <Typography sx={styles.text}>{title}</Typography>
+        <Typography sx={spliceSx(styles.text, sx.text)}>{title}</Typography>
       </Box>
-      <Box sx={styles.childrenWrapper}>{children}</Box>
-    </>
+      {children}
+    </Box>
   )
 }
 

src/components/sidebar-content-box/SidebarContentBox.styles.ts

@@ -1,15 +1,11 @@
 import { TypographyVariantEnum } from '~/types'
 
 export const styles = {
-  media: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '16px'
-  },
   headerWrapper: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
+    mb: '16px',
     pl: '16px'
   },
   textWithIconWrapper: {
@@ -24,11 +20,9 @@ export const styles = {
       height: '20px'
     }
   },
-  verticalGrid: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    gap: '8px'
+  noContent: {
+    typography: TypographyVariantEnum.Subtitle2,
+    textAlign: 'center'
   },
   button: {
     color: 'primary.600'

src/components/sidebar-content-box/SidebarContentBox.tsx

@@ -4,63 +4,86 @@ import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 
 import AppButton from '~/components/app-button/AppButton'
+import SidebarImageGrid from '~/components/sidebar-image-grid/SidebarImageGrid'
 import FileComponent from '~/components/file-component/FileComponent'
 import LinkComponent from '~/components/link-component/LinkComponent'
 
 import { maxElemToShow } from '~/components/sidebar-content-box/SidebarContentBox.constants'
 import { spliceSx } from '~/utils/helper-functions'
-import { SizeEnum, ButtonVariantEnum, Link, File } from '~/types'
+import {
+  SizeEnum,
+  ButtonVariantEnum,
+  Link,
+  File,
+  Media,
+  SidebarContentEnum
+} from '~/types'
 import { styles } from '~/components/sidebar-content-box/SidebarContentBox.styles'
 
 interface SidebarContentBoxProps {
   icon: ReactElement
   name: string
-  content?: Link[] | File[]
+  content: Link[] | File[] | Media[]
+  onClick: (text: string) => void
 }
 
 const SidebarContentBox: FC<SidebarContentBoxProps> = ({
   icon,
   name,
-  content,
-  children
+  content = [],
+  onClick
 }) => {
   const { t } = useTranslation()
 
-  const limitedContent =
-    content && content.length > 0 ? (
-      <Box sx={styles.verticalGrid}>
-        {content.slice(maxElemToShow * -1).map((component) => {
-          return name === t(`chatPage.sidebar.files`) ? (
-            <FileComponent file={component as File} key={component._id} />
-          ) : (
-            <LinkComponent key={component._id} link={component} />
-          )
-        })}
-      </Box>
+  const { Media, Files } = SidebarContentEnum
+  const isMoreContent = content.length > maxElemToShow && name !== Media
+  const capitalizedName = name.charAt(0).toUpperCase() + name.slice(1)
+
+  const mediaContent = name === Media && (
+    <SidebarImageGrid
+      images={content as Media[]}
+      onClick={() => onClick(name)}
+    />
+  )
+
+  const limitedContent = content.slice(0, maxElemToShow).map((component) => {
+    return name === Files ? (
+      <FileComponent file={component as File} key={component._id} />
     ) : (
-      children
+      <LinkComponent key={component._id} link={component as Link} />
     )
+  })
+
+  const noContent = !content.length && (
+    <Typography sx={styles.noContent}>
+      {t(`chatPage.sidebar.no${capitalizedName}`)}
+    </Typography>
+  )
 
   return (
-    <Box sx={styles.media}>
+    <Box>
       <Box sx={styles.headerWrapper}>
         <Box sx={styles.textWithIconWrapper}>
           {icon}
           <Typography
             sx={spliceSx(styles.textWithIconWrapper.text, styles.text)}
           >
-            {name}
+            {t(`chatPage.sidebar.${name}`)}
           </Typography>
         </Box>
-        <AppButton
-          size={SizeEnum.Small}
-          sx={spliceSx(styles.button, styles.text)}
-          variant={ButtonVariantEnum.Text}
-        >
-          {t(`chatPage.sidebar.seeAll`)}
-        </AppButton>
+        {isMoreContent && (
+          <AppButton
+            onClick={() => onClick(name)}
+            size={SizeEnum.Small}
+            sx={spliceSx(styles.button, styles.text)}
+            variant={ButtonVariantEnum.Text}
+          >
+            {t(`chatPage.sidebar.seeAll`)}
+          </AppButton>
+        )}
       </Box>
-      {limitedContent}
+      {name === Media ? mediaContent : limitedContent}
+      {noContent}
     </Box>
   )
 }

src/components/sidebar-image-grid/SidebarImageGrid.styles.ts

@@ -1,32 +1,9 @@
-import { TypographyVariantEnum } from '~/types'
-
 export const styles = {
   imageGrid: {
-    display: 'flex',
-    gap: '13px',
-    px: '16px',
-    justifyContent: 'start'
+    display: 'grid',
+    justifyContent: 'center',
+    gridTemplateColumns: 'repeat(3, 88px)',
+    gap: '8px'
   },
-  imageWrapper: {
-    m: '20px 10px'
-  },
-  modalImage: {
-    width: '100%',
-    borderRadius: '5px'
-  },
-  expansiveGrid: {
-    display: 'flex',
-    gap: '8px',
-    flexWrap: 'wrap',
-    justifyContent: 'flex-start'
-  },
-  expansiveImage: {
-    width: '95px',
-    height: '95px'
-  },
-  dateText: {
-    typography: TypographyVariantEnum.Subtitle2,
-    color: 'primary.700',
-    p: '4px 16px'
-  }
+  modalImage: { width: '100%', borderRadius: '5px' }
 }

src/components/sidebar-image-grid/SidebarImageGrid.tsx

@@ -1,23 +1,26 @@
 import { FC, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
+import AddIcon from '@mui/icons-material/Add'
 import ImageOutlinedIcon from '@mui/icons-material/ImageOutlined'
 
 import ClickableImage from '~/components/clickable-image/ClickableImage'
 import AllContentModal from '~/components/all-content-modal/AllContentModal'
 
 import { useModalContext } from '~/context/modal-context'
 import { maxElemToShow } from '~/components/sidebar-content-box/SidebarContentBox.constants'
-import { Media } from '~/types'
+import { SizeEnum, Media } from '~/types'
 import { styles } from '~/components/sidebar-image-grid/SidebarImageGrid.styles'
 
 interface SidebarImageGridProps {
   images: Media[]
+  onClick?: () => void
   compactMode?: boolean
 }
 
 const SidebarImageGrid: FC<SidebarImageGridProps> = ({
   images,
+  onClick,
   compactMode = true
 }) => {
   const { t } = useTranslation()
@@ -31,28 +34,37 @@ const SidebarImageGrid: FC<SidebarImageGridProps> = ({
           icon={<ImageOutlinedIcon />}
           title={image.name ?? t(`chatPage.sidebar.unknownName`)}
         >
-          <Box sx={styles.imageWrapper}>
-            <Box component='img' src={image.path} sx={styles.modalImage} />
-          </Box>
+          <Box component='img' src={image.path} sx={styles.modalImage} />
         </AllContentModal>
       )
     })
   }
 
-  const compactGrid = images.slice(maxElemToShow * -1).map((image, index) => (
-    <ClickableImage image={image} key={image._id} onClick={showImage}>
-      {index === 2 && <Box>+{mediaSize - 2}</Box>}
-    </ClickableImage>
-  ))
+  const compactGrid = images.slice(0, maxElemToShow).map((image, index) => {
+    const hasMoreElem = index === maxElemToShow - 1 && mediaSize > maxElemToShow
+
+    return (
+      <ClickableImage
+        image={image}
+        key={image._id}
+        onClick={hasMoreElem ? onClick : showImage}
+      >
+        {hasMoreElem && (
+          <Box>
+            <AddIcon fontSize={SizeEnum.Small} />
+            {mediaSize - maxElemToShow}
+          </Box>
+        )}
+      </ClickableImage>
+    )
+  })
 
   const expansiveGrid = images.map((image) => (
     <ClickableImage image={image} key={image._id} onClick={showImage} />
   ))
 
   return (
-    <Box sx={compactMode ? styles.imageGrid : styles.expansiveGrid}>
-      {compactMode ? compactGrid : expansiveGrid}
-    </Box>
+    <Box sx={styles.imageGrid}>{compactMode ? compactGrid : expansiveGrid}</Box>
   )
 }
 

src/constants/translations/en/chat.json

@@ -10,9 +10,9 @@
     "about": "About",
     "viewButton": "View Profile",
     "noSummary": "User has no professional summary",
-    "noMedia": "There are no any media here yet!",
-    "noFiles": "There are no any files here yet!",
-    "noLinks": "There are no any links here yet!",
+    "noMedia": "There are no media here yet!",
+    "noFiles": "There are no files here yet!",
+    "noLinks": "There are no links here yet!",
     "unknownName": "Unknown name",
     "media": "Media",
     "files": "Files",

src/containers/about-chat-sidebar/AboutChatSidebar.styles.ts

@@ -1,17 +1,16 @@
 import { TypographyVariantEnum } from '~/types'
 
 export const styles = {
-  wrapper: (isOpened: boolean) => ({
-    display: isOpened ? 'flex' : 'none',
+  wrapper: {
+    display: 'flex',
     backgroundColor: 'basic.white',
     flexDirection: 'column',
     p: '24px 8px',
     height: 'calc(100% - 48px)',
-    maxWidth: '320px',
     '& .simplebar-track': {
       right: '-5px'
     }
-  }),
+  },
   contentWrapper: {
     display: 'flex',
     flexDirection: 'column',
@@ -24,10 +23,12 @@ export const styles = {
   header: {
     px: '24px',
     mb: '24px',
+    columnGap: '20px',
     display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between'
+    alignItems: 'center'
   },
+  goBackBtn: { p: '3px' },
+  goBackIcon: { color: 'primary.800' },
   headerText: {
     color: 'primary.700'
   },
@@ -51,19 +52,9 @@ export const styles = {
     color: 'primary.800',
     typography: TypographyVariantEnum.Body2
   },
-  verticalGrid: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    gap: '8px'
-  },
   title: {
     typography: TypographyVariantEnum.H5
   },
-  notFound: {
-    typography: TypographyVariantEnum.Subtitle2,
-    textAlign: 'center'
-  },
   secondaryText: {
     typography: TypographyVariantEnum.Subtitle2
   }