From 7880c802aea6b0830ca52b47b88540b8df5888cc Mon Sep 17 00:00:00 2001
From: Cafe137 <77121044+Cafe137@users.noreply.github.com>
Date: Thu, 27 Jan 2022 16:22:27 +0100
Subject: [PATCH] fix: do not print size and name when meta is unknown (#297)

* fix: do not print zero when size is unknown

* fix: do not print name if it is the same as the hash

* feat: shorten asset name
---
 src/pages/files/AssetPreview.tsx | 13 ++++++++-----
 src/utils/index.ts               |  8 ++++++++
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/pages/files/AssetPreview.tsx b/src/pages/files/AssetPreview.tsx
index 8fd3b64..c83879f 100644
--- a/src/pages/files/AssetPreview.tsx
+++ b/src/pages/files/AssetPreview.tsx
@@ -3,9 +3,10 @@ import { Web } from '@material-ui/icons'
 import { ReactElement } from 'react'
 import { File, Folder } from 'react-feather'
 import { FitImage } from '../../components/FitImage'
+import { shortenText } from '../../utils'
 import { getHumanReadableFileSize } from '../../utils/file'
-import { AssetIcon } from './AssetIcon'
 import { shortenHash } from '../../utils/hash'
+import { AssetIcon } from './AssetIcon'
 
 interface Props {
   previewUri?: string
@@ -37,11 +38,13 @@ export function AssetPreview({ metadata, previewUri }: Props): ReactElement | nu
           )}
           <Box p={2}>
             {metadata?.hash && <Typography>Swarm Hash: {shortenHash(metadata.hash)}</Typography>}
-            <Typography>
-              {metadata?.type === 'folder' ? 'Folder Name' : 'Filename'}: {metadata?.name}
-            </Typography>
+            {metadata?.name && metadata?.name !== metadata?.hash && (
+              <Typography>
+                {metadata?.type === 'folder' ? 'Folder Name' : 'Filename'}: {shortenText(metadata?.name)}
+              </Typography>
+            )}
             <Typography>Kind: {type}</Typography>
-            {metadata?.size && <Typography>Size: {getHumanReadableFileSize(metadata.size)}</Typography>}
+            {metadata?.size ? <Typography>Size: {getHumanReadableFileSize(metadata.size)}</Typography> : null}
           </Box>
         </Grid>
       </Box>
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 3bef651..04f549b 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -192,3 +192,11 @@ export function calculateStampPrice(depth: number, amount: number, currentPrice:
 
   return (amount * 2 ** (depth - 16) * price) / 1e16
 }
+
+export function shortenText(text: string, length = 20, separator = '[…]'): string {
+  if (text.length <= length * 2 + separator.length) {
+    return text
+  }
+
+  return `${text.slice(0, length)}${separator}${text.slice(-length)}`
+}