diff --git a/client/src/hooks/useCopyToClipboard.jsx b/client/src/hooks/useCopyToClipboard.jsx new file mode 100644 index 00000000..19575978 --- /dev/null +++ b/client/src/hooks/useCopyToClipboard.jsx @@ -0,0 +1,25 @@ +import { useEffect, useState } from 'react'; + +export default function useCopyToClipboard(resetTimeout = 1500) { + const [copyStatus, setCopyStatus] = useState(null); + + async function copyToClipboard(text) { + if ('clipboard' in navigator) return navigator.clipboard.writeText(text); + return document.execCommand('copy', true, text); + } + + const copy = (text) => { + copyToClipboard(text) + .then(() => { setCopyStatus('CopiƩ'); }) + .catch(() => { setCopyStatus('Erreur'); }); + }; + useEffect(() => { + let timeoutId; + if (copyStatus) { + timeoutId = setTimeout(() => setCopyStatus(null), resetTimeout); + } + return () => clearTimeout(timeoutId); + }, [copyStatus, resetTimeout]); + + return [copyStatus, copy]; +} diff --git a/client/src/pages/openalex-ror/components/ror-badge.jsx b/client/src/pages/openalex-ror/components/ror-badge.jsx index 61be180a..a66756ff 100644 --- a/client/src/pages/openalex-ror/components/ror-badge.jsx +++ b/client/src/pages/openalex-ror/components/ror-badge.jsx @@ -1,51 +1,82 @@ -import { Link, Tag } from '@dataesr/dsfr-plus'; +import { Link } from '@dataesr/dsfr-plus'; import PropTypes from 'prop-types'; -export default function RorBadge({ - isRemoved, - ror, - rorColor, - setFilteredAffiliationName, -}) { +import useCopyToClipboard from '../../../hooks/useCopyToClipboard'; + +export default function RorBadge({ isRemoved, removeRor, ror, rorColor, setFilteredAffiliationName }) { + const [copyStatus, copy] = useCopyToClipboard(); + + const iconsType = { + CopiƩ: 'ri-checkbox-circle-fill', + Erreur: 'ri-settings-6-fill', + }; + return ( - - ROR logo +
+ +
+ ROR logo +
{isRemoved ? ( - https://ror.org/ - {` ${ror.rorId}`} + {`https://ror.org/${ror.rorId}`} ) : ( - <> - https://ror.org/ - - {` ${ror.rorId}`} - - + + {`https://ror.org/${ror.rorId}`} + )}
); } +RorBadge.defaultProps = { + isRemoved: false, +}; + RorBadge.propTypes = { - isRemoved: PropTypes.bool.isRequired, + isRemoved: PropTypes.bool, + removeRor: PropTypes.func.isRequired, ror: PropTypes.shape({ rorId: PropTypes.string.isRequired, }).isRequired, diff --git a/client/src/pages/openalex-ror/components/ror-badge_old.jsx b/client/src/pages/openalex-ror/components/ror-badge_old.jsx deleted file mode 100644 index 5d0f0167..00000000 --- a/client/src/pages/openalex-ror/components/ror-badge_old.jsx +++ /dev/null @@ -1,69 +0,0 @@ -import { Link } from '@dataesr/dsfr-plus'; -import PropTypes from 'prop-types'; - -export default function RorBadge({ isRemoved, ror, setFilteredAffiliationName, rorColor, removeRor }) { - return ( -
- -
- ROR logo -
- {isRemoved ? ( - - - {`https://ror.org/${ror.rorId}`} - - - ) : ( - - {`https://ror.org/${ror.rorId}`} - - )} -
- ); -} - -RorBadge.defaultProps = { - isRemoved: false, -}; - -RorBadge.propTypes = { - isRemoved: PropTypes.bool, - ror: PropTypes.shape({ - rorId: PropTypes.string.isRequired, - }).isRequired, - rorColor: PropTypes.string.isRequired, - removeRor: PropTypes.func.isRequired, - setFilteredAffiliationName: PropTypes.func.isRequired, -}; diff --git a/client/src/pages/openalex-ror/results/list-view.jsx b/client/src/pages/openalex-ror/results/list-view.jsx index 27b7aa3c..1cc2b71d 100644 --- a/client/src/pages/openalex-ror/results/list-view.jsx +++ b/client/src/pages/openalex-ror/results/list-view.jsx @@ -1,16 +1,16 @@ import { Badge, Checkbox, Col, Row, Text } from '@dataesr/dsfr-plus'; import PropTypes from 'prop-types'; -import WorksList from '../components/works-list'; -import RorBadge from '../components/ror-badge_old'; +import RorBadge from '../components/ror-badge'; import RorName from '../components/ror-name'; +import WorksList from '../components/works-list'; export default function ListView({ allAffiliations, + removeRorFromAddList, setFilteredAffiliationName, - toggleRemovedRor, setSelectAffiliations, - removeRorFromAddList, + toggleRemovedRor, }) { const defineRorColor = []; const dsColors = ['green-archipel', 'purple-glycine', 'pink-tuile', 'green-menthe', 'brown-cafe-creme']; @@ -117,8 +117,8 @@ export default function ListView({ ListView.propTypes = { allAffiliations: PropTypes.array.isRequired, + removeRorFromAddList: PropTypes.func.isRequired, setFilteredAffiliationName: PropTypes.func.isRequired, setSelectAffiliations: PropTypes.func.isRequired, toggleRemovedRor: PropTypes.func.isRequired, - removeRorFromAddList: PropTypes.func.isRequired, };