fix: routing, removed useEffect

src/components/DisplaySigit/index.tsx

@@ -50,7 +50,6 @@ export const DisplaySigit = ({ meta, parsedMeta, sigitKey }: SigitProps) => {
             ? appPublicRoutes.verify
             : `${appPrivateRoutes.sign}/${sigitKey}`
         }
-        state={{ meta }}
         className={styles.insetLink}
       ></Link>
       <p className={`line-clamp-2 ${styles.title}`}>{title}</p>

src/pages/sign/index.tsx

@@ -65,6 +65,8 @@ export const SignPage = () => {
   const location = useLocation()
   const params = useParams()
 
+  const usersAppData = useAppSelector((state) => state.userAppData)
+
   /**
    * Received from `location.state`
    *
@@ -72,11 +74,27 @@ export const SignPage = () => {
    * 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 [metaInNavState, setMetaInNavState] = useState<Meta | undefined>()
-  const [decryptedArrayBuffer, setDecryptedArrayBuffer] = useState<
-    ArrayBuffer | undefined
-  >()
-  const [uploadedZip, setUploadedZip] = useState<File | undefined>()
+  const {
+    meta: metaInNavState,
+    arrayBuffer: decryptedArrayBuffer,
+    uploadedZip
+  } = location.state || {
+    meta: undefined,
+    arrayBuffer: undefined,
+    uploadedZip: undefined
+  }
+
+  if (usersAppData) {
+    const sigitId = params.id
+
+    if (sigitId) {
+      const sigit = usersAppData.sigits[sigitId]
+
+      if (sigit) {
+        metaInNavState = sigit
+      }
+    }
+  }
 
   const [displayInput, setDisplayInput] = useState(false)
 
@@ -119,41 +137,6 @@ 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,7 +19,6 @@ export const appPrivateRoutes = {
   homePage: '/',
   create: '/create',
   sign: '/sign',
-  signId: '/sign/:id',
   settings: '/settings',
   profileSettings: '/settings/profile/:npub',
   cacheSettings: '/settings/cache',
@@ -130,11 +129,7 @@ export const privateRoutes = [
     element: <CreatePage />
   },
   {
-    path: appPrivateRoutes.sign,
-    element: <SignPage />
-  },
-  {
-    path: appPrivateRoutes.signId,
+    path: `${appPrivateRoutes.sign}/:id?`,
     element: <SignPage />
   },
   {