src/components/DrawPDFFields/index.tsx

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

src/components/MarkFormField/index.tsx

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

src/types/mark.ts

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