all components converted to typescript

Author: aquinojardim

src/app/components/Action.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { changeView, changeSlider } from '../actions/actions.ts';
 
 interface ActionProps {
@@ -57,7 +56,7 @@ const Action = (props: ActionProps) => {
       // Edwin: invoking keyboard functionality; functionality is in ActionContainer;
       onKeyDown={(e: KeyboardEvent) => handleOnkeyDown(e, viewIndex)}
       className={selected || last ? 'action-component selected' : 'action-component'}
-      onClick={() => {
+      onClick={(e: MouseEvent) => {
         dispatch(changeView(index));
       }}
       role="presentation"

src/app/components/Diff.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { diff, formatters } from 'jsondiffpatch';
 import ReactHtmlParser from 'react-html-parser';
-
 import { useStoreContext } from '../store.tsx';
 
 interface DiffProps {
-  snapshot: object; 
+  snapshot: {state:object | string}; 
   show?: boolean; 
 }
 
@@ -69,12 +67,4 @@ function Diff(props: DiffProps) {
   return <div>{ReactHtmlParser(html)}</div>;
 }
 
-Diff.propTypes = {
-  snapshot: PropTypes.shape({
-    state: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    children: PropTypes.arrayOf(PropTypes.object),
-  }).isRequired,
-  show: PropTypes.bool.isRequired,
-};
-
 export default Diff;

src/app/components/DiffRoute.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {
   MemoryRouter as Router, Route, NavLink, Switch,
 } from 'react-router-dom';

src/app/components/Dropdown.tsx

@@ -1,8 +1,13 @@
 import React from 'react';
 import Select from 'react-select';
-import PropTypes from 'prop-types';
 
-const Dropdown = props => {
+interface DropdownProps {
+  selectedSpeed: { value: number; label: string },
+  speeds: [];
+  setSpeed:  () => void;
+}
+
+const Dropdown = (props: DropdownProps) => {
   const { speeds, setSpeed, selectedSpeed } = props;
   return (
     <Select
@@ -16,10 +21,4 @@ const Dropdown = props => {
   );
 };
 
-Dropdown.propTypes = {
-  selectedSpeed: PropTypes.shape({ value: PropTypes.number, label: PropTypes.string }).isRequired,
-  speeds: PropTypes.arrayOf(PropTypes.object).isRequired,
-  setSpeed: PropTypes.func.isRequired,
-};
-
 export default Dropdown;

src/app/components/ErrorHandler.tsx

@@ -1,12 +1,16 @@
 import React from 'react';
 
+interface ErrorHandlerProps {
+  state: { errorOccurred: boolean }
+}
+
 class ErrorHandler extends React.Component {
-  constructor(props) {
+  constructor(props:ErrorHandlerProps) {
     super(props);
     this.state = { errorOccurred: false };
   }
 
-  componentDidCatch(error, info) {
+  componentDidCatch(error:string, info:string) {
     this.setState({ errorOccurred: true })
     console.log('Error occurred in React Component: ', error, info);
   }

src/app/components/MainSlider.tsx

@@ -3,14 +3,18 @@
 import React from 'react';
 import Slider from 'rc-slider';
 import Tooltip from 'rc-tooltip';
-import PropTypes from 'prop-types';
-
 import { changeSlider, pause } from '../actions/actions.ts';
 import { useStoreContext } from '../store';
 
 const { Handle } = Slider;
 
-const handle = props => {
+interface handleProps {
+  value: number, 
+  dragging: boolean, 
+  index: number
+};
+
+const handle = (props: handleProps) => {
   const {
     value, dragging, index, ...restProps
   } = props;
@@ -28,7 +32,12 @@ const handle = props => {
   );
 };
 
-function MainSlider({ snapshotsLength }) {
+interface MainSliderProps {
+  snapshotsLength: number;
+};
+
+function MainSlider(props: MainSliderProps) {
+  const { snapshotsLength } = props
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { sliderIndex } = tabs[currentTab];
 
@@ -37,7 +46,7 @@ function MainSlider({ snapshotsLength }) {
       min={0}
       max={snapshotsLength - 1}
       value={sliderIndex}
-      onChange={index => {
+      onChange={(index:any) => {
         const newIndex = index === -1 ? 0 : index;
         dispatch(changeSlider(newIndex));
         dispatch(pause());
@@ -47,8 +56,4 @@ function MainSlider({ snapshotsLength }) {
   );
 }
 
-MainSlider.propTypes = {
-  snapshotsLength: PropTypes.number.isRequired,
-};
-
 export default MainSlider;

src/app/components/PerfView.tsx

@@ -22,12 +22,19 @@ import { schemeSet1 as colorScheme } from 'd3';
 
 // import { addNewSnapshots } from '../actions/actions.ts';
 
-
-const PerfView = ({ snapshots, viewIndex, width = 600, height = 600 }) => {
+interface PerfViewProps {
+  snapshots:[]; 
+  viewIndex:number; 
+  width: number;
+  height: number;
+}
+
+const PerfView = (props:PerfViewProps) => {
+  const { snapshots, viewIndex, width = 600, height = 600 } = props
   const svgRef = useRef(null);
 
   // Figure out which snapshot index to use
-  let indexToDisplay = null;
+  let indexToDisplay: number | null = null;
   if (viewIndex < 0) indexToDisplay = snapshots.length - 1;
   else indexToDisplay = viewIndex;
 
@@ -39,13 +46,13 @@ const PerfView = ({ snapshots, viewIndex, width = 600, height = 600 }) => {
     .interpolate(d3.interpolateHcl);
 
   // Set up circle-packing layout function
-  const packFunc = useCallback(data => {
+  const packFunc = useCallback((data:object) => {
     return d3.pack()
     .size([width, height])
     // .radius(d => { return d.r; })
     .padding(3)(d3.hierarchy(data)
-                    .sum(d => { return d.componentData.actualDuration || 0; })
-                    .sort((a, b) => { return b.value - a.value; }));
+                    .sum((d:{componentData?:{actualDuration?:number}}) => { return d.componentData.actualDuration || 0; })
+                    .sort((a:{value:number}, b:{value:number}) => { return b.value - a.value; }));
   }, [width, height]);
 
   // If indexToDisplay changes, clear old tree nodes
@@ -81,21 +88,21 @@ const PerfView = ({ snapshots, viewIndex, width = 600, height = 600 }) => {
       .selectAll('circle')
       .data(packedRoot.descendants().slice(1))
       .enter().append('circle')
-        .attr('fill', d => (d.children ? colorScale(d.depth) : 'white'))
-        .attr('pointer-events', d => (!d.children ? 'none' : null))
+        .attr('fill', (d:{children:[]; depth:number}) => (d.children ? colorScale(d.depth) : 'white'))
+        .attr('pointer-events', (d?:{children:[]}) => (!d.children ? 'none' : null))
         .on('mouseover', function () { d3.select(this).attr('stroke', '#000'); })
         .on('mouseout', function () { d3.select(this).attr('stroke', null); })
-        .on('click', d => curFocus !== d && (zoomToNode(d), d3.event.stopPropagation()));
+        .on('click', (d:MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => curFocus !== d && (zoomToNode(d), d3.event.stopPropagation()));
 
     // Generate text labels. Set (only) root to visible initially
     const label = svg.append('g')
         .attr('class', 'perf-chart-labels')
       .selectAll('text')
       .data(packedRoot.descendants())
       .enter().append('text')
-        .style('fill-opacity', d => (d.parent === packedRoot ? 1 : 0))
-        .style('display', d => (d.parent === packedRoot ? 'inline' : 'none'))
-        .text(d =>  `${d.data.name}: \
+        .style('fill-opacity', (d:{parent:object}) => (d.parent === packedRoot ? 1 : 0))
+        .style('display', (d:{parent?:object}) => (d.parent === packedRoot ? 'inline' : 'none'))
+        .text((d:{data:{name:string, componentData?:{actualDuration:number}}}) =>  `${d.data.name}:
           ${Number.parseFloat(d.data.componentData.actualDuration || 0).toFixed(2)}ms`);
 
     // Remove any unused nodes
@@ -115,21 +122,21 @@ const PerfView = ({ snapshots, viewIndex, width = 600, height = 600 }) => {
     }
 
     // Transition visibility of labels
-    function zoomToNode(newFocus) {
+    function zoomToNode(newFocus:{x:number; y:number; r:number}) {
       const transition = svg.transition()
       .duration(d3.event.altKey ? 7500 : 750)
-      .tween('zoom', d => {
+      .tween('zoom', (d:object)=> {
         const i = d3.interpolateZoom(view, [newFocus.x, newFocus.y, newFocus.r * 2]);
         return t => zoomViewArea(i(t));
       });
 
       // Grab all nodes that were previously displayed, or who's parent is the new target newFocus
       // Transition their labels to visible or not
-      label.filter(function (d) { return d.parent === newFocus || this.style.display === 'inline'; })
+      label.filter(function (d:{parent:object}) { return d.parent === newFocus || this.style.display === 'inline'; })
       .transition(transition)
-      .style('fill-opacity', d => (d.parent === newFocus ? 1 : 0))
-      .on('start', function (d) { if (d.parent === newFocus) this.style.display = 'inline'; })
-      .on('end', function (d) { if (d.parent !== newFocus) this.style.display = 'none'; });
+      .style('fill-opacity', (d:{parent:object}) => (d.parent === newFocus ? 1 : 0))
+      .on('start', function (d:{parent:object}) { if (d.parent === newFocus) this.style.display = 'inline'; })
+      .on('end', function (d:{parent:object}) { if (d.parent !== newFocus) this.style.display = 'none'; });
 
       curFocus = newFocus;
     }

src/app/components/StateRoute.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable max-len */
 /* eslint-disable object-curly-newline */
 import React from 'react';
-import PropTypes from 'prop-types';
 import { MemoryRouter as Router, Route, NavLink, Switch } from 'react-router-dom';
 
 import Chart from './Chart.tsx';
@@ -12,7 +11,16 @@ import ErrorHandler from './ErrorHandler.tsx';
 const NO_STATE_MSG = 'No state change detected. Trigger an event to change state';
 // eslint-disable-next-line react/prop-types
 
-const StateRoute = ({ snapshot, hierarchy, snapshots, viewIndex }) => {
+
+interface StateRouteProps {
+  snapshot: {state?: object | string, children?: []}; 
+  hierarchy: object; 
+  snapshots: []; 
+  viewIndex: number;
+}
+
+const StateRoute = (props:StateRouteProps) => {
+  const { snapshot, hierarchy, snapshots, viewIndex } = props
   // gabi :: the hierarchy get set on the first click in the page, when page in refreshed we don't have a hierarchy so we need to check if hierarchy was initialize involk render chart
   const renderChart = () => {
     if (hierarchy) {
@@ -62,17 +70,4 @@ const StateRoute = ({ snapshot, hierarchy, snapshots, viewIndex }) => {
   );
 };
 
-StateRoute.propTypes = {
-  snapshot: PropTypes.shape({
-    state: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    children: PropTypes.arrayOf(PropTypes.object),
-  }).isRequired,
-};
-
-export default StateRoute;
-
-//   <div>
-//     <PerfView viewIndex={viewIndex} snapshots={snapshots} />
-//     <div className="ancestorStatus">Test</div>
-//   </div>
-// );
+export default StateRoute;

src/app/components/SwitchApp.tsx

@@ -7,7 +7,7 @@ import { setTab } from '../actions/actions.ts';
 const SwitchAppDropdown = () => {
   const [{ currentTab, tabs }, dispatch] = useStoreContext();
 
-  const tabsArray = [];
+  const tabsArray:[] = [];
   Object.keys(tabs).forEach(tab => {
     tabsArray.unshift({ value: tab, label: tabs[tab].title });
   });

src/app/components/Tree.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import JSONTree from 'react-json-tree';
-import PropTypes from 'prop-types';
 
 
-const getItemString = (type, data) => {
+const getItemString = (type, data:{state:object|string, name:string, children:[]}) => {
   // check to make sure that we are on the tree node, not anything else
   if (
     Object.keys(data).length > 3
@@ -16,7 +15,11 @@ const getItemString = (type, data) => {
   return null;
 };
 
-const Tree = props => {
+interface TreeProps {
+  snapshot: {state?:object|string, children?:[]};
+}
+
+const Tree = (props:TreeProps) => {
   const { snapshot } = props;
 
   return (
@@ -27,19 +30,11 @@ const Tree = props => {
           theme={{ tree: () => ({ className: 'json-tree' }) }}
           shouldExpandNode={() => true}
           getItemString={getItemString}
-          labelRenderer={raw => (typeof raw[0] !== 'number' ? <span>{raw[0]}</span> : null)}
+          labelRenderer={(raw:[]) => (typeof raw[0] !== 'number' ? <span>{raw[0]}</span> : null)}
         />
       )}
     </>
   );
 };
 
-Tree.propTypes = {
-  snapshot: PropTypes.shape({
-    state: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    children: PropTypes.arrayOf(PropTypes.object),
-    name: PropTypes.string,
-  }).isRequired,
-};
-
 export default Tree;