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 52 additions and 19 deletions

View File

@ -22,11 +22,16 @@ import { useSigitMeta } from '../../hooks/useSigitMeta'
import { extractFileExtensions } from '../../utils/file' import { extractFileExtensions } from '../../utils/file'
type SigitProps = { type SigitProps = {
sigitCreateId: string
meta: Meta meta: Meta
parsedMeta: SigitCardDisplayInfo parsedMeta: SigitCardDisplayInfo
} }
export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => { export const DisplaySigit = ({
meta,
parsedMeta,
sigitCreateId: sigitCreateId
}: SigitProps) => {
const { title, createdAt, submittedBy, signers, signedStatus, isValid } = const { title, createdAt, submittedBy, signers, signedStatus, isValid } =
parsedMeta parsedMeta
@ -35,15 +40,19 @@ export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
return ( return (
<div className={styles.itemWrapper}> <div className={styles.itemWrapper}>
{signedStatus === SigitStatus.Complete && (
<Link <Link
to={ to={appPublicRoutes.verify}
signedStatus === SigitStatus.Complete
? appPublicRoutes.verify
: appPrivateRoutes.sign
}
state={{ meta }} state={{ meta }}
className={styles.insetLink} className={styles.insetLink}
></Link> ></Link>
)}
{signedStatus !== SigitStatus.Complete && (
<Link
to={`${appPrivateRoutes.sign}/${sigitCreateId}`}
className={styles.insetLink}
></Link>
)}
<p className={`line-clamp-2 ${styles.title}`}>{title}</p> <p className={`line-clamp-2 ${styles.title}`}>{title}</p>
<div className={styles.users}> <div className={styles.users}>
{submittedBy && ( {submittedBy && (

View File

@ -257,6 +257,7 @@ export const HomePage = () => {
.map((key) => ( .map((key) => (
<DisplaySigit <DisplaySigit
key={`sigit-${key}`} key={`sigit-${key}`}
sigitCreateId={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'
@ -54,6 +54,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,
@ -63,17 +64,39 @@ enum SignedStatus {
export const SignPage = () => { export const SignPage = () => {
const navigate = useNavigate() const navigate = useNavigate()
const location = useLocation() const location = useLocation()
const params = useParams()
const usersAppData = useAppSelector((state) => state.userAppData)
/** /**
* 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 (decryptedArrayBuffer) will be received in navigation from create page in offline mode
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 will be received in navigation from create & home page in online mode * meta (metaInNavState) will be received in navigation from create & home page in online mode
*/ */
const { let metaInNavState = location?.state?.meta || undefined
meta: metaInNavState, const { arrayBuffer: decryptedArrayBuffer, uploadedZip } = location.state || {
arrayBuffer: decryptedArrayBuffer, decryptedArrayBuffer: undefined,
uploadedZip uploadedZip: undefined
} = location.state || {} }
/**
m marked this conversation as resolved Outdated
Outdated
Review

sigit id - what is this? should be defined

sigit id - what is this? should be defined
* If userAppData (redux) is available, and we have the route param (sigit id)
* which is actually a `createEventId`, we will fetch a `sigit`
* based on the provided route ID and set fetched `sigit` to the `metaInNavState`
*/
if (usersAppData) {
const sigitCreateId = params.id
if (sigitCreateId) {
const sigit = usersAppData.sigits[sigitCreateId]
if (sigit) {
metaInNavState = sigit
}
}
}
const [displayInput, setDisplayInput] = useState(false) const [displayInput, setDisplayInput] = useState(false)

View File

@ -129,7 +129,7 @@ export const privateRoutes = [
element: <CreatePage /> element: <CreatePage />
}, },
{ {
path: appPrivateRoutes.sign, path: `${appPrivateRoutes.sign}/:id?`,
element: <SignPage /> element: <SignPage />
}, },
{ {