removed search reducer completely

src/hooks/flow/useFlow.ts

@@ -1,13 +1,11 @@
 import { useShallowSelect } from '~/hooks/data/useShallowSelect';
 import { useFlowLayout } from '~/hooks/flow/useFlowLayout';
 import { selectLabUpdatesNodes } from '~/redux/lab/selectors';
-import { useDispatch } from 'react-redux';
-import { useCallback, useMemo } from 'react';
-import { FlowDisplay, INode } from '~/redux/types';
-import { flowSetCellView } from '~/redux/flow/actions';
+import { useMemo } from 'react';
 import { useFlowLoader } from '~/hooks/flow/useFlowLoader';
 import { useFlowStore } from '~/store/flow/useFlowStore';
 import { useInfiniteLoader } from '~/hooks/dom/useInfiniteLoader';
+import { useFlowSetCellView } from '~/hooks/flow/useFlowSetCellView';
 
 export const useFlow = () => {
   const { loadMore, isSyncing } = useFlowLoader();
@@ -15,16 +13,11 @@ export const useFlow = () => {
   const { nodes, heroes, recent, updated } = useFlowStore();
   const { isFluid, toggleLayout } = useFlowLayout();
   const labUpdates = useShallowSelect(selectLabUpdatesNodes);
-  const dispatch = useDispatch();
 
   useInfiniteLoader(loadMore, isSyncing);
 
   const updates = useMemo(() => [...updated, ...labUpdates].slice(0, 10), [updated, labUpdates]);
 
-  const onChangeCellView = useCallback(
-    (id: INode['id'], val: FlowDisplay) => dispatch(flowSetCellView(id, val)),
-    [dispatch]
-  );
-
+  const onChangeCellView = useFlowSetCellView();
   return { nodes, heroes, recent, updates, isFluid, toggleLayout, onChangeCellView };
 };

src/hooks/node/useUpdateNode.ts

@@ -2,7 +2,6 @@ import { useLoadNode } from '~/hooks/node/useLoadNode';
 import { useCallback } from 'react';
 import { INode } from '~/redux/types';
 import { apiPostNode } from '~/api/node';
-import { selectFlowNodes } from '~/redux/flow/selectors';
 import { selectLabListNodes } from '~/redux/lab/selectors';
 import { labSetList } from '~/redux/lab/actions';
 import { useShallowSelect } from '~/hooks/data/useShallowSelect';

src/hooks/search/useSearch.ts

@@ -1,24 +1,69 @@
-import { useCallback } from 'react';
-import { flowChangeSearch, flowLoadMoreSearch } from '~/redux/flow/actions';
-import { useDispatch } from 'react-redux';
-import { useShallowSelect } from '~/hooks/data/useShallowSelect';
-import { selectFlow } from '~/redux/flow/selectors';
+import { useCallback, useEffect, useState } from 'react';
+import useSWRInfinite from 'swr/infinite';
+import { flatten } from 'ramda';
+import { getSearchResults } from '~/redux/flow/api';
+import { KeyLoader } from 'swr';
+import { INode } from '~/redux/types';
+import { GetSearchResultsRequest } from '~/redux/flow/types';
+import { COMMENTS_DISPLAY } from '~/constants/node';
+
+const RESULTS_COUNT = 20;
+
+const getKey: (text: string) => KeyLoader<INode[]> = text => (pageIndex, previousPageData) => {
+  if ((pageIndex > 0 && !previousPageData?.length) || !text) return null;
+
+  const props: GetSearchResultsRequest = {
+    text,
+    skip: pageIndex * RESULTS_COUNT,
+    take: RESULTS_COUNT,
+  };
+
+  return JSON.stringify(props);
+};
 
 export const useSearch = () => {
-  const dispatch = useDispatch();
-  const { search } = useShallowSelect(selectFlow);
+  const [searchText, setSearchText] = useState('');
+  const [debouncedSearchText, setDebouncedSearchText] = useState('');
 
-  const onSearchLoadMore = useCallback(() => {
-    if (search.is_loading_more) return;
-    dispatch(flowLoadMoreSearch());
-  }, [search.is_loading_more, dispatch]);
+  const { data, size, setSize, mutate, isValidating } = useSWRInfinite(
+    getKey(debouncedSearchText),
+    async (key: string) => {
+      const props: GetSearchResultsRequest = key && JSON.parse(key);
 
-  const onSearchChange = useCallback(
-    (text: string) => {
-      dispatch(flowChangeSearch({ text }));
-    },
-    [dispatch]
+      if (!props) {
+        return [] as INode[];
+      }
+
+      const result = await getSearchResults(props);
+
+      return result.nodes;
+    }
   );
 
-  return { onSearchChange, onSearchLoadMore, search };
+  const loadMore = useCallback(() => setSize(size + 1), [setSize, size]);
+  const hasMore = (data?.[size - 1]?.length || 0) >= RESULTS_COUNT;
+
+  const results = flatten(data || []);
+
+  useEffect(() => {
+    const timeout = setTimeout(async () => {
+      setDebouncedSearchText(searchText.length > 2 ? searchText : '');
+      await setSize(0);
+      await mutate([]);
+    }, 300);
+
+    return () => clearTimeout(timeout);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchText]);
+
+  console.log({ hasMore, data });
+
+  return {
+    results,
+    searchText,
+    setSearchText,
+    hasMore,
+    loadMore,
+    isLoading: isValidating,
+  };
 };