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

View File

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

View File

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

View File

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

View File

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

View File

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