pushing styling of development

Author: tolgamizrakci

src/components/SortChildren.jsx

@@ -0,0 +1,49 @@
+
+import React, { Component} from "react";
+import { connect } from "react-redux";
+
+const mapStateToProps = store => ({
+  focusComponent: store.workspace.focusComponent,
+});
+
+
+class SortChildren extends Component {
+  // constructor(props) {
+  //   super(props);
+   state = {test: 'myTestValue'};
+  //}
+
+  
+render() {
+  const children = this.props.focusComponent.childrenArray; 
+  const List = children.map( (child,idx) => {
+    console.log(`mappping...... ${idx}   ${child.componentName + child.childId}`)
+      return (
+        <li 
+          Childid={child.Childid}
+          key={idx}
+          draggable='true'
+          // onDragEnd={this.dragEnd.bind(this)}
+          // onDragStart={this.dragStart.bind(this)}>{item}
+        >
+        {child.componentName + child.childId}
+        </li>
+    )})
+    console.log('children')
+        console.log(children)
+        console.log('List')
+        console.log(List)
+  return (
+    <div>
+      <p>Childrens List</p>
+      {/* <List/> */}
+    </div>
+  )
+ 
+}
+
+} 
+
+export default connect(
+  mapStateToProps
+)(SortChildren);

src/containers/MainContainer.tsx

@@ -19,6 +19,7 @@ import {
 import KonvaStage from '../components/KonvaStage.jsx';
 import MainContainerHeader from '../components/MainContainerHeader.jsx';
 import createModal from '../utils/createModal.util';
+import SortChildren from '../components/SortChildren.jsx';
 
 const IPC = require('electron').ipcRenderer;
 

src/utils/findComponentById.ts renamed to src/utils/Interfaces.ts

@@ -1,3 +1,7 @@
+
+
+
+
 interface Prop {
   id: number;
   key: string;
@@ -13,7 +17,7 @@ interface Position {
   height: number;
 }
 
-interface Child {
+export interface ChildInt {
   childId: number;
   childType: string;
   childComponentId: number;
@@ -24,11 +28,11 @@ interface Child {
   HTMLInfo: object; // replace with HTMLinfo specifics
 }
 
-interface Component {
+export interface ComponentInt {
   id: number;
   stateful: boolean;
   title: string;
-  parentIds: number[];
+  //parentIds: number[];
   color: string;
   draggable: boolean;
   // childrenIds: number[];
@@ -42,7 +46,10 @@ interface Component {
   focusChildId: number;
 }
 
-function findComponentById(id: number, components: Component[]) {
+export interface ComponentsInt extends Array<ComponentInt> {}
+
+
+function findComponentById(id: number, components: ComponentInt[]) {
   return components.find(comp => comp.id === id);
 }
 

src/utils/colors.util.js renamed to src/utils/colors.util.ts

@@ -1,4 +1,5 @@
-const colors = [
+
+const colors: Array<String> = [
   '#E27D60',
   '#E3AFBC',
   '#E8A87C',
@@ -24,6 +25,6 @@ const colors = [
   '#61892F',
 ];
 
-const getColor = () => colors[Math.floor(Math.random() * colors.length)];
+const getColor = ():String =>  colors[Math.floor(Math.random() * colors.length)];
 
 export default getColor;

src/utils/componentReducer.util.js

@@ -1,6 +1,6 @@
 // import setSelectableParents from "./setSelectableParents.util";
-import getSelectable from './getSelectable.util';
-import getColor from './colors.util';
+import getSelectable from './getSelectable.util.ts';
+import getColor from './colors.util.ts';
 import { HTMLelements, getSize } from './htmlElements.util';
 import cloneDeep from './cloneDeep.ts';
 

src/utils/getSelectable.util.js renamed to src/utils/getSelectable.util.ts

@@ -1,40 +1,43 @@
-function getSelectable(newFocusComponent, components) {
+import {ComponentInt, ComponentsInt, ChildInt } from './Interfaces.ts';
+
+
+function getSelectable(newFocusComponent:ComponentInt, components:ComponentsInt) {
   const focusComponentId = newFocusComponent.id;
   const componentsToCheck = components
-    .map(comp => comp.id)
-    .filter(id => id !== focusComponentId);
+    .map((comp: ComponentInt) => comp.id)
+    .filter((id: Number) => id !== focusComponentId);
   return findAncestors(components, [focusComponentId], componentsToCheck);
 }
 
 function findAncestors(
-  components,
-  currentCompArr,
-  componentsToCheck,
-  ancestors = []
-) {
+  components :ComponentsInt,
+  currentCompArr: ComponentsInt,
+  componentsToCheck: ComponentsInt,
+  ancestors : Array<Number> = []
+) :Object {
   if (!currentCompArr.length) {
     return {
       ancestors,
       selectableChildren: componentsToCheck
     };
   }
 
-  const newAncestors = [];
+  const newAncestors: Array<Number> = [];
 
   for (let i = 0; i < components.length; i++) {
     if (componentsToCheck.includes(components[i].id)) {
       const myChildren = components[i].childrenArray.map(
-        child => child.childComponentId
+        (child: ChildInt) => child.childComponentId
       );
 
-      const found = currentCompArr.filter(comp => myChildren.includes(comp));
+      const found = currentCompArr.filter((comp: ComponentInt) => myChildren.includes(comp));
 
       if (found.length) {
         ancestors.push(components[i].id);
         newAncestors.push(components[i].id);
 
         const indexToDelete = componentsToCheck.findIndex(
-          c => c === components[i].id
+          (c: Number) => c === components[i].id
         );
 
         componentsToCheck.splice(indexToDelete, 1);

tsconfig.json

@@ -5,7 +5,9 @@
     "noImplicitAny": true,
     "module": "commonjs",
     "target": "es6",
-    "jsx": "react"
+    "jsx": "react",
+    // "strict": true,
+    // "alwaysStrict": true, 
     //these two options are recommended but don't work, maybe an issue with awesome-typsecript-loader vs babel
     // "esModuleInterop": true
     // "allowSyntheticDefaultImports": true