all containers and reducer converted to typescript

Author: aquinojardim

src/app/components/Diff.tsx

@@ -4,8 +4,8 @@ import ReactHtmlParser from 'react-html-parser';
 import { useStoreContext } from '../store.tsx';
 
 interface DiffProps {
-  snapshot: {state:object | string}; 
-  show?: boolean; 
+  snapshot: {state:object|string}; 
+  show?: boolean|undefined; 
 }
 
 function Diff(props: DiffProps) {
@@ -23,7 +23,7 @@ function Diff(props: DiffProps) {
   }
 
   // gabi :: cleanning preview from stateless data
-  const statelessCleanning = (obj:{name?:string; componentData?:object; state?: object | string;stateSnaphot?:object; children?:[]}) => {
+  const statelessCleanning = (obj:{name?:string; componentData?:object; state?:object|string;stateSnaphot?:object; children?:[]}) => {
     const newObj = { ...obj };
     if (newObj.name === 'nameless') {
       delete newObj.name;

src/app/containers/ActionContainer.tsx

@@ -17,12 +17,12 @@ function ActionContainer() {
   const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
   console.log(tabs[currentTab])
   let actionsArr = [];
-  const hierarchyArr = [];
+  const hierarchyArr:[] = [];
 
   // gabi and nate :: delete function to traverse state from snapshots, now we are tranversing state from hiararchy and alsog getting infromation on display name and component name
-  const displayArray = obj => {
+  const displayArray = (obj:{stateSnapshot:{children:[]}, name:number, branch:number, index:number, children?:[]}) => {
     if (obj.stateSnapshot.children.length > 0 && obj.stateSnapshot.children[0] && obj.stateSnapshot.children[0].state && obj.stateSnapshot.children[0].name) {
-      const newObj = {
+      const newObj:object = {
         index: obj.index,
         displayName: `${obj.name}.${obj.branch}`,
         state: obj.stateSnapshot.children[0].state,
@@ -63,7 +63,7 @@ function ActionContainer() {
     }
   }
 
-  actionsArr = hierarchyArr.map((snapshot, index) => {
+  actionsArr = hierarchyArr.map((snapshot:{state:object|string, displayName:string, componentName:string, componentData:object|undefined}, index) => {
     const selected = index === viewIndex;
     const last = viewIndex === -1 && index === hierarchyArr.length - 1;
     return (

src/app/containers/ButtonsContainer.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { importSnapshots, toggleMode } from '../actions/actions.ts';
 import { useStoreContext } from '../store.tsx';
 
-function exportHandler(snapshots) {
+function exportHandler(snapshots:[]) {
   // create invisible download anchor link
   const fileDownload = document.createElement('a');
 
@@ -20,11 +20,11 @@ function exportHandler(snapshots) {
   URL.revokeObjectURL(fileDownload.href);
 }
 
-function importHandler(dispatch) {
+function importHandler(dispatch:(a:()=>void)=>void) {
   const fileUpload = document.createElement('input');
   fileUpload.setAttribute('type', 'file');
 
-  fileUpload.onchange = event => {
+  fileUpload.onchange = (event:{target:{files:[]}}) => {
     const reader = new FileReader();
     reader.onload = () => dispatch(importSnapshots(JSON.parse(reader.result)));
     reader.readAsText(event.target.files[0]);

src/app/containers/MainContainer.tsx

@@ -4,7 +4,6 @@ import ActionContainer from './ActionContainer.tsx';
 import StateContainer from './StateContainer.tsx';
 import TravelContainer from './TravelContainer.tsx';
 import ButtonsContainer from './ButtonsContainer.tsx';
-
 import {
   addNewSnapshots, initialConnect, setPort, setTab, deleteTab,
 } from '../actions/actions.ts';
@@ -22,7 +21,7 @@ function MainContainer() {
     const port = chrome.runtime.connect();
 
     // listen for a message containing snapshots from the background script
-    port.onMessage.addListener(message => {
+    port.onMessage.addListener((message:{action:string, payload:object, sourceTab:number}) => {
       const { action, payload, sourceTab } = message;
       let maxTab;
       if (!sourceTab) {
@@ -85,17 +84,15 @@ function MainContainer() {
   // if viewIndex is -1, then use the sliderIndex instead
   const snapshotView = viewIndex === -1 ? snapshots[sliderIndex] : snapshots[viewIndex];
   // gabi :: cleannign hierarchy and snapshotView 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;
     }
@@ -105,7 +102,7 @@ function MainContainer() {
     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/containers/StateContainer.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
 import {
   MemoryRouter as Router,
   Route,
@@ -9,13 +8,16 @@ import {
 import StateRoute from '../components/StateRoute.tsx';
 import DiffRoute from '../components/DiffRoute.tsx';
 
+interface StateContainerProps {
+  snapshot:{state?:object|string, children?:[]}; 
+  hierarchy:object;
+  snapshots:[]; 
+  viewIndex:number;
+}
+
 // eslint-disable-next-line react/prop-types
-const StateContainer = ({ 
-  snapshot, 
-  hierarchy,
-  snapshots, 
-  viewIndex,
-}) => {
+const StateContainer = (props:StateContainerProps) => {
+  const { snapshot, hierarchy, snapshots, viewIndex } = props
   const [Text, setText] = useState('State');
   return (
     <Router>
@@ -61,11 +63,4 @@ const StateContainer = ({
   );
 };
 
-StateContainer.propTypes = {
-  snapshot: PropTypes.shape({
-    state: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    children: PropTypes.arrayOf(PropTypes.object),
-  }).isRequired,
-};
-
 export default StateContainer;

src/app/reducers/mainReducer.ts

@@ -3,7 +3,7 @@ import produce from 'immer';
 import * as types from '../constants/actionTypes.ts';
 
 
-export default (state, action) => produce(state, draft => {
+export default (state:object, action:{type:string, payload:any}) => produce((state:object, draft:{port:any, currentTab:any, tabs:object }) => {
   const { port, currentTab, tabs } = draft;
   const {
     hierarchy,
@@ -16,12 +16,12 @@ export default (state, action) => produce(state, draft => {
 
 
   // gabi and nate :: function that find the index in the hierarchy and extract the name of the equivalent index to add to the post message
-  const findName = (index, hierarchy) => {
+  const findName = (index:number, hierarchy:{index:number, name:number, children:[]}) => {
     if (hierarchy.index == index) {
       return hierarchy.name;
     }
 
-    const hierarchyChildArray = [];
+    const hierarchyChildArray:[] = [];
     for (const hierarchyChild of hierarchy.children) {
       hierarchyChildArray.push(findName(index, hierarchyChild));
     }