moved flow hooks out of flow

src/components/flow/FlowStamp/index.tsx

@@ -10,6 +10,7 @@ import { Group } from '~/components/containers/Group';
 import { Toggle } from '~/components/input/Toggle';
 import classNames from 'classnames';
 import { Superpower } from '~/components/boris/Superpower';
+import { experimentalFeatures } from '~/constants/features';
 
 interface IProps {
   recent: IFlowState['recent'];
@@ -94,6 +95,7 @@ const FlowStamp: FC<IProps> = ({
         )}
       </div>
 
+      {experimentalFeatures.liquidFlow && (
         <Superpower>
           <div className={styles.toggles}>
             <Group horizontal onClick={toggleLayout} className={styles.fluid_toggle}>
@@ -102,6 +104,7 @@ const FlowStamp: FC<IProps> = ({
             </Group>
           </div>
         </Superpower>
+      )}
     </div>
   );
 };

src/components/main/Header/styles.module.scss

@@ -28,7 +28,6 @@
   align-items: center;
   justify-content: flex-end;
   font-weight: 500;
-  // padding: $gap;
   box-sizing: border-box;
   flex: 0 1 $content_width;
 }

src/constants/features.ts

@@ -0,0 +1,7 @@
+export enum ExperimentalFeatures {
+  LiquidFlow = 'liquidFlow',
+}
+
+export const experimentalFeatures: Record<ExperimentalFeatures, boolean> = {
+  [ExperimentalFeatures.LiquidFlow]: false,
+};

src/layouts/FlowLayout/index.tsx

@@ -19,28 +19,17 @@ import { INode } from '~/redux/types';
 import { selectLabUpdatesNodes } from '~/redux/lab/selectors';
 import { usePersistedState } from '~/utils/hooks/usePersistedState';
 import classNames from 'classnames';
-
+import { useFlowLayout } from '~/utils/hooks/flow/useFlowLayout';
-enum Layout {
+import { useFlowPagination } from '~/utils/hooks/flow/useFlowPagination';
-  Fluid = 'fluid',
-  Default = 'default',
-}
 
 const FlowLayout: FC = () => {
-  const { nodes, heroes, recent, updated, is_loading, search } = useShallowSelect(selectFlow);
+  const { nodes, heroes, recent, updated, isLoading, search } = useShallowSelect(selectFlow);
-  const [layout, setLayout] = usePersistedState('flow_layout', Layout.Default);
+  const { isFluid, toggleLayout } = useFlowLayout();
   const labUpdates = useShallowSelect(selectLabUpdatesNodes);
   const user = useShallowSelect(selectUser);
   const dispatch = useDispatch();
 
-  const onLoadMore = useCallback(() => {
+  useFlowPagination({ isLoading });
-    (window as any).flowScrollPos = window.scrollY;
-
-    const pos = window.scrollY + window.innerHeight - document.body.scrollHeight;
-
-    if (is_loading || pos < -600) return;
-
-    dispatch(flowGetMore());
-  }, [dispatch, is_loading]);
 
   const onLoadMoreSearch = useCallback(() => {
     if (search.is_loading_more) return;
@@ -66,17 +55,6 @@ const FlowLayout: FC = () => {
     labUpdates,
   ]);
 
-  const isFluid = layout === Layout.Fluid;
-  const toggleLayout = useCallback(() => {
-    setLayout(isFluid ? Layout.Default : Layout.Fluid);
-  }, [setLayout, isFluid]);
-
-  useEffect(() => {
-    window.addEventListener('scroll', onLoadMore);
-
-    return () => window.removeEventListener('scroll', onLoadMore);
-  }, [onLoadMore]);
-
   useEffect(() => {
     window.scrollTo(0, (window as any).flowScrollPos || 0);
   }, []);

src/redux/flow/reducer.ts

@@ -3,7 +3,7 @@ import { INode, IError } from '../types';
 import { FLOW_HANDLERS } from './handlers';
 
 export type IFlowState = Readonly<{
-  is_loading: boolean;
+  isLoading: boolean;
   nodes: INode[];
   heroes: Partial<INode>[];
   recent: Partial<INode>[];
@@ -30,7 +30,7 @@ const INITIAL_STATE: IFlowState = {
     is_loading: false,
     is_loading_more: false,
   },
-  is_loading: false,
+  isLoading: false,
   error: '',
 };
 

src/redux/flow/sagas.ts

@@ -16,8 +16,7 @@ import { Unwrap } from '../types';
 import { selectFlow, selectFlowNodes } from './selectors';
 import { getSearchResults, postCellView } from './api';
 import { uniq } from 'ramda';
-import { labSeenNode, labSetUpdates } from '~/redux/lab/actions';
+import { labSeenNode } from '~/redux/lab/actions';
-import { selectLabUpdatesNodes } from '~/redux/lab/selectors';
 
 function hideLoader() {
   const loader = document.getElementById('main_loader');
@@ -43,7 +42,7 @@ function* onGetFlow() {
       hideLoader();
     }
 
-    yield put(flowSetFlow({ is_loading: true }));
+    yield put(flowSetFlow({ isLoading: true }));
 
     const {
       before = [],
@@ -62,7 +61,7 @@ function* onGetFlow() {
 
     const result = uniq([...(before || []), ...(after || [])]);
 
-    yield put(flowSetFlow({ is_loading: false, nodes: result }));
+    yield put(flowSetFlow({ isLoading: false, nodes: result }));
 
     if (heroes.length) yield put(flowSetHeroes(heroes));
     if (recent.length) yield put(flowSetRecent(recent));
@@ -86,7 +85,7 @@ function* onSetCellView({ id, flow }: ReturnType<typeof flowSetCellView>) {
 
 function* getMore() {
   try {
-    yield put(flowSetFlow({ is_loading: true }));
+    yield put(flowSetFlow({ isLoading: true }));
     const nodes: ReturnType<typeof selectFlowNodes> = yield select(selectFlowNodes);
 
     const start = nodes && nodes[0] && nodes[0].created_at;
@@ -109,7 +108,7 @@ function* getMore() {
 
     yield put(
       flowSetFlow({
-        is_loading: false,
+        isLoading: false,
         nodes: result,
         ...(data.recent ? { recent: data.recent } : {}),
         ...(data.updated ? { updated: data.updated } : {}),

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]);
+};