refactor: pass meta to UserDetails instead of individual props

src/components/UsersDetails.tsx/index.tsx

@@ -10,7 +10,7 @@ import {
   SignStatus
 } from '../../utils'
 import { UserAvatar } from '../UserAvatar'
-import { FlatMeta } from '../../hooks/useSigitMeta'
+import { useSigitMeta } from '../../hooks/useSigitMeta'
 import { UserAvatarGroup } from '../UserAvatarGroup'
 
 import styles from './style.module.scss'
@@ -28,31 +28,24 @@ import { useSelector } from 'react-redux'
 import { State } from '../../store/rootReducer'
 import { TooltipChild } from '../TooltipChild'
 import { DisplaySigner } from '../DisplaySigner'
+import { Meta } from '../../types'
 
-type UsersDetailsProps = Pick<
+interface UsersDetailsProps {
-  FlatMeta,
+  meta: Meta
-  | 'submittedBy'
+}
-  | 'signers'
-  | 'viewers'
-  | 'fileHashes'
-  | 'parsedSignatureEvents'
-  | 'createdAt'
-  | 'signedStatus'
-  | 'completedAt'
-  | 'signersStatus'
->
 
-export const UsersDetails = ({
+export const UsersDetails = ({ meta }: UsersDetailsProps) => {
+  const {
     submittedBy,
     signers,
     viewers,
     fileHashes,
-  parsedSignatureEvents,
+    signersStatus,
     createdAt,
-  signedStatus,
     completedAt,
-  signersStatus
+    parsedSignatureEvents,
-}: UsersDetailsProps) => {
+    signedStatus
+  } = useSigitMeta(meta)
   const { usersPubkey } = useSelector((state: State) => state.auth)
   const profiles = useSigitProfiles([
     ...(submittedBy ? [submittedBy] : []),

src/pages/verify/index.tsx

@@ -54,19 +54,8 @@ export const VerifyPage = () => {
    */
   const { uploadedZip, meta } = location.state || {}
 
-  const {
+  const { submittedBy, zipUrl, encryptionKey, signers, viewers, fileHashes } =
-    submittedBy,
+    useSigitMeta(meta)
-    zipUrl,
-    encryptionKey,
-    signers,
-    viewers,
-    fileHashes,
-    parsedSignatureEvents,
-    createdAt,
-    signedStatus,
-    completedAt,
-    signersStatus
-  } = useSigitMeta(meta)
 
   const profiles = useSigitProfiles([
     ...(submittedBy ? [submittedBy] : []),
@@ -470,19 +459,7 @@ export const VerifyPage = () => {
                 </Box>
               </>
             }
-            right={
+            right={<UsersDetails meta={meta} />}
-              <UsersDetails
-                submittedBy={submittedBy}
-                signers={signers}
-                viewers={viewers}
-                fileHashes={fileHashes}
-                parsedSignatureEvents={parsedSignatureEvents}
-                createdAt={createdAt}
-                signedStatus={signedStatus}
-                completedAt={completedAt}
-                signersStatus={signersStatus}
-              />
-            }
           />
         )}
       </Container>