cleanup contentType in one central place, add more manual replacements

client/src/components/templates/Asset/AssetFile.module.scss

@@ -54,6 +54,12 @@
         }
     }
 
+    .empty {
+        font-size: $font-size-mini;
+        font-weight: $font-weight-base;
+        opacity: .75;
+    }
+
     // move spinner a bit up
     + div {
         margin-top: $spacer / 2;

client/src/components/templates/Asset/AssetFile.tsx

@@ -6,6 +6,7 @@ import Spinner from '../../atoms/Spinner'
 import { User } from '../../../context'
 import styles from './AssetFile.module.scss'
 import ReactGA from 'react-ga'
+import cleanupContentType from '../../../utils/cleanupContentType'
 
 export const messages = {
     start: 'Decrypting file URL...',
@@ -96,19 +97,27 @@ export default class AssetFile extends PureComponent<
         const { ddo, file } = this.props
         const { isLoading, error, step } = this.state
         const { isLogged, isOceanNetwork } = this.context
-        const { index } = file
+        const { index, contentType, contentLength } = file
 
         return (
             <div className={styles.fileWrap}>
                 <ul key={index} className={styles.file}>
+                    {contentType || contentLength ? (
+                        <>
                             <li>
-                        {file.contentType && file.contentType.split('/')[1]}
+                                {contentType && cleanupContentType(contentType)}
                             </li>
                             <li>
-                        {file.contentLength && filesize(file.contentLength)}
+                                {contentLength && contentLength > 0
+                                    ? filesize(contentLength)
+                                    : ''}
                             </li>
-                    {/* <li>{file.encoding}</li> */}
-                    {/* <li>{file.compression}</li> */}
+                            {/* <li>{encoding}</li> */}
+                            {/* <li>{compression}</li> */}
+                        </>
+                    ) : (
+                        <li className={styles.empty}>No file info available</li>
+                    )}
                 </ul>
 
                 {isLoading ? (

client/src/routes/Publish/Files/index.tsx

@@ -7,6 +7,7 @@ import Item from './Item'
 import styles from './index.module.scss'
 
 import { serviceHost, servicePort, serviceScheme } from '../../../config'
+import cleanupContentType from '../../../utils/cleanupContentType'
 
 interface File {
     url: string
@@ -38,32 +39,6 @@ interface FilesStates {
     isFormShown: boolean
 }
 
-export const getFileCompression = async (contentType: string) => {
-    // TODO: add all the possible archive & compression MIME types
-    if (
-        contentType === 'application/zip' ||
-        contentType === 'application/gzip' ||
-        contentType === 'application/x-lzma' ||
-        contentType === 'application/x-xz' ||
-        contentType === 'application/x-tar' ||
-        contentType === 'application/x-gtar' ||
-        contentType === 'application/x-bzip2' ||
-        contentType === 'application/x-7z-compressed' ||
-        contentType === 'application/x-rar-compressed' ||
-        contentType === 'application/x-apple-diskimage'
-    ) {
-        const contentTypeSplit = contentType.split('/')
-
-        if (contentTypeSplit[1].includes('x-')) {
-            return contentTypeSplit[1].replace('x-', '')
-        }
-
-        return contentTypeSplit[1]
-    } else {
-        return 'none'
-    }
-}
-
 export default class Files extends PureComponent<FilesProps, FilesStates> {
     public state: FilesStates = {
         isFormShown: false
@@ -106,7 +81,7 @@ export default class Files extends PureComponent<FilesProps, FilesStates> {
             res = await response.json()
             file.contentLength = res.result.contentLength
             file.contentType = res.result.contentType
-            file.compression = await getFileCompression(res.result.contentType)
+            file.compression = await cleanupContentType(res.result.contentType)
             file.found = res.result.found
         } catch (error) {
             // error

client/src/utils/cleanupContentType.ts

@@ -0,0 +1,41 @@
+const cleanupContentType = (contentType: string) => {
+    // strip away the 'application/' part
+    const contentTypeSplit = contentType.split('/')[1]
+
+    let contentTypeCleaned
+
+    // TODO: add all the possible archive & compression MIME types
+    if (
+        contentType === 'application/x-lzma' ||
+        contentType === 'application/x-xz' ||
+        contentType === 'application/x-tar' ||
+        contentType === 'application/x-gtar' ||
+        contentType === 'application/x-bzip2' ||
+        contentType === 'application/x-gzip' ||
+        contentType === 'application/x-7z-compressed' ||
+        contentType === 'application/x-rar-compressed' ||
+        contentType === 'application/x-zip-compressed' ||
+        contentType === 'application/x-apple-diskimage'
+    ) {
+        contentTypeCleaned = contentTypeSplit
+            .replace('x-', '')
+            .replace('-compressed', '')
+    } else {
+        contentTypeCleaned = contentTypeSplit
+    }
+
+    // Manual replacements
+    contentTypeCleaned = contentTypeCleaned
+        .replace(
+            'vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+            'xlsx'
+        )
+        .replace('vnd.ms-excel', 'xls')
+        .replace('apple-diskimage', 'dmg')
+        .replace('octet-stream', 'Binary')
+        .replace('svg+xml', 'svg')
+
+    return contentTypeCleaned
+}
+
+export default cleanupContentType