diff --git a/packages/cozy-viewer/src/Panel/ActionMenuWrapper.jsx b/packages/cozy-viewer/src/Panel/ActionMenuWrapper.jsx index df9b8eb019..c67ddeabd7 100644 --- a/packages/cozy-viewer/src/Panel/ActionMenuWrapper.jsx +++ b/packages/cozy-viewer/src/Panel/ActionMenuWrapper.jsx @@ -17,7 +17,10 @@ const ActionMenuWrapper = forwardRef( const { showAlert } = useAlert() const isEditable = isEditableAttribute(name, file) && !isReadOnly - const editPath = `${file.metadata.qualification.label}/${file._id}/edit/information?metadata=${optionFile.name}` + const editPath = + name === 'contact' + ? `${file.metadata.qualification.label}/${file._id}/edit/contact` + : `${file.metadata.qualification.label}/${file._id}/edit/information?metadata=${optionFile.name}` const handleCopy = async () => { try { diff --git a/packages/cozy-viewer/src/Panel/Qualification.jsx b/packages/cozy-viewer/src/Panel/Qualification.jsx index b9629d43c6..18b983c7f5 100644 --- a/packages/cozy-viewer/src/Panel/Qualification.jsx +++ b/packages/cozy-viewer/src/Panel/Qualification.jsx @@ -120,11 +120,11 @@ const Qualification = ({ file, isPublic, isReadOnly }) => { })} {optionFile.name && ( )} diff --git a/packages/cozy-viewer/src/Panel/QualificationListItemContact.jsx b/packages/cozy-viewer/src/Panel/QualificationListItemContact.jsx index cb154694ce..df13bf24fa 100644 --- a/packages/cozy-viewer/src/Panel/QualificationListItemContact.jsx +++ b/packages/cozy-viewer/src/Panel/QualificationListItemContact.jsx @@ -1,5 +1,5 @@ import PropTypes from 'prop-types' -import React, { useRef, useState } from 'react' +import React, { forwardRef } from 'react' import { getTranslatedNameForContact, @@ -15,85 +15,66 @@ import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryA import Spinner from 'cozy-ui/transpiled/react/Spinner' import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n' -import ActionMenuWrapper from './ActionMenuWrapper' import QualificationListItemText from './QualificationListItemText' import IntentOpener from '../components/IntentOpener' import useReferencedContactName from '../hooks/useReferencedContactName' -const QualificationListItemContact = ({ file, isReadOnly }) => { - const { lang } = useI18n() - const actionBtnRef = useRef() - const [optionFile, setOptionFile] = useState({ - name: '', - value: '' - }) - const { contacts, isLoadingContacts } = useReferencedContactName(file) +const QualificationListItemContact = forwardRef( + ({ file, isReadOnly, toggleActionsMenu }, ref) => { + const { lang } = useI18n() + const { contacts, isLoadingContacts } = useReferencedContactName(file) - if (isLoadingContacts) { - return ( - - - - ) - } - - const formattedValue = formatContactValue(contacts) + if (isLoadingContacts) { + return ( + + + + ) + } - if (!formattedValue) { - return null - } + const formattedValue = formatContactValue(contacts) - const formattedTitle = getTranslatedNameForContact({ lang }) - const qualificationLabel = file.metadata.qualification.label + if (!formattedValue) { + return null + } - const hideActionsMenu = () => setOptionFile({ name: '', value: '' }) - const toggleActionsMenu = (name, value) => - setOptionFile(prev => { - if (prev.value) return { name: '', value: '' } - return { name, value } - }) + const formattedTitle = getTranslatedNameForContact({ lang }) + const qualificationLabel = file.metadata.qualification.label - return ( - <> - - - - - - - - toggleActionsMenu('contact', formattedValue)} - > - - - - - + return ( + <> + + + + + + + + toggleActionsMenu('contact', formattedValue)} + > + + + + + + + ) + } +) - {optionFile.value && ( - - )} - - ) -} +QualificationListItemContact.displayName = 'QualificationListItemContact' QualificationListItemContact.propTypes = { file: PropTypes.object.isRequired,