From b8930ba4fa9b0eb1e25b85d9d3bbff54accce1a6 Mon Sep 17 00:00:00 2001
From: Joshua Dechant <josh@codecrafting.org>
Date: Fri, 18 Jun 2021 14:34:59 -0400
Subject: [PATCH] Fix an issue where creator page is blank (#440)

---
 src/components/Creator/CreatorDisplay.tsx | 60 ++++++++++++++---------
 src/components/Creator/index.tsx          |  1 +
 2 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/src/components/Creator/CreatorDisplay.tsx b/src/components/Creator/CreatorDisplay.tsx
index 081089c1..4bb88c4e 100644
--- a/src/components/Creator/CreatorDisplay.tsx
+++ b/src/components/Creator/CreatorDisplay.tsx
@@ -21,6 +21,34 @@ import { Collection } from '../../reducer/slices/collections';
 import { MinterButton } from '../common';
 import lk from '../common/assets/link-icon.svg'
 
+interface CreatorDisplay404Props {
+  ownedOnly: boolean;
+}
+
+function CreatorDisplay404(props: CreatorDisplay404Props) {
+  return (
+    <Flex w="100%" flex="1" flexDir="column" align="center">
+      <Flex
+        px={20}
+        py={10}
+        bg="gray.200"
+        textAlign="center"
+        align="center"
+        borderRadius="5px"
+        flexDir="column"
+        fontSize="xl"
+        color="gray.400"
+        mt={28}
+      >
+        <Wind />
+        <Text fontWeight="600" pt={5}>
+          {props.ownedOnly ? 'No owned tokens to display' : 'No tokens to display'}
+        </Text>
+      </Flex>
+    </Flex>
+  );
+}
+
 interface CreatorDisplayProps {
   minter: string;
   collections: { [key: string]: Collection };
@@ -45,12 +73,16 @@ export default function CreatorDisplay({
   }, [dispatch, selectedCollection]);
 
   if (!selectedCollection) {
-    return <></>;
+    return (
+      <CreatorDisplay404 ownedOnly={ownedOnly} />
+    );
   }
 
   const collection = collections[selectedCollection];
   if (!collection) {
-    return <></>;
+    return (
+      <CreatorDisplay404 ownedOnly={ownedOnly} />
+    );
   }
 
   if (!collection.loaded) {
@@ -65,32 +97,16 @@ export default function CreatorDisplay({
   }
 
   if (collection.tokens === null) {
-    return <></>;
+    return (
+      <CreatorDisplay404 ownedOnly={ownedOnly} />
+    );
   }
 
   const tokens = collection.tokens;
 
   if (tokens.length === 0) {
     return (
-      <Flex w="100%" flex="1" flexDir="column" align="center">
-        <Flex
-          px={20}
-          py={10}
-          bg="gray.200"
-          textAlign="center"
-          align="center"
-          borderRadius="5px"
-          flexDir="column"
-          fontSize="xl"
-          color="gray.400"
-          mt={28}
-        >
-          <Wind />
-          <Text fontWeight="600" pt={5}>
-            {ownedOnly ? 'No owned tokens to display' : 'No tokens to display'}
-          </Text>
-        </Flex>
-      </Flex>
+      <CreatorDisplay404 ownedOnly={ownedOnly} />
     );
   }
 
diff --git a/src/components/Creator/index.tsx b/src/components/Creator/index.tsx
index 2b14881b..368e1c87 100644
--- a/src/components/Creator/index.tsx
+++ b/src/components/Creator/index.tsx
@@ -45,6 +45,7 @@ export default function Creator({ minter }: { minter: string }) {
       creatorsCollections[addr] = collections.collections[addr];
       return null;
     });
+
   return (
     <Flex
       flex="1"