fix(write): évite le re-rendering dû à la biblio (#1313)

Co-authored-by: Thomas Parisot <thom4parisot@users.noreply.github.com>
EcrituresNumeriques · Mar 5, 2025 · ae296e1 · ae296e1
1 parent 26354d2
commit ae296e1
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 49 deletions.
diff --git a/front/package-lock.json b/front/package-lock.json
diff --git a/front/package.json b/front/package.json
@@ -42,6 +42,7 @@
     "allof-merge": "^0.6.6",
     "biblatex-csl-converter": "^1.11.0",
     "clsx": "^1.2.1",
+    "copy-to-clipboard": "^3.3.3",
     "core-js": "^3.38",
     "diff-match-patch": "^1.0.5",
     "downshift": "^6.1.12",
@@ -57,7 +58,6 @@
     "pagedjs": "^0.4.0",
     "prop-types": "^15.8.1",
     "react": "~18.3",
-    "react-copy-to-clipboard": "^5.0.3",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
     "react-dom": "~18.3",

diff --git a/front/src/components/UserInfos.jsx b/front/src/components/UserInfos.jsx
@@ -1,8 +1,7 @@
 import React, { useState, useCallback } from 'react'
-import { Check, Clipboard, Loader } from 'react-feather'
+import { Check, Loader } from 'react-feather'
 import { useTranslation } from 'react-i18next'
 import { useSelector, useDispatch, shallowEqual } from 'react-redux'
-import { CopyToClipboard } from 'react-copy-to-clipboard'
 import { Helmet } from 'react-helmet'
 
 import { useGraphQLClient } from '../helpers/graphQL'
@@ -168,19 +167,12 @@ export default function UserInfos() {
             label={t('user.account.apiKey')}
             className={styles.apiKeyField}
           >
-            <>
-              <code
-                className={styles.apiKeyValue}
-                title={t('user.account.apiKeyValue', { token: sessionToken })}
-              >
-                {sessionToken}
-              </code>
-              <CopyToClipboard text={sessionToken}>
-                <Button title={t('user.account.copyApiKey')} icon={true}>
-                  <Clipboard />
-                </Button>
-              </CopyToClipboard>
-            </>
+            <code
+              className={styles.apiKeyValue}
+              title={t('user.account.apiKeyValue', { token: sessionToken })}
+            >
+              {sessionToken}
+            </code>
           </Field>
           <Field label={t('user.account.id')}>
             <code>{activeUser._id}</code>

diff --git a/front/src/components/Write/Reference.jsx b/front/src/components/Write/Reference.jsx
@@ -1,19 +1,45 @@
-import React, { memo } from 'react'
-import { CopyToClipboard } from 'react-copy-to-clipboard'
+import React, { memo, useCallback } from 'react'
+import copy from 'copy-to-clipboard'
 import { useTranslation } from 'react-i18next'
+import { useToasts } from '@geist-ui/core'
 
 import { Clipboard } from 'react-feather'
 import styles from './reference.module.scss'
 import ReferenceTypeIcon from '../ReferenceTypeIcon'
 import Button from '../Button'
 
-const BibliographyReference = memo(function BibliographyReference({ entry }) {
-  const { key, title, type, date, authorName } = entry
+const CopyButton = memo(function ReferenceCopyButton({ text }) {
   const { t } = useTranslation()
+  const { setToast } = useToasts()
+
+  const handleCopy = useCallback(() => {
+    copy(text)
+    setToast({
+      type: 'default',
+      text: t('write.copyReferenceToClipboard.successToast', { text }),
+    })
+  })
+
+  return (
+    <Button
+      title={t('write.copyReferenceToClipboard.Button', { text })}
+      className={styles.copyToClipboard}
+      onClick={handleCopy}
+      icon
+    >
+      <Clipboard />
+    </Button>
+  )
+})
+
+export default function BibliographyReference({ entry }) {
+  const { key, title, type, date, authorName } = entry
+  const text = `[@${key}]`
 
   return (
     <div className={styles.reference}>
       <ReferenceTypeIcon type={type} className={styles.referenceTypeIcon} />
+
       <div className={styles.referenceInfo}>
         <p
           className={styles.referencePrimaryInfo}
@@ -33,17 +59,8 @@ const BibliographyReference = memo(function BibliographyReference({ entry }) {
           </span>
         </p>
       </div>
-      <CopyToClipboard text={`[@${key}]`}>
-        <Button
-          title={t('write.copyClipboard.referenceButton')}
-          className={styles.copyToClipboard}
-          icon={true}
-        >
-          <Clipboard />
-        </Button>
-      </CopyToClipboard>
+
+      <CopyButton text={text} />
     </div>
   )
-})
-
-export default BibliographyReference
+}
diff --git a/front/src/locales/en/translation.json b/front/src/locales/en/translation.json
@@ -216,7 +216,8 @@
   "write.sidebar.manageButton": "Manage",
   "write.biblioModal.title": "Bibliography manager",
   "write.searchFieldBiblio.placeholder": "Search",
-  "write.copyClipboard.referenceButton": "Copy to clipboard",
+  "write.copyReferenceToClipboard.Button": "Copy '{{text}}' to clipboard",
+  "write.copyReferenceToClipboard.successToast": "'{{text}}' copied to clipboard",
   "write.showBiblio.button": "Show all",
   "write.titleVersion.sidebar": "Versions",
   "write.newVersion.button": "New version",

diff --git a/front/src/locales/es/translation.json b/front/src/locales/es/translation.json
@@ -141,7 +141,8 @@
   "write.sidebar.manageButton": "Gestión",
   "write.biblioModal.title": "Gestor de referencias bibliográficas",
   "write.searchFieldBiblio.placeholder": "Buscar",
-  "write.copyClipboard.referenceButton": "Copiar al portapapeles",
+  "write.copyReferenceToClipboard.Button": "Copiar '{{text}}' al portapapeles",
+  "write.copyReferenceToClipboard.successToast": "'{{text}}' copiado al portapapeles",
   "write.showBiblio.button": "Ver todos",
   "write.titleVersion.sidebar": "Versiones",
   "write.newVersion.button": "Nueva versión",

diff --git a/front/src/locales/fr/translation.json b/front/src/locales/fr/translation.json
@@ -213,7 +213,8 @@
   "write.sidebar.manageButton": "Gestion",
   "write.biblioModal.title": "Gestionnaire de références bibliographiques",
   "write.searchFieldBiblio.placeholder": "Rechercher",
-  "write.copyClipboard.referenceButton": "Copier dans le presse-papiers",
+  "write.copyReferenceToClipboard.Button": "Copier '{{text}}' dans le presse-papiers",
+  "write.copyReferenceToClipboard.successToast": "'{{text}}' copié dans le presse-papiers",
   "write.showBiblio.button": "Afficher tout",
   "write.titleVersion.sidebar": "Versions",
   "write.newVersion.button": "Nouvelle version",