Merge pull request 'fix: displays complete marks from other users' (#156) from issue-155 into staging
All checks were successful
Release to Staging / build_and_release (push) Successful in 1m11s

Reviewed-on: #156
Reviewed-by: enes <enes@noreply.git.nostrdev.com>
This commit is contained in:
eugene 2024-08-21 07:32:14 +00:00
commit 7bb83695c9
7 changed files with 73 additions and 22 deletions

View File

@ -1,13 +1,14 @@
import { PdfFile } from '../../types/drawing.ts'
import { CurrentUserMark } from '../../types/mark.ts'
import { CurrentUserMark, Mark } from '../../types/mark.ts'
import PdfPageItem from './PdfPageItem.tsx'
interface PdfItemProps {
pdfFile: PdfFile
currentUserMarks: CurrentUserMark[]
handleMarkClick: (id: number) => void
selectedMarkValue: string
otherUserMarks: Mark[]
pdfFile: PdfFile
selectedMark: CurrentUserMark | null
selectedMarkValue: string
}
/**
@ -18,7 +19,8 @@ const PdfItem = ({
currentUserMarks,
handleMarkClick,
selectedMarkValue,
selectedMark
selectedMark,
otherUserMarks
}: PdfItemProps) => {
const filterByPage = (
marks: CurrentUserMark[],
@ -26,6 +28,9 @@ const PdfItem = ({
): CurrentUserMark[] => {
return marks.filter((m) => m.mark.location.page === page)
}
const filterMarksByPage = (marks: Mark[], page: number): Mark[] => {
return marks.filter((mark) => mark.location.page === page)
}
return pdfFile.pages.map((page, i) => {
return (
<PdfPageItem
@ -35,6 +40,7 @@ const PdfItem = ({
handleMarkClick={handleMarkClick}
selectedMarkValue={selectedMarkValue}
selectedMark={selectedMark}
otherUserMarks={filterMarksByPage(otherUserMarks, i)}
/>
)
})

View File

@ -18,13 +18,14 @@ import { UsersDetails } from '../UsersDetails.tsx'
import { Meta } from '../../types'
interface PdfMarkingProps {
files: CurrentUserFile[]
currentUserMarks: CurrentUserMark[]
setIsReadyToSign: (isReadyToSign: boolean) => void
setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void
setUpdatedMarks: (markToUpdate: Mark) => void
files: CurrentUserFile[]
handleDownload: () => void
meta: Meta | null
otherUserMarks: Mark[]
setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void
setIsReadyToSign: (isReadyToSign: boolean) => void
setUpdatedMarks: (markToUpdate: Mark) => void
}
/**
@ -41,7 +42,8 @@ const PdfMarking = (props: PdfMarkingProps) => {
setCurrentUserMarks,
setUpdatedMarks,
handleDownload,
meta
meta,
otherUserMarks
} = props
const [selectedMark, setSelectedMark] = useState<CurrentUserMark | null>(null)
const [selectedMarkValue, setSelectedMarkValue] = useState<string>('')
@ -142,6 +144,7 @@ const PdfMarking = (props: PdfMarkingProps) => {
selectedMarkValue={selectedMarkValue}
selectedMark={selectedMark}
currentUserMarks={currentUserMarks}
otherUserMarks={otherUserMarks}
/>
</div>
)}

View File

@ -1,14 +1,17 @@
import styles from '../DrawPDFFields/style.module.scss'
import { PdfPage } from '../../types/drawing.ts'
import { CurrentUserMark } from '../../types/mark.ts'
import { CurrentUserMark, Mark } from '../../types/mark.ts'
import PdfMarkItem from './PdfMarkItem.tsx'
import { useEffect, useRef } from 'react'
import pdfViewStyles from './style.module.scss'
import { inPx } from '../../utils/pdf.ts'
interface PdfPageProps {
page: PdfPage
currentUserMarks: CurrentUserMark[]
handleMarkClick: (id: number) => void
selectedMarkValue: string
otherUserMarks: Mark[]
page: PdfPage
selectedMark: CurrentUserMark | null
selectedMarkValue: string
}
/**
@ -19,7 +22,8 @@ const PdfPageItem = ({
currentUserMarks,
handleMarkClick,
selectedMarkValue,
selectedMark
selectedMark,
otherUserMarks
}: PdfPageProps) => {
useEffect(() => {
if (selectedMark !== null && !!markRefs.current[selectedMark.id]) {
@ -49,6 +53,20 @@ const PdfPageItem = ({
/>
</div>
))}
{otherUserMarks.map((m, i) => (
<div
key={i}
className={pdfViewStyles.otherUserMarksDisplay}
style={{
left: inPx(m.location.left),
top: inPx(m.location.top),
width: inPx(m.location.width),
height: inPx(m.location.height)
}}
>
{m.value}
</div>
))}
</div>
)
}

View File

@ -1,16 +1,17 @@
import { Divider } from '@mui/material'
import PdfItem from './PdfItem.tsx'
import { CurrentUserMark } from '../../types/mark.ts'
import { CurrentUserMark, Mark } from '../../types/mark.ts'
import { CurrentUserFile } from '../../types/file.ts'
import { useEffect, useRef } from 'react'
interface PdfViewProps {
files: CurrentUserFile[]
currentUserMarks: CurrentUserMark[]
handleMarkClick: (id: number) => void
selectedMarkValue: string
selectedMark: CurrentUserMark | null
currentFile: CurrentUserFile | null
currentUserMarks: CurrentUserMark[]
files: CurrentUserFile[]
handleMarkClick: (id: number) => void
otherUserMarks: Mark[]
selectedMark: CurrentUserMark | null
selectedMarkValue: string
}
/**
@ -22,7 +23,8 @@ const PdfView = ({
handleMarkClick,
selectedMarkValue,
selectedMark,
currentFile
currentFile,
otherUserMarks
}: PdfViewProps) => {
const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
useEffect(() => {
@ -41,6 +43,9 @@ const PdfView = ({
(currentUserMark) => currentUserMark.mark.pdfFileHash === hash
)
}
const filterMarksByFile = (marks: Mark[], hash: string): Mark[] => {
return marks.filter((mark) => mark.pdfFileHash === hash)
}
const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean =>
index !== files.length - 1
return (
@ -60,6 +65,7 @@ const PdfView = ({
selectedMark={selectedMark}
handleMarkClick={handleMarkClick}
selectedMarkValue={selectedMarkValue}
otherUserMarks={filterMarksByFile(otherUserMarks, hash)}
/>
{isNotLastPdfFile(index, arr) && <Divider>File Separator</Divider>}
</div>

View File

@ -29,3 +29,11 @@
height: 100%;
gap: 10px;
}
.otherUserMarksDisplay {
position: absolute;
z-index: 50;
display: flex;
justify-content: center;
align-items: center;
}

View File

@ -32,7 +32,8 @@ import {
readContentOfZipEntry,
sendNotification,
signEventForMetaFile,
updateUsersAppData
updateUsersAppData,
findOtherUserMarks
} from '../../utils'
import { Container } from '../../components/Container'
import { DisplayMeta } from './internal/displayMeta'
@ -110,6 +111,7 @@ export const SignPage = () => {
[]
)
const [isReadyToSign, setIsReadyToSign] = useState(false)
const [otherUserMarks, setOtherUserMarks] = useState<Mark[]>([])
useEffect(() => {
if (signers.length > 0) {
@ -209,6 +211,8 @@ export const SignPage = () => {
)
const signedMarks = extractMarksFromSignedMeta(meta)
const currentUserMarks = getCurrentUserMarks(metaMarks, signedMarks)
const otherUserMarks = findOtherUserMarks(signedMarks, usersPubkey!)
setOtherUserMarks(otherUserMarks)
setCurrentUserMarks(currentUserMarks)
setIsReadyToSign(isCurrentUserMarksComplete(currentUserMarks))
}
@ -960,6 +964,7 @@ export const SignPage = () => {
setCurrentUserMarks={setCurrentUserMarks}
setUpdatedMarks={setUpdatedMarks}
handleDownload={handleDownload}
otherUserMarks={otherUserMarks}
meta={meta}
/>
)

View File

@ -127,6 +127,10 @@ const getUpdatedMark = (
}
}
const findOtherUserMarks = (marks: Mark[], pubkey: string): Mark[] => {
return marks.filter((mark) => mark.npub !== hexToNpub(pubkey))
}
export {
getCurrentUserMarks,
filterMarksByPubkey,
@ -136,5 +140,6 @@ export {
updateMarks,
updateCurrentUserMarks,
isCurrentValueLast,
getUpdatedMark
getUpdatedMark,
findOtherUserMarks
}