From 87ef61a28e84d3201369f1ca76153b2a6e983821 Mon Sep 17 00:00:00 2001 From: Eugene Date: Fri, 2 Aug 2024 11:43:51 +0100 Subject: [PATCH] refactor: moves pdf marking and rendering one level down --- src/components/PDFView/PdfItem.tsx | 12 ++-- src/components/PDFView/PdfMarkItem.tsx | 34 +++++---- src/components/PDFView/PdfMarking.tsx | 95 ++++++++++++++++++++++++++ src/components/PDFView/PdfPageItem.tsx | 27 +++----- src/components/PDFView/index.tsx | 42 ++++++------ src/pages/sign/MarkFormField.tsx | 15 ++-- src/pages/sign/const.ts | 5 -- 7 files changed, 159 insertions(+), 71 deletions(-) delete mode 100644 src/pages/sign/const.ts diff --git a/src/components/PDFView/PdfItem.tsx b/src/components/PDFView/PdfItem.tsx index d9fae3d..23bbff7 100644 --- a/src/components/PDFView/PdfItem.tsx +++ b/src/components/PDFView/PdfItem.tsx @@ -6,11 +6,11 @@ interface PdfItemProps { pdfFile: PdfFile currentUserMarks: CurrentUserMark[] handleMarkClick: (id: number) => void - currentMarkValue: string - currentUserMark: CurrentUserMark | null + selectedMarkValue: string + selectedMark: CurrentUserMark | null } -const PdfItem = ({ pdfFile, currentUserMarks, handleMarkClick, currentMarkValue, currentUserMark }: PdfItemProps) => { +const PdfItem = ({ pdfFile, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfItemProps) => { const filterByPage = (marks: CurrentUserMark[], page: number): CurrentUserMark[] => { return marks.filter((m) => m.mark.location.page === page); } @@ -20,10 +20,10 @@ const PdfItem = ({ pdfFile, currentUserMarks, handleMarkClick, currentMarkValue, ) })) diff --git a/src/components/PDFView/PdfMarkItem.tsx b/src/components/PDFView/PdfMarkItem.tsx index bc265bf..bb4cdb9 100644 --- a/src/components/PDFView/PdfMarkItem.tsx +++ b/src/components/PDFView/PdfMarkItem.tsx @@ -1,31 +1,35 @@ -import { CurrentUserMark, Mark, MarkLocation } from '../../types/mark.ts' +import { CurrentUserMark } from '../../types/mark.ts' import styles from '../DrawPDFFields/style.module.scss' import { inPx } from '../../utils/pdf.ts' interface PdfMarkItemProps { - mark: Mark + userMark: CurrentUserMark handleMarkClick: (id: number) => void - isEditable: boolean - currentMarkValue: string - currentUserMark: CurrentUserMark | null + selectedMarkValue: string + selectedMark: CurrentUserMark | null } -const PdfMarkItem = ({ mark, handleMarkClick, isEditable, currentMarkValue, currentUserMark }: PdfMarkItemProps) => { - const handleClick = () => isEditable && handleMarkClick(mark.id); +//selectedMark represents the mark that the user is actively editing +// selectedMarkValue representsnthe edited value +// userMark is part of the overall currentUserMark array + +const PdfMarkItem = ({ selectedMark, handleMarkClick, selectedMarkValue, userMark }: PdfMarkItemProps) => { + const { location } = userMark.mark; + const handleClick = () => handleMarkClick(userMark.mark.id); const getMarkValue = () => ( - currentUserMark?.mark.id === mark.id - ? currentMarkValue - : mark.value + selectedMark?.mark.id === userMark.mark.id + ? selectedMarkValue + : userMark.mark.value ) return (
{getMarkValue()}
) diff --git a/src/components/PDFView/PdfMarking.tsx b/src/components/PDFView/PdfMarking.tsx index e69de29..8dc0489 100644 --- a/src/components/PDFView/PdfMarking.tsx +++ b/src/components/PDFView/PdfMarking.tsx @@ -0,0 +1,95 @@ +import { Box } from '@mui/material' +import styles from '../../pages/sign/style.module.scss' +import PdfView from './index.tsx' +import MarkFormField from '../../pages/sign/MarkFormField.tsx' +import { PdfFile } from '../../types/drawing.ts' +import { CurrentUserMark, Mark } from '../../types/mark.ts' +import { useState, useEffect } from 'react' +import { + findNextCurrentUserMark, + isCurrentUserMarksComplete, + updateCurrentUserMarks, +} from '../../utils/mark.ts' + +import { EMPTY } from '../../utils/const.ts' + +interface PdfMarkingProps { + files: { pdfFile: PdfFile, filename: string, hash: string | null }[], + currentUserMarks: CurrentUserMark[], + setIsReadyToSign: (isReadyToSign: boolean) => void, + setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void, + setUpdatedMarks: (markToUpdate: Mark) => void +} + +const PdfMarking = (props: PdfMarkingProps) => { + const { + files, + currentUserMarks, + setIsReadyToSign, + setCurrentUserMarks, + setUpdatedMarks + } = props + const [selectedMark, setSelectedMark] = useState(null) + const [selectedMarkValue, setSelectedMarkValue] = useState("") + + useEffect(() => { + setSelectedMark(findNextCurrentUserMark(currentUserMarks) || null) + }, [currentUserMarks]) + + const handleMarkClick = (id: number) => { + const nextMark = currentUserMarks.find((mark) => mark.mark.id === id); + setSelectedMark(nextMark!); + setSelectedMarkValue(nextMark?.mark.value ?? EMPTY); + } + + const handleSubmit = (event: any) => { + event.preventDefault(); + if (!selectedMarkValue || !selectedMark) return; + + const updatedMark: CurrentUserMark = { + ...selectedMark, + mark: { + ...selectedMark.mark, + value: selectedMarkValue + }, + isCompleted: true + } + + setSelectedMarkValue(EMPTY) + const updatedCurrentUserMarks = updateCurrentUserMarks(currentUserMarks, updatedMark); + setCurrentUserMarks(updatedCurrentUserMarks) + setSelectedMark(findNextCurrentUserMark(updatedCurrentUserMarks) || null) + console.log(isCurrentUserMarksComplete(updatedCurrentUserMarks)) + setIsReadyToSign(isCurrentUserMarksComplete(updatedCurrentUserMarks)) + setUpdatedMarks(updatedMark.mark) + } + + const handleChange = (event: any) => setSelectedMarkValue(event.target.value) + + return ( + <> + + { + currentUserMarks?.length > 0 && ( + )} + { + selectedMark !== null && ( + + )} + + + ) +} + +export default PdfMarking \ No newline at end of file diff --git a/src/components/PDFView/PdfPageItem.tsx b/src/components/PDFView/PdfPageItem.tsx index 78a4ad1..20a3cce 100644 --- a/src/components/PDFView/PdfPageItem.tsx +++ b/src/components/PDFView/PdfPageItem.tsx @@ -1,24 +1,16 @@ import styles from '../DrawPDFFields/style.module.scss' import { PdfPage } from '../../types/drawing.ts' -import { CurrentUserMark, Mark, MarkConfigDetails } from '../../types/mark.ts' +import { CurrentUserMark } from '../../types/mark.ts' import PdfMarkItem from './PdfMarkItem.tsx' -import { useSelector } from 'react-redux' -import { State } from '../../store/rootReducer.ts' -import { hexToNpub } from '../../utils' interface PdfPageProps { page: PdfPage - marks: Mark[] + currentUserMarks: CurrentUserMark[] handleMarkClick: (id: number) => void - currentMarkValue: string - currentUserMark: CurrentUserMark | null + selectedMarkValue: string + selectedMark: CurrentUserMark | null } -const PdfPageItem = ({ page, marks, handleMarkClick, currentMarkValue, currentUserMark }: PdfPageProps) => { - const usersPubkey = useSelector((state: State) => state.auth.usersPubkey) - const isEditable = (mark: Mark): boolean => { - if (!usersPubkey) return false; - return mark.npub === hexToNpub(usersPubkey); - } +const PdfPageItem = ({ page, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfPageProps) => { return (
{ - marks.map((mark, i) => ( + currentUserMarks.map((m, i) => ( ))}
diff --git a/src/components/PDFView/index.tsx b/src/components/PDFView/index.tsx index 6942b48..d9cd1fe 100644 --- a/src/components/PDFView/index.tsx +++ b/src/components/PDFView/index.tsx @@ -1,37 +1,39 @@ import { PdfFile } from '../../types/drawing.ts' import { Box } from '@mui/material' import PdfItem from './PdfItem.tsx' -import { CurrentUserMark, Mark, MarkConfigDetails } from '../../types/mark.ts' +import { CurrentUserMark } from '../../types/mark.ts' interface PdfViewProps { - files: { [filename: string]: PdfFile }, - fileHashes: { [key: string]: string | null }, - marks: Mark[], + files: { pdfFile: PdfFile, filename: string, hash: string | null }[] + currentUserMarks: CurrentUserMark[] handleMarkClick: (id: number) => void - currentMarkValue: string - currentUserMark: CurrentUserMark | null + selectedMarkValue: string + selectedMark: CurrentUserMark | null } -const PdfView = ({ files, fileHashes, marks, handleMarkClick, currentMarkValue, currentUserMark }: PdfViewProps) => { - const filterByFile = (marks: Mark[], fileHash: string): Mark[] => { - return marks.filter((mark) => mark.pdfFileHash === fileHash); +const PdfView = ({ files, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfViewProps) => { + const filterByFile = (currentUserMarks: CurrentUserMark[], hash: string): CurrentUserMark[] => { + return currentUserMarks.filter((currentUserMark) => currentUserMark.mark.pdfFileHash === hash) } return ( - {Object.entries(files) - .map(([name, file], i) => ( - { + if (!hash) return + return ( + - ))} + ) + }) + } ) - } export default PdfView; \ No newline at end of file diff --git a/src/pages/sign/MarkFormField.tsx b/src/pages/sign/MarkFormField.tsx index b45cbe8..aee4c29 100644 --- a/src/pages/sign/MarkFormField.tsx +++ b/src/pages/sign/MarkFormField.tsx @@ -1,25 +1,26 @@ import { CurrentUserMark, Mark } from '../../types/mark.ts' import styles from './style.module.scss' import { Box, Button, TextField } from '@mui/material' -import { MarkTypeTranslation } from './const.ts' + +import { MARK_TYPE_TRANSLATION } from '../../utils/const.ts' interface MarkFormFieldProps { handleSubmit: (event: any) => void handleChange: (event: any) => void - currentMark: CurrentUserMark - currentMarkValue: string + selectedMark: CurrentUserMark + selectedMarkValue: string } const MarkFormField = (props: MarkFormFieldProps) => { - const { handleSubmit, handleChange, currentMark, currentMarkValue } = props; - const getSubmitButton = () => currentMark.isLast ? 'Complete' : 'Next'; + const { handleSubmit, handleChange, selectedMark, selectedMarkValue } = props; + const getSubmitButton = () => selectedMark.isLast ? 'Complete' : 'Next'; return (