feat(Viewer): Use contact formatting from cozy-client

Author: zatteo

react/Viewer/Panel/QualificationListItemContact.jsx

@@ -1,6 +1,11 @@
 import React, { useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 
+import {
+  getTranslatedNameForContact,
+  formatContactValue
+} from 'cozy-client/dist/models/paper'
+
 import ListItem from '../../ListItem'
 import ListItemSecondaryAction from '../../ListItemSecondaryAction'
 import IconButton from '../../IconButton'
@@ -13,7 +18,7 @@ import { useI18n } from '../../providers/I18n'
 import ActionMenuWrapper from './ActionMenuWrapper'
 
 const QualificationListItemContact = ({ file }) => {
-  const { t } = useI18n()
+  const { lang } = useI18n()
   const actionBtnRef = useRef()
   const [optionFile, setOptionFile] = useState({
     name: '',
@@ -27,7 +32,7 @@ const QualificationListItemContact = ({ file }) => {
       return { name, value }
     })
 
-  const { contactName, isLoadingContacts } = useReferencedContactName(file)
+  const { contacts, isLoadingContacts } = useReferencedContactName(file)
 
   if (isLoadingContacts) {
     return (
@@ -37,21 +42,24 @@ const QualificationListItemContact = ({ file }) => {
     )
   }
 
-  if (!isLoadingContacts && !contactName) {
+  const formattedTitle = getTranslatedNameForContact({ lang })
+  const formattedValue = formatContactValue(contacts)
+
+  if (!isLoadingContacts && !formattedValue) {
     return null
   }
 
   return (
     <>
       <ListItem className={'u-ph-2'}>
         <QualificationListItemText
-          primary={t('Viewer.panel.qualification.contact')}
-          secondary={contactName}
+          primary={formattedTitle}
+          secondary={formattedValue}
         />
         <ListItemSecondaryAction>
           <IconButton
             ref={actionBtnRef}
-            onClick={() => toggleActionsMenu('contact', contactName)}
+            onClick={() => toggleActionsMenu('contact', formattedValue)}
           >
             <Icon icon={Dots} />
           </IconButton>

react/Viewer/hooks/useReferencedContactName.jsx

@@ -1,11 +1,7 @@
-import { getReferencedBy, useQuery, models, isQueryLoading } from 'cozy-client'
+import { getReferencedBy, useQuery, isQueryLoading } from 'cozy-client'
 
 import { buildContactByIdsQuery } from '../queries'
 
-const {
-  contact: { getDisplayName }
-} = models
-
 const useReferencedContactName = file => {
   const contactIds = getReferencedBy(file, 'io.cozy.contacts').map(
     ref => ref.id
@@ -25,11 +21,6 @@ const useReferencedContactName = file => {
     isContactByIdsQueryEnabled &&
     (isQueryLoading(contactsQueryResult) || contactsQueryResult.hasMore)
 
-  const contactName =
-    contacts && contacts.length > 0
-      ? contacts.map(contact => `${getDisplayName(contact)}`).join(', ')
-      : ''
-
-  return { contactName, isLoadingContacts }
+  return { contacts, isLoadingContacts }
 }
 export default useReferencedContactName