Disable relation data download if relations are unavailable

dracor-org · Dec 4, 2020 · 4d71d24 · 4d71d24
1 parent c0b0559
commit 4d71d24
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 20 deletions.
diff --git a/src/components/DownloadLinks.js b/src/components/DownloadLinks.js
@@ -52,26 +52,38 @@ const DownloadLinks = ({play}) => {
             <img src={svgGraphML}/>
           </a>
         </span>
-        <p>
-          Relation data (as described{' '}
-          <a href="https://github.com/dracor-org/gerdracor#character-relations">
-            here
-          </a>):
-        </p>
-        <span className={cx('formats')}>
-          <a
-            href={csvRelationsUrl}
-            download={`${play.id}-${play.name}.csv`}
-          >
-            <img src={svgCSV}/>
-          </a>
-          <a
-            href={gexfRelationsUrl}
-            download={`${play.id}-${play.name}.gexf`}
-          >
-            <img src={svgGEXF}/>
-          </a>
-        </span>
+        {play.relations ? (
+          <>
+            <p>
+              Relation data (as described{' '}
+              <a href="https://github.com/dracor-org/gerdracor#character-relations">
+                here
+              </a>):
+            </p>
+            <span className={cx('formats')}>
+              <a
+                href={csvRelationsUrl}
+                download={`${play.id}-${play.name}.csv`}
+              >
+                <img src={svgCSV}/>
+              </a>
+              <a
+                href={gexfRelationsUrl}
+                download={`${play.id}-${play.name}.gexf`}
+              >
+                <img src={svgGEXF}/>
+              </a>
+            </span>
+          </>
+        ) : (
+          <>
+            <p>Relation data not yet available.</p>
+            <span className={cx('formats')}>
+              <img disabled src={svgCSV}/>
+              <img disabled src={svgGEXF}/>
+            </span>
+          </>
+        )}
       </span>
       <span>
         <h4>Spoken text</h4>

diff --git a/src/components/DownloadLinks.module.scss b/src/components/DownloadLinks.module.scss
@@ -40,6 +40,10 @@
       &:focus {
         opacity: 0.85;
       }
+
+      &[disabled] {
+        opacity: .5;
+      }
     }
   }
 }