feat: use links instead of buttons

g-saracca · g-saracca · commit 8d8f6314dc1c · 2024-11-20T17:01:17.000-03:00
diff --git a/index.html b/index.html
@@ -9,6 +9,9 @@
     <link rel="apple-touch-icon" href="/logo192.png" />
     <link rel="manifest" href="/manifest.json" />
     <title>Dataverse</title>
+
+    <!-- TODO:ME Basics meta tags for socials x, linkdin, facebook -->
+    <!-- TODO:ME Check page that analyse metadata tags -->
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/sections/collection/Collection.tsx b/src/sections/collection/Collection.tsx
@@ -14,7 +14,7 @@ import { CollectionSkeleton } from './CollectionSkeleton'
 import { PageNotFound } from '../page-not-found/PageNotFound'
 import { CreatedAlert } from './CreatedAlert'
 import { PublishCollectionButton } from './publish-collection/PublishCollectionButton'
-import { ShareButton } from './share-button/ShareButton'
+import { ShareCollectionButton } from './share-collection/ShareCollectionButton'
 import styles from './Collection.module.scss'
 
 interface CollectionProps {
@@ -82,7 +82,7 @@ export function Collection({
                   {/* 👇 Here should go Contact button also */}
                   {/* <ContactButton /> */}
 
-                  <ShareButton />
+                  <ShareCollectionButton />
                 </div>
 
                 {showPublishButton && (
diff --git a/src/sections/collection/share-collection/ShareCollection.module.scss b/src/sections/collection/share-collection/ShareCollection.module.scss
diff --git a/src/sections/collection/share-collection/ShareCollectionButton.tsx b/src/sections/collection/share-collection/ShareCollectionButton.tsx
@@ -1,10 +1,10 @@
 import { useState } from 'react'
 import { Button, Tooltip } from '@iqss/dataverse-design-system'
 import { ShareFill } from 'react-bootstrap-icons'
-import { ShareModal } from './ShareModal'
-import styles from './ShareButton.module.scss'
+import { ShareCollectionModal } from './ShareCollectionModal'
+import styles from './ShareCollection.module.scss'
 
-export const ShareButton = () => {
+export const ShareCollectionButton = () => {
   const [showShareModal, setShowShareModal] = useState(false)
 
   const openShareModal = () => setShowShareModal(true)
@@ -22,7 +22,7 @@ export const ShareButton = () => {
         </Button>
       </Tooltip>
 
-      <ShareModal show={showShareModal} handleClose={closeShareModal} />
+      <ShareCollectionModal show={showShareModal} handleClose={closeShareModal} />
     </>
   )
 }
diff --git a/src/sections/collection/share-collection/ShareCollectionModal.tsx b/src/sections/collection/share-collection/ShareCollectionModal.tsx
@@ -1,13 +1,28 @@
 import { Button, Modal, Stack } from '@iqss/dataverse-design-system'
 import { Facebook, Linkedin, TwitterX } from 'react-bootstrap-icons'
-import styles from './ShareButton.module.scss'
+import styles from './ShareCollection.module.scss'
 
-interface ShareModalProps {
+interface ShareCollectionModalProps {
   show: boolean
   handleClose: () => void
 }
 
-export const ShareModal = ({ show, handleClose }: ShareModalProps) => {
+// TODO:ME - Add storybook
+// TODO:ME - Add component test to check url is correct
+
+export const ShareCollectionModal = ({ show, handleClose }: ShareCollectionModalProps) => {
+  const currentUrl = window.location.href
+
+  const shareOnLinkedInURL = `https://www.linkedin.com/shareArticle?url=${encodeURIComponent(
+    currentUrl
+  )}`
+
+  const shareOnXURL = `https://twitter.com/intent/tweet?url=${encodeURIComponent(currentUrl)}`
+
+  const shareOnFacebookURL = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
+    currentUrl
+  )}`
+
   return (
     <Modal show={show} onHide={handleClose} centered>
       <Modal.Header>
@@ -19,27 +34,34 @@ export const ShareModal = ({ show, handleClose }: ShareModalProps) => {
         </p>
 
         <Stack direction="horizontal">
-          <button
-            type="button"
-            aria-label="LinkedIn"
+          <a
+            href={shareOnLinkedInURL}
+            target="_blank"
+            rel="noreferrer"
             title="LinkedIn"
+            aria-label="LinkedIn"
             className={`${styles['social-btn']} ${styles.linkedin}`}>
             <Linkedin size={18} />
-          </button>
-          <button
-            type="button"
-            aria-label="X, formerly Twitter"
+          </a>
+
+          <a
+            href={shareOnXURL}
+            target="_blank"
+            rel="noreferrer"
             title="X, formerly Twitter"
+            aria-label="X, formerly Twitter"
             className={`${styles['social-btn']} ${styles.x}`}>
             <TwitterX size={18} />
-          </button>
-          <button
-            type="button"
-            aria-label="Facebook"
+          </a>
+          <a
+            href={shareOnFacebookURL}
+            target="_blank"
+            rel="noreferrer"
             title="Facebook"
+            aria-label="Facebook"
             className={`${styles['social-btn']} ${styles.fb}`}>
             <Facebook size={18} />
-          </button>
+          </a>
         </Stack>
       </Modal.Body>
       <Modal.Footer>
