fix: add query string configuration

Author: shanejonas

package-lock.json

@@ -51,6 +51,7 @@
     "@semantic-release/github": "^5.4.2",
     "@semantic-release/npm": "^5.1.13",
     "@semantic-release/release-notes-generator": "^7.3.0",
+    "qs": "^6.8.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-json-view": "^1.19.1",

package.json

@@ -4,16 +4,18 @@ import { MuiThemeProvider } from "@material-ui/core";
 import { lightTheme, darkTheme } from "../themes/openrpcTheme";
 import useDarkMode from "use-dark-mode";
 import Inspector from "./Inspector";
+import useQueryParams from "../hooks/useQueryParams";
 
 const App: React.FC = () => {
   const darkMode = useDarkMode();
+  const [query] = useQueryParams();
   const theme = darkMode.value ? darkTheme : lightTheme;
   const reactJsonTheme = darkMode.value ? "summerfruit" : "summerfruit:inverted";
 
   return (
     <MuiThemeProvider theme={theme}>
       <CssBaseline />
-      <Inspector onToggleDarkMode={darkMode.toggle} darkMode={darkMode.value} reactJsonTheme={reactJsonTheme}/>
+      <Inspector onToggleDarkMode={darkMode.toggle} darkMode={darkMode.value} reactJsonTheme={reactJsonTheme} url={query.url} request={query.request}/>
     </MuiThemeProvider>
   );
 };

src/containers/App.tsx

@@ -0,0 +1,24 @@
+import { useState } from "react";
+import * as qs from "qs";
+
+const useQueryParams = (depth?: number) => {
+  const parse = () => {
+    return qs.parse(window.location.search, {
+      ignoreQueryPrefix: true,
+      depth: depth || 100,
+      decoder(str) {
+        if (str === "false") {
+          return false;
+        }
+        if (str === "true") {
+          return true;
+        }
+        return decodeURIComponent(str);
+      },
+    });
+  };
+  const [query] = useState(parse());
+  return [query];
+};
+
+export default useQueryParams;