remove rendering of empty arrays with CTs, entries, assets

contentful-userland · Dec 16, 2017 · 7701980 · 7701980
1 parent cdf64ea
commit 7701980
Show file tree

Hide file tree

Showing 4 changed files with 147 additions and 143 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "contentful-wizard",
-  "version": "0.0.1-alpha-5",
+  "version": "0.0.1-alpha-6",
   "description": "This is a library to add interactive content explorer to your contentful-powered project.",
   "jsnext:main": "lib/es2015/index.js",
   "module": "lib/es2015/index.js",

diff --git a/src/popup/renderAssets.ts b/src/popup/renderAssets.ts
@@ -42,63 +42,65 @@ export function renderAssets({
   const filteredAssets = Object.keys(assetNodes).filter(
     assetAtPage => assetAtPage !== asset
   );
-  const assetsOnPage = [asset].concat(filteredAssets).filter(Boolean);
+  const assetsOnPage = [asset]
+    .concat(filteredAssets)
+    .filter(Boolean)
+    .map((key: string) => ({ nodes: assetNodes[key], data: assetsData[key] }))
+    .filter(({ nodes }) => nodes && nodes.length > 0);
 
   if (assetsOnPage.length > 0) {
     assetsContainer.appendChild(line);
     assetsContainer.appendChild(header);
   }
 
-  assetsOnPage
-    .map((key: string) => ({ nodes: assetNodes[key], data: assetsData[key] }))
-    .forEach(({ nodes = [], data }: { data: any; nodes: any[] }) => {
-      const element = document.createElement("div");
-      const link = constructAssetURL({
-        spaceId,
-        asset: data.sys.id
-      });
+  assetsOnPage.forEach(({ nodes = [], data }: { data: any; nodes: any[] }) => {
+    const element = document.createElement("div");
+    const link = constructAssetURL({
+      spaceId,
+      asset: data.sys.id
+    });
 
-      const linkNode = createElement({
-        tag: "a",
-        attrs: {
-          href: link,
-          target: "_blank"
-        },
-        text: data.fields.title || data.sys.id,
-        style: {
-          display: "inline-block",
-          borderBottom: "1px dashed #ccc",
-          paddingBottom: "2px",
-          textDecoration: "none",
-          marginBottom: "5px"
-        }
-      });
+    const linkNode = createElement({
+      tag: "a",
+      attrs: {
+        href: link,
+        target: "_blank"
+      },
+      text: data.fields.title || data.sys.id,
+      style: {
+        display: "inline-block",
+        borderBottom: "1px dashed #ccc",
+        paddingBottom: "2px",
+        textDecoration: "none",
+        marginBottom: "5px"
+      }
+    });
 
-      let overlays: Function[] = [];
+    let overlays: Function[] = [];
 
-      const cleanup = onHover({
-        node: linkNode,
-        onMouseEnter: () => {
-          nodes.forEach(node => {
-            overlays.push(renderOverlay({ node, style: style.overlay }));
-          });
-        },
-        onMouseLeave: cleanOverlays
-      });
+    const cleanup = onHover({
+      node: linkNode,
+      onMouseEnter: () => {
+        nodes.forEach(node => {
+          overlays.push(renderOverlay({ node, style: style.overlay }));
+        });
+      },
+      onMouseLeave: cleanOverlays
+    });
 
-      cleanupFns.push(() => {
-        cleanOverlays();
-        cleanup();
-      });
+    cleanupFns.push(() => {
+      cleanOverlays();
+      cleanup();
+    });
 
-      element.appendChild(linkNode);
-      assetsContainer.appendChild(element);
+    element.appendChild(linkNode);
+    assetsContainer.appendChild(element);
 
-      function cleanOverlays() {
-        overlays.forEach(fn => fn());
-        overlays = [];
-      }
-    });
+    function cleanOverlays() {
+      overlays.forEach(fn => fn());
+      overlays = [];
+    }
+  });
 
   return {
     node: assetsContainer,

diff --git a/src/popup/renderContentTypes.ts b/src/popup/renderContentTypes.ts
@@ -43,65 +43,67 @@ export function renderContentTypes({
   const filteredCTNodes = Object.keys(contentTypeNodes).filter(
     contentTypeAtPage => contentTypeAtPage !== contentType
   );
-  const ctsOnPage = [contentType].concat(filteredCTNodes).filter(Boolean);
+  const ctsOnPage = [contentType]
+    .concat(filteredCTNodes)
+    .filter(Boolean)
+    .map((key: string) => ({
+      nodes: contentTypeNodes[key],
+      data: contentTypesData[key]
+    }))
+    .filter(({ nodes }) => nodes && nodes.length > 0);
 
   if (ctsOnPage.length > 0) {
     ctsContainer.appendChild(line);
     ctsContainer.appendChild(header);
   }
-  ctsOnPage
-    .map((key: string) => ({
-      nodes: contentTypeNodes[key],
-      data: contentTypesData[key]
-    }))
-    .forEach(({ nodes = [], data }: { data: IEntity; nodes: any[] }) => {
-      const element = document.createElement("div");
-      const link = constructContentTypeURL({
-        spaceId,
-        contentType: data.sys.id
-      });
+  ctsOnPage.forEach(({ nodes = [], data }: { data: IEntity; nodes: any[] }) => {
+    const element = document.createElement("div");
+    const link = constructContentTypeURL({
+      spaceId,
+      contentType: data.sys.id
+    });
 
-      const linkNode = createElement({
-        tag: "a",
-        attrs: {
-          href: link,
-          target: "_blank"
-        },
-        text: data.name || "No name property!",
-        style: {
-          display: "inline-block",
-          borderBottom: "1px dashed #ccc",
-          textDecoration: "none",
-          paddingBottom: "2px",
-          marginBottom: "5px"
-        }
-      });
+    const linkNode = createElement({
+      tag: "a",
+      attrs: {
+        href: link,
+        target: "_blank"
+      },
+      text: data.name || "No name property!",
+      style: {
+        display: "inline-block",
+        borderBottom: "1px dashed #ccc",
+        textDecoration: "none",
+        paddingBottom: "2px",
+        marginBottom: "5px"
+      }
+    });
 
-      let overlays: Function[] = [];
+    let overlays: Function[] = [];
 
-      const cleanup = onHover({
-        node: linkNode,
-        onMouseEnter: () => {
-          nodes.forEach(node => {
-            overlays.push(renderOverlay({ node, style: style.overlay }));
-          });
-        },
-        onMouseLeave: cleanOverlays
-      });
+    const cleanup = onHover({
+      node: linkNode,
+      onMouseEnter: () => {
+        nodes.forEach(node => {
+          overlays.push(renderOverlay({ node, style: style.overlay }));
+        });
+      },
+      onMouseLeave: cleanOverlays
+    });
 
-      cleanupFns.push(() => {
-        cleanOverlays();
-        cleanup();
-      });
+    cleanupFns.push(() => {
+      cleanOverlays();
+      cleanup();
+    });
 
-      element.appendChild(linkNode);
-      ctsContainer.appendChild(element);
+    element.appendChild(linkNode);
+    ctsContainer.appendChild(element);
 
-      function cleanOverlays() {
-        overlays.forEach(fn => fn());
-        overlays = [];
-      }
-    });
+    function cleanOverlays() {
+      overlays.forEach(fn => fn());
+      overlays = [];
+    }
+  });
 
   return {
     node: ctsContainer,

diff --git a/src/popup/renderEntries.ts b/src/popup/renderEntries.ts
@@ -46,68 +46,68 @@ export function renderEntries({
   const cleanupFns: Function[] = [];
 
   const entries = getCTEntryNodes({ contentType });
-  const entriesKeys = Object.keys(entries);
-
-  if (entriesKeys.length > 0) {
-    ctsContainer.appendChild(line);
-    ctsContainer.appendChild(header);
-  }
-
-  entriesKeys
+  const entriesKeys = Object.keys(entries)
     .map(entryId => ({
       entry: entryId,
       nodes: entries[entryId],
       data: entriesData[entryId]
     }))
-    .forEach(({ entry, nodes, data }) => {
-      const element = document.createElement("div");
-      const link = constructEntryURL({
-        spaceId,
-        entry
-      });
+    .filter(({ nodes }) => nodes && nodes.length > 0);
 
-      const linkNode = createElement({
-        tag: "a",
-        attrs: {
-          href: link,
-          target: "_blank"
-        },
-        text: getEntryTitle({ entry: data, entryTitle }),
-        style: {
-          display: "inline-block",
-          borderBottom: "1px dashed #ccc",
-          textDecoration: "none",
-          paddingBottom: "2px",
-          marginBottom: "5px"
-        }
-      });
+  if (entriesKeys.length > 0) {
+    ctsContainer.appendChild(line);
+    ctsContainer.appendChild(header);
+  }
 
-      let overlays: Function[] = [];
+  entriesKeys.forEach(({ entry, nodes, data }) => {
+    const element = document.createElement("div");
+    const link = constructEntryURL({
+      spaceId,
+      entry
+    });
 
-      const cleanup = onHover({
-        node: linkNode,
-        onMouseEnter: () => {
-          nodes.forEach(node => {
-            overlays.push(renderOverlay({ node, style: style.overlay }));
-          });
-        },
-        onMouseLeave: cleanOverlays
-      });
+    const linkNode = createElement({
+      tag: "a",
+      attrs: {
+        href: link,
+        target: "_blank"
+      },
+      text: getEntryTitle({ entry: data, entryTitle }),
+      style: {
+        display: "inline-block",
+        borderBottom: "1px dashed #ccc",
+        textDecoration: "none",
+        paddingBottom: "2px",
+        marginBottom: "5px"
+      }
+    });
 
-      cleanupFns.push(() => {
-        cleanOverlays();
-        cleanup();
-      });
+    let overlays: Function[] = [];
 
-      element.appendChild(linkNode);
-      ctsContainer.appendChild(element);
+    const cleanup = onHover({
+      node: linkNode,
+      onMouseEnter: () => {
+        nodes.forEach(node => {
+          overlays.push(renderOverlay({ node, style: style.overlay }));
+        });
+      },
+      onMouseLeave: cleanOverlays
+    });
 
-      function cleanOverlays() {
-        overlays.forEach(fn => fn());
-        overlays = [];
-      }
+    cleanupFns.push(() => {
+      cleanOverlays();
+      cleanup();
     });
 
+    element.appendChild(linkNode);
+    ctsContainer.appendChild(element);
+
+    function cleanOverlays() {
+      overlays.forEach(fn => fn());
+      overlays = [];
+    }
+  });
+
   return {
     node: ctsContainer,
     cleanup: () => {