typescript events

Author: aquinojardim

src/app/components/Action.tsx

@@ -2,9 +2,23 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { changeView, changeSlider } from '../actions/actions.ts';
 
+interface ActionProps {
+  selected: boolean;
+  last: boolean; 
+  index: number;
+  sliderIndex: number;
+  dispatch: () => void;
+  displayName: string;
+  componentName: string;
+  componentData: {actualDuration: number};
+  state: object;
+  viewIndex: number;
+  handleOnkeyDown: (e: KeyboardEvent, i: number) => void;
+}
+
 /* // gabi and nate :: index and delta props were removed from Action.jsx  */
 // viewIndex and handleonkeyDown added to props
-const Action = props => {
+const Action: React.SFC = (props: ActionProps) => {
   const {
     selected, last, index, sliderIndex, dispatch, displayName, componentName, componentData, state, viewIndex, handleOnkeyDown,
   } = props;
@@ -41,7 +55,7 @@ const Action = props => {
   return (
     <div
       // Edwin: invoking keyboard functionality; functionality is in ActionContainer;
-      onKeyDown={e => handleOnkeyDown(e, viewIndex)}
+      onKeyDown={(e: KeyboardEvent) => handleOnkeyDown(e, viewIndex)}
       className={selected || last ? 'action-component selected' : 'action-component'}
       onClick={() => {
         dispatch(changeView(index));
@@ -61,7 +75,7 @@ const Action = props => {
       </button>
       <button
         className="jump-button"
-        onClick={e => {
+        onClick={(e: MouseEvent) => {
           e.stopPropagation();
           dispatch(changeSlider(index));
           dispatch(changeView(index));
@@ -74,17 +88,5 @@ const Action = props => {
     </div>
   );
 };
-// gabi and nate :: added displayName, componentName and State props to propTypes
-Action.propTypes = {
-  sliderIndex: PropTypes.number.isRequired,
-  selected: PropTypes.bool.isRequired,
-  index: PropTypes.number.isRequired,
-  dispatch: PropTypes.func.isRequired,
-  displayName: PropTypes.string.isRequired,
-  componentName: PropTypes.string.isRequired,
-  state: PropTypes.object.isRequired,
-  handleOnkeyDown: PropTypes.func.isRequired,
-  viewIndex: PropTypes.number.isRequired,
-};
 
 export default Action;

src/app/components/App.tsx

@@ -1,7 +1,7 @@
 import React, { useReducer } from 'react';
 import MainContainer from '../containers/MainContainer.tsx';
 import { StoreContext } from '../store.tsx';
-import mainReducer from '../reducers/mainReducer.tsx';
+import mainReducer from '../reducers/mainReducer.ts';
 
 const initialState = {
   port: null,

src/app/components/DiffRouter.tsx renamed to src/app/components/DiffRoute.tsx

@@ -41,7 +41,7 @@ function ActionContainer() {
   if (hierarchy) displayArray(hierarchy);
 
   // Edwin: handles keyboard presses, function passes an event and index of each action-component
-  function handleOnKeyDown(e, i) {
+  function handleOnKeyDown(e:KeyboardEvent, i:number) {
     let currIndex = i;
     // up array key pressed
     if (e.keyCode === 38) {
@@ -89,7 +89,7 @@ function ActionContainer() {
       <div className="action-component exclude">
         <button
           className="empty-button"
-          onClick={() => {
+          onClick={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
             dispatch(emptySnapshots());
             // set slider back to zero
             resetSlider();

src/app/components/StateRouter.tsx renamed to src/app/components/StateRoute.tsx

@@ -42,23 +42,23 @@ function ButtonsContainer() {
 
   return (
     <div className="buttons-container">
-      <button className="pause-button" type="button" onClick={() => dispatch(toggleMode('paused'))}>
+      <button className="pause-button" type="button" onClick={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => dispatch(toggleMode('paused'))}>
         {paused ? 'Resume' : 'Pause'}
       </button>
-      <button className="lock-button" type="button" onClick={() => dispatch(toggleMode('locked'))}>
+      <button className="lock-button" type="button" onClick={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => dispatch(toggleMode('locked'))}>
         {locked ? 'Unlock' : 'Lock'}
       </button>
       <button
         className="persist-button"
         type="button"
-        onClick={() => dispatch(toggleMode('persist'))}
+        onClick={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => dispatch(toggleMode('persist'))}
       >
         {persist ? 'Unpersist' : 'Persist'}
       </button>
-      <button className="export-button" type="button" onClick={() => exportHandler(snapshots)}>
+      <button className="export-button" type="button" onClick={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => exportHandler(snapshots)}>
         Export
       </button>
-      <button className="import-button" type="button" onClick={() => importHandler(dispatch)}>
+      <button className="import-button" type="button" onClick={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => importHandler(dispatch)}>
         Import
       </button>
     </div>

src/app/containers/ActionContainer.tsx

@@ -4,7 +4,8 @@ const ChromeExtensionReloader = require('webpack-chrome-extension-reloader'); //
 const config = {
   // use a "multi-main entry" to inject multiple dependent files together and graph their dependencies into one "chunk"
   entry: {
-    app: './src/app/index.js',
+    // app: './src/app/index.js',
+    app: './src/app/index.tsx',
     background: './src/extension/background.js',
     content: './src/extension/contentScript.js',
     backend: './dev-reactime/index.js',