added lab search

src/hooks/data/useDebouncedValue.ts

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+
+export const useDebouncedValue = <T>(val: T, delay = 300) => {
+  const [state, setState] = useState<T>(val);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => setState(val), delay);
+    return () => clearTimeout(timeout);
+  }, [val, delay]);
+
+  return state;
+};

src/hooks/lab/useGetLabNodes.ts

@@ -4,15 +4,17 @@ import useSWRInfinite, { SWRInfiniteKeyLoader } from 'swr/infinite';
 
 import { getLabNodes } from '~/api/lab';
 import { useAuth } from '~/hooks/auth/useAuth';
+import { useDebouncedValue } from '~/hooks/data/useDebouncedValue';
 import { useLabStore } from '~/store/lab/useLabStore';
 import { INode } from '~/types';
 import { GetLabNodesRequest, ILabNode, LabNodesSort } from '~/types/lab';
 import { flatten, uniqBy } from '~/utils/ramda';
 
-const getKey: (isUser: boolean, sort?: LabNodesSort) => SWRInfiniteKeyLoader = (isUser, sort) => (
-  index,
-  prev: ILabNode[]
-) => {
+const getKey: (isUser: boolean, sort?: LabNodesSort, search?: string) => SWRInfiniteKeyLoader = (
+  isUser,
+  sort,
+  search
+) => (index, prev: ILabNode[]) => {
   if (!isUser) return null;
   if (index > 0 && (!prev?.length || prev.length < 20)) return null;
 
@@ -20,6 +22,7 @@ const getKey: (isUser: boolean, sort?: LabNodesSort) => SWRInfiniteKeyLoader = (
     limit: 20,
     offset: index * 20,
     sort: sort || LabNodesSort.New,
+    search: search || '',
   };
 
   return JSON.stringify(props);
@@ -33,12 +36,13 @@ const parseKey = (key: string): GetLabNodesRequest => {
   }
 };
 
-export const useGetLabNodes = (sort?: LabNodesSort) => {
+export const useGetLabNodes = (sort?: LabNodesSort, search?: string) => {
   const labStore = useLabStore();
   const { isUser } = useAuth();
+  const searchDebounced = useDebouncedValue(search);
 
   const { data, isValidating, size, setSize, mutate } = useSWRInfinite(
-    getKey(isUser, sort),
+    getKey(isUser, sort, searchDebounced),
     async (key: string) => {
       const result = await getLabNodes(parseKey(key));
       return result.nodes;
@@ -46,6 +50,7 @@ export const useGetLabNodes = (sort?: LabNodesSort) => {
     {
       fallbackData: [labStore.nodes],
       onSuccess: data => labStore.setNodes(flatten(data)),
+      dedupingInterval: 300,
     }
   );
 

src/hooks/lab/useLab.ts

@@ -6,8 +6,9 @@ import { LabNodesSort } from '~/types/lab';
 
 export const useLab = () => {
   const [sort, setSort] = useState<LabNodesSort>(LabNodesSort.New);
+  const [search, setSearch] = useState('');
 
-  const { nodes, isLoading, loadMore, hasMore } = useGetLabNodes(sort);
+  const { nodes, isLoading, loadMore, hasMore } = useGetLabNodes(sort, search);
   const { tags, heroes, updates, isLoading: isLoadingStats } = useGetLabStats();
 
   return {
@@ -21,5 +22,7 @@ export const useLab = () => {
     updates,
     sort,
     setSort,
+    search,
+    setSearch,
   };
 };