fix: remove duplicate states and fix default signer
This commit is contained in:
parent
d8d51be603
commit
e05d3e53a2
@ -11,17 +11,16 @@ import styles from './style.module.scss'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { ProfileMetadata, User, UserRole } from '../../types'
|
||||
import { MouseState, PdfPage, DrawnField, DrawTool } from '../../types/drawing'
|
||||
import { truncate } from 'lodash'
|
||||
import { settleAllFullfilfedPromises, hexToNpub, npubToHex } from '../../utils'
|
||||
import { getSigitFile, SigitFile } from '../../utils/file'
|
||||
import { hexToNpub, npubToHex, getProfileUsername } from '../../utils'
|
||||
import { SigitFile } from '../../utils/file'
|
||||
import { getToolboxLabelByMarkType } from '../../utils/mark'
|
||||
import { FileDivider } from '../FileDivider'
|
||||
import { ExtensionFileBox } from '../ExtensionFileBox'
|
||||
import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf'
|
||||
import { useScale } from '../../hooks/useScale'
|
||||
import { AvatarIconButton } from '../UserAvatarIconButton'
|
||||
import { LoadingSpinner } from '../LoadingSpinner'
|
||||
import { UserAvatar } from '../UserAvatar'
|
||||
import _ from 'lodash'
|
||||
|
||||
const DEFAULT_START_SIZE = {
|
||||
width: 140,
|
||||
@ -29,22 +28,32 @@ const DEFAULT_START_SIZE = {
|
||||
} as const
|
||||
|
||||
interface Props {
|
||||
selectedFiles: File[]
|
||||
users: User[]
|
||||
metadata: { [key: string]: ProfileMetadata }
|
||||
onDrawFieldsChange: (sigitFiles: SigitFile[]) => void
|
||||
sigitFiles: SigitFile[]
|
||||
setSigitFiles: React.Dispatch<React.SetStateAction<SigitFile[]>>
|
||||
selectedTool?: DrawTool
|
||||
}
|
||||
|
||||
export const DrawPDFFields = (props: Props) => {
|
||||
const { selectedFiles, selectedTool, onDrawFieldsChange, users } = props
|
||||
const { selectedTool, sigitFiles, setSigitFiles, users } = props
|
||||
|
||||
const signers = users.filter((u) => u.role === UserRole.signer)
|
||||
const defaultSignerNpub = signers.length ? hexToNpub(signers[0].pubkey) : ''
|
||||
const [lastSigner, setLastSigner] = useState(defaultSignerNpub)
|
||||
const { to, from } = useScale()
|
||||
/**
|
||||
* Return first pubkey that is present in the signers list
|
||||
* @param pubkeys
|
||||
* @returns available pubkey or empty string
|
||||
*/
|
||||
const getAvailableSigner = (...pubkeys: string[]) => {
|
||||
const availableSigner: string | undefined = pubkeys.find((pubkey) =>
|
||||
signers.some((s) => s.pubkey === npubToHex(pubkey))
|
||||
)
|
||||
return availableSigner || ''
|
||||
}
|
||||
|
||||
const [sigitFiles, setSigitFiles] = useState<SigitFile[]>([])
|
||||
const [parsingPdf, setIsParsing] = useState<boolean>(false)
|
||||
const { to, from } = useScale()
|
||||
|
||||
const [mouseState, setMouseState] = useState<MouseState>({
|
||||
clicked: false
|
||||
@ -64,33 +73,6 @@ export const DrawPDFFields = (props: Props) => {
|
||||
activeDrawnField?.pageIndex === pageIndex &&
|
||||
activeDrawnField?.drawnFieldIndex === drawnFieldIndex
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedFiles) {
|
||||
/**
|
||||
* Reads the binary files and converts to internal file type
|
||||
* and sets to a state (adds images if it's a PDF)
|
||||
*/
|
||||
const parsePages = async () => {
|
||||
const files = await settleAllFullfilfedPromises(
|
||||
selectedFiles,
|
||||
getSigitFile
|
||||
)
|
||||
|
||||
setSigitFiles(files)
|
||||
}
|
||||
|
||||
setIsParsing(true)
|
||||
|
||||
parsePages().finally(() => {
|
||||
setIsParsing(false)
|
||||
})
|
||||
}
|
||||
}, [selectedFiles])
|
||||
|
||||
useEffect(() => {
|
||||
if (sigitFiles) onDrawFieldsChange(sigitFiles)
|
||||
}, [onDrawFieldsChange, sigitFiles])
|
||||
|
||||
/**
|
||||
* Drawing events
|
||||
*/
|
||||
@ -136,7 +118,7 @@ export const DrawPDFFields = (props: Props) => {
|
||||
top: to(page.width, y),
|
||||
width: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.width,
|
||||
height: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.height,
|
||||
counterpart: lastSigner,
|
||||
counterpart: getAvailableSigner(lastSigner, defaultSignerNpub),
|
||||
type: selectedTool.identifier
|
||||
}
|
||||
|
||||
@ -518,7 +500,7 @@ export const DrawPDFFields = (props: Props) => {
|
||||
<FormControl fullWidth size="small">
|
||||
<InputLabel id="counterparts">Counterpart</InputLabel>
|
||||
<Select
|
||||
value={drawnField.counterpart}
|
||||
value={getAvailableSigner(drawnField.counterpart)}
|
||||
onChange={(event) => {
|
||||
drawnField.counterpart = event.target.value
|
||||
setLastSigner(event.target.value)
|
||||
@ -535,23 +517,11 @@ export const DrawPDFFields = (props: Props) => {
|
||||
>
|
||||
{signers.map((signer, index) => {
|
||||
const npub = hexToNpub(signer.pubkey)
|
||||
let displayValue = truncate(npub, {
|
||||
length: 16
|
||||
})
|
||||
|
||||
const metadata = props.metadata[signer.pubkey]
|
||||
|
||||
if (metadata) {
|
||||
displayValue = truncate(
|
||||
metadata.name ||
|
||||
metadata.display_name ||
|
||||
metadata.username ||
|
||||
npub,
|
||||
{
|
||||
length: 16
|
||||
}
|
||||
)
|
||||
}
|
||||
const displayValue = getProfileUsername(
|
||||
npub,
|
||||
metadata
|
||||
)
|
||||
|
||||
return (
|
||||
<MenuItem key={index} value={npub}>
|
||||
@ -589,24 +559,15 @@ export const DrawPDFFields = (props: Props) => {
|
||||
}
|
||||
|
||||
const renderCounterpartValue = (npub: string) => {
|
||||
let displayValue = truncate(npub, {
|
||||
length: 16
|
||||
})
|
||||
let displayValue = _.truncate(npub, { length: 16 })
|
||||
|
||||
const signer = signers.find((u) => u.pubkey === npubToHex(npub))
|
||||
if (signer) {
|
||||
const metadata = props.metadata[signer.pubkey]
|
||||
if (metadata) {
|
||||
displayValue = truncate(
|
||||
metadata.display_name || metadata.name || npub,
|
||||
{
|
||||
length: 16
|
||||
}
|
||||
)
|
||||
}
|
||||
displayValue = getProfileUsername(npub, metadata)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.counterpartSelectValue}>
|
||||
<AvatarIconButton
|
||||
src={props.metadata[signer.pubkey]?.picture}
|
||||
hexKey={signer.pubkey || undefined}
|
||||
@ -620,21 +581,13 @@ export const DrawPDFFields = (props: Props) => {
|
||||
}}
|
||||
/>
|
||||
{displayValue}
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return displayValue
|
||||
}
|
||||
|
||||
if (parsingPdf) {
|
||||
return <LoadingSpinner variant="small" />
|
||||
}
|
||||
|
||||
if (!sigitFiles.length) {
|
||||
return ''
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="files-wrapper">
|
||||
{sigitFiles.map((file, i) => {
|
||||
@ -653,7 +606,7 @@ export const DrawPDFFields = (props: Props) => {
|
||||
<ExtensionFileBox extension={file.extension} />
|
||||
)}
|
||||
</div>
|
||||
{i < selectedFiles.length - 1 && <FileDivider />}
|
||||
{i < sigitFiles.length - 1 && <FileDivider />}
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
|
||||
@ -39,7 +39,8 @@ import {
|
||||
signEventForMetaFile,
|
||||
updateUsersAppData,
|
||||
uploadToFileStorage,
|
||||
DEFAULT_TOOLBOX
|
||||
DEFAULT_TOOLBOX,
|
||||
settleAllFullfilfedPromises
|
||||
} from '../../utils'
|
||||
import { Container } from '../../components/Container'
|
||||
import fileListStyles from '../../components/FileList/style.module.scss'
|
||||
@ -60,7 +61,8 @@ import {
|
||||
faTrash,
|
||||
faUpload
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
import { SigitFile } from '../../utils/file.ts'
|
||||
import { getSigitFile, SigitFile } from '../../utils/file.ts'
|
||||
import _ from 'lodash'
|
||||
|
||||
export const CreatePage = () => {
|
||||
const navigate = useNavigate()
|
||||
@ -106,6 +108,29 @@ export const CreatePage = () => {
|
||||
{}
|
||||
)
|
||||
const [drawnFiles, setDrawnFiles] = useState<SigitFile[]>([])
|
||||
const [parsingPdf, setIsParsing] = useState<boolean>(false)
|
||||
useEffect(() => {
|
||||
if (selectedFiles) {
|
||||
/**
|
||||
* Reads the binary files and converts to internal file type
|
||||
* and sets to a state (adds images if it's a PDF)
|
||||
*/
|
||||
const parsePages = async () => {
|
||||
const files = await settleAllFullfilfedPromises(
|
||||
selectedFiles,
|
||||
getSigitFile
|
||||
)
|
||||
|
||||
setDrawnFiles(files)
|
||||
}
|
||||
|
||||
setIsParsing(true)
|
||||
|
||||
parsePages().finally(() => {
|
||||
setIsParsing(false)
|
||||
})
|
||||
}
|
||||
}, [selectedFiles])
|
||||
|
||||
const [selectedTool, setSelectedTool] = useState<DrawTool>()
|
||||
|
||||
@ -281,6 +306,19 @@ export const CreatePage = () => {
|
||||
|
||||
const handleRemoveUser = (pubkey: string) => {
|
||||
setUsers((prev) => prev.filter((user) => user.pubkey !== pubkey))
|
||||
|
||||
// Set counterpart to ''
|
||||
const drawnFilesCopy = _.cloneDeep(drawnFiles)
|
||||
drawnFilesCopy.forEach((s) => {
|
||||
s.pages?.forEach((p) => {
|
||||
p.drawnFields.forEach((d) => {
|
||||
if (d.counterpart === hexToNpub(pubkey)) {
|
||||
d.counterpart = ''
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
setDrawnFiles(drawnFilesCopy)
|
||||
}
|
||||
|
||||
/**
|
||||
@ -723,10 +761,6 @@ export const CreatePage = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const onDrawFieldsChange = (sigitFiles: SigitFile[]) => {
|
||||
setDrawnFiles(sigitFiles)
|
||||
}
|
||||
|
||||
if (authUrl) {
|
||||
return (
|
||||
<iframe
|
||||
@ -885,13 +919,17 @@ export const CreatePage = () => {
|
||||
centerIcon={faFile}
|
||||
rightIcon={faToolbox}
|
||||
>
|
||||
<DrawPDFFields
|
||||
metadata={metadata}
|
||||
users={users}
|
||||
selectedFiles={selectedFiles}
|
||||
onDrawFieldsChange={onDrawFieldsChange}
|
||||
selectedTool={selectedTool}
|
||||
/>
|
||||
{parsingPdf ? (
|
||||
<LoadingSpinner variant="small" />
|
||||
) : (
|
||||
<DrawPDFFields
|
||||
users={users}
|
||||
metadata={metadata}
|
||||
selectedTool={selectedTool}
|
||||
sigitFiles={drawnFiles}
|
||||
setSigitFiles={setDrawnFiles}
|
||||
/>
|
||||
)}
|
||||
</StickySideColumns>
|
||||
</Container>
|
||||
</>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user