on the process of convert to typescript

Author: aquinojardim

src/app/components/Action.tsx

@@ -18,7 +18,7 @@ interface ActionProps {
 
 /* // gabi and nate :: index and delta props were removed from Action.jsx  */
 // viewIndex and handleonkeyDown added to props
-const Action: React.SFC = (props: ActionProps) => {
+const Action = (props: ActionProps) => {
   const {
     selected, last, index, sliderIndex, dispatch, displayName, componentName, componentData, state, viewIndex, handleOnkeyDown,
   } = props;
@@ -28,8 +28,8 @@ const Action: React.SFC = (props: ActionProps) => {
     if (!componentData.actualDuration) {
       return 'NO TIME';
     }
-    let seconds;
-    let miliseconds = componentData.actualDuration;
+    let seconds:any ;
+    let miliseconds:any = componentData.actualDuration;
     if (Math.floor(componentData.actualDuration) > 60) {
       seconds = Math.floor(componentData.actualDuration / 60);
       seconds = JSON.stringify(seconds);

src/app/components/App.tsx

@@ -3,7 +3,7 @@ import MainContainer from '../containers/MainContainer.tsx';
 import { StoreContext } from '../store.tsx';
 import mainReducer from '../reducers/mainReducer.ts';
 
-const initialState = {
+const initialState:object = {
   port: null,
   currentTab: null,
   tabs: {},

src/app/components/Chart.tsx

@@ -15,10 +15,15 @@ import React, { Component } from 'react';
 import * as d3 from 'd3';
 
 const colors = ['#95B6B7', '#475485', '#519331', '#AA5039', '#8B2F5F', '#C5B738', '#858DFF', '#FF8D02', '#FFCD51', '#ACDAE6', '#FC997E', '#CF93AD', '#AA3939', '#AA6C39', '#226666', '#2C4870'];
+interface ChartProps {
+  chartRef:any;
+  maked3Tree: any; 
+  removed3Tree: any;
+}
 
 let root = {};
 class Chart extends Component {
-  constructor(props) {
+  constructor(props:ChartProps) {
     super(props);
     this.chartRef = React.createRef();
     this.maked3Tree = this.maked3Tree.bind(this);
@@ -76,7 +81,7 @@ class Chart extends Component {
       // .size([2 * Math.PI, radius / 1.3])
       .nodeSize([width / 10, height / 10])
       // .separation(function (a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
-      .separation(function (a, b) { return (a.parent == b.parent ? 2 : 2); });
+      .separation(function (a:{parent:object}, b:{parent:object}) { return (a.parent == b.parent ? 2 : 2); });
 
     const d3root = tree(hierarchy);
 
@@ -90,15 +95,15 @@ class Chart extends Component {
       .append('path')
       .attr('class', 'link')
       .attr('d', d3.linkRadial()
-        .angle(d => d.x)
-        .radius(d => d.y));
+        .angle((d:{x:number}) => d.x)
+        .radius((d:{y:number}) => d.y));
 
     const node = g.selectAll('.node')
       // root.descendants gets an array of of all nodes
       .data(d3root.descendants())
       .enter()
       .append('g')
-      .style('fill', function (d) {
+      .style('fill', function (d:{data:{branch:number}}) {
         if (d.data.branch < colors.length) {
           return colors[d.data.branch];
         }
@@ -114,13 +119,13 @@ class Chart extends Component {
       // .attr('class', function (d) {
       //   return 'node' + (d.children ? ' node--internal' : ' node--leaf');
       // })
-      .attr('transform', function (d) {
+      .attr('transform', function (d:{x:number, y:number}) {
         return 'translate(' + reinfeldTidierAlgo(d.x, d.y) + ')';
       });
 
     node.append('circle')
       .attr('r', 15)
-      .on('mouseover', function (d) {
+      .on('mouseover', function (d:any) {
         d3.select(this)
           .transition(100)
           .duration(20)
@@ -135,7 +140,7 @@ class Chart extends Component {
           .style('top', (d3.event.pageY - 65) + 'px');
       })
       // eslint-disable-next-line no-unused-vars
-      .on('mouseout', function (d) {
+      .on('mouseout', function (d:any) {
         d3.select(this)
           .transition()
           .duration(300)
@@ -149,16 +154,16 @@ class Chart extends Component {
       .append('text')
       // adjusts the y coordinates for the node text
       .attr('dy', '0.5em')
-      .attr('x', function (d) {
+      .attr('x', function (d:{x:number; children?:[]}) {
         // this positions how far the text is from leaf nodes (ones without children)
         // negative number before the colon moves the text of rightside nodes,
         // positive number moves the text for the leftside nodes
         return d.x < Math.PI === !d.children ? 0 : 0;
       })
       .attr('text-anchor', 'middle')
       // this arranges the angle of the text
-      .attr('transform', function (d) { return 'rotate(' + (d.x < Math.PI ? d.x - Math.PI / 2 : d.x + Math.PI / 2) * 1 / Math.PI + ')'; })
-      .text(function (d) {
+      .attr('transform', function (d:{x:number, y:number}) { return 'rotate(' + (d.x < Math.PI ? d.x - Math.PI / 2 : d.x + Math.PI / 2) * 1 / Math.PI + ')'; })
+      .text(function (d:{data:{name:number, branch:number}}) {
         // gabi and nate :: display the name of of specific patch
         return `${d.data.name}.${d.data.branch}`;
       });
@@ -179,7 +184,7 @@ class Chart extends Component {
       g.attr('cursor', 'grabbing');
     }
 
-    function dragged(d) {
+    function dragged(d:{x:number, y:number}) {
       d3.select(this).attr('dx', d.x = d3.event.x).attr('dy', d.y = d3.event.y);
     }
 
@@ -196,7 +201,7 @@ class Chart extends Component {
       .attr('class', 'tooltip')
       .style('opacity', 0);
 
-    function reinfeldTidierAlgo(x, y) {
+    function reinfeldTidierAlgo(x:number, y:number) {
       return [(y = +y) * Math.cos(x -= Math.PI / 2), y * Math.sin(x)];
     }
   }

src/app/components/Diff.tsx

@@ -5,7 +5,13 @@ import ReactHtmlParser from 'react-html-parser';
 
 import { useStoreContext } from '../store.tsx';
 
-function Diff({ snapshot, show }) {
+interface DiffProps {
+  snapshot: object; 
+  show?: boolean; 
+}
+
+function Diff(props: DiffProps) {
+  const { snapshot, show } = props
   const [mainState] = useStoreContext();
   const { currentTab, tabs } = mainState; // Nate:: k/v pairs of mainstate store object being created
   const { snapshots, viewIndex, sliderIndex } = tabs[currentTab];
@@ -19,17 +25,14 @@ function Diff({ snapshot, show }) {
   }
 
   // gabi :: cleanning preview from stateless data
-  const statelessCleanning = obj => {
+  const statelessCleanning = (obj:{name?:string; componentData?:object; state?: object | string;stateSnaphot?:object; children?:[]}) => {
     const newObj = { ...obj };
     if (newObj.name === 'nameless') {
       delete newObj.name;
     }
     if (newObj.componentData) {
       delete newObj.componentData;
     }
-    if (newObj.parent || newObj.parent === null) {
-      delete newObj.parent;
-    }
     if (newObj.state === 'stateless') {
       delete newObj.state;
     }
@@ -39,7 +42,7 @@ function Diff({ snapshot, show }) {
     if (newObj.children) {
       newObj.children = [];
       if (obj.children.length > 0) {
-        obj.children.forEach(element => {
+        obj.children.forEach((element:{state?:object | string; children?:[]}) => {
           if (element.state !== 'stateless' || element.children.length > 0) {
             const clean = statelessCleanning(element);
             newObj.children.push(clean);

src/app/components/DiffRoute.tsx

@@ -3,10 +3,11 @@ import PropTypes from 'prop-types';
 import {
   MemoryRouter as Router, Route, NavLink, Switch,
 } from 'react-router-dom';
-
 import Diff from './Diff.tsx';
 
-const DiffRoute = ({ snapshot }) => (
+
+const DiffRoute = (props: {snapshot: {state: string | object; children?:[]}}) => (
+
   <Router>
     <div className="navbar">
       <NavLink className="router-link" activeClassName="is-active" exact to="/">
@@ -17,17 +18,10 @@ const DiffRoute = ({ snapshot }) => (
       </NavLink>
     </div>
     <Switch>
-      <Route path="/diffRaw" render={() => <Diff snapshot={snapshot} show />} />
-      <Route path="/" render={() => <Diff snapshot={snapshot} show={false} />} />
+      <Route path="/diffRaw" render={() => <Diff snapshot={props.snapshot} show />} />
+      <Route path="/" render={() => <Diff snapshot={props.snapshot} show={false} />} />
     </Switch>
   </Router>
 );
 
-DiffRoute.propTypes = {
-  snapshot: PropTypes.shape({
-    state: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    children: PropTypes.arrayOf(PropTypes.object),
-  }).isRequired,
-};
-
 export default DiffRoute;