Feature: Json Tree searcheable (#2)

* Searcheable implementation in json tree

* Json tree styling

* Json tree overflow:auto

* Readme updated

Author: jossydeleon

packages/react-native-query-devtool-app/src/components/JSONTreeSearcheable/index.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { JSONTree } from "react-json-tree";
+import theme from "./treeTheme";
+import JSONTreeSearcheableProps from "./types";
+import Searchbar from "../Searchbar";
+import useTreeSearcheableData from "./useTreeSearcheableData";
+
+const JSONTreeSearcheable: React.FC<JSONTreeSearcheableProps> = ({ data }) => {
+  const {
+    searchTerm,
+    setSearchTerm,
+    getItemString,
+    highlightLabel,
+    highlightValue,
+  } = useTreeSearcheableData();
+
+  return (
+    <div>
+      <div className="json-tree-header">
+        <Searchbar value={searchTerm} setValue={setSearchTerm} />
+      </div>
+      <div className="json-tree-header-container">
+        <JSONTree
+          data={data}
+          theme={theme}
+          shouldExpandNodeInitially={() => true}
+          getItemString={() => (
+            <span dangerouslySetInnerHTML={{ __html: getItemString(data) }} />
+          )}
+          labelRenderer={([key]) => (
+            <span dangerouslySetInnerHTML={{ __html: highlightLabel(key) }} />
+          )}
+          valueRenderer={(value: string) => (
+            <span dangerouslySetInnerHTML={{ __html: highlightValue(value) }} />
+          )}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default JSONTreeSearcheable;

packages/react-native-query-devtool-app/src/components/QueryDetails/treeTheme.ts renamed to packages/react-native-query-devtool-app/src/components/JSONTreeSearcheable/treeTheme.ts

@@ -0,0 +1,5 @@
+interface JSONTreeSearcheableProps {
+  data: unknown;
+}
+
+export default JSONTreeSearcheableProps;

packages/react-native-query-devtool-app/src/components/JSONTreeSearcheable/types.ts

@@ -0,0 +1,52 @@
+import { useState } from "react";
+
+const useTreeSearcheableData = () => {
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const getItemString = (data: unknown) => {
+    const size = Object.keys(data).length;
+
+    if (size === 0) {
+      return null;
+    }
+
+    const pluralize = size > 1 ? "items" : "item";
+    const displayText = `${size} ${pluralize}`;
+
+    return `<span style={{ fontSize: 11 }}>${displayText}</span>`;
+  };
+
+  const highlightLabel = (label: string | number) => {
+    if (!searchTerm.trim()) return label;
+
+    const regex = new RegExp(searchTerm, "gi");
+    return label
+      .toString()
+      .replace(
+        regex,
+        (match) => `<span style="background-color: purple">${match}</span>`
+      );
+  };
+
+  const highlightValue = (value: string) => {
+    if (!searchTerm.trim()) return value;
+
+    const regex = new RegExp(searchTerm, "gi");
+    return value
+      .toString()
+      .replace(
+        regex,
+        (match) => `<span style="background-color: yellow">${match}</span>`
+      );
+  };
+
+  return {
+    searchTerm,
+    setSearchTerm,
+    getItemString,
+    highlightLabel,
+    highlightValue,
+  };
+};
+
+export default useTreeSearcheableData;

packages/react-native-query-devtool-app/src/components/JSONTreeSearcheable/useTreeSearcheableData.ts

@@ -1,27 +1,13 @@
-import * as React from "react";
+import React from "react";
 import TitleHeader from "../TitleHeader";
 import LabelValueText from "../LabelValueText";
-import { JSONTree } from "react-json-tree";
 import QueryDetailsProps from "./types";
-import theme from "./treeTheme";
+import JSONTreeSearcheable from "../JSONTreeSearcheable";
 
 const QueryDetails: React.FC<QueryDetailsProps> = ({
   selectedQuery,
   queryLastUpdated,
 }) => {
-  const getItemString = (data: unknown) => {
-    const size = Object.keys(data).length;
-
-    if (size === 0) {
-      return null;
-    }
-
-    const pluralize = size > 1 ? "items" : "item";
-    const displayText = `${size} ${pluralize}`;
-
-    return <span style={{ fontSize: 11 }}>{displayText}</span>;
-  };
-
   if (selectedQuery) {
     return (
       <div className="column">
@@ -43,15 +29,8 @@ const QueryDetails: React.FC<QueryDetailsProps> = ({
 
           <div style={{ marginBottom: 20 }} />
 
-          <div>
-            <TitleHeader title="Data Explorer" />
-            <JSONTree
-              data={selectedQuery?.data}
-              theme={theme}
-              shouldExpandNodeInitially={() => true}
-              getItemString={(_, data) => getItemString(data)}
-            />
-          </div>
+          <TitleHeader title="Data Explorer" />
+          <JSONTreeSearcheable data={selectedQuery?.data} />
         </div>
       </div>
     );

packages/react-native-query-devtool-app/src/components/QueryDetails/index.tsx

@@ -3,15 +3,13 @@ import SearchbarProps from "./types";
 
 const Searchbar: React.FC<SearchbarProps> = ({ value, setValue }) => {
   return (
-    <div className="searchbar-container">
-      <input
-        className="searchbar-input"
-        type="search"
-        placeholder="Filter"
-        value={value}
-        onChange={(event) => setValue(event.target.value)}
-      />
-    </div>
+    <input
+      className="searchbar-input"
+      type="search"
+      placeholder="Filter"
+      value={value}
+      onChange={(event) => setValue(event.target.value)}
+    />
   );
 };
 

packages/react-native-query-devtool-app/src/components/Searchbar/index.tsx

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>Query Debugger Tool</title>
+    <title>React Query Devtool</title>
   </head>
   <body>
     <div id="root"></div>

packages/react-native-query-devtool-app/src/index.html

@@ -76,13 +76,22 @@
   background-color: #172335;
 }
 
-.searchbar-container {
-  flex: 1;
-}
-
 .searchbar-input {
   box-sizing: border-box;
   height: 25px;
   width: 300px;
   font-size: medium;
 }
+
+.json-tree-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-inline: 5px;
+  margin-bottom: 5px;
+}
+
+.json-tree-header-container {
+  overflow: auto;
+  height: 540px;
+}

packages/react-native-query-devtool-app/src/pages/QueryDevtool/style.css

@@ -66,13 +66,13 @@ const createServer = (mainWindow: BrowserWindow) => {
       server.close();
       res.end("Server closed.");
 
-      console.info(`Query Debugger Tool server closed`);
+      console.info(`React Native Query Devtool server closed`);
     }
   });
 
   //start server
   server.listen(port, () => {
-    console.info(`Query Debugger Tool listening on port: ${port}`);
+    console.info(`React Native Query Devtool listening on port: ${port}`);
   });
 };