refactored hooks directory

src/hooks/flow/useFlow.ts

@@ -0,0 +1,27 @@
+import { useShallowSelect } from '~/hooks/data/useShallowSelect';
+import { selectFlow } from '~/redux/flow/selectors';
+import { useFlowLayout } from '~/hooks/flow/useFlowLayout';
+import { selectLabUpdatesNodes } from '~/redux/lab/selectors';
+import { useDispatch } from 'react-redux';
+import { useFlowPagination } from '~/hooks/flow/useFlowPagination';
+import { useCallback, useMemo } from 'react';
+import { FlowDisplay, INode } from '~/redux/types';
+import { flowSetCellView } from '~/redux/flow/actions';
+
+export const useFlow = () => {
+  const { nodes, heroes, recent, updated, isLoading } = useShallowSelect(selectFlow);
+  const { isFluid, toggleLayout } = useFlowLayout();
+  const labUpdates = useShallowSelect(selectLabUpdatesNodes);
+  const dispatch = useDispatch();
+
+  useFlowPagination({ isLoading });
+
+  const updates = useMemo(() => [...updated, ...labUpdates].slice(0, 10), [updated, labUpdates]);
+
+  const onChangeCellView = useCallback(
+    (id: INode['id'], val: FlowDisplay) => dispatch(flowSetCellView(id, val)),
+    [dispatch]
+  );
+
+  return { nodes, heroes, recent, updates, isFluid, toggleLayout, onChangeCellView };
+};

src/hooks/flow/useFlowCellControls.ts

@@ -0,0 +1,46 @@
+import { useCallback } from 'react';
+import { FlowDisplay, INode } from '~/redux/types';
+
+export const useFlowCellControls = (
+  id: INode['id'],
+  description: string | undefined,
+  flow: FlowDisplay,
+  onChangeCellView: (id: INode['id'], flow: FlowDisplay) => void
+) => {
+  const onChange = useCallback(
+    (value: Partial<FlowDisplay>) => onChangeCellView(id, { ...flow, ...value }),
+    [flow, id, onChangeCellView]
+  );
+
+  const hasDescription = !!description && description.length > 32;
+
+  const toggleViewDescription = useCallback(() => {
+    const show_description = !(flow && flow.show_description);
+    onChange({ show_description });
+  }, [flow, onChange]);
+
+  const setViewSingle = useCallback(() => {
+    onChange({ display: 'single' });
+  }, [onChange]);
+
+  const setViewHorizontal = useCallback(() => {
+    onChange({ display: 'horizontal' });
+  }, [onChange]);
+
+  const setViewVertical = useCallback(() => {
+    onChange({ display: 'vertical' });
+  }, [onChange]);
+
+  const setViewQuadro = useCallback(() => {
+    onChange({ display: 'quadro' });
+  }, [onChange]);
+
+  return {
+    hasDescription,
+    setViewHorizontal,
+    setViewVertical,
+    setViewQuadro,
+    setViewSingle,
+    toggleViewDescription,
+  };
+};

src/hooks/flow/useFlowLayout.ts

@@ -0,0 +1,19 @@
+import { useCallback } from 'react';
+import { usePersistedState } from '~/hooks/data/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/hooks/flow/useFlowPagination.ts

@@ -0,0 +1,10 @@
+import { useCallback } from 'react';
+import { flowGetMore } from '~/redux/flow/actions';
+import { useDispatch } from 'react-redux';
+import { useInfiniteLoader } from '~/hooks/dom/useInfiniteLoader';
+
+export const useFlowPagination = ({ isLoading }) => {
+  const dispatch = useDispatch();
+  const loadMore = useCallback(() => dispatch(flowGetMore()), [dispatch]);
+  useInfiniteLoader(loadMore, isLoading);
+};