(refactor) TypeScript refactoring

.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
     "plugin:import/warnings",
     "plugin:prettier/recommended",
     "prettier/react",
+    "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
   ],
   globals: {
@@ -21,6 +22,8 @@ module.exports = {
   ignorePatterns: ["node_modules/"],
   parser: '@typescript-eslint/parser',
   parserOptions: {
+    project: "tsconfig.json",
+    tsconfigRootDir: ".",
     ecmaFeatures: {
       jsx: true,
     },

config/webpack.dev.config.js

@@ -15,7 +15,7 @@ var srcDir = path.join(appDir, 'src');
 var options = {
   entry: {
     background: path.join(srcDir, 'background.js'),
-    inspector: path.join(srcDir, 'inspector.js'),
+    inspector: path.join(srcDir, 'inspector.tsx'),
   },
   output: {
     path: path.join(appDir, 'build'),

config/webpack.prod.config.js

@@ -15,7 +15,7 @@ var srcDir = path.join(appDir, "src");
 var options = {
   entry: {
     background: path.join(srcDir, "background.js"),
-    inspector: path.join(srcDir, "inspector.js"),
+    inspector: path.join(srcDir, "inspector.tsx"),
   },
   output: {
     path: path.join(appDir, "build"),

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "build": "node scripts/build.js",
     "start": "node scripts/webserver.js",
+    "eslint": "eslint --cache --ext .js,.jsx,.ts,.tsx src",
     "es": "eslint ./src "
   },
   "devDependencies": {
@@ -14,6 +15,7 @@
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-react": "^7.7.4",
     "@babel/preset-typescript": "^7.8.3",
+    "@types/chrome": "0.0.92",
     "@types/classnames": "^2.2.9",
     "@types/react": "^16.9.17",
     "@types/react-dom": "^16.9.4",

src/inspector.js → src/inspector.tsx

@@ -1,14 +1,15 @@
+/// <reference types="chrome"/>
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './reset.css';
 import App from './viewer/App';
 
 const tabId = parseInt(window.location.search.substr(1), 10);
-
-const handlers = {};
+// TODO create
+const handlers: any = {};
 
 function startDebugging() {
-  chrome.debugger.sendCommand({ tabId }, 'Network.enable', null, () => {
+  chrome.debugger.sendCommand({ tabId }, 'Network.enable', undefined, () => {
     if (chrome.runtime.lastError) {
       console.error(chrome.runtime.lastError.message);
     } else {

src/viewer/App.js → src/viewer/App.tsx

@@ -1,21 +1,34 @@
-import React from 'react';
+import React, { ChangeEvent } from 'react';
 import Panel from 'react-flex-panel';
 import ControlPanel from './ControlPanel/ControlPanel';
 import FrameList from './FrameTable/FrameTable';
-import FrameView from './PanelView/PanelView';
+import PanelView from './PanelView/PanelView';
 import { stringToBuffer } from './Helpers/Helper';
 import './App.scss';
+import { IFrame, IFrameType, Response } from './types';
 
-export default class App extends React.Component {
+interface AppProps {
+  handlers: any;
+}
+interface AppState {
+  [key: string]: any;
+  frames: IFrame[];
+  activeId: number | null;
+  isCapturing: boolean;
+  regName: string;
+  filter: string;
+  isFilterInverse: boolean;
+}
+export default class App extends React.Component<AppProps, AppState> {
   frameUniqueId = 0;
 
-  frameIssueTime = null;
+  frameIssueTime: number;
 
-  frameIssueWallTime = null;
+  frameIssueWallTime: number;
 
   cacheKey = ['isCapturing', 'regName', 'filter', 'isFilterInverse'];
 
-  constructor(props) {
+  constructor(props: AppProps) {
     super(props);
     this.props.handlers['Network.webSocketFrameReceived'] = this.webSocketFrameReceived.bind(this);
     this.props.handlers['Network.webSocketFrameSent'] = this.webSocketFrameSent.bind(this);
@@ -30,26 +43,32 @@ export default class App extends React.Component {
   }
 
   componentDidMount() {
-    const cacheState = this.cacheKey.reduce((acc, key) => {
-      const value = localStorage.getItem(key);
+    const cacheState = this.cacheKey.reduce<Record<string, string | boolean>>((acc, key) => {
+      const value = window.localStorage.getItem(key);
       if (value !== null && value !== undefined) {
         acc[key] = value;
+        if (value === 'true') {
+          acc[key] = true;
+        }
+        if (value === 'false') {
+          acc[key] = false;
+        }
       }
       return acc;
     }, {});
     this.setState(cacheState);
     // TODO Boolean values turns to strings.
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps: AppProps, prevState: AppState) {
     this.cacheKey.forEach((key) => {
       if (prevState[key] !== this.state[key]) {
         localStorage.setItem(key, this.state[key]);
       }
     });
   }
 
-  getTime(timestamp) {
+  getTime(timestamp: number) {
     if (this.frameIssueTime == null) {
       this.frameIssueTime = timestamp;
       this.frameIssueWallTime = new Date().getTime();
@@ -85,7 +104,7 @@ export default class App extends React.Component {
         </Panel>
         <Panel minSize={100} className="PanelView">
           {active != null ? (
-            <FrameView frame={active} />
+            <PanelView frame={active} />
           ) : (
             <span className="message">Select a frame to view its contents</span>
           )}
@@ -94,7 +113,7 @@ export default class App extends React.Component {
     );
   }
 
-  selectFrame = (id) => {
+  selectFrame = (id: number) => {
     this.setState({ activeId: id });
   };
 
@@ -106,21 +125,21 @@ export default class App extends React.Component {
     this.setState({ isCapturing: !this.state.isCapturing });
   };
 
-  setRegName = (e) => {
+  setRegName = (e: ChangeEvent<HTMLInputElement>) => {
     this.setState({ regName: e.target.value });
   };
 
-  setFilter = (e) => {
+  setFilter = (e: ChangeEvent<HTMLInputElement>) => {
     this.setState({ filter: e.target.value });
   };
 
   onFilterModeToggle = () => {
     this.setState({ isFilterInverse: !this.state.isFilterInverse });
   };
 
-  addFrame(type, timestamp, response) {
+  addFrame(type: IFrameType, timestamp: number, response: Response) {
     if (response.opcode === 1 || response.opcode === 2) {
-      const frame = {
+      const frame: IFrame = {
         type,
         name: type,
         id: this.frameUniqueId,
@@ -137,16 +156,14 @@ export default class App extends React.Component {
     }
   }
 
-  webSocketFrameReceived({ timestamp, response }) {
-    if (this.state.isCapturing === true || this.state.isCapturing === 'true') {
-      // see componentDidMount()
+  webSocketFrameReceived({ timestamp, response }: { timestamp: number; response: Response }) {
+    if (this.state.isCapturing) {
       this.addFrame('incoming', timestamp, response);
     }
   }
 
-  webSocketFrameSent({ timestamp, response }) {
-    if (this.state.isCapturing === true || this.state.isCapturing === 'true') {
-      // see componentDidMount()
+  webSocketFrameSent({ timestamp, response }: { timestamp: number; response: Response }) {
+    if (this.state.isCapturing) {
       this.addFrame('outgoing', timestamp, response);
     }
   }

src/viewer/ControlPanel/ControlPanel.tsx

@@ -1,23 +1,24 @@
-import React, { ChangeEvent } from 'react';
+import React, { ChangeEvent, MouseEvent } from 'react';
 import FontAwesome from 'react-fontawesome';
 import cx from 'classnames';
 import './ControlPanel.scss';
 import { EFilter } from '../types';
-
-type ControlPanelProps = {
+// TODO not to return events
+type ControlPanelMode = {
   isCapturing: boolean;
-  onClear: { (event: MouseEvent): void };
-  onFilterModeToggle: { (event: MouseEvent): void };
-  onCapturingToggle: { (event: MouseEvent): void };
-  onRegName: { (event: ChangeEvent): void };
-  onFilter: { (event: ChangeEvent): void };
+  onClear: (event: MouseEvent) => void;
+  onFilterModeToggle: (event: MouseEvent) => void;
+  onCapturingToggle: (event: MouseEvent) => void;
+  onRegName: (event: ChangeEvent) => void;
+  onFilter: (event: ChangeEvent) => void;
 };
-interface EProps extends ControlPanelProps, EFilter {}
-interface EState {
+interface ControlPanelProps extends ControlPanelMode, EFilter {}
+interface ControlPanelState {
   openInput?: null | 'filter' | 'name';
 }
-export default class ControlPanel extends React.Component<EProps, EState> {
-  constructor(props: EProps) {
+
+export default class ControlPanel extends React.Component<ControlPanelProps, ControlPanelState> {
+  constructor(props: ControlPanelProps) {
     super(props);
     this.state = {
       openInput: null, // 'filter' | 'name'

src/viewer/FrameTable/FrameTable.tsx

@@ -1,23 +1,15 @@
 /* eslint max-classes-per-file: 0 */
-import React from 'react';
+import React, { MouseEvent } from 'react';
 import cx from 'classnames';
 import FontAwesome from 'react-fontawesome';
 import { checkViable, getName, TimeStamp } from '../Helpers/Helper';
 import './FrameTable.scss';
 import { EFilter, IFrame } from '../types';
 
-class Filter implements EFilter {
-  public regName: RegExp;
-  public filter: RegExp;
-  public isFilterInverse: boolean;
-}
-type FrameListProps = { frames: IFrame[]; activeId: number; onSelect: any };
-type FrameEntryProps = {
-  key: number;
-  frame: IFrame;
-  selected: boolean;
-  onSelect: void;
-  filterData: EFilter;
+type FrameListProps = {
+  frames: IFrame[];
+  activeId: number | null;
+  onSelect: (id: number | null) => void;
 };
 
 export default class FrameList extends React.Component<FrameListProps & EFilter> {
@@ -43,11 +35,20 @@ export default class FrameList extends React.Component<FrameListProps & EFilter>
   }
 }
 
+type FrameEntryProps = {
+  key: number;
+  frame: IFrame;
+  selected: boolean;
+  onSelect: (id: number | null) => void;
+  filterData: EFilter;
+};
+
 class FrameEntry extends React.PureComponent<FrameEntryProps> {
-  handlerSelect = (e) => {
+  handlerSelect = (e: MouseEvent) => {
     e.stopPropagation();
     this.props.onSelect(this.props.frame.id);
   };
+
   render() {
     const { frame, selected, filterData } = this.props;
     if (checkViable(frame, filterData as EFilter)) return null;

src/viewer/Helpers/Helper.ts

@@ -32,7 +32,7 @@ export const getName = (frame: IFrame, filterData: EFilter): string => {
 };
 
 export const checkViable = (frame: IFrame, filterData: EFilter): boolean => {
-  if (filterData.filter) {
+  if (filterData.filter && frame.text) {
     if (filterData.isFilterInverse) {
       return !!grep(frame.text, filterData.filter);
     }

src/viewer/PanelView/HexViewer.js → src/viewer/PanelView/HexViewer.tsx

@@ -2,7 +2,11 @@ import React from 'react';
 import classNames from 'classnames';
 import './HexViewer.scss';
 
-export default function HexViewer(props) {
+interface HexViewerProps {
+  className: string;
+  data: Uint8Array;
+}
+export default function HexViewer(props: HexViewerProps) {
   const { data, className } = props;
   let numDigits = 4;
   /* eslint-disable-next-line no-bitwise */