src/components/DrawPDFFields/index.tsx

@@ -49,7 +49,7 @@ interface Props {
 }
 
 export const DrawPDFFields = (props: Props) => {
-  const { selectedFiles, onDrawFieldsChange, users } = props
+  const { selectedFiles } = props
 
   const [pdfFiles, setPdfFiles] = useState<PdfFile[]>([])
   const [parsingPdf, setParsingPdf] = useState<boolean>(false)
@@ -94,15 +94,6 @@ export const DrawPDFFields = (props: Props) => {
   })
 
   useEffect(() => {
-    /**
-     * Reads the pdf binary files and converts it's pages to images
-     * creates the pdfFiles object and sets to a state
-     */
-    const parsePdfPages = async () => {
-      const pdfFiles: PdfFile[] = await toPdfFiles(selectedFiles)
-
-      setPdfFiles(pdfFiles)
-    }
     if (selectedFiles) {
       setParsingPdf(true)
 
@@ -113,8 +104,8 @@ export const DrawPDFFields = (props: Props) => {
   }, [selectedFiles])
 
   useEffect(() => {
-    if (pdfFiles) onDrawFieldsChange(pdfFiles)
+    if (pdfFiles) props.onDrawFieldsChange(pdfFiles)
-  }, [onDrawFieldsChange, pdfFiles])
+  }, [pdfFiles])
 
   /**
    * Drawing events
@@ -141,16 +132,12 @@ export const DrawPDFFields = (props: Props) => {
    * @param event Mouse event
    * @param page PdfPage where press happened
    */
-  const onMouseDown = (
+  const onMouseDown = (event: any, page: PdfPage) => {
-    event: React.MouseEvent<HTMLDivElement>,
-    page: PdfPage
-  ) => {
     // Proceed only if left click
     if (event.button !== 0) return
 
     // Only allow drawing if mouse is not over other drawn element
-    const target = event.target as HTMLElement
+    const isOverPdfImageWrapper = event.target.tagName === 'IMG'
-    const isOverPdfImageWrapper = target.tagName === 'IMG'
 
     if (!selectedTool || !isOverPdfImageWrapper) {
       return
@@ -198,10 +185,7 @@ export const DrawPDFFields = (props: Props) => {
    * @param event Mouse event
    * @param page PdfPage where moving is happening
    */
-  const onMouseMove = (
+  const onMouseMove = (event: any, page: PdfPage) => {
-    event: React.MouseEvent<HTMLDivElement>,
-    page: PdfPage
-  ) => {
     if (mouseState.clicked && selectedTool) {
       const lastElementIndex = page.drawnFields.length - 1
       const lastDrawnField = page.drawnFields[lastElementIndex]
@@ -232,7 +216,7 @@ export const DrawPDFFields = (props: Props) => {
    * @param event Mouse event
    * @param drawnField Which we are moving
    */
-  const onDrawnFieldMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+  const onDrawnFieldMouseDown = (event: any) => {
     event.stopPropagation()
 
     // Proceed only if left click
@@ -255,15 +239,11 @@ export const DrawPDFFields = (props: Props) => {
    * @param event Mouse event
    * @param drawnField which we are moving
    */
-  const onDranwFieldMouseMove = (
+  const onDranwFieldMouseMove = (event: any, drawnField: DrawnField) => {
-    event: React.MouseEvent<HTMLDivElement>,
-    drawnField: DrawnField
-  ) => {
-    const target = event.target as HTMLElement | null
     if (mouseState.dragging) {
       const { mouseX, mouseY, rect } = getMouseCoordinates(
         event,
-        target?.parentNode as HTMLElement
+        event.target.parentNode
       )
       const coordsOffset = mouseState.coordsInWrapper
 
@@ -292,7 +272,7 @@ export const DrawPDFFields = (props: Props) => {
    * @param event Mouse event
    * @param drawnField which we are resizing
    */
-  const onResizeHandleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+  const onResizeHandleMouseDown = (event: any) => {
     // Proceed only if left click
     if (event.button !== 0) return
 
@@ -308,15 +288,11 @@ export const DrawPDFFields = (props: Props) => {
    * @param event Mouse event
    * @param drawnField which we are resizing
    */
-  const onResizeHandleMouseMove = (
+  const onResizeHandleMouseMove = (event: any, drawnField: DrawnField) => {
-    event: React.MouseEvent<HTMLSpanElement | HTMLDivElement>,
-    drawnField: DrawnField
-  ) => {
-    const target = event.target as HTMLElement | null
     if (mouseState.resizing) {
       const { mouseX, mouseY } = getMouseCoordinates(
         event,
-        target?.parentNode?.parentNode as HTMLElement
+        event.target.parentNode.parentNode
       )
 
       const width = mouseX - drawnField.left
@@ -337,7 +313,7 @@ export const DrawPDFFields = (props: Props) => {
    * @param drawnFileIndex drawn file index
    */
   const onRemoveHandleMouseDown = (
-    event: React.MouseEvent<HTMLDivElement | HTMLSpanElement>,
+    event: any,
     pdfFileIndex: number,
     pdfPageIndex: number,
     drawnFileIndex: number
@@ -355,9 +331,7 @@ export const DrawPDFFields = (props: Props) => {
    * so select can work properly
    * @param event Mouse event
    */
-  const onUserSelectHandleMouseDown = (
+  const onUserSelectHandleMouseDown = (event: any) => {
-    event: React.MouseEvent<HTMLDivElement>
-  ) => {
     event.stopPropagation()
   }
 
@@ -367,11 +341,8 @@ export const DrawPDFFields = (props: Props) => {
    * @param customTarget mouse coordinates relative to this element, if not provided
    * event.target will be used
    */
-  const getMouseCoordinates = (
+  const getMouseCoordinates = (event: any, customTarget?: any) => {
-    event: React.MouseEvent<HTMLDivElement | HTMLSpanElement>,
+    const target = customTarget ? customTarget : event.target
-    customTarget?: HTMLElement
-  ) => {
-    const target = (customTarget ? customTarget : event.target) as HTMLElement
     const rect = target.getBoundingClientRect()
     const mouseX = event.clientX - rect.left //x position within the element.
     const mouseY = event.clientY - rect.top //y position within the element.
@@ -383,6 +354,16 @@ export const DrawPDFFields = (props: Props) => {
     }
   }
 
+  /**
+   * Reads the pdf binary files and converts it's pages to images
+   * creates the pdfFiles object and sets to a state
+   */
+  const parsePdfPages = async () => {
+    const pdfFiles: PdfFile[] = await toPdfFiles(selectedFiles)
+
+    setPdfFiles(pdfFiles)
+  }
+
   /**
    *
    * @returns if expanded pdf accordion is present
@@ -496,7 +477,7 @@ export const DrawPDFFields = (props: Props) => {
                           labelId="counterparts"
                           label="Counterparts"
                         >
-                          {users.map((user, index) => {
+                          {props.users.map((user, index) => {
                             let displayValue = truncate(
                               hexToNpub(user.pubkey),
                               {

src/components/MarkFormField/index.tsx

@@ -7,17 +7,15 @@ import {
   isCurrentUserMarksComplete,
   isCurrentValueLast
 } from '../../utils'
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 interface MarkFormFieldProps {
-  currentUserMarks: CurrentUserMark[]
+  handleSubmit: (event: any) => void
-  handleCurrentUserMarkChange: (mark: CurrentUserMark) => void
+  handleSelectedMarkValueChange: (event: any) => void
-  handleSelectedMarkValueChange: (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => void
-  handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void
   selectedMark: CurrentUserMark
   selectedMarkValue: string
+  currentUserMarks: CurrentUserMark[]
+  handleCurrentUserMarkChange: (mark: CurrentUserMark) => void
 }
 
 /**

src/types/mark.ts

@@ -1,4 +1,4 @@
-import { MarkType } from './drawing'
+import { MarkType } from "./drawing";
 
 export interface CurrentUserMark {
   id: number