From 3f9c9a51cd44d7b5100c9e25d83478082cbe7c04 Mon Sep 17 00:00:00 2001
From: Kasper Garnaes <kasper.garnaes@gmail.com>
Date: Fri, 10 Jul 2020 13:54:09 +0200
Subject: [PATCH] Do not render component if there are no related materials to
 show
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

If we do not locate any related materials then our component will
show a title and a link after loading. That looks somewhat silly.

We do not have a proper way to handle this situation by providing a
message to the end user so instead we just hide the component by
not rendering anything.

To do this we introduce the new “empty” status and set this if we
are done loading but still have no related materials.
---
 src/apps/related-materials/related-materials.entry.jsx | 4 +++-
 src/apps/related-materials/related-materials.jsx       | 9 ++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/apps/related-materials/related-materials.entry.jsx b/src/apps/related-materials/related-materials.entry.jsx
index 95494e1b..acb45c65 100644
--- a/src/apps/related-materials/related-materials.entry.jsx
+++ b/src/apps/related-materials/related-materials.entry.jsx
@@ -137,9 +137,11 @@ function useGetRelatedMaterials({
           const finishedMaterials =
             related?.filter(material => material.data)?.length || 0;
           const tries = relatedMaterials.tries + 1;
+          // If we have no materials to show then finish using the empty state.
+          const endStatus = finishedMaterials > 0 ? "finished" : "empty";
           const status =
             finishedMaterials >= amount || tries >= maxTries
-              ? "finished"
+              ? endStatus
               : "processing";
           setRelatedMaterials({
             status,
diff --git a/src/apps/related-materials/related-materials.jsx b/src/apps/related-materials/related-materials.jsx
index ebdf313c..f6e39a46 100644
--- a/src/apps/related-materials/related-materials.jsx
+++ b/src/apps/related-materials/related-materials.jsx
@@ -80,10 +80,13 @@ function RelatedMaterials({
   searchText,
   titleText
 }) {
-  if (status === "failed") {
-    // We fail discretly since there is no use in showing links or anything since the fail
-    // would mean a lack of works/materials.
+  if (status === "failed" || status === "empty") {
+    // Return discretly.
+    // When a failure occurs there is no use in showing links or anything since
+    // the fail would mean a lack of works/materials.
     // An actual unhandled failure would still result in our error boundary.
+    // At the moment we also do not render anything if there are no materials
+    // to show.
     return null;
   }
   return (