Add Sigit ID as a path param #195

Merged
b merged 12 commits from issue-171 into staging 2024-10-07 09:16:30 +00:00
4 changed files with 54 additions and 8 deletions
Showing only changes of commit 75a715d002 - Show all commits

View File

@ -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}

View File

@ -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]}
/> />

View File

@ -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
Outdated
Review

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?

  const { arrayBuffer: decryptedArrayBuffer, uploadedZip } = location.state

  let metaInNavState = location.state.meta
  if (usersAppData) {
    const sigitId = params.id

    if (sigitId) {
      metaInNavState = usersAppData.sigits[sigitId]
    }
  }
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? ``` const { arrayBuffer: decryptedArrayBuffer, uploadedZip } = location.state let metaInNavState = location.state.meta if (usersAppData) { const sigitId = params.id if (sigitId) { metaInNavState = usersAppData.sigits[sigitId] } } ```
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

View File

@ -19,6 +19,7 @@ export const appPrivateRoutes = {
homePage: '/', homePage: '/',
create: '/create', create: '/create',
sign: '/sign', sign: '/sign',
m marked this conversation as resolved
Review

Can we use optional segment? Instead of two routes /sign and /sign/:id we can combine it into /sign/:id? .

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 />