Searchbar feature and data node selection

Author: josydeleon

packages/react-native-query-devtool/assets/clear.png

@@ -1,8 +1,12 @@
-import React from 'react';
+import React from "react";
 
-import { Pressable, StyleSheet, View } from 'react-native';
+import { Pressable, StyleSheet, View } from "react-native";
 
-const CloseButton: React.FC<{ onPress: () => void }> = ({ onPress }) => {
+interface Props {
+  onPress: () => void;
+}
+
+const CloseButton: React.FC<Props> = ({ onPress }) => {
   return (
     <Pressable style={styles.container} onPress={onPress}>
       <View style={styles.close} />
@@ -14,15 +18,15 @@ const styles = StyleSheet.create({
   container: {
     width: 40,
     height: 20,
-    alignContent: 'center',
-    justifyContent: 'center',
+    alignContent: "center",
+    justifyContent: "center",
   },
   close: {
     width: 20,
-    alignSelf: 'flex-end',
+    alignSelf: "flex-end",
     borderWidth: 2,
     borderRadius: 3,
-    borderColor: 'white',
+    borderColor: "white",
   },
 });
 

packages/react-native-query-devtool/assets/search.png

@@ -1,7 +1,12 @@
 import React from "react";
+
 import { Image, Pressable, StyleSheet } from "react-native";
 
-const CopyButton: React.FC<{ onPress?: () => void }> = ({ onPress }) => {
+interface Props {
+  onPress?: () => void;
+}
+
+const CopyButton: React.FC<Props> = ({ onPress }) => {
   return (
     <Pressable onPress={onPress}>
       <Image

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

@@ -0,0 +1,32 @@
+import React from "react";
+
+import { View } from "react-native";
+
+import JSONTreeData from "../JSONTreeData";
+import { styles } from "./style";
+
+interface Props {
+  selectedQueryData: any;
+  searchTerm: string;
+  onSelectedNode: (nodeTitle: string, node: any) => void;
+}
+
+const DataExplorer: React.FC<Props> = ({
+  selectedQueryData,
+  searchTerm,
+  onSelectedNode,
+}) => {
+  if (!selectedQueryData) return null;
+
+  return (
+    <View style={styles.container}>
+      <JSONTreeData
+        data={selectedQueryData}
+        searchTerm={searchTerm}
+        onSelectedNode={onSelectedNode}
+      />
+    </View>
+  );
+};
+
+export default DataExplorer;

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

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { ScrollView, Text, View, FlatList } from "react-native";
+import { FlatList, ScrollView, Text, View } from "react-native";
 
 import { ScrollView as ActionsheetScrollview } from "react-native-actions-sheet";
 
@@ -17,28 +17,48 @@ const Devtool: React.FC<QueryDevtoolProps> = (props) => {
   const {
     filteredQueries,
     selectedQuery,
-    filter,
     flalistRef,
-    setFilter,
+    filteredData,
+    searchRef,
+    searchStringQueries,
+    searchStringData,
+    setSearchStringQueries,
+    handleChangeSearchQueryData,
     handleSelectedRow,
+    handleOnselectedNode,
+    dataToLookup,
   } = useDevtoolData(props);
 
   const renderHeader = () => (
     <View style={styles.searchbarContainer}>
-      <Searchbar filter={filter} setFilter={setFilter} />
+      <Searchbar
+        filter={searchStringQueries}
+        setFilter={setSearchStringQueries}
+        placeholder="Filter queries"
+      />
     </View>
   );
 
   const renderDataExplorerHeader = () => {
     if (!selectedQuery) return null;
 
     return (
-      <>
-        <View style={styles.headerContainer}>
+      <View style={styles.headerContainer}>
+        <View style={styles.headerTitleContainer}>
           <Text style={styles.headerText}>Data Explorer</Text>
           <CloseButton onPress={() => handleSelectedRow()} />
         </View>
-      </>
+        <Searchbar
+          ref={searchRef}
+          filter={searchStringData}
+          setFilter={handleChangeSearchQueryData}
+          placeholder={
+            dataToLookup?.nodeTitle
+              ? `Search in '${dataToLookup?.nodeTitle}'`
+              : "Search in 'data'"
+          }
+        />
+      </View>
     );
   };
 
@@ -47,7 +67,11 @@ const Devtool: React.FC<QueryDevtoolProps> = (props) => {
 
     return (
       <View style={styles.dataExplorerContainer}>
-        <DataExplorer selectedQuery={selectedQuery?.data} />
+        <DataExplorer
+          searchTerm={searchStringData}
+          selectedQueryData={filteredData ?? selectedQuery?.data}
+          onSelectedNode={handleOnselectedNode}
+        />
       </View>
     );
   };

packages/react-native-query-devtool/src/components/DataExplorer/index.jsx

@@ -11,11 +11,14 @@ export const styles = StyleSheet.create({
     paddingBottom: 1,
   },
   headerContainer: {
+    backgroundColor: "#132337",
+  },
+  headerTitleContainer: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    backgroundColor: "#132337",
     padding: 10,
+    paddingBottom: 0,
     borderTopLeftRadius: 10,
     borderTopRightRadius: 10,
   },

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

@@ -1,28 +1,43 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
-import { FlatList } from "react-native";
+import { FlatList, TextInput } from "react-native";
 
 import {
   ListenerEventType,
   QueryDevtoolData,
   QueryDevtoolProps,
   QueryKey,
 } from "../../types";
+import fuzzySearch from "../../utils/fuzzySearch";
 import {
   getQueryDevtoolData,
   handleQueryDevtoolData,
 } from "../../utils/queryListener";
 
+import useDebounce from "../../hooks/useDebounce";
+
 const useDevtoolData = (props: QueryDevtoolProps) => {
   const { queryClient, version = "v5" } = props;
 
   const isInitialized = useRef(false);
-  const flalistRef = useRef<FlatList>();
+  const flalistRef = useRef<FlatList>(null);
   const timeoutRef = useRef<NodeJS.Timeout>();
+  const searchRef = useRef<TextInput>(null);
 
   const [queries, setQueries] = useState<QueryDevtoolData[]>([]);
   const [selectedQueryKey, setSelectedQueryKey] = useState<QueryKey>();
-  const [filter, setFilter] = useState("");
+
+  const [searchStringQueries, setSearchStringQueries] = useState("");
+  const [searchStringData, setSearchStringData] = useState("");
+
+  // State to determine where to search (2nd Searchbar)
+  const [dataToLookup, setDataToLookup] = useState<{
+    nodeTitle: string;
+    nodeData: any;
+  }>();
+
+  // State to show query data filtered
+  const [filteredData, setFilteredData] = useState<any>();
 
   useEffect(() => {
     if (isInitialized.current) return;
@@ -60,15 +75,15 @@ const useDevtoolData = (props: QueryDevtoolProps) => {
 
       setQueries((prevData) => {
         const queryKeyIndex = prevData.findIndex(
-          (item) => item.queryKey === queryKey
+          (item) => item.queryKey === queryKey,
         );
 
         return handleQueryDevtoolData(
           version,
           listenerType,
           queryKeyIndex,
           query,
-          [...prevData]
+          [...prevData],
         );
       });
     });
@@ -82,17 +97,20 @@ const useDevtoolData = (props: QueryDevtoolProps) => {
     () =>
       queries.find(
         (query) =>
-          JSON.stringify(query?.queryKey) === JSON.stringify(selectedQueryKey)
+          JSON.stringify(query?.queryKey) === JSON.stringify(selectedQueryKey),
       ),
-    [selectedQueryKey, queries]
+    [selectedQueryKey, queries],
   );
 
   const filteredQueries = useMemo(
     () =>
       queries.filter((query) =>
-        query.queryKey?.toString().toLowerCase().includes(filter.toLowerCase())
+        query.queryKey
+          ?.toString()
+          .toLowerCase()
+          .includes(searchStringQueries.toLowerCase()),
       ),
-    [queries, filter]
+    [queries, searchStringQueries],
   );
 
   const handleSelectedRow = useCallback(
@@ -102,32 +120,64 @@ const useDevtoolData = (props: QueryDevtoolProps) => {
         return;
       }
 
-      const queriesSource = filter.length > 0 ? filteredQueries : queries;
+      const queriesSource =
+        searchStringQueries.length > 0 ? filteredQueries : queries;
       const queryKey = queriesSource[indexRow].queryKey;
 
       setSelectedQueryKey((prev) => (prev !== queryKey ? queryKey : undefined));
-
-      timeoutRef.current = setTimeout(
-        () =>
-          flalistRef.current.scrollToIndex({
-            index: indexRow,
-            animated: true,
-            viewPosition: 1,
-          }),
-        200
-      );
+      setSearchStringData("");
+      setDataToLookup(undefined);
+
+      timeoutRef.current = setTimeout(() => {
+        searchRef.current?.focus();
+
+        flalistRef.current?.scrollToIndex({
+          index: indexRow,
+          animated: true,
+          viewPosition: 1,
+        });
+      }, 200);
     },
-    [queries, filteredQueries, filter]
+    [queries, filteredQueries, searchStringQueries],
   );
 
+  const handleSearch = useDebounce((term) => {
+    const whereToSearch = dataToLookup?.nodeData
+      ? dataToLookup.nodeData
+      : selectedQuery?.data;
+
+    setFilteredData(fuzzySearch(term, whereToSearch));
+  }, 500);
+
+  const handleChangeSearchQueryData = (searchTerm: string) => {
+    setSearchStringData(searchTerm);
+
+    if (searchTerm.trim() === "" || searchTerm.trim().length <= 2) {
+      setFilteredData(undefined);
+    } else {
+      handleSearch(searchTerm);
+    }
+  };
+
+  const handleOnselectedNode = (nodeTitle: string, nodeData: any) => {
+    setDataToLookup({ nodeTitle, nodeData });
+    searchRef.current?.focus();
+  };
+
   return {
     selectedQueryKey,
     selectedQuery,
-    filter,
+    searchStringQueries,
     filteredQueries,
     flalistRef,
-    setFilter,
+    searchRef,
+    searchStringData,
+    filteredData,
+    dataToLookup,
+    setSearchStringQueries,
+    handleChangeSearchQueryData,
     handleSelectedRow,
+    handleOnselectedNode,
   };
 };
 

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

@@ -4,7 +4,11 @@ import { Image, TouchableOpacity } from "react-native";
 
 import { styles } from "./styles";
 
-const FloatingButton: React.FC<{ onPress: () => void }> = ({ onPress }) => {
+interface Props {
+  onPress: () => void;
+}
+
+const FloatingButton: React.FC<Props> = ({ onPress }) => {
   return (
     <TouchableOpacity
       activeOpacity={0.8}