From ba6f91ec79b82d3bab9ab7294f4360b93db70bb5 Mon Sep 17 00:00:00 2001
From: Amit Bhavikatti <amitmbhavikatti@gmail.com>
Date: Wed, 16 May 2018 12:05:04 +0530
Subject: [PATCH 1/3] Add title attribute to all buttons

---
 app/components/InterceptAllButton.tsx         |  17 +--
 .../Intercept_Components/InterceptTextBox.tsx |   7 +-
 app/components/request_list.tsx               | 135 ++++++++++--------
 app/containers/popup.tsx                      |  78 +++++-----
 4 files changed, 125 insertions(+), 112 deletions(-)

diff --git a/app/components/InterceptAllButton.tsx b/app/components/InterceptAllButton.tsx
index 0347146..8c79e05 100644
--- a/app/components/InterceptAllButton.tsx
+++ b/app/components/InterceptAllButton.tsx
@@ -3,13 +3,14 @@ import * as React from "react";
 export const InterceptAllButton = props => {
   return (
     <button
-    id="intercept-all-btn"
-    className="btn btn-sm btn-primary btn-clear"
-    disabled={props.disabled}
-    onClick={props.handleCheckedRequests}
-  >
-    Intercept
-  </button>
+      id="intercept-all-btn"
+      title="Intercept Selected Requests"
+      className="btn btn-sm btn-primary btn-clear"
+      disabled={props.disabled}
+      onClick={props.handleCheckedRequests}
+    >
+      Intercept
+    </button>
   );
 };
 
@@ -17,4 +18,4 @@ InterceptAllButton.displayName = "InterceptAllButton";
 
 InterceptAllButton.defaultProps = {
   disabled: false
-};
\ No newline at end of file
+};
diff --git a/app/components/Intercept_Components/InterceptTextBox.tsx b/app/components/Intercept_Components/InterceptTextBox.tsx
index 3503e77..50abb2c 100644
--- a/app/components/Intercept_Components/InterceptTextBox.tsx
+++ b/app/components/Intercept_Components/InterceptTextBox.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import {RequestHeaderList} from "./RequestHeaderList";
+import { RequestHeaderList } from "./RequestHeaderList";
 
 export const InterceptTextBox = props => {
   const requestId = props.rowProps.checkbox.requestId;
@@ -25,9 +25,9 @@ export const InterceptTextBox = props => {
           </a>
         </div>
         <div className="response">
-          <label className="responseTextlabel">Response Text</label>
+          <label className="responseTextlabel">Mocked Response Text</label>
           <button
-            title="Fetch Response"
+            title="Fetch Response Text"
             className="fetch-responsetext btn-sm btn-primary"
             onClick={() => {
               props.fetchResponse(props.rowProps.checkbox);
@@ -38,6 +38,7 @@ export const InterceptTextBox = props => {
             className="responseText"
             defaultValue={responseTextValue}
             key={props.responseData[requestId]}
+            title="Mocked Response Text"
             //value={textAreaValue}
             onChange={event => {
               props.handleRespTextChange(event.target.value, requestId);
diff --git a/app/components/request_list.tsx b/app/components/request_list.tsx
index 4e39756..59d8b5c 100644
--- a/app/components/request_list.tsx
+++ b/app/components/request_list.tsx
@@ -1,9 +1,9 @@
 import * as React from "react";
 import ReactTable from "react-table";
 import matchSorter from "match-sorter";
-import {InterceptForm} from "./../components/Intercept_Components/index";
-import {InterceptAllButton} from './../components/InterceptAllButton'
-import {Switch} from './Switch'
+import { InterceptForm } from "./../components/Intercept_Components/index";
+import { InterceptAllButton } from "./../components/InterceptAllButton";
+import { Switch } from "./Switch";
 export interface RequestObj {
   requests: Array<chrome.webRequest.WebRequestDetails>;
   requestId?: number;
@@ -20,12 +20,12 @@ export interface RequestObj {
   PageDetails: object;
   handlePaginationChange: React.MouseEvent<HTMLButtonElement>;
   tabId: number;
-  clearRequests:React.ChangeEvent<HTMLButtonElement>;
-  disableInterceptor:React.ChangeEvent<HTMLButtonElement>;
-  updateInterceptorStatus:React.ChangeEvent<HTMLButtonElement>;
-  isInterceptorOn:object;
-  fetchResponse:React.MouseEvent<HTMLSpanElement>
-  responseData : object;
+  clearRequests: React.ChangeEvent<HTMLButtonElement>;
+  disableInterceptor: React.ChangeEvent<HTMLButtonElement>;
+  updateInterceptorStatus: React.ChangeEvent<HTMLButtonElement>;
+  isInterceptorOn: object;
+  fetchResponse: React.MouseEvent<HTMLSpanElement>;
+  responseData: object;
   responseError: object;
 }
 const RequestList = (props: RequestObj) => {
@@ -33,7 +33,11 @@ const RequestList = (props: RequestObj) => {
     {
       Header: "Request URL",
       accessor: "url",
-      Cell: ({original}) => <div className="url" title={original.url}>{original.url}</div>,
+      Cell: ({ original }) => (
+        <div className="url" title={original.url}>
+          {original.url}
+        </div>
+      ),
       filterable: true,
       filterMethod: (filter, rows) => {
         return matchSorter(rows, filter.value, {
@@ -45,15 +49,15 @@ const RequestList = (props: RequestObj) => {
     },
     {
       Header: "Method",
-      className:"method",
+      className: "method",
       accessor: "method",
       width: 100,
       filterable: true,
       filterMethod: (filter, row) => row[filter.id] === filter.value,
-      Filter: ({filter, onChange}) => (
+      Filter: ({ filter, onChange }) => (
         <select
           onChange={event => onChange(event.target.value)}
-          style={{width: "100%"}}
+          style={{ width: "100%" }}
           value={filter ? filter.value : ""}
         >
           <option value="">ALL</option>
@@ -66,7 +70,7 @@ const RequestList = (props: RequestObj) => {
     {
       id: "checkbox",
       accessor: "",
-      Cell: ({original}) => {
+      Cell: ({ original }) => {
         return (
           <input
             type="checkbox"
@@ -81,63 +85,70 @@ const RequestList = (props: RequestObj) => {
       Header: "Intercept",
       sortable: false,
       width: 75,
-      className: 'text-center'
+      className: "text-center"
     }
   ];
 
   const enabledRequests = props.requests.filter(request => {
-      return props.checkedReqs[request.requestId];
-    })
+    return props.checkedReqs[request.requestId];
+  });
 
   return (
     <div>
-    <div className="grid-container response-action">
-      <Switch isOn={props.isInterceptorOn[props.tabId]}  handleSwitch={props.handleSwitch}/>
-      <div className="text-right">
-        <InterceptAllButton
-        disabled={!enabledRequests.length}
-        handleCheckedRequests={() => {
-          return props.handleCheckedRequests(enabledRequests);
-        }}
-        />
-        <button
-          type="button"
-          className="btn btn-sm btn-primary btn-clear"
-          onClick={props.clearRequests}
-        >
-          CLEAR
-        </button>
+      <div className="grid-container response-action">
+        <Switch isOn={props.isInterceptorOn[props.tabId]} handleSwitch={props.handleSwitch} />
+        <div className="text-right">
+          <InterceptAllButton
+            disabled={!enabledRequests.length}
+            handleCheckedRequests={() => {
+              return props.handleCheckedRequests(enabledRequests);
+            }}
+          />
+          <button
+            type="button"
+            title="Clear All Requests"
+            className="btn btn-sm btn-primary btn-clear"
+            onClick={props.clearRequests}
+          >
+            CLEAR
+          </button>
+        </div>
       </div>
-    </div>
 
-    <ReactTable
-      data={props.requests}
-      columns={columns}
-      showPagination={true}
-      showPaginationTop={false}
-      showPaginationBottom={true}
-      defaultPageSize={10}
-      page={props.PageDetails[props.tabId] ? props.PageDetails[props.tabId].currentPageNumber : 0}
-      pageSize={props.PageDetails[props.tabId] ? props.PageDetails[props.tabId].currentRowSize : 10}
-      onPageChange={changedPageNo => props.handlePaginationChange(changedPageNo, props.tabId, "currentPageNumber")}
-      onPageSizeChange={changedRowSize => props.handlePaginationChange(changedRowSize, props.tabId, "currentRowSize")}
-      collapseOnDataChange={false}
-      SubComponent={row => (
-        <InterceptForm
-          rowProps={row}
-          handleStatusCodeChange={props.handleStatusCodeChange}
-          handleRespTextChange={props.handleRespTextChange}
-          responseText={props.responseText}
-          statusCodes={props.statusCodes}
-          handleContentTypeChange={props.handleContentTypeChange}
-          contentType={props.contentType}
-          tabId={props.tabId}
-          fetchResponse={props.fetchResponse}
-          responseData = {props.responseData}
-          responseError= {props.responseError}
-        />
-      )}
-    />
+      <ReactTable
+        data={props.requests}
+        columns={columns}
+        showPagination={true}
+        showPaginationTop={false}
+        showPaginationBottom={true}
+        defaultPageSize={10}
+        page={props.PageDetails[props.tabId] ? props.PageDetails[props.tabId].currentPageNumber : 0}
+        pageSize={
+          props.PageDetails[props.tabId] ? props.PageDetails[props.tabId].currentRowSize : 10
+        }
+        onPageChange={changedPageNo =>
+          props.handlePaginationChange(changedPageNo, props.tabId, "currentPageNumber")
+        }
+        onPageSizeChange={changedRowSize =>
+          props.handlePaginationChange(changedRowSize, props.tabId, "currentRowSize")
+        }
+        collapseOnDataChange={false}
+        SubComponent={row => (
+          <InterceptForm
+            rowProps={row}
+            handleStatusCodeChange={props.handleStatusCodeChange}
+            handleRespTextChange={props.handleRespTextChange}
+            responseText={props.responseText}
+            statusCodes={props.statusCodes}
+            handleContentTypeChange={props.handleContentTypeChange}
+            contentType={props.contentType}
+            tabId={props.tabId}
+            fetchResponse={props.fetchResponse}
+            responseData={props.responseData}
+            responseError={props.responseError}
+          />
+        )}
+      />
     </div>
   );
 };
diff --git a/app/containers/popup.tsx b/app/containers/popup.tsx
index 17e30f4..8e59fd5 100644
--- a/app/containers/popup.tsx
+++ b/app/containers/popup.tsx
@@ -1,11 +1,10 @@
 import * as React from "react";
 import * as cx from "classnames";
-import {connect} from "react-redux";
-import {Store} from "react-chrome-redux";
+import { connect } from "react-redux";
 
 import * as MessageService from "./../message_service";
 import RequestList from "./../components/request_list";
-import {POPUP_PROPS} from "./../types";
+import { POPUP_PROPS } from "./../types";
 import * as actionTypes from "./../actions";
 
 interface DispatchProps {
@@ -22,7 +21,7 @@ interface DispatchProps {
   handleContentTypeChange: typeof actionTypes.handleContentTypeChange;
   handlePaginationChange: typeof actionTypes.handlePaginationChange;
   updateInterceptorStatus: typeof actionTypes.updateInterceptorStatus;
-  fetchResponse:typeof actionTypes.fetchResponse;
+  fetchResponse: typeof actionTypes.fetchResponse;
 }
 
 const CHROME_URL_REGEX = /^chrome:\/\/.+$/;
@@ -50,9 +49,9 @@ export class Popup extends React.Component<POPUP_PROPS & DispatchProps, {}> {
       this.props.updateField("enabled", enabledStatus);
     });
     this.props.updateField("errorMessage", "");
-    if(this.props.isInterceptorOn[this.props.tabId] === undefined ){
-      this.props.updateInterceptorStatus(this.props.tabId, true)
-     }
+    if (this.props.isInterceptorOn[this.props.tabId] === undefined) {
+      this.props.updateInterceptorStatus(this.props.tabId, true);
+    }
   }
 
   isUrlInValid = (tabUrl: string) => {
@@ -70,7 +69,7 @@ export class Popup extends React.Component<POPUP_PROPS & DispatchProps, {}> {
     } else {
       MessageService.getRequests(this.props.tabId, requests => {
         MessageService.enableLogging(this.props.tabUrl, this.props.tabId);
-        this.props.updateFields({enabled: true, requests});
+        this.props.updateFields({ enabled: true, requests });
       });
     }
   };
@@ -104,33 +103,34 @@ export class Popup extends React.Component<POPUP_PROPS & DispatchProps, {}> {
     this.props.handlePaginationChange(newPageNo_rowSize, tabId, field);
   };
 
-  disableInterceptor =(tabId:number) => {
-    MessageService.disableInterceptor(tabId)
-  }
+  disableInterceptor = (tabId: number) => {
+    MessageService.disableInterceptor(tabId);
+  };
 
-  updateInterceptorStatus = (tabId:number, interceptMode:boolean) => {
-    this.props.updateInterceptorStatus(tabId, interceptMode)
-  }
- updateBadgeIcon = (tabId:number,disabledStatus:boolean) => {
-    MessageService.updateBadgeIcon(tabId,disabledStatus)
-  }
+  updateInterceptorStatus = (tabId: number, interceptMode: boolean) => {
+    this.props.updateInterceptorStatus(tabId, interceptMode);
+  };
+  updateBadgeIcon = (tabId: number, disabledStatus: boolean) => {
+    MessageService.updateBadgeIcon(tabId, disabledStatus);
+  };
 
   handleSwitch = () => {
-    if(this.props.isInterceptorOn[this.props.tabId]){
-      this.props.updateInterceptorStatus(this.props.tabId, false)
-      .then(() => {
-        this.disableInterceptor(this.props.tabId)
-        this.updateBadgeIcon(this.props.tabId, true)
-      })
-      .catch((err) => {
-        // something broke in the background store
-        console.log(err)
-      });
-    }else{
-      this.props.updateInterceptorStatus(this.props.tabId, true)
-      this.updateBadgeIcon(this.props.tabId, false)
+    if (this.props.isInterceptorOn[this.props.tabId]) {
+      this.props
+        .updateInterceptorStatus(this.props.tabId, false)
+        .then(() => {
+          this.disableInterceptor(this.props.tabId);
+          this.updateBadgeIcon(this.props.tabId, true);
+        })
+        .catch(err => {
+          // something broke in the background store
+          console.log(err);
+        });
+    } else {
+      this.props.updateInterceptorStatus(this.props.tabId, true);
+      this.updateBadgeIcon(this.props.tabId, false);
     }
-  }
+  };
 
   render() {
     const buttonClass = cx("btn btn-block", {
@@ -164,7 +164,12 @@ export class Popup extends React.Component<POPUP_PROPS & DispatchProps, {}> {
               </svg>
               <span>INTERCEPTOR</span>
             </a>
-            <button type="button" onClick={this.handleClick} className={buttonClass}>
+            <button
+              title="Start/Stop Listening to Requests"
+              type="button"
+              onClick={this.handleClick}
+              className={buttonClass}
+            >
               {this.props.enabled ? "Stop Listening" : "Start Listening"}
             </button>
           </div>
@@ -174,12 +179,7 @@ export class Popup extends React.Component<POPUP_PROPS & DispatchProps, {}> {
           {this.props.errorMessage ? (
             <p className="popup-error-message popup-error"> {this.props.errorMessage} </p>
           ) : null}
-          {
-            this.props.interceptStatus &&
-            <div id="success-msg">
-              {this.props.interceptStatus}
-            </div>
-          }
+          {this.props.interceptStatus && <div id="success-msg">{this.props.interceptStatus}</div>}
 
           <RequestList
             requests={this.props.requests}
@@ -239,7 +239,7 @@ const mapDispatchToProps: DispatchProps = {
   handleContentTypeChange: actionTypes.handleContentTypeChange,
   handlePaginationChange: actionTypes.handlePaginationChange,
   updateInterceptorStatus: actionTypes.updateInterceptorStatus,
-  fetchResponse:actionTypes.fetchResponse
+  fetchResponse: actionTypes.fetchResponse
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Popup);

From d39a941ed85755801d9f45403ed88380c788d902 Mon Sep 17 00:00:00 2001
From: Amit Bhavikatti <amitmbhavikatti@gmail.com>
Date: Wed, 16 May 2018 12:24:17 +0530
Subject: [PATCH 2/3] Set Start/Stop button title attr conditionally

---
 app/containers/popup.tsx | 42 ++++++++++++++++++----------------------
 1 file changed, 19 insertions(+), 23 deletions(-)

diff --git a/app/containers/popup.tsx b/app/containers/popup.tsx
index 8e59fd5..b94952e 100644
--- a/app/containers/popup.tsx
+++ b/app/containers/popup.tsx
@@ -30,12 +30,6 @@ const isChromeUrl = (url: string) => {
   return CHROME_URL_REGEX.test(url);
 };
 
-interface BgStore {
-  ready(): Promise<void>;
-  getState(): any;
-  dispatch: any;
-}
-
 export class Popup extends React.Component<POPUP_PROPS & DispatchProps, {}> {
   componentWillMount() {
     this.props.updateField("interceptStatus", "");
@@ -137,6 +131,8 @@ export class Popup extends React.Component<POPUP_PROPS & DispatchProps, {}> {
       "button-start-listening btn-secondary": !this.props.enabled,
       "button-stop-listening btn-danger": this.props.enabled
     });
+    const props = this.props;
+    const enabled = this.props.enabled;
     return (
       <div className="popup">
         <header>
@@ -165,44 +161,44 @@ export class Popup extends React.Component<POPUP_PROPS & DispatchProps, {}> {
               <span>INTERCEPTOR</span>
             </a>
             <button
-              title="Start/Stop Listening to Requests"
+              title={enabled ? "Stop Listening to Requests" : "Start Listening to Requests"}
               type="button"
               onClick={this.handleClick}
               className={buttonClass}
             >
-              {this.props.enabled ? "Stop Listening" : "Start Listening"}
+              {enabled ? "Stop Listening" : "Start Listening"}
             </button>
           </div>
         </header>
 
         <div>
-          {this.props.errorMessage ? (
+          {props.errorMessage ? (
             <p className="popup-error-message popup-error"> {this.props.errorMessage} </p>
           ) : null}
-          {this.props.interceptStatus && <div id="success-msg">{this.props.interceptStatus}</div>}
+          {props.interceptStatus && <div id="success-msg">{this.props.interceptStatus}</div>}
 
           <RequestList
-            requests={this.props.requests}
+            requests={props.requests}
             handleCheckToggle={this.handleCheckToggle}
-            checkedReqs={this.props.checkedReqs}
+            checkedReqs={props.checkedReqs}
             handleCheckedRequests={this.handleCheckedRequests}
             handleRespTextChange={this.handleRespTextChange}
             handleStatusCodeChange={this.handleStatusCodeChange}
-            responseText={this.props.responseText}
-            statusCodes={this.props.statusCodes}
-            handleContentTypeChange={this.props.handleContentTypeChange}
-            contentType={this.props.contentType}
-            handlePaginationChange={this.props.handlePaginationChange}
-            PageDetails={this.props.PageDetails}
-            tabId={this.props.tabId}
+            responseText={props.responseText}
+            statusCodes={props.statusCodes}
+            handleContentTypeChange={props.handleContentTypeChange}
+            contentType={props.contentType}
+            handlePaginationChange={props.handlePaginationChange}
+            PageDetails={props.PageDetails}
+            tabId={props.tabId}
             clearRequests={this.clearRequests}
             disableInterceptor={this.disableInterceptor}
             updateInterceptorStatus={this.updateInterceptorStatus}
-            isInterceptorOn={this.props.isInterceptorOn}
+            isInterceptorOn={props.isInterceptorOn}
             handleSwitch={this.handleSwitch}
-            fetchResponse={this.props.fetchResponse}
-            responseData={this.props.responseData}
-            responseError={this.props.responseError}
+            fetchResponse={props.fetchResponse}
+            responseData={props.responseData}
+            responseError={props.responseError}
           />
         </div>
       </div>

From cfa59175e4b8e203bf046644fb199bcea387a66e Mon Sep 17 00:00:00 2001
From: Amit Bhavikatti <amitmbhavikatti@gmail.com>
Date: Wed, 16 May 2018 12:31:15 +0530
Subject: [PATCH 3/3] Use props to check for enabled state instead of declaring
 its own variable

---
 app/containers/popup.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/app/containers/popup.tsx b/app/containers/popup.tsx
index b94952e..de5d86a 100644
--- a/app/containers/popup.tsx
+++ b/app/containers/popup.tsx
@@ -132,7 +132,6 @@ export class Popup extends React.Component<POPUP_PROPS & DispatchProps, {}> {
       "button-stop-listening btn-danger": this.props.enabled
     });
     const props = this.props;
-    const enabled = this.props.enabled;
     return (
       <div className="popup">
         <header>
@@ -161,21 +160,21 @@ export class Popup extends React.Component<POPUP_PROPS & DispatchProps, {}> {
               <span>INTERCEPTOR</span>
             </a>
             <button
-              title={enabled ? "Stop Listening to Requests" : "Start Listening to Requests"}
+              title={props.enabled ? "Stop Listening to Requests" : "Start Listening to Requests"}
               type="button"
               onClick={this.handleClick}
               className={buttonClass}
             >
-              {enabled ? "Stop Listening" : "Start Listening"}
+              {props.enabled ? "Stop Listening" : "Start Listening"}
             </button>
           </div>
         </header>
 
         <div>
           {props.errorMessage ? (
-            <p className="popup-error-message popup-error"> {this.props.errorMessage} </p>
+            <p className="popup-error-message popup-error"> {props.errorMessage} </p>
           ) : null}
-          {props.interceptStatus && <div id="success-msg">{this.props.interceptStatus}</div>}
+          {props.interceptStatus && <div id="success-msg">{props.interceptStatus}</div>}
 
           <RequestList
             requests={props.requests}