Add Sigit ID as a Path Param to /verify #243

Open
m wants to merge 3 commits from issue-232 into staging
5 changed files with 57 additions and 22 deletions

View File

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

View File

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

View File

@ -14,7 +14,6 @@ import {
compareObjects, compareObjects,
getAuthToken, getAuthToken,
getRelayMap, getRelayMap,
getVisitedLink,
saveAuthToken, saveAuthToken,
unixNow unixNow
} from '../utils' } from '../utils'
@ -91,21 +90,33 @@ export class AuthController {
store.dispatch(setRelayMapAction(relayMap.map)) 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)) { // if (!Object.values(appPrivateRoutes).includes(currentLocation)) {
// User did change the location to one of the private routes // // Since verify is both public and private route, we don't use the `visitedLink`
const visitedLink = getVisitedLink() // // value for it. Otherwise, when linking to /verify/:id we get redirected
// // to the root `/`
if (visitedLink) { // if (currentLocation.includes(appPublicRoutes.verify)) {
const { pathname, search } = visitedLink // return Promise.resolve(currentLocation)
// }
return Promise.resolve(`${pathname}${search}`) //
} else { // // User did change the location to one of the private routes
// Navigate user in // const visitedLink = getVisitedLink()
return Promise.resolve(appPrivateRoutes.homePage) //
} // if (visitedLink) {
} // const { pathname, search } = visitedLink
//
// return Promise.resolve(`${pathname}${search}`)
// } else {
// // Navigate user in
// return Promise.resolve(appPrivateRoutes.homePage)
// }
// }
} }
checkSession() { checkSession() {

View File

@ -26,10 +26,10 @@ import {
sendNotification sendNotification
} from '../../utils' } from '../../utils'
import styles from './style.module.scss' import styles from './style.module.scss'
import { useLocation } from 'react-router-dom' import { useLocation, useParams } from 'react-router-dom'
import axios from 'axios' import axios from 'axios'
import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts' 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 { getLastSignersSig } from '../../utils/sign.ts'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Container } from '../../components/Container' import { Container } from '../../components/Container'
@ -165,6 +165,9 @@ const SlimPdfView = ({
export const VerifyPage = () => { export const VerifyPage = () => {
const location = useLocation() const location = useLocation()
const params = useParams()
const usersAppData = useAppSelector((state) => state.userAppData)
const usersPubkey = useAppSelector((state) => state.auth.usersPubkey) const usersPubkey = useAppSelector((state) => state.auth.usersPubkey)
const nostrController = NostrController.getInstance() 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 * 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 * 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) 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(() => { useEffect(() => {
if (uploadedZip) { if (uploadedZip) {
setSelectedFile(uploadedZip) setSelectedFile(uploadedZip)
@ -185,6 +207,7 @@ export const VerifyPage = () => {
}, [uploadedZip]) }, [uploadedZip])
const [meta, setMeta] = useState<Meta>(metaInNavState) const [meta, setMeta] = useState<Meta>(metaInNavState)
const { const {
submittedBy, submittedBy,
zipUrl, zipUrl,

View File

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