Bug 1489872 - Use actions to add/remove network locations;r=daisuke
authorJulian Descottes <jdescottes@mozilla.com>
Thu, 13 Sep 2018 09:51:40 +0100
changeset 436193 bed00eac89ba8935969fe4fe0e89d9fbe71eccee
parent 436192 a166a2766049928b7abbb326c72cb0bfa01430a8
child 436194 72f155506bf6a902b640e4e20122d175edfeca33
push id34631
push usernerli@mozilla.com
push dateThu, 13 Sep 2018 22:02:04 +0000
treeherdermozilla-central@e923330d5bd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdaisuke
bugs1489872
milestone64.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1489872 - Use actions to add/remove network locations;r=daisuke Summary: Depends on D5385 Reviewers: daisuke Reviewed By: daisuke Bug #: 1489872 Differential Revision: https://phabricator.services.mozilla.com/D5386
devtools/client/aboutdebugging-new/src/actions/ui.js
devtools/client/aboutdebugging-new/src/components/App.js
devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js
devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js
--- a/devtools/client/aboutdebugging-new/src/actions/ui.js
+++ b/devtools/client/aboutdebugging-new/src/actions/ui.js
@@ -6,16 +6,18 @@
 
 const {
   DEBUG_TARGET_COLLAPSIBILITY_UPDATED,
   NETWORK_LOCATIONS_UPDATED,
   PAGE_SELECTED,
   PAGES,
 } = require("../constants");
 
+const NetworkLocationsModule = require("../modules/network-locations");
+
 const Actions = require("./index");
 
 function selectPage(page) {
   return async (dispatch, getState) => {
     const currentPage = getState().ui.selectedPage;
     if (page === currentPage) {
       // Nothing to dispatch if the page is the same as the current page.
       return;
@@ -30,17 +32,31 @@ function selectPage(page) {
     dispatch({ type: PAGE_SELECTED, page });
   };
 }
 
 function updateDebugTargetCollapsibility(key, isCollapsed) {
   return { type: DEBUG_TARGET_COLLAPSIBILITY_UPDATED, key, isCollapsed };
 }
 
+function addNetworkLocation(location) {
+  return (dispatch, getState) => {
+    NetworkLocationsModule.addNetworkLocation(location);
+  };
+}
+
+function removeNetworkLocation(location) {
+  return (dispatch, getState) => {
+    NetworkLocationsModule.removeNetworkLocation(location);
+  };
+}
+
 function updateNetworkLocations(locations) {
   return { type: NETWORK_LOCATIONS_UPDATED, locations };
 }
 
 module.exports = {
+  addNetworkLocation,
+  removeNetworkLocation,
   selectPage,
   updateDebugTargetCollapsibility,
   updateNetworkLocations,
 };
--- a/devtools/client/aboutdebugging-new/src/components/App.js
+++ b/devtools/client/aboutdebugging-new/src/components/App.js
@@ -33,17 +33,17 @@ class App extends PureComponent {
 
   getSelectedPageComponent() {
     const { dispatch, networkLocations, selectedPage } = this.props;
 
     switch (selectedPage) {
       case PAGES.THIS_FIREFOX:
         return RuntimePage({ dispatch });
       case PAGES.CONNECT:
-        return ConnectPage({ networkLocations });
+        return ConnectPage({ dispatch, networkLocations });
       default:
         // Invalid page, blank.
         return null;
     }
   }
 
   render() {
     const {
--- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
+++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
@@ -15,16 +15,17 @@ const NetworkLocationsList = createFacto
 
 const USB_ICON_SRC = "chrome://devtools/skin/images/aboutdebugging-connect-icon.svg";
 const WIFI_ICON_SRC = "chrome://devtools/skin/images/aboutdebugging-connect-icon.svg";
 const GLOBE_ICON_SRC = "chrome://devtools/skin/images/aboutdebugging-globe-icon.svg";
 
 class ConnectPage extends PureComponent {
   static get propTypes() {
     return {
+      dispatch: PropTypes.func.isRequired,
       networkLocations: PropTypes.arrayOf(PropTypes.object).isRequired,
     };
   }
 
   renderWifi() {
     return ConnectSection(
       {
         icon: WIFI_ICON_SRC,
@@ -53,26 +54,26 @@ class ConnectPage extends PureComponent 
           "Enable USB Debugging on the Android Developer Menu",
           "Connect the USB Device to your computer",
         ]
       })
     );
   }
 
   renderNetwork() {
-    const { networkLocations } = this.props;
+    const { dispatch, networkLocations } = this.props;
     return ConnectSection(
       {
         className: "connect-page__network",
         icon: GLOBE_ICON_SRC,
         title: "Via Network Location",
       },
-      NetworkLocationsList({ networkLocations }),
+      NetworkLocationsList({ dispatch, networkLocations }),
       dom.hr({ className: "connect-page__network__separator" }),
-      NetworkLocationsForm(),
+      NetworkLocationsForm({ dispatch }),
     );
   }
 
   render() {
     return dom.article(
       {
         className: "page connect-page",
       },
--- a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js
+++ b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js
@@ -1,37 +1,42 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
-const {
-  addNetworkLocation
-} = require("../../modules/network-locations");
+const Actions = require("../../actions/index");
 
 class NetworkLocationsForm extends PureComponent {
+  static get propTypes() {
+    return {
+      dispatch: PropTypes.func.isRequired,
+    };
+  }
+
   constructor(props) {
     super(props);
     this.state = {
       value: ""
     };
   }
 
   render() {
     return dom.form(
       {
         className: "connect-page__network-form",
         onSubmit: (e) => {
           const { value } = this.state;
           if (value) {
-            addNetworkLocation(value);
+            this.props.dispatch(Actions.addNetworkLocation(value));
             this.setState({ value: "" });
           }
           e.preventDefault();
         }
       },
       dom.span({}, "Host:port"),
       dom.input({
         className: "connect-page__network-form__input",
--- a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js
+++ b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js
@@ -3,19 +3,17 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
-const {
-  removeNetworkLocation
-} = require("../../modules/network-locations");
+const Actions = require("../../actions/index");
 
 class NetworkLocationsList extends PureComponent {
   static get propTypes() {
     return {
       dispatch: PropTypes.func.isRequired,
       networkLocations: PropTypes.arrayOf(PropTypes.object).isRequired,
     };
   }
@@ -32,17 +30,19 @@ class NetworkLocationsList extends PureC
             {
               className: "ellipsis-text"
             },
             location
           ),
           dom.button(
             {
               className: "aboutdebugging-button",
-              onClick: () => removeNetworkLocation(location)
+              onClick: () => {
+                this.props.dispatch(Actions.removeNetworkLocation(location));
+              }
             },
             "Remove"
           )
         )
       )
     );
   }
 }