fix: Show group avatar into share input

cozy · Apr 8, 2024 · 632658a · 632658a
1 parent 18f1a74
commit 632658a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/packages/cozy-sharing/src/components/ContactSuggestion.jsx b/packages/cozy-sharing/src/components/ContactSuggestion.jsx
@@ -8,14 +8,16 @@ import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
+import { GroupAvatar } from './Avatar/GroupAvatar'
 import { Contact, Group, getDisplayName, getInitials } from '../models'
 
 const ContactModel = models.contact
 
 export const ContactSuggestion = ({ contactOrGroup }) => {
   const { t } = useI18n()
   let avatarText, name, details
-  if (contactOrGroup._type === Group.doctype) {
+  const isContactGroup = contactOrGroup._type === Group.doctype
+  if (isContactGroup) {
     name = contactOrGroup.name
     avatarText = 'G'
     details = t('Share.members.count', {
@@ -30,7 +32,11 @@ export const ContactSuggestion = ({ contactOrGroup }) => {
   return (
     <ListItem button>
       <ListItemIcon>
-        <Avatar text={avatarText} size="small" />
+        {isContactGroup ? (
+          <GroupAvatar size="small" />
+        ) : (
+          <Avatar text={avatarText} size="small" />
+        )}
       </ListItemIcon>
       <ListItemText
         primary={name}

diff --git a/packages/cozy-sharing/src/components/ShareAutosuggest.jsx b/packages/cozy-sharing/src/components/ShareAutosuggest.jsx
@@ -7,9 +7,10 @@ import Chip from 'cozy-ui/transpiled/react/Chips'
 import { Spinner } from 'cozy-ui/transpiled/react/Spinner'
 import palette from 'cozy-ui/transpiled/react/palette'
 
+import { GroupAvatar } from './Avatar/GroupAvatar'
 import ContactSuggestion from './ContactSuggestion'
 import { extractEmails, validateEmail } from '../helpers/email'
-import { getDisplayName, getInitials, Contact } from '../models'
+import { getDisplayName, getInitials, Contact, Group } from '../models'
 import styles from '../styles/autosuggest.styl'
 import {
   cozyUrlMatch,
@@ -139,13 +140,20 @@ const ShareAutocomplete = ({
   const renderInput = inputProps => (
     <div className={styles['recipientsContainer']}>
       {recipients.map((recipient, idx) => {
+        const isContactGroup = recipient._type === Group.doctype
         const avatarText = getInitials(recipient)
         const name = getDisplayName(recipient)
         return (
           <Chip
             id={`recipient_${idx}`}
             key={`key_recipient_${idx}`}
-            avatar={<Avatar text={avatarText} size="xsmall" />}
+            avatar={
+              isContactGroup ? (
+                <GroupAvatar size="xsmall" />
+              ) : (
+                <Avatar text={avatarText} size="xsmall" />
+              )
+            }
             label={name}
             onDelete={() => {
               onAutosuggestRemove(recipient)