moved flow hooks out of flow

src/utils/hooks/flow/useFlowLayout.ts

@@ -0,0 +1,19 @@
+import { useCallback } from 'react';
+import { usePersistedState } from '~/utils/hooks/usePersistedState';
+import { experimentalFeatures } from '~/constants/features';
+
+enum Layout {
+  Fluid = 'fluid',
+  Default = 'default',
+}
+
+export const useFlowLayout = () => {
+  const [layout, setLayout] = usePersistedState('flow_layout', Layout.Default);
+  const isFluid = layout === Layout.Fluid && experimentalFeatures.liquidFlow;
+
+  const toggleLayout = useCallback(() => {
+    setLayout(isFluid ? Layout.Default : Layout.Fluid);
+  }, [setLayout, isFluid]);
+
+  return { isFluid, toggleLayout };
+};

src/utils/hooks/flow/useFlowPagination.ts

@@ -0,0 +1,23 @@
+import { useCallback, useEffect } from 'react';
+import { flowGetMore } from '~/redux/flow/actions';
+import { useDispatch } from 'react-redux';
+
+export const useFlowPagination = ({ isLoading }) => {
+  const dispatch = useDispatch();
+
+  const onLoadMore = useCallback(() => {
+    (window as any).flowScrollPos = window.scrollY;
+
+    const pos = window.scrollY + window.innerHeight - document.body.scrollHeight;
+
+    if (isLoading || pos < -600) return;
+
+    dispatch(flowGetMore());
+  }, [dispatch, isLoading]);
+
+  useEffect(() => {
+    window.addEventListener('scroll', onLoadMore);
+
+    return () => window.removeEventListener('scroll', onLoadMore);
+  }, [onLoadMore]);
+};