Toast position fixed

josydeleon · josydeleon · commit caa41953d86b · 2024-03-17T16:26:49.000-04:00
diff --git a/packages/react-native-query-devtool/src/components/DataExplorer/index.tsx b/packages/react-native-query-devtool/src/components/DataExplorer/index.tsx
@@ -8,12 +8,14 @@ import { styles } from "./style";
 interface Props {
   selectedQueryData: any;
   searchTerm: string;
+  onSelectedToCopy: (node: any) => void;
   onSelectedNode: (nodeTitle: string, node: any) => void;
 }
 
 const DataExplorer: React.FC<Props> = ({
   selectedQueryData,
   searchTerm,
+  onSelectedToCopy,
   onSelectedNode,
 }) => {
   if (!selectedQueryData) return null;
@@ -23,6 +25,7 @@ const DataExplorer: React.FC<Props> = ({
       <JSONTreeData
         data={selectedQueryData}
         searchTerm={searchTerm}
+        onSelectedToCopy={onSelectedToCopy}
         onSelectedNode={onSelectedNode}
       />
     </View>
diff --git a/packages/react-native-query-devtool/src/components/Devtool/index.tsx b/packages/react-native-query-devtool/src/components/Devtool/index.tsx
@@ -9,6 +9,7 @@ import CloseButton from "../CloseButton";
 import DataExplorer from "../DataExplorer";
 import QueryRow from "../QueryRow";
 import Searchbar from "../Searchbar";
+import Toast from "../Toast";
 import useDevtoolData from "./useDevtoolData";
 
 import { styles } from "./styles";
@@ -22,11 +23,13 @@ const Devtool: React.FC<QueryDevtoolProps> = (props) => {
     searchRef,
     searchStringQueries,
     searchStringData,
+    dataToLookup,
+    showToast,
     setSearchStringQueries,
     handleChangeSearchQueryData,
     handleSelectedRow,
     handleOnselectedNode,
-    dataToLookup,
+    handleSelectedToCopy,
   } = useDevtoolData(props);
 
   const renderHeader = () => (
@@ -70,48 +73,52 @@ const Devtool: React.FC<QueryDevtoolProps> = (props) => {
         <DataExplorer
           searchTerm={searchStringData}
           selectedQueryData={filteredData ?? selectedQuery?.data}
+          onSelectedToCopy={handleSelectedToCopy}
           onSelectedNode={handleOnselectedNode}
         />
       </View>
     );
   };
 
   return (
-    <ActionsheetScrollview
-      nestedScrollEnabled
-      stickyHeaderIndices={[0, 2]}
-      style={styles.actionScrollviewContainer}
-    >
-      {renderHeader()}
-      <ScrollView
-        horizontal
-        scrollEnabled={false}
-        style={[
-          selectedQuery ? styles.collapsedFlatlist : styles.expandedFlatlist,
-        ]}
+    <React.Fragment>
+      {showToast && <Toast message="Value was printed in your terminal" />}
+      <ActionsheetScrollview
+        nestedScrollEnabled
+        stickyHeaderIndices={[0, 2]}
+        style={styles.actionScrollviewContainer}
       >
-        <FlatList
-          ref={flalistRef}
-          data={filteredQueries}
-          style={[styles.queriesFlatlist]}
-          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>
+        {renderHeader()}
+        <ScrollView
+          horizontal
+          scrollEnabled={false}
+          style={[
+            selectedQuery ? styles.collapsedFlatlist : styles.expandedFlatlist,
+          ]}
+        >
+          <FlatList
+            ref={flalistRef}
+            data={filteredQueries}
+            style={[styles.queriesFlatlist]}
+            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>
+        {renderDataExplorerHeader()}
+        {renderDataExplorer()}
+      </ActionsheetScrollview>
+    </React.Fragment>
   );
 };
 
diff --git a/packages/react-native-query-devtool/src/components/Devtool/useDevtoolData.ts b/packages/react-native-query-devtool/src/components/Devtool/useDevtoolData.ts
@@ -29,6 +29,7 @@ const useDevtoolData = (props: QueryDevtoolProps) => {
 
   const [searchStringQueries, setSearchStringQueries] = useState("");
   const [searchStringData, setSearchStringData] = useState("");
+  const [showToast, setShowToast] = useState(false);
 
   // State to determine where to search (2nd Searchbar)
   const [dataToLookup, setDataToLookup] = useState<{
@@ -75,15 +76,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]
         );
       });
     });
@@ -97,9 +98,9 @@ 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(
@@ -108,9 +109,9 @@ const useDevtoolData = (props: QueryDevtoolProps) => {
         query.queryKey
           ?.toString()
           .toLowerCase()
-          .includes(searchStringQueries.toLowerCase()),
+          .includes(searchStringQueries.toLowerCase())
       ),
-    [queries, searchStringQueries],
+    [queries, searchStringQueries]
   );
 
   const handleSelectedRow = useCallback(
@@ -138,9 +139,17 @@ const useDevtoolData = (props: QueryDevtoolProps) => {
         });
       }, 200);
     },
-    [queries, filteredQueries, searchStringQueries],
+    [queries, filteredQueries, searchStringQueries]
   );
 
+  const handleShowToast = () => {
+    setShowToast(true);
+
+    setTimeout(() => {
+      setShowToast(false);
+    }, 3000);
+  };
+
   const handleSearch = useDebounce((term) => {
     const whereToSearch = dataToLookup?.nodeData
       ? dataToLookup.nodeData
@@ -159,6 +168,11 @@ const useDevtoolData = (props: QueryDevtoolProps) => {
     }
   };
 
+  const handleSelectedToCopy = (node: any) => {
+    console.log("📋", JSON.stringify(node));
+    handleShowToast();
+  };
+
   const handleOnselectedNode = (nodeTitle: string, nodeData: any) => {
     setDataToLookup({ nodeTitle, nodeData });
     searchRef.current?.focus();
@@ -174,10 +188,12 @@ const useDevtoolData = (props: QueryDevtoolProps) => {
     searchStringData,
     filteredData,
     dataToLookup,
+    showToast,
     setSearchStringQueries,
     handleChangeSearchQueryData,
     handleSelectedRow,
     handleOnselectedNode,
+    handleSelectedToCopy,
   };
 };
 
diff --git a/packages/react-native-query-devtool/src/components/JSONTreeData/index.tsx b/packages/react-native-query-devtool/src/components/JSONTreeData/index.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import React, { ReactNode, useCallback } from "react";
 
 import { ScrollView, Text, View } from "react-native";
@@ -8,25 +7,23 @@ import JSONTree from "react-native-json-tree";
 import getNodeValue from "../../utils/getNodeValue";
 import CopyButton from "../CopyButton";
 import SearchButton from "../SearchButton";
-import Toast from "../Toast";
 import theme from "./treeTheme";
-import useJSONTreeData from "./useJSONTreeData";
 
 import { styles } from "./styles";
 
 interface Props {
   data: any;
   searchTerm: string;
+  onSelectedToCopy: (node: any) => void;
   onSelectedNode: (nodeTitle: string, node: any) => void;
 }
 
 const JSONTreeData: React.FC<Props> = ({
   data,
   searchTerm,
+  onSelectedToCopy,
   onSelectedNode,
 }) => {
-  const { showToast, handleShowToast } = useJSONTreeData();
-
   /**
    * Returns a custom Text with the Copy Icon for Nodes
    * @param type - The type of the node.
@@ -40,7 +37,7 @@ const JSONTreeData: React.FC<Props> = ({
       type: any,
       dataRendered: any,
       itemType: ReactNode,
-      itemString: string | number | undefined,
+      itemString: string | number | undefined
     ) => {
       return (
         <View style={styles.valueContainer}>
@@ -50,17 +47,12 @@ const JSONTreeData: React.FC<Props> = ({
           </Text>
 
           {type === "Object" || type === "Array" || type === "Iterable" ? (
-            <CopyButton
-              onPress={() => {
-                console.log("📋", JSON.stringify(dataRendered));
-                handleShowToast();
-              }}
-            />
+            <CopyButton onPress={() => onSelectedToCopy(dataRendered)} />
           ) : null}
         </View>
       );
     },
-    [handleShowToast],
+    [onSelectedToCopy]
   );
 
   /**
@@ -92,16 +84,16 @@ const JSONTreeData: React.FC<Props> = ({
             nodeType !== "Iterable" && (
               <CopyButton
                 onPress={() => {
-                  console.log("📋", getNodeValue(data, keyPath));
-                  handleShowToast();
+                  const value = getNodeValue(data, keyPath);
+                  onSelectedToCopy(value);
                 }}
               />
             )}
           <Text style={styles.textStyle}>{`${keyPath[0]}:`}</Text>
         </View>
       );
     },
-    [data, handleShowToast, onSelectedNode],
+    [data, onSelectedToCopy, onSelectedNode]
   );
 
   /**
@@ -138,8 +130,6 @@ const JSONTreeData: React.FC<Props> = ({
         labelRenderer={labelRenderer}
         valueRenderer={valueRenderer}
       />
-
-      {showToast && <Toast message="Value was printed in your terminal" />}
     </ScrollView>
   );
 };
diff --git a/packages/react-native-query-devtool/src/components/JSONTreeData/useJSONTreeData.ts b/packages/react-native-query-devtool/src/components/JSONTreeData/useJSONTreeData.ts
diff --git a/packages/react-native-query-devtool/src/components/Toast/index.tsx b/packages/react-native-query-devtool/src/components/Toast/index.tsx
@@ -42,12 +42,13 @@ const Toast: React.FC<Props> = ({ message, duration = 5000 }) => {
 const styles = StyleSheet.create({
   container: {
     position: "absolute",
-    top: 20,
+    bottom: 50,
     left: 20,
     right: 20,
     backgroundColor: "rgba(0, 0, 0, 0.8)",
     borderRadius: 5,
     padding: 10,
+    zIndex: 99,
   },
   message: {
     textAlign: "center",
