fix(home-page): sigit file type display now correctly shows multiple file types

src/components/DisplaySigit/index.tsx

@@ -10,7 +10,8 @@ import {
   faCalendar,
   faCopy,
   faEye,
-  faFile
+  faFile,
+  faFileCircleExclamation
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { UserAvatarGroup } from '../UserAvatarGroup'
@@ -20,6 +21,7 @@ import { TooltipChild } from '../TooltipChild'
 import { getExtensionIconLabel } from '../getExtensionIconLabel'
 import { useSigitProfiles } from '../../hooks/useSigitProfiles'
 import { useSigitMeta } from '../../hooks/useSigitMeta'
+import { extractFileExtensions } from '../../utils/file'
 
 type SigitProps = {
   meta: Meta
@@ -27,23 +29,18 @@ type SigitProps = {
 }
 
 export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
-  const {
-    title,
-    createdAt,
-    submittedBy,
-    signers,
-    signedStatus,
-    fileExtensions,
-    isValid
-  } = parsedMeta
+  const { title, createdAt, submittedBy, signers, signedStatus, isValid } =
+    parsedMeta
 
-  const { signersStatus } = useSigitMeta(meta)
+  const { signersStatus, fileHashes } = useSigitMeta(meta)
 
   const profiles = useSigitProfiles([
     ...(submittedBy ? [submittedBy] : []),
     ...signers
   ])
 
+  const { extensions, isSame } = extractFileExtensions(Object.keys(fileHashes))
+
   return (
     <div className={styles.itemWrapper}>
       <Link
@@ -120,17 +117,21 @@ export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
         <span className={styles.iconLabel}>
           <FontAwesomeIcon icon={faEye} /> {signedStatus}
         </span>
-        {fileExtensions.length > 0 ? (
+        {extensions.length > 0 ? (
           <span className={styles.iconLabel}>
-            {fileExtensions.length > 1 ? (
+            {!isSame ? (
               <>
                 <FontAwesomeIcon icon={faFile} /> Multiple File Types
               </>
             ) : (
-              getExtensionIconLabel(fileExtensions[0])
+              getExtensionIconLabel(extensions[0])
             )}
           </span>
-        ) : null}
+        ) : (
+          <>
+            <FontAwesomeIcon icon={faFileCircleExclamation} /> &mdash;
+          </>
+        )}
       </div>
       <div className={styles.itemActions}>
         <Tooltip title="Duplicate" arrow placement="top" disableInteractive>