Actionsheet devtool debugger

Author: josydeleon

packages/react-native-query-devtool/README.md

@@ -3,46 +3,21 @@
 ## Features
 
 - Provides a component for integrating query data in React Native applications running react-query v3, and @tanstack/react-query v4 and v5.
-- Includes a standalone app to visualize and help debug query data.
-
-## Standalone App
-
-The standalone app allows you to visualize and debug query data from your React Native application using the `@jsmdeleon/react-native-query-devtool` package.
+- (Optional) Includes a standalone app to visualize and help debug query data.
 
 ## Installation
 
-You can download the standalone app from the following link. Currently, it's available only for **macOS M1** and **Windows x64**:
-
-[Download latest App](https://github.com/jossydeleon/react-native-query-devtool-monorepo/releases)
-
-**Linux users:** You need to build the app from source as it's currently only available for **macOS M1** and **Windows x64**. Ensure to set up your environment accordingly before building the app.
+To use the devtool component in your React Native project, install the package using `npm` or `yarn`, You will also need to install `react-native-gesture-handlers` if you haven't already.
 
 ```bash
-# Go to app folder
-cd react-native-query-devtool-app
-
-# Install dependencies
-yarn
-
-# Build
-yarn build-server
-```
-
-After running the build command, you'll find the freshly built app in a new folder named **'out'**.
-
-## React Native Component
-
-To use the devtool component in your React Native project, install the package:
-
-```bash
-npm install @jsmdeleon/react-native-query-devtool
+npm install react-native-gesture-handler @jsmdeleon/react-native-query-devtool
 # or
-yarn add @jsmdeleon/react-native-query-devtool
+yarn add react-native-gesture-handler @jsmdeleon/react-native-query-devtool
 ```
 
 ## Usage
 
-In your React Native application, import `QueryNativeDevtool` to send query data to the Electron app for debugging:
+In your React Native application, import `QueryNativeDevtool`
 
 ```javascript
 import { QueryNativeDevtool } from "@jsmdeleon/react-native-query-devtool";
@@ -53,7 +28,7 @@ export default function App() {
       <View style={styles.container}>
         <Main />
       </View>
-      <QueryNativeDevtool queryClient={queryClient} />
+      <QueryNativeDevtool queryClient={queryClient} useRemoteDebugger={false} />
     </QueryClientProvider>
   );
 }
@@ -63,22 +38,49 @@ export default function App() {
 
 If your app runs `react-query v3` pass `version="v3"` prop to `QueryNativeDevtool`
 
-```javascript
-import { QueryNativeDevtool } from "@jsmdeleon/react-native-query-devtool";
+## Available Props
+
+| Prop Name            | Type        | Description                                | Default Value |
+| -------------------- | ----------- | ------------------------------------------ | ------------- |
+| `queryClient`\*      | QueryClient | First name of the user                     | undefined     |
+| `version`            | string      | Last name of the user                      | "v5"          |
+| `hideFloatingButton` | boolean     | Hides Floating button                      | false         |
+| `useRemoteDebugger`  | boolean     | Enable remote debugging via standalone app | false         |
+
+## Standalone app (Optional)
 
+If you want more room to debug your query data, you can download the standalone app from the following link. Currently, it's available only for **macOS M1** and **Windows x64**. See [repo](https://github.com/jossydeleon/react-native-query-devtool-monorepo/tree/main/packages/react-native-query-devtool-app)
+
+```javascript
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      <View style={styles.container}>
-        <Main />
-      </View>
-      <QueryNativeDevtool queryClient={queryClient} version="v3" />
+      <QueryNativeDevtool queryClient={queryClient} useRemoteDebugger={true} />
     </QueryClientProvider>
   );
 }
 ```
 
-This will enable your React Native application to send query data to the server app for debugging purposes.
+[Download latest App](https://github.com/jossydeleon/react-native-query-devtool-monorepo/releases)
+
+**Note:** The binaries provided are not signed. If you have concerns about security or trust, you can choose to build the app from the source code for your machine.
+
+**Linux users:** You need to build the app from source as it's currently only available for **macOS M1** and **Windows x64**. Ensure to set up your environment accordingly before building the app.
+
+```bash
+# Go to app folder
+cd react-native-query-devtool-app
+
+# Install dependencies
+yarn
+
+# Build
+yarn build-server
+```
+
+After running the build command, you'll find the freshly built app in a new folder named **'out'**.
+
+**Important:** The standalone app uses port `9017` by default. Ensure that this port is available and not blocked by any firewall settings or other applications on your system.
 
 ## Examples
 
@@ -98,3 +100,7 @@ yarn ios
 # or
 yarn android
 ```
+
+## Contributions
+
+Contributions to improve this project are welcome! If you have any ideas for new features, enhancements, bug fixes, or optimizations, feel free to submit a pull request. You can also report any bugs or issues you encounter by opening a new issue

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

@@ -0,0 +1,92 @@
+import React from "react";
+
+import { ScrollView, Text, View } from "react-native";
+
+import {
+  ScrollView as ActionsheetScrollview,
+  FlatList,
+} from "react-native-actions-sheet";
+
+import { QueryDevtoolProps } from "../../types";
+import CloseButton from "../CloseButton";
+import DataExplorer from "../DataExplorer";
+import QueryRow from "../QueryRow";
+import Searchbar from "../Searchbar";
+import useDevtoolData from "./useDevtoolData";
+
+import { styles } from "./styles";
+
+const Devtool: React.FC<QueryDevtoolProps> = (props) => {
+  const {
+    filteredQueries,
+    selectedQuery,
+    filter,
+    setFilter,
+    handleSelectedRow,
+  } = useDevtoolData(props);
+
+  const renderHeader = () => (
+    <View style={styles.searchbarContainer}>
+      <Searchbar filter={filter} setFilter={setFilter} />
+    </View>
+  );
+
+  const renderDataExplorerHeader = () => {
+    if (!selectedQuery) return null;
+
+    return (
+      <>
+        <View style={styles.headerContainer}>
+          <Text style={styles.headerText}>Data Explorer</Text>
+          <CloseButton onPress={() => handleSelectedRow()} />
+        </View>
+      </>
+    );
+  };
+
+  const renderDataExplorer = () => {
+    if (!selectedQuery) return null;
+
+    return (
+      <View style={styles.dataExplorerContainer}>
+        <DataExplorer selectedQuery={selectedQuery?.data} />
+      </View>
+    );
+  };
+
+  return (
+    <ActionsheetScrollview
+      nestedScrollEnabled
+      stickyHeaderIndices={[0, 2]}
+      style={styles.actionScrollviewContainer}
+    >
+      {renderHeader()}
+      <ScrollView horizontal scrollEnabled={false}>
+        <FlatList
+          data={filteredQueries}
+          style={[
+            styles.queriesFlatlist,
+            selectedQuery ? styles.collapsedFlatlist : styles.expandedFlatlist,
+          ]}
+          renderItem={({ item, index }) => (
+            <QueryRow
+              index={index}
+              item={item}
+              isSelected={item.queryKey === selectedQuery?.queryKey}
+              handleSelectedRow={handleSelectedRow}
+            />
+          )}
+          ItemSeparatorComponent={() => <View style={styles.separator} />}
+          ListEmptyComponent={
+            <Text style={styles.flatlistEmptyMessage}>No queries found</Text>
+          }
+        />
+      </ScrollView>
+
+      {renderDataExplorerHeader()}
+      {renderDataExplorer()}
+    </ActionsheetScrollview>
+  );
+};
+
+export default Devtool;

packages/react-native-query-devtool/src/components/Devtool/styles.ts

@@ -0,0 +1,50 @@
+import { Dimensions, StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  actionScrollviewContainer: {
+    minHeight: 250,
+    maxHeight: 500,
+  },
+  searchbarContainer: {
+    backgroundColor: "#0b1521",
+    padding: 2,
+    paddingBottom: 1,
+  },
+  headerContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    backgroundColor: "#132337",
+    padding: 10,
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
+  },
+  headerText: {
+    color: "white",
+  },
+  queriesContainer: {
+    padding: 10,
+  },
+  queriesFlatlist: {
+    width: Dimensions.get("screen").width,
+    paddingHorizontal: 2,
+  },
+  flatlistEmptyMessage: {
+    color: "white",
+    textAlign: "center",
+  },
+  expandedFlatlist: {
+    height: 500,
+  },
+  collapsedFlatlist: {
+    height: 250,
+  },
+  separator: {
+    borderBottomWidth: 0.3,
+    borderColor: "silver",
+    marginVertical: 5,
+  },
+  dataExplorerContainer: {
+    marginBottom: 20,
+  },
+});

packages/react-native-query-devtool/src/components/Devtool/useDevtoolData.ts

@@ -0,0 +1,117 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import {
+  ListenerEventType,
+  QueryDevtoolData,
+  QueryDevtoolProps,
+  QueryKey,
+} from '../../types';
+import {
+  getQueryDevtoolData,
+  handleQueryDevtoolData,
+} from '../../utils/queryListener';
+
+const useDevtoolData = (props: QueryDevtoolProps) => {
+  const { queryClient, version = 'v5' } = props;
+
+  const isInitialized = useRef(false);
+
+  const [queries, setQueries] = useState<QueryDevtoolData[]>([]);
+  const [selectedQueryKey, setSelectedQueryKey] = useState<QueryKey>();
+  const [filter, setFilter] = useState('');
+
+  useEffect(() => {
+    if (isInitialized.current) return;
+
+    const allQueries = queryClient
+      .getQueryCache()
+      .getAll()
+      .map((queriesData: any) => getQueryDevtoolData(version, queriesData));
+
+    setQueries(allQueries);
+
+    isInitialized.current = true;
+  }, [version, queryClient]);
+
+  useEffect(() => {
+    const subscribe = queryClient.getQueryCache().subscribe((listener: any) => {
+      if (!listener) {
+        return;
+      }
+
+      const listenerType: ListenerEventType = listener.type;
+      const queryKey = listener.query.queryKey;
+
+      if (!queryKey) {
+        return;
+      }
+
+      const query = listener.query;
+
+      setQueries((prevData) => {
+        const queryKeyIndex = prevData.findIndex(
+          (item) => item.queryKey === queryKey
+        );
+
+        return handleQueryDevtoolData(
+          version,
+          listenerType,
+          queryKeyIndex,
+          query,
+          [...prevData]
+        );
+      });
+    });
+
+    return () => {
+      subscribe();
+    };
+  }, [queryClient, version]);
+
+  const selectedQuery = useMemo(
+    () =>
+      queries.find(
+        (query) =>
+          JSON.stringify(query?.queryKey) === JSON.stringify(selectedQueryKey)
+      ),
+    [selectedQueryKey, queries]
+  );
+
+  const filteredQueries = useMemo(
+    () =>
+      queries.filter(
+        (query) =>
+          query.queryKey
+            ?.toString()
+            .toLowerCase()
+            .includes(filter.toLowerCase())
+      ),
+    [queries, filter]
+  );
+
+  const handleSelectedRow = useCallback(
+    (indexRow?: number) => {
+      if (typeof indexRow !== 'number') {
+        setSelectedQueryKey(undefined);
+        return;
+      }
+
+      const queriesSource = filter.length > 0 ? filteredQueries : queries;
+      const queryKey = queriesSource[indexRow].queryKey;
+
+      setSelectedQueryKey((prev) => (prev !== queryKey ? queryKey : undefined));
+    },
+    [queries, filteredQueries, filter]
+  );
+
+  return {
+    selectedQueryKey,
+    selectedQuery,
+    filter,
+    filteredQueries,
+    setFilter,
+    handleSelectedRow,
+  };
+};
+
+export default useDevtoolData;