Add Sigit ID as a path param #195
@ -24,11 +24,12 @@ import { useSigitMeta } from '../../hooks/useSigitMeta'
|
|||||||
import { extractFileExtensions } from '../../utils/file'
|
import { extractFileExtensions } from '../../utils/file'
|
||||||
|
|
||||||
type SigitProps = {
|
type SigitProps = {
|
||||||
|
sigitKey: string
|
||||||
meta: Meta
|
meta: Meta
|
||||||
parsedMeta: SigitCardDisplayInfo
|
parsedMeta: SigitCardDisplayInfo
|
||||||
}
|
}
|
||||||
|
|
||||||
export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
|
export const DisplaySigit = ({ meta, parsedMeta, sigitKey }: SigitProps) => {
|
||||||
const { title, createdAt, submittedBy, signers, signedStatus, isValid } =
|
const { title, createdAt, submittedBy, signers, signedStatus, isValid } =
|
||||||
parsedMeta
|
parsedMeta
|
||||||
|
|
||||||
@ -47,7 +48,7 @@ export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
|
|||||||
to={
|
to={
|
||||||
signedStatus === SigitStatus.Complete
|
signedStatus === SigitStatus.Complete
|
||||||
? appPublicRoutes.verify
|
? appPublicRoutes.verify
|
||||||
: appPrivateRoutes.sign
|
: `${appPrivateRoutes.sign}/${sigitKey}`
|
||||||
}
|
}
|
||||||
state={{ meta }}
|
state={{ meta }}
|
||||||
className={styles.insetLink}
|
className={styles.insetLink}
|
||||||
|
@ -257,6 +257,7 @@ export const HomePage = () => {
|
|||||||
.map((key) => (
|
.map((key) => (
|
||||||
<DisplaySigit
|
<DisplaySigit
|
||||||
key={`sigit-${key}`}
|
key={`sigit-${key}`}
|
||||||
|
sigitKey={key}
|
||||||
parsedMeta={parsedSigits[key]}
|
parsedMeta={parsedSigits[key]}
|
||||||
meta={sigits[key]}
|
meta={sigits[key]}
|
||||||
/>
|
/>
|
||||||
|
@ -7,7 +7,7 @@ import { MuiFileInput } from 'mui-file-input'
|
|||||||
import { Event, verifyEvent } from 'nostr-tools'
|
import { Event, verifyEvent } from 'nostr-tools'
|
||||||
import { useCallback, useEffect, useState } from 'react'
|
import { useCallback, useEffect, useState } from 'react'
|
||||||
import { useSelector } from 'react-redux'
|
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 { toast } from 'react-toastify'
|
||||||
import { LoadingSpinner } from '../../components/LoadingSpinner'
|
import { LoadingSpinner } from '../../components/LoadingSpinner'
|
||||||
import { NostrController } from '../../controllers'
|
import { NostrController } from '../../controllers'
|
||||||
@ -53,6 +53,7 @@ import {
|
|||||||
SigitFile
|
SigitFile
|
||||||
} from '../../utils/file.ts'
|
} from '../../utils/file.ts'
|
||||||
import { ARRAY_BUFFER, DEFLATE } from '../../utils/const.ts'
|
import { ARRAY_BUFFER, DEFLATE } from '../../utils/const.ts'
|
||||||
|
import { useAppSelector } from '../../hooks/store.ts'
|
||||||
enum SignedStatus {
|
enum SignedStatus {
|
||||||
Fully_Signed,
|
Fully_Signed,
|
||||||
User_Is_Next_Signer,
|
User_Is_Next_Signer,
|
||||||
@ -62,17 +63,20 @@ enum SignedStatus {
|
|||||||
export const SignPage = () => {
|
export const SignPage = () => {
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
const location = useLocation()
|
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
|
* 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
|
* 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
|
* meta will be received in navigation from create & home page in online mode
|
||||||
*/
|
*/
|
||||||
const {
|
const [metaInNavState, setMetaInNavState] = useState<Meta | undefined>()
|
||||||
m marked this conversation as resolved
Outdated
|
|||||||
meta: metaInNavState,
|
const [decryptedArrayBuffer, setDecryptedArrayBuffer] = useState<
|
||||||
arrayBuffer: decryptedArrayBuffer,
|
ArrayBuffer | undefined
|
||||||
uploadedZip
|
>()
|
||||||
} = location.state || {}
|
const [uploadedZip, setUploadedZip] = useState<File | undefined>()
|
||||||
|
|
||||||
const [displayInput, setDisplayInput] = useState(false)
|
const [displayInput, setDisplayInput] = useState(false)
|
||||||
|
|
||||||
@ -115,6 +119,41 @@ export const SignPage = () => {
|
|||||||
const [isMarksCompleted, setIsMarksCompleted] = useState(false)
|
const [isMarksCompleted, setIsMarksCompleted] = useState(false)
|
||||||
const [otherUserMarks, setOtherUserMarks] = useState<Mark[]>([])
|
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(() => {
|
useEffect(() => {
|
||||||
if (signers.length > 0) {
|
if (signers.length > 0) {
|
||||||
// check if all signers have signed then its fully signed
|
// check if all signers have signed then its fully signed
|
||||||
|
@ -19,6 +19,7 @@ export const appPrivateRoutes = {
|
|||||||
homePage: '/',
|
homePage: '/',
|
||||||
create: '/create',
|
create: '/create',
|
||||||
sign: '/sign',
|
sign: '/sign',
|
||||||
m marked this conversation as resolved
enes
commented
Can we use optional segment? Instead of two routes Can we use optional segment? Instead of two routes `/sign` and `/sign/:id` we can combine it into `/sign/:id?` .
|
|||||||
|
signId: '/sign/:id',
|
||||||
settings: '/settings',
|
settings: '/settings',
|
||||||
profileSettings: '/settings/profile/:npub',
|
profileSettings: '/settings/profile/:npub',
|
||||||
cacheSettings: '/settings/cache',
|
cacheSettings: '/settings/cache',
|
||||||
@ -132,6 +133,10 @@ export const privateRoutes = [
|
|||||||
path: appPrivateRoutes.sign,
|
path: appPrivateRoutes.sign,
|
||||||
element: <SignPage />
|
element: <SignPage />
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: appPrivateRoutes.signId,
|
||||||
|
element: <SignPage />
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: appPrivateRoutes.settings,
|
path: appPrivateRoutes.settings,
|
||||||
element: <SettingsPage />
|
element: <SettingsPage />
|
||||||
|
Loading…
Reference in New Issue
Block a user
We should just replace the value of
metaInNavState
without having states.We can just move it out of the destructuring and modify it if needed? Something like?