Made more typing changes -stiill need to fix HTMLAttr

Author: sean1292

src/components/CodePreview.tsx

@@ -5,14 +5,14 @@ import { ComponentInt, ComponentsInt } from '../utils/Interfaces';
 /** **   SortCHildren will be fixed , dont XXX the file  *** */
 // import SortChildren from './SortChildren.tsx';
 import SyntaxHighlighter from 'react-syntax-highlighter';
-import { hybrid } from 'react-syntax-highlighter/dist/styles/hljs/';
+import { hybrid } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 
-type Props = {
+type CodePreviewProps = {
   focusComponent: ComponentInt;
   components: ComponentsInt;
 };
 
-class CodePreview extends Component<Props> {
+class CodePreview extends Component<CodePreviewProps> {
   render(): JSX.Element {
     const focusComponent: ComponentInt = this.props.focusComponent;
     const components: ComponentsInt = this.props.components;
@@ -27,12 +27,12 @@ class CodePreview extends Component<Props> {
       >
         <SyntaxHighlighter style={hybrid}>
           {format(componentRender(focusComponent, components), {
-          singleQuote: true,
-          trailingComma: 'es5',
-          bracketSpacing: true,
-          jsxBracketSameLine: true,
-          parser: 'typescript'
-        })}
+            singleQuote: true,
+            trailingComma: 'es5',
+            bracketSpacing: true,
+            jsxBracketSameLine: true,
+            parser: 'typescript'
+          })}
         </SyntaxHighlighter>
       </div>
     );

src/components/GrandchildRectangle.tsx

@@ -22,11 +22,11 @@ interface GrandChRectPropsInt extends PropsInt {
   draggable?: boolean;
   blockSnapSize?: number;
   childType: string;
-  handleTransform?(
+  handleTransform?: (
     componentId: number,
     childId: number,
     dimensions: { x: number; y: number; width: number; height: number }
-  ): void;
+  ) => void;
 }
 
 interface StateInt {

src/components/HtmlAttr.tsx

@@ -11,15 +11,13 @@ import Fab from '@material-ui/core/Fab';
 import InputLabel from '@material-ui/core/InputLabel';
 import { updateHtmlAttr } from '../actions/components';
 import { HTMLelements } from '../utils/htmlElements.util';
-import { ComponentInt, ChildInt } from '../utils/Interfaces';
+import { ComponentInt, ChildInt, PropsInt, PropInt } from '../utils/Interfaces';
 
-interface PropsInt {
-  updateHtmlAttr: any;
-  focusComponent: ComponentInt;
+interface HTMLAttrPropsInt extends PropsInt {
+  updateHtmlAttr(arg: { attr: string; value: string }): void;
   classes: any;
-  deleteProp: any;
-  addProp: any;
-  focusChild: ChildInt;
+  deleteProp(id: number): void;
+  addProp(prop: PropInt): void;
 }
 
 interface StateInt {}
@@ -72,14 +70,12 @@ const buttonTypeOptions = [
 ];
 
 // this is a variable to save temp state for button types
-let buttonTypeTemp;
+let buttonTypeTemp: string;
 
 // HtmlAttr is creating attributes grabbed from htmlElement & placing them
 // as the new state
-class HtmlAttr extends Component<PropsInt, StateInt> {
+class HtmlAttr extends Component<HTMLAttrPropsInt, StateInt> {
   state = HTMLelements[this.props.focusChild.htmlElement].attributes.reduce((acc, attr) => {
-    // if ((attr = 'button' || 'submit' || 'reset')) acc[attr] = '';
-    // else
     acc[attr] = '';
 
     return acc;

src/components/Rectangle.tsx

@@ -218,7 +218,6 @@ class Rectangle extends Component<RectanglePorpsInt> {
         draggable && ( //this conditional logic binds the transformer to the focused child, and Draggable is checked to make sure grandchildren can't be selected
             <TransformerComponent //This is the component that binds the Rect nodes to the Transformer node so they can be resized.
               focusChild={focusChild}
-              {/*rectClass={'childRect'}*/}
               anchorSize={8}
               color={'grey'}
             />