Fix misuse of Hooks with useRef (#24)

Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/24

src/Components/Editor/ContainerOperations.ts

@@ -5,6 +5,7 @@ import { ContainerModel, IContainerModel } from '../../Interfaces/ContainerModel
 import { findContainerById } from '../../utils/itertools';
 import { getCurrentHistory } from './Editor';
 import { SizePointer } from '../../Interfaces/SizePointer';
+import Properties from '../../Interfaces/Properties';
 
 /**
  * Select a container
@@ -274,7 +275,7 @@ export function OnPropertyChange(
   */
 export function OnPropertiesSubmit(
   event: React.SyntheticEvent<HTMLFormElement>,
-  refs: Array<React.RefObject<HTMLInputElement>>,
+  properties: Properties,
   fullHistory: HistoryState[],
   historyCurrentStep: number,
   setHistory: Dispatch<SetStateAction<HistoryState[]>>,
@@ -291,10 +292,10 @@ export function OnPropertiesSubmit(
 
   if (parent === null) {
     const selectedContainerClone: IContainerModel = structuredClone(current.SelectedContainer);
-    for (const ref of refs) {
-      const input = ref.current;
+    for (const property in properties) {
+      const input = (event.target as HTMLFormElement).querySelector(`#${property}`);
       if (input instanceof HTMLInputElement) {
-        (selectedContainerClone.properties as any)[input.id] = input.value;
+        (selectedContainerClone.properties as any)[property] = input.value;
       }
     }
     setHistory(history.concat([{
@@ -315,10 +316,10 @@ export function OnPropertiesSubmit(
     throw new Error('[OnPropertyChange] Container model was not found among children of the main container!');
   }
 
-  for (const ref of refs) {
-    const input = ref.current;
+  for (const property in properties) {
+    const input = (event.target as HTMLFormElement).querySelector(`#${property}`);
     if (input instanceof HTMLInputElement) {
-      (container.properties as any)[input.id] = input.value;
+      (container.properties as any)[property] = input.value;
     }
   }
 

src/Components/Editor/Editor.tsx

@@ -72,9 +72,9 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
           setHistory,
           setHistoryCurrentStep
         )}
-        OnPropertiesSubmit={(event, refs) => OnPropertiesSubmit(
+        OnPropertiesSubmit={(event, properties) => OnPropertiesSubmit(
           event,
-          refs,
+          properties,
           history,
           historyCurrentStep,
           setHistory,

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { motion } from 'framer-motion';
 import { Properties } from '../Properties/Properties';
+import ContainerProperties from '../../Interfaces/Properties';
 import { IContainerModel } from '../../Interfaces/ContainerModel';
 import { getDepth, MakeIterator } from '../../utils/itertools';
 import { Menu } from '../Menu/Menu';
@@ -8,13 +9,14 @@ import { MenuItem } from '../Menu/MenuItem';
 import { handleDragLeave, handleDragOver, handleLeftClick, handleOnDrop, handleRightClick } from './MouseEventHandlers';
 import { Point } from '../../Interfaces/Point';
 
+
 interface IElementsSidebarProps {
   MainContainer: IContainerModel
   isOpen: boolean
   isHistoryOpen: boolean
   SelectedContainer: IContainerModel | null
   OnPropertyChange: (key: string, value: string | number | boolean) => void
-  OnPropertiesSubmit: (event: React.FormEvent<HTMLFormElement>, refs: Array<React.RefObject<HTMLInputElement>>) => void
+  OnPropertiesSubmit: (event: React.FormEvent<HTMLFormElement>, properties: ContainerProperties) => void
   SelectContainer: (container: IContainerModel) => void
   DeleteContainer: (containerid: string) => void
   AddContainer: (index: number, type: string, parent: string) => void

src/Components/Properties/Properties.tsx

@@ -6,7 +6,7 @@ import { INPUT_TYPES } from './PropertiesInputTypes';
 interface IPropertiesProps {
   properties?: ContainerProperties
   onChange: (key: string, value: string | number | boolean) => void
-  onSubmit: (event: React.FormEvent<HTMLFormElement>, refs: Array<React.RefObject<HTMLInputElement>>) => void
+  onSubmit: (event: React.FormEvent<HTMLFormElement>, properties: ContainerProperties) => void
 }
 
 export const Properties: React.FC<IPropertiesProps> = (props: IPropertiesProps) => {
@@ -17,10 +17,9 @@ export const Properties: React.FC<IPropertiesProps> = (props: IPropertiesProps)
   }
 
   const groupInput: React.ReactNode[] = [];
-  const refs: Array<React.RefObject<HTMLInputElement>> = [];
   Object
     .entries(props.properties)
-    .forEach((pair) => handleProperties(pair, groupInput, refs, isDynamicInput, props.onChange));
+    .forEach((pair) => handleProperties(pair, groupInput, isDynamicInput, props.onChange));
 
   const form = isDynamicInput
     ? <div>
@@ -28,7 +27,7 @@ export const Properties: React.FC<IPropertiesProps> = (props: IPropertiesProps)
     </div>
     : <form
       key={props.properties.id}
-      onSubmit={(event) => props.onSubmit(event, refs)}
+      onSubmit={(event) => props.onSubmit(event, props.properties as ContainerProperties)}
     >
       <input type='submit' className='normal-btn block mx-auto' value='Submit'/>
       { groupInput }
@@ -52,7 +51,6 @@ export const Properties: React.FC<IPropertiesProps> = (props: IPropertiesProps)
 const handleProperties = (
   [key, value]: [string, string | number],
   groupInput: React.ReactNode[],
-  refs: Array<React.RefObject<HTMLInputElement>>,
   isDynamicInput: boolean,
   onChange: (key: string, value: string | number | boolean) => void
 ): void => {
@@ -69,9 +67,6 @@ const handleProperties = (
     type = INPUT_TYPES[key];
   }
 
-  const ref: React.RefObject<HTMLInputElement> = React.useRef<HTMLInputElement>(null);
-  refs.push(ref);
-
   const isDisabled = ['id', 'parentId'].includes(key);
   const input = isDynamicInput
     ? <input
@@ -82,7 +77,6 @@ const handleProperties = (
          '
       type={type}
       id={key}
-      ref={ref}
       value={value}
       checked={checked}
       onChange={(event) => {
@@ -102,7 +96,6 @@ const handleProperties = (
          '
       type={type}
       id={key}
-      ref={ref}
       defaultValue={value}
       defaultChecked={checked}
       disabled={isDisabled}

src/Components/UI/UI.tsx

@@ -8,6 +8,7 @@ import { HistoryState } from '../../Interfaces/HistoryState';
 import { PhotographIcon, UploadIcon } from '@heroicons/react/outline';
 import { FloatingButton } from '../FloatingButton/FloatingButton';
 import { Bar } from '../Bar/Bar';
+import Properties from '../../Interfaces/Properties';
 
 interface IUIProps {
   current: HistoryState
@@ -17,7 +18,7 @@ interface IUIProps {
   SelectContainer: (container: ContainerModel) => void
   DeleteContainer: (containerId: string) => void
   OnPropertyChange: (key: string, value: string | number | boolean) => void
-  OnPropertiesSubmit: (event: React.FormEvent<HTMLFormElement>, refs: Array<React.RefObject<HTMLInputElement>>) => void
+  OnPropertiesSubmit: (event: React.FormEvent<HTMLFormElement>, properties: Properties) => void
   AddContainerToSelectedContainer: (type: string) => void
   AddContainer: (index: number, type: string, parentId: string) => void
   SaveEditorAsJSON: () => void