Use qs to parse query params

Author: Keyan Zhang

flow-typed/qs.js

@@ -0,0 +1,5 @@
+declare module 'qs' {
+  declare module.exports: {
+    parse: (str: string, opts: Object) => Object;
+  };
+}

package.json

@@ -50,6 +50,7 @@
     "glamor": "^2.20.40",
     "hex2rgba": "^0.0.1",
     "prettier": "^1.7.4",
+    "qs": "^6.5.1",
     "remarkable": "^1.7.1",
     "request-promise": "^4.2.2",
     "rimraf": "^2.6.1",

src/components/ErrorDecoder/ErrorDecoder.js

@@ -2,63 +2,57 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
 
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
+import qs from 'qs';
 
-function replaceArgs(msg, argList) {
+import type {Node} from 'react';
+
+function replaceArgs(msg: string, argList: Array<string>): string {
   let argIdx = 0;
   return msg.replace(/%s/g, function() {
     const arg = argList[argIdx++];
     return arg === undefined ? '[missing argument]' : arg;
   });
 }
 
-function urlify(str) {
+// When the message contains a URL (like https://fb.me/react-refs-must-have-owner),
+// make it a clickable link.
+function urlify(str: string): Node {
   const urlRegex = /(https:\/\/fb\.me\/[a-z\-]+)/g;
 
   const segments = str.split(urlRegex);
 
-  for (let i = 0; i < segments.length; i++) {
+  return segments.map((message, i) => {
     if (i % 2 === 1) {
-      segments[i] = (
-        <a key={i} target="_blank" rel="noopener" href={segments[i]}>
-          {segments[i]}
+      return (
+        <a key={i} target="_blank" rel="noopener" href={message}>
+          {message}
         </a>
       );
     }
-  }
-
-  return segments;
+    return message;
+  });
 }
 
-// ?invariant=123&args[]=foo&args[]=bar
-function parseQueryString(location) {
-  const rawQueryString = location.search.substring(1);
-  if (!rawQueryString) {
+// `?invariant=123&args[]=foo&args[]=bar`
+// or `// ?invariant=123&args[0]=foo&args[1]=bar`
+function parseQueryString(search: string): ?{code: string, args: Array<string>} {
+  const qsResult = qs.parse(search, {ignoreQueryPrefix: true});
+  if (!qsResult.invariant) {
     return null;
   }
-
-  let code = '';
-  let args = [];
-
-  const queries = rawQueryString.split('&');
-  for (let i = 0; i < queries.length; i++) {
-    const query = decodeURIComponent(queries[i]);
-    if (query.indexOf('invariant=') === 0) {
-      code = query.slice(10);
-    } else if (query.indexOf('args[]=') === 0) {
-      args.push(query.slice(7));
-    }
-  }
-
-  return [code, args];
+  return {
+    code: qsResult.invariant,
+    args: qsResult.args || [],
+  };
 }
 
-function ErrorResult(props) {
+function ErrorResult(props: {code: ?string, msg: string}) {
   const code = props.code;
   const errorMsg = props.msg;
 
@@ -79,39 +73,21 @@ function ErrorResult(props) {
   );
 }
 
-class ErrorDecoder extends Component {
-  constructor(...args) {
-    super(...args);
-
-    this.state = {
-      code: null,
-      errorMsg: '',
-    };
+function ErrorDecoder(props: {|
+  errorCodesString: string,
+  location: {search: string},
+|}) {
+  let code = null;
+  let msg = '';
+
+  const errorCodes = JSON.parse(props.errorCodesString);
+  const parseResult = parseQueryString(props.location.search);
+  if (parseResult != null) {
+    code = parseResult.code;
+    msg = replaceArgs(errorCodes[code], parseResult.args);
   }
 
-  componentWillMount() {
-    const {errorCodesString} = this.props;
-    const errorCodes = JSON.parse(errorCodesString);
-    const parseResult = parseQueryString(this.props.location);
-    if (parseResult != null) {
-      const [code, args] = parseResult;
-      if (errorCodes[code]) {
-        this.setState({
-          code: code,
-          errorMsg: replaceArgs(errorCodes[code], args),
-        });
-      }
-    }
-  }
-
-  render() {
-    return <ErrorResult code={this.state.code} msg={this.state.errorMsg} />;
-  }
+  return <ErrorResult code={code} msg={msg} />;
 }
 
-ErrorDecoder.propTypes = {
-  errorCodesString: PropTypes.string.isRequired,
-  location: PropTypes.object.isRequired,
-};
-
 export default ErrorDecoder;

yarn.lock

@@ -7688,6 +7688,10 @@ qs@6.4.0, qs@~6.4.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
 
+qs@^6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
+
 query-string@^4.1.0:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"