Fix Flatlist height issues and styling

Author: josydeleon

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

@@ -1,11 +1,8 @@
 import React from "react";
 
-import { ScrollView, Text, View } from "react-native";
+import { ScrollView, Text, View, FlatList } from "react-native";
 
-import {
-  ScrollView as ActionsheetScrollview,
-  FlatList,
-} from "react-native-actions-sheet";
+import { ScrollView as ActionsheetScrollview } from "react-native-actions-sheet";
 
 import { QueryDevtoolProps } from "../../types";
 import CloseButton from "../CloseButton";
@@ -21,13 +18,18 @@ const Devtool: React.FC<QueryDevtoolProps> = (props) => {
     filteredQueries,
     selectedQuery,
     filter,
+    flalistRef,
     setFilter,
     handleSelectedRow,
   } = useDevtoolData(props);
 
   const renderHeader = () => (
     <View style={styles.searchbarContainer}>
-      <Searchbar filter={filter} setFilter={setFilter} />
+      <Searchbar
+        filter={filter}
+        setFilter={setFilter}
+        placeholder={`${filteredQueries.length} Queries`}
+      />
     </View>
   );
 
@@ -61,13 +63,17 @@ const Devtool: React.FC<QueryDevtoolProps> = (props) => {
       style={styles.actionScrollviewContainer}
     >
       {renderHeader()}
-      <ScrollView horizontal scrollEnabled={false}>
+      <ScrollView
+        horizontal
+        scrollEnabled={false}
+        style={[
+          selectedQuery ? styles.collapsedFlatlist : styles.expandedFlatlist,
+        ]}
+      >
         <FlatList
+          ref={flalistRef}
           data={filteredQueries}
-          style={[
-            styles.queriesFlatlist,
-            selectedQuery ? styles.collapsedFlatlist : styles.expandedFlatlist,
-          ]}
+          style={[styles.queriesFlatlist]}
           renderItem={({ item, index }) => (
             <QueryRow
               index={index}

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

@@ -34,7 +34,8 @@ export const styles = StyleSheet.create({
     textAlign: "center",
   },
   expandedFlatlist: {
-    height: 500,
+    height: 400,
+    marginBottom: 20,
   },
   collapsedFlatlist: {
     height: 250,

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

@@ -1,24 +1,28 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import { FlatList } from "react-native";
 
 import {
   ListenerEventType,
   QueryDevtoolData,
   QueryDevtoolProps,
   QueryKey,
-} from '../../types';
+} from "../../types";
 import {
   getQueryDevtoolData,
   handleQueryDevtoolData,
-} from '../../utils/queryListener';
+} from "../../utils/queryListener";
 
 const useDevtoolData = (props: QueryDevtoolProps) => {
-  const { queryClient, version = 'v5' } = props;
+  const { queryClient, version = "v5" } = props;
 
   const isInitialized = useRef(false);
+  const flalistRef = useRef<FlatList>();
+  const timeoutRef = useRef<NodeJS.Timeout>();
 
   const [queries, setQueries] = useState<QueryDevtoolData[]>([]);
   const [selectedQueryKey, setSelectedQueryKey] = useState<QueryKey>();
-  const [filter, setFilter] = useState('');
+  const [filter, setFilter] = useState("");
 
   useEffect(() => {
     if (isInitialized.current) return;
@@ -31,6 +35,12 @@ const useDevtoolData = (props: QueryDevtoolProps) => {
     setQueries(allQueries);
 
     isInitialized.current = true;
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
   }, [version, queryClient]);
 
   useEffect(() => {
@@ -79,19 +89,15 @@ const useDevtoolData = (props: QueryDevtoolProps) => {
 
   const filteredQueries = useMemo(
     () =>
-      queries.filter(
-        (query) =>
-          query.queryKey
-            ?.toString()
-            .toLowerCase()
-            .includes(filter.toLowerCase())
+      queries.filter((query) =>
+        query.queryKey?.toString().toLowerCase().includes(filter.toLowerCase())
       ),
     [queries, filter]
   );
 
   const handleSelectedRow = useCallback(
     (indexRow?: number) => {
-      if (typeof indexRow !== 'number') {
+      if (typeof indexRow !== "number") {
         setSelectedQueryKey(undefined);
         return;
       }
@@ -100,6 +106,16 @@ const useDevtoolData = (props: QueryDevtoolProps) => {
       const queryKey = queriesSource[indexRow].queryKey;
 
       setSelectedQueryKey((prev) => (prev !== queryKey ? queryKey : undefined));
+
+      timeoutRef.current = setTimeout(
+        () =>
+          flalistRef.current.scrollToIndex({
+            index: indexRow,
+            animated: true,
+            viewPosition: 1,
+          }),
+        200
+      );
     },
     [queries, filteredQueries, filter]
   );
@@ -109,6 +125,7 @@ const useDevtoolData = (props: QueryDevtoolProps) => {
     selectedQuery,
     filter,
     filteredQueries,
+    flalistRef,
     setFilter,
     handleSelectedRow,
   };

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

@@ -1,18 +1,22 @@
-import React from 'react';
+import React from "react";
 
-import { TextInput } from 'react-native';
+import { TextInput } from "react-native";
 
-import { styles } from './style';
-import SearchbarProps from './types';
+import { styles } from "./style";
+import SearchbarProps from "./types";
 
-const Searchbar: React.FC<SearchbarProps> = ({ filter, setFilter }) => {
+const Searchbar: React.FC<SearchbarProps> = ({
+  filter,
+  placeholder = "Filter",
+  setFilter,
+}) => {
   return (
     <TextInput
       style={styles.inputContainer}
       value={filter}
       onChangeText={setFilter}
       autoCapitalize="none"
-      placeholder="Filter"
+      placeholder={placeholder}
       placeholderTextColor="black"
     />
   );

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

@@ -1,5 +1,6 @@
 interface SearchbarProps {
   filter: string;
+  placeholder?: string;
   setFilter: (str: string) => void;
 }