fix: hide visualisation download & embed icons

hide icons when images are unavailable.
researchdata-sheffield · Jul 12, 2021 · b623584 · b623584
1 parent 8457be6
commit b623584
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/src/components/visualisation/visPagination.jsx b/src/components/visualisation/visPagination.jsx
@@ -13,8 +13,8 @@ const visPagination = ({ mdx, className, style }) => {
   const {prev, next} = mdx.pageContext;
   const buttonStyle = "py-2 px-2 bg-gray-800 text-white font-semibold text-sm rounded-md hover:bg-gray-700 transition duration-300"
 
-  const embedImagePath = mdx.frontmatter.embedImage.relativePath
-  const downloadPath = embedImagePath.substring(embedImagePath.indexOf("/") + 1)
+  const embedImagePath = mdx.frontmatter?.embedImage?.relativePath || '';
+  const downloadPath = embedImagePath?.substring(embedImagePath.indexOf("/") + 1) || '';
 
   return (
     <div className={`${className} flex flex-wrap justify-between mt-2 space-y-3 mx-auto items-center relative z-10`} style={{...style, maxWidth: '550px'}}>
@@ -32,12 +32,16 @@ const visPagination = ({ mdx, className, style }) => {
         <a className="text-3xl" href={githubLink} target="_blank" rel="noopener noreferrer" title="Edit this page on GitHub">
           <div className="py-1 px-2 bg-black hover:bg-brand-blue text-white flex justify-center rounded-md text-xl cursor-pointer"><RiEditBoxLine /></div>
         </a>
-        <a className="text-3xl" href={`${masterFolderLink}/${downloadPath}?raw=true`} target="_blank" rel="noopener noreferrer" title="Download as an image">
-          <div className="py-1 px-2 text-white bg-black hover:bg-white hover:text-black flex justify-center rounded-md text-xl cursor-pointer"><FiDownload /></div>
-        </a>
-        <button className="text-3xl" title="Embed visualisation">
-          <div className="py-1 px-2 text-white bg-black hover:bg-white hover:text-black flex justify-center rounded-md text-xl cursor-pointer"><ImEmbed2 /></div>
-        </button>
+        {embedImagePath &&
+          <a className="text-3xl" href={`${masterFolderLink}/${downloadPath}?raw=true`} target="_blank" rel="noopener noreferrer" title="Download as an image">
+            <div className="py-1 px-2 text-white bg-black hover:bg-white hover:text-black flex justify-center rounded-md text-xl cursor-pointer"><FiDownload /></div>
+          </a>
+        }
+        {embedImagePath &&
+          <button className="text-3xl" title="Embed visualisation">
+            <div className="py-1 px-2 text-white bg-black hover:bg-white hover:text-black flex justify-center rounded-md text-xl cursor-pointer"><ImEmbed2 /></div>
+          </button>
+        }
       </ShareButton> 
       <Link to={next ? next.node.fields.slug : ``} className={`${next ? '' : 'pointer-events-none'}`}>
         <button className={`${next ? '' : 'cursor-not-allowed text-gray-700'} ${buttonStyle}`}>

diff --git a/src/utils/hooks/loadMoreVisualisation.jsx b/src/utils/hooks/loadMoreVisualisation.jsx
@@ -20,7 +20,7 @@ export function loadMoreVisualisation(allMdx, nextPageRef, referenceId, pageLeng
   useEffect(() => {
     const options = {
       root: null,
-      rootMargin: "150px 0px 0px 0px"
+      rootMargin: "300px 0px 0px 0px"
     }
     const refObserver = new IntersectionObserver((entries) => {
       if (entries[0].isIntersecting) {