one click copy default (AGU) citation in results and abstracts

adsabs · Dec 6, 2024 · 2a8a280 · 2a8a280
1 parent 9a020df
commit 2a8a280
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -35,6 +35,9 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@emotion/react": "11.8.2",
     "@emotion/styled": "^11.10.5",
+    "@fortawesome/fontawesome-svg-core": "^6.7.0",
+    "@fortawesome/free-solid-svg-icons": "^6.7.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@heroicons/react": "^2.0.16",
     "@hookform/resolvers": "^3.3.1",
     "@next/bundle-analyzer": "^10.2.3",
@@ -90,6 +93,8 @@
     "ramda-adjunct": "^3.3.0",
     "react": "^18.3.1",
     "react-compound-slider": "^3.4.0",
+    "react-copy-html-to-clipboard": "^6.0.4",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-device-detect": "^2.2.3",
     "react-error-boundary": "^4.0.4",
     "react-google-recaptcha-v3": "^1.10.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/ResultList/Item/ItemResourceDropdowns.tsx b/src/components/ResultList/Item/ItemResourceDropdowns.tsx
@@ -13,6 +13,7 @@ import { useGetExportCitation } from '@/api/export/export';
 import { useSettings } from '@/lib/useSettings';
 import { exportFormats } from '@/components/CitationExporter/models';
 import { ExportApiFormatKey } from '@/api/export/types';
+import CopyToClipboard from 'react-copy-html-to-clipboard';
 
 export interface IItemResourceDropdownsProps {
   doc: IDocsEntity;
@@ -170,8 +171,12 @@ export const ItemResourceDropdowns = ({ doc }: IItemResourceDropdownsProps): Rea
     setValue(`${process.env.NEXT_PUBLIC_BASE_CANONICAL_URL}/abs/${doc.bibcode}/abstract`);
   };
 
-  const handleCopyCitation = () => {
-    setValue(citationData.export);
+  const handleCitationCopied = () => {
+    if (citationData?.export) {
+      toast({ status: 'info', title: 'Copied to Clipboard' });
+    } else {
+      toast({ status: 'error', title: 'There was a problem fetching citation' });
+    }
   };
 
   return (
@@ -294,7 +299,10 @@ export const ItemResourceDropdowns = ({ doc }: IItemResourceDropdownsProps): Rea
         />
         <MenuList>
           <MenuItem onClick={handleCopyAbstractUrl}>Copy URL</MenuItem>
-          <MenuItem onClick={handleCopyCitation}>Copy Default Citation</MenuItem>
+
+          <CopyToClipboard text={citationData?.export} onCopy={handleCitationCopied} options={{ asHtml: true }}>
+            <MenuItem>Copy Citation</MenuItem>
+          </CopyToClipboard>
         </MenuList>
       </Menu>
     </>

diff --git a/src/pages/abs/[id]/abstract.tsx b/src/pages/abs/[id]/abstract.tsx
@@ -21,6 +21,7 @@ import {
   Tr,
   useDisclosure,
   VisuallyHidden,
+  useToast,
 } from '@chakra-ui/react';
 import { EditIcon, ExternalLinkIcon, TriangleDownIcon } from '@chakra-ui/icons';
 
@@ -56,6 +57,11 @@ import { parseAPIError } from '@/utils/common/parseAPIError';
 import { fetchSearchSSR, searchKeys, useGetAbstract } from '@/api/search/search';
 import { IADSApiSearchParams, IDocsEntity } from '@/api/search/types';
 import { getAbstractParams } from '@/api/search/models';
+import { useGetExportCitation } from '@/api/export/export';
+import { exportFormats } from '@/components/CitationExporter';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faQuoteLeft } from '@fortawesome/free-solid-svg-icons';
+import CopyToClipboard from 'react-copy-html-to-clipboard';
 
 const AllAuthorsModal = dynamic<IAllAuthorsModalProps>(
   () =>
@@ -144,17 +150,20 @@ const AbstractPage: NextPage = () => {
               <Box display={{ base: 'block', lg: 'none' }}>
                 <AbstractSources doc={doc} style="menu" />
               </Box>
-              {isAuthenticated && (
-                <Tooltip label="add to library">
-                  <IconButton
-                    aria-label="Add to library"
-                    icon={<FolderPlusIcon />}
-                    variant="ghost"
-                    onClick={onOpenAddToLibrary}
-                  />
-                </Tooltip>
-              )}
+              <Flex>
+                {isAuthenticated && (
+                  <Tooltip label="add to library">
+                    <IconButton
+                      aria-label="Add to library"
+                      icon={<FolderPlusIcon />}
+                      variant="ghost"
+                      onClick={onOpenAddToLibrary}
+                    />
+                  </Tooltip>
+                )}
+              </Flex>
             </Flex>
+
             <Box as="section" py="2" aria-labelledby="abstract">
               <VisuallyHidden as="h2" id="abstract">
                 Abstract
@@ -187,6 +196,21 @@ interface IDetailsProps {
 const Details = ({ doc }: IDetailsProps): ReactElement => {
   const arxiv = (doc.identifier ?? ([] as string[])).find((v) => /^arxiv/i.exec(v));
 
+  const { data: citationData, isLoading: isLoadingCitation } = useGetExportCitation({
+    format: exportFormats.agu.id,
+    bibcode: [doc.bibcode],
+  });
+
+  const toast = useToast({ duration: 2000 });
+
+  const handleCitationCopied = () => {
+    if (citationData?.export) {
+      toast({ status: 'info', title: 'Copied to Clipboard' });
+    } else {
+      toast({ status: 'error', title: 'There was a problem fetching citation' });
+    }
+  };
+
   return (
     <Box as="section" border="1px" borderColor="gray.50" borderRadius="md" shadow="sm" aria-labelledby="details">
       <VisuallyHidden as="h2" id="details">
@@ -195,7 +219,18 @@ const Details = ({ doc }: IDetailsProps): ReactElement => {
       <Table colorScheme="gray" size="md" role="presentation">
         <Tbody>
           <Detail label="Publication" value={doc.pub_raw}>
-            {(pub_raw) => <span dangerouslySetInnerHTML={{ __html: pub_raw }}></span>}
+            {(pub_raw) => (
+              <>
+                <span dangerouslySetInnerHTML={{ __html: pub_raw }}></span>
+                {!isLoadingCitation && (
+                  <CopyToClipboard text={citationData?.export} onCopy={handleCitationCopied} options={{ asHtml: true }}>
+                    <Button aria-label="Copy citation" variant="outline" mx={2} cursor="pointer">
+                      <FontAwesomeIcon icon={faQuoteLeft} />
+                    </Button>
+                  </CopyToClipboard>
+                )}
+              </>
+            )}
           </Detail>
           <Detail label="Book Author(s)" value={doc.book_author} />
           <Detail label="Publication Date" value={doc.pubdate} />