Merge pull request 'Add Sigit ID as a Path Param to /verify' (#243) from issue-232 into staging

Reviewed-on: #243
Reviewed-by: enes <enes@noreply.git.nostrdev.com>

src/App.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { useAppSelector } from './hooks/store'
+import { useAppSelector } from './hooks'
 import { Navigate, Route, Routes } from 'react-router-dom'
 import { AuthController } from './controllers'
 import { MainLayout } from './layouts/Main'
@@ -28,9 +28,11 @@ const App = () => {
 
   const handleRootRedirect = () => {
     if (authState.loggedIn) return appPrivateRoutes.homePage
+
     const callbackPathEncoded = btoa(
       window.location.href.split(`${window.location.origin}/#`)[1]
     )
+
     return `${appPublicRoutes.login}?callbackPath=${callbackPathEncoded}`
   }
 

src/components/DisplaySigit/index.tsx

@@ -42,8 +42,7 @@ export const DisplaySigit = ({
     <div className={styles.itemWrapper}>
       {signedStatus === SigitStatus.Complete && (
         <Link
-          to={appPublicRoutes.verify}
-          state={{ meta }}
+          to={`${appPublicRoutes.verify}/${sigitCreateId}`}
           className={styles.insetLink}
         ></Link>
       )}

src/controllers/AuthController.ts

@@ -14,7 +14,6 @@ import {
   compareObjects,
   getAuthToken,
   getRelayMap,
-  getVisitedLink,
   saveAuthToken,
   unixNow
 } from '../utils'
@@ -91,21 +90,33 @@ export class AuthController {
         store.dispatch(setRelayMapAction(relayMap.map))
     }
 
-    const currentLocation = window.location.hash.replace('#', '')
+    /**
+     * This block was added before we started using the `nostr-login` package
+     * At this point it seems it's not needed anymore and it's even blocking the flow (reloading on /verify)
+     * TODO to remove this if app works fine
+     */
+    // const currentLocation = window.location.hash.replace('#', '')
 
-    if (!Object.values(appPrivateRoutes).includes(currentLocation)) {
-      // User did change the location to one of the private routes
-      const visitedLink = getVisitedLink()
-
-      if (visitedLink) {
-        const { pathname, search } = visitedLink
-
-        return Promise.resolve(`${pathname}${search}`)
-      } else {
-        // Navigate user in
-        return Promise.resolve(appPrivateRoutes.homePage)
-      }
-    }
+    // if (!Object.values(appPrivateRoutes).includes(currentLocation)) {
+    //   // Since verify is both public and private route, we don't use the `visitedLink`
+    //   // value for it. Otherwise, when linking to /verify/:id we get redirected
+    //   // to the root `/`
+    //   if (currentLocation.includes(appPublicRoutes.verify)) {
+    //     return Promise.resolve(currentLocation)
+    //   }
+    //
+    //   // User did change the location to one of the private routes
+    //   const visitedLink = getVisitedLink()
+    //
+    //   if (visitedLink) {
+    //     const { pathname, search } = visitedLink
+    //
+    //     return Promise.resolve(`${pathname}${search}`)
+    //   } else {
+    //     // Navigate user in
+    //     return Promise.resolve(appPrivateRoutes.homePage)
+    //   }
+    // }
   }
 
   checkSession() {

src/pages/verify/index.tsx

@@ -26,10 +26,10 @@ import {
   sendNotification
 } from '../../utils'
 import styles from './style.module.scss'
-import { useLocation } from 'react-router-dom'
+import { useLocation, useParams } from 'react-router-dom'
 import axios from 'axios'
 import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
-import { useAppSelector } from '../../hooks/store'
+import { useAppSelector } from '../../hooks'
 import { getLastSignersSig } from '../../utils/sign.ts'
 import { saveAs } from 'file-saver'
 import { Container } from '../../components/Container'
@@ -165,6 +165,9 @@ const SlimPdfView = ({
 
 export const VerifyPage = () => {
   const location = useLocation()
+  const params = useParams()
+
+  const usersAppData = useAppSelector((state) => state.userAppData)
   const usersPubkey = useAppSelector((state) => state.auth.usersPubkey)
 
   const nostrController = NostrController.getInstance()
@@ -176,8 +179,27 @@ export const VerifyPage = () => {
    * uploadedZip will be received from home page when a user uploads a sigit zip wrapper that contains meta.json
    * meta will be received in navigation from create & home page in online mode
    */
-  const { uploadedZip, meta: metaInNavState } = location.state || {}
+  let metaInNavState = location?.state?.meta || undefined
+  const { uploadedZip } = location.state || {}
   const [selectedFile, setSelectedFile] = useState<File | null>(null)
+
+  /**
+   * If `userAppData` is present it means user is logged in and we can extract list of `sigits` from the store.
+   * If ID is present in the URL we search in the `sigits` list
+   * Otherwise sigit is set from the `location.state.meta`
+   */
+  if (usersAppData) {
+    const sigitCreateId = params.id
+
+    if (sigitCreateId) {
+      const sigit = usersAppData.sigits[sigitCreateId]
+
+      if (sigit) {
+        metaInNavState = sigit
+      }
+    }
+  }
+
   useEffect(() => {
     if (uploadedZip) {
       setSelectedFile(uploadedZip)
@@ -185,6 +207,7 @@ export const VerifyPage = () => {
   }, [uploadedZip])
 
   const [meta, setMeta] = useState<Meta>(metaInNavState)
+
   const {
     submittedBy,
     zipUrl,

src/routes/util.tsx

@@ -62,7 +62,7 @@ export const publicRoutes: PublicRouteProps[] = [
     element: <ProfilePage />
   },
   {
-    path: appPublicRoutes.verify,
+    path: `${appPublicRoutes.verify}/:id?`,
     element: <VerifyPage />
   }
 ]