feat: Add Sigit ID as a path param

src/components/DisplaySigit/index.tsx

@@ -24,11 +24,12 @@ import { useSigitMeta } from '../../hooks/useSigitMeta'
 import { extractFileExtensions } from '../../utils/file'
 
 type SigitProps = {
+  sigitKey: string
   meta: Meta
   parsedMeta: SigitCardDisplayInfo
 }
 
-export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
+export const DisplaySigit = ({ meta, parsedMeta, sigitKey }: SigitProps) => {
   const { title, createdAt, submittedBy, signers, signedStatus, isValid } =
     parsedMeta
 
@@ -47,7 +48,7 @@ export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
         to={
           signedStatus === SigitStatus.Complete
             ? appPublicRoutes.verify
-            : appPrivateRoutes.sign
+            : `${appPrivateRoutes.sign}/${sigitKey}`
         }
         state={{ meta }}
         className={styles.insetLink}

src/pages/home/index.tsx

@@ -257,6 +257,7 @@ export const HomePage = () => {
             .map((key) => (
               <DisplaySigit
                 key={`sigit-${key}`}
+                sigitKey={key}
                 parsedMeta={parsedSigits[key]}
                 meta={sigits[key]}
               />

src/pages/sign/index.tsx

@@ -7,7 +7,7 @@ import { MuiFileInput } from 'mui-file-input'
 import { Event, verifyEvent } from 'nostr-tools'
 import { useCallback, useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
 import { NostrController } from '../../controllers'
@@ -53,6 +53,7 @@ import {
   SigitFile
 } from '../../utils/file.ts'
 import { ARRAY_BUFFER, DEFLATE } from '../../utils/const.ts'
+import { useAppSelector } from '../../hooks/store.ts'
 enum SignedStatus {
   Fully_Signed,
   User_Is_Next_Signer,
@@ -62,17 +63,20 @@ enum SignedStatus {
 export const SignPage = () => {
   const navigate = useNavigate()
   const location = useLocation()
+  const params = useParams()
 
   /**
+   * Received from `location.state`
+   *
    * uploadedZip will be received from home page when a user uploads a sigit zip wrapper that contains keys.json
    * arrayBuffer will be received in navigation from create page in offline mode
    * meta will be received in navigation from create & home page in online mode
    */
-  const {
+  const [metaInNavState, setMetaInNavState] = useState<Meta | undefined>()
-    meta: metaInNavState,
+  const [decryptedArrayBuffer, setDecryptedArrayBuffer] = useState<
-    arrayBuffer: decryptedArrayBuffer,
+    ArrayBuffer | undefined
-    uploadedZip
+  >()
-  } = location.state || {}
+  const [uploadedZip, setUploadedZip] = useState<File | undefined>()
 
   const [displayInput, setDisplayInput] = useState(false)
 
@@ -115,6 +119,41 @@ export const SignPage = () => {
   const [isMarksCompleted, setIsMarksCompleted] = useState(false)
   const [otherUserMarks, setOtherUserMarks] = useState<Mark[]>([])
 
+  const usersAppData = useAppSelector((state) => state.userAppData)
+
+  /**
+   * When location state changes, update the states in the component
+   * If sigit id is found in the URL PARAM we will set metaInNavState manually
+   * after we do the fetching based on the ID
+   */
+  useEffect(() => {
+    if (location.state) {
+      const { meta, arrayBuffer, uploadedZip } = location.state
+
+      setMetaInNavState(meta)
+      setDecryptedArrayBuffer(arrayBuffer)
+      setUploadedZip(uploadedZip)
+    }
+  }, [location.state])
+
+  useEffect(() => {
+    // If meta in nav state is populated we will not try to fetch sigit details
+    // from the redux store
+    if (metaInNavState) return
+
+    if (usersAppData) {
+      const sigitId = params.id
+
+      if (sigitId) {
+        const sigit = usersAppData.sigits[sigitId]
+
+        if (sigit) {
+          setMetaInNavState(sigit)
+        }
+      }
+    }
+  }, [usersAppData, metaInNavState, params.id])
+
   useEffect(() => {
     if (signers.length > 0) {
       // check if all signers have signed then its fully signed

src/routes/index.tsx

@@ -19,6 +19,7 @@ export const appPrivateRoutes = {
   homePage: '/',
   create: '/create',
   sign: '/sign',
+  signId: '/sign/:id',
   settings: '/settings',
   profileSettings: '/settings/profile/:npub',
   cacheSettings: '/settings/cache',
@@ -132,6 +133,10 @@ export const privateRoutes = [
     path: appPrivateRoutes.sign,
     element: <SignPage />
   },
+  {
+    path: appPrivateRoutes.signId,
+    element: <SignPage />
+  },
   {
     path: appPrivateRoutes.settings,
     element: <SettingsPage />