fix: no file returns empty for file display

Author: greenlucid

src/components/display-selector.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Typography, Avatar, Checkbox, Icon } from 'antd'
+import { Typography, Avatar, Checkbox } from 'antd'
 import styled from 'styled-components/macro'
 import PropTypes from 'prop-types'
 import GTCRAddress from './gtcr-address'
@@ -9,6 +9,7 @@ import { ZERO_ADDRESS } from '../utils/string'
 import RichAddress from './rich-address'
 import ETHAddress from './eth-address'
 import LongText from './long-text'
+import FileDisplay from './file-display'
 
 const pohRichAddress = 'eip155:1:0xc5e9ddebb09cd64dfacab4011a0d5cedaf7c9bdb'
 
@@ -37,32 +38,7 @@ const DisplaySelector = ({ type, value, linkImage, allowedFileTypes }) => {
     case ItemTypes.LONG_TEXT:
       return <LongText value={value} />
     case ItemTypes.FILE: {
-      if (!value)
-        return (
-          <a target="_blank" rel="noopener noreferrer" href="/#">
-            View File <Icon type="paper-clip" />
-          </a>
-        )
-
-      if (!allowedFileTypes) return 'No allowed file types specified'
-
-      const allowedFileTypesArr = allowedFileTypes.split(' ')
-      if (allowedFileTypesArr.length === 0)
-        return 'No allowed file types specified'
-
-      const fileExtension = value.slice(value.lastIndexOf('.') + 1)
-      if (!allowedFileTypesArr.includes(fileExtension))
-        return 'Forbidden file type'
-
-      return (
-        <a
-          href={`${process.env.REACT_APP_IPFS_GATEWAY}${value || ''}`}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          View File <Icon type="paper-clip" />
-        </a>
-      )
+      return <FileDisplay value={value} allowedFileTypes={allowedFileTypes} />
     }
     case ItemTypes.IMAGE:
       return value ? (

src/components/file-display.js

@@ -0,0 +1,26 @@
+import { Icon } from 'antd'
+import React from 'react'
+
+const FileDisplay = ({ value, allowedFileTypes }) => {
+  if (!value) return <span style={{ color: 'gray' }}>empty</span>
+
+  if (!allowedFileTypes) return 'No allowed file types specified'
+
+  const allowedFileTypesArr = allowedFileTypes.split(' ')
+  if (allowedFileTypesArr.length === 0) return 'No allowed file types specified'
+
+  const fileExtension = value.slice(value.lastIndexOf('.') + 1)
+  if (!allowedFileTypesArr.includes(fileExtension)) return 'Forbidden file type'
+
+  return (
+    <a
+      href={`${process.env.REACT_APP_IPFS_GATEWAY}${value || ''}`}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      View File <Icon type="paper-clip" />
+    </a>
+  )
+}
+
+export default FileDisplay