Fixing parsing of host and port params in URL sharing, #490

src/js/App.js

@@ -77,6 +77,20 @@ export class App extends React.Component {
   }
 
   componentDidMount() {
+    const { 
+      location: {
+        search,
+      },
+      history,
+      snapcast_enabled,
+      allow_reporting,
+      initial_setup_complete,
+      mopidyActions,
+      pusherActions,
+      snapcastActions,
+      coreActions,
+    } = this.props;
+
     window.addEventListener(
       'beforeinstallprompt',
       this.handleInstallPrompt,
@@ -85,45 +99,33 @@ export class App extends React.Component {
     window.addEventListener('focus', this.handleFocusAndBlur, false);
     window.addEventListener('blur', this.handleFocusAndBlur, false);
 
-    if (this.props.allow_reporting) {
+    if (allow_reporting) {
       ReactGA.initialize('UA-64701652-3');
     }
 
     // Fire up our services
-    this.props.mopidyActions.connect();
-    this.props.pusherActions.connect();
-    if (this.props.snapcast_enabled) {
-      this.props.snapcastActions.connect();
+    mopidyActions.connect();
+    pusherActions.connect();
+    if (snapcast_enabled) {
+      snapcastActions.connect();
     }
-    this.props.coreActions.getBroadcasts();
+    coreActions.getBroadcasts();
 
     // Check for url-parsed configuration values
-    const url_vars = this.props.location.query;
-    if (url_vars) {
-      let has_values = false;
-      const values = {};
-      if (url_vars.host !== undefined) {
-        has_values = true;
-        values.host = url_vars.host;
-      }
-      if (url_vars.port !== undefined) {
-        has_values = true;
-        values.port = url_vars.port;
-      }
+    const customHost = helpers.queryString('host', search);
+    const customPort = helpers.queryString('port', search);
+    if (customHost && customPort) {
+      mopidyActions.set({ host: customHost, port: customPort });
+      uiActions.set({ initial_setup_complete: true });
 
-      if (has_values) {
-        this.props.mopidyActions.set(values);
+      // Allow 100ms for the action above to complete before we re-route
+      setTimeout(() => {
+        history.push('/');
+      }, 100);
 
-        // Allow 100ms for the action above to complete before we re-route
-        setTimeout(() => {
-          this.props.history.push('/');
-        }, 100);
-      }
-    }
-
-    // show initial setup if required
-    if (!this.props.initial_setup_complete) {
-      this.props.history.push('/initial-setup');
+    // Just show default initial setup for fresh installs
+    } else if (!initial_setup_complete) {
+      history.push('/initial-setup');
     }
   }
 

src/js/helpers.js

@@ -199,6 +199,33 @@ export const isCached = function (url) {
   return image.complete;
 };
 
+/**
+ * Digest a react-router's location.search string into an array of values
+ * 
+ * @param key String = the key you want from the URL
+ * @param string String = the locaion.search string
+ */
+export const queryString = (key, string, compact = true) => {
+  const elements = string.replace('?','').split('&');
+  const results = elements.reduce((accumulator, current) => {
+    const subElements = current.split('=');
+    let results = [];
+
+    // We decode the URI, but also treat "+" as a space. This is needed for backend CGI.encode that
+    // happens when redirecting from an OAuth failure.
+    if (subElements[0] === key) {
+      results = subElements[1].split(',').map(
+        item => decodeURIComponent(item.replace(/\+/g, '%20')),
+      );
+    }
+    return [...accumulator, ...results];
+  }, []);
+
+  if (compact && results.length === 1) return results[0];
+  if (compact && results.length === 0) return null;
+  return results;
+};
+
 
 /**
  * Digest an array of Mopidy image objects into a universal format. We also re-write