Added Typescript to functions that return JSX elements

Author: VNguyenCode

src/app/components/Action.tsx

@@ -39,7 +39,7 @@ interface ActionProps {
  */
 // index and delta props were removed from Action.jsx  */
 // viewIndex and handleonkeyDown added to props
-const Action = (props: ActionProps): unknown => {
+const Action = (props: ActionProps): JSX.Element => {
   const {
     selected, last, index, sliderIndex, dispatch, displayName, componentName,
     componentData, viewIndex, handleOnkeyDown,
@@ -80,7 +80,7 @@ const Action = (props: ActionProps): unknown => {
   return (
     <div
       // Invoking keyboard functionality; functionality is in ActionContainer;
-      onKeyDown={(e:string) => handleOnkeyDown(e, viewIndex)}
+      onKeyDown={(e) => handleOnkeyDown(e, viewIndex)}
       className={selected || last ? 'action-component selected' : 'action-component'}
       onClick={() => {
         dispatch(changeView(index));

src/app/components/App.tsx

@@ -10,7 +10,7 @@ const initialState:{port: null|number,
     tabs: {},
   };
 
-function App(): unknown {
+function App(): JSX.Element {
   return (
     <StoreContext.Provider value={useReducer(mainReducer, initialState)}>
       <MainContainer />

src/app/components/DiffRoute.tsx

@@ -11,10 +11,12 @@ interface DiffRouteProps{
     state?: string | unknown
     stateSnaphot?: Record<string, unknown>;
     children?: unknown[];
+    atomSelectors?:object; 
+    atomsComponents?:object
   }>;
 }
 
-const DiffRoute = (props: DiffRouteProps): unknown => (
+const DiffRoute = (props: DiffRouteProps): JSX.Element => (
 
   <Router>
     <div className="navbar">

src/app/components/Dropdown.tsx

@@ -7,7 +7,7 @@ interface DropdownProps {
   setSpeed: () => void;
 }
 
-const Dropdown = (props: DropdownProps): unknown => {
+const Dropdown = (props: DropdownProps): JSX.Element => {
   const { speeds, setSpeed, selectedSpeed } = props;
   return (
     <Select

src/app/components/StateRoute.tsx

@@ -16,7 +16,7 @@ import ComponentMap from './ComponentMap';
 import PerfView from './PerfView';
 import AtomsRelationship from './AtomsRelationship.jsx';
 import Example from './AtomsRelationship.jsx';
-import ParentSize from '@visx/responsive/lib/components/ParentSize';
+import ParentSize from '@visx/responsive';
 
 const History = require('./History').default;
 
@@ -84,8 +84,9 @@ const StateRoute = (props: StateRouteProps) => {
 
   const renderAtomsRelationship = () => (
     <Example
-    width={600}
-    height={1000} />
+    width={500}
+    height={500} />
+    
     //   atomsComponents={snapshot.atomsComponents}
     //   atomSelectors={snapshot.atomSelectors}
     // />

src/app/containers/StateContainer.tsx

@@ -13,17 +13,18 @@ interface StateContainerProps {
   snapshot: Record<number,
   { name?: string; componentData?: Record<string, unknown>;
     state?: Record<string, unknown>; stateSnaphot?: Record<string, unknown>; children?: unknown[]; 
-    AtomsRelationship?: any[]
+    AtomsRelationship?: any[]; atomSelectors?:object; atomsComponents?:object
   }
   > ;
   AtomsRelationship?: any[];
   hierarchy:Record<string, unknown>;
   snapshots:[];
   viewIndex:number;
+  
 }
 
 // eslint-disable-next-line react/prop-types
-const StateContainer = (props:StateContainerProps): unknown => {
+const StateContainer = (props:StateContainerProps): JSX.Element => {
   const {
     snapshot, hierarchy, snapshots, viewIndex,
   } = props;