#35 refactored node layout

src/utils/hooks/node/useLoadNode.ts

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+import { nodeGotoNode } from '~/redux/node/actions';
+import { useDispatch } from 'react-redux';
+
+// useLoadNode loads node on id change
+export const useLoadNode = (id: any, isLoading: boolean) => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (isLoading) return;
+    dispatch(nodeGotoNode(parseInt(id, 10), undefined));
+  }, [dispatch, id]);
+};

src/utils/hooks/node/useNodeActions.ts

@@ -0,0 +1,19 @@
+import { INode } from '~/redux/types';
+import { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { nodeEdit, nodeLike, nodeLock, nodeStar } from '~/redux/node/actions';
+
+export const useNodeActions = (node: INode) => {
+  const dispatch = useDispatch();
+
+  const onEdit = useCallback(() => dispatch(nodeEdit(node.id)), [dispatch, nodeEdit, node]);
+  const onLike = useCallback(() => dispatch(nodeLike(node.id)), [dispatch, nodeLike, node]);
+  const onStar = useCallback(() => dispatch(nodeStar(node.id)), [dispatch, nodeStar, node]);
+  const onLock = useCallback(() => dispatch(nodeLock(node.id, !node.deleted_at)), [
+    dispatch,
+    nodeLock,
+    node,
+  ]);
+
+  return { onEdit, onLike, onStar, onLock };
+};

src/utils/hooks/node/useNodeBlocks.ts

@@ -0,0 +1,34 @@
+import { INode } from '~/redux/types';
+import { createElement, FC, useCallback, useMemo } from 'react';
+import { isNil, prop } from 'ramda';
+import { INodeComponentProps, NODE_COMPONENTS, NODE_HEADS, NODE_INLINES } from '~/redux/node/constants';
+
+// useNodeBlocks returns head, block and inline blocks of node
+export const useNodeBlocks = (node: INode, isLoading: boolean) => {
+  const createNodeBlock = useCallback(
+    (block?: FC<INodeComponentProps>) =>
+      !isNil(block) &&
+      createElement(block, {
+        node,
+        isLoading,
+      }),
+    [node, isLoading]
+  );
+
+  const head = useMemo(
+    () => createNodeBlock(node?.type ? prop(node?.type, NODE_HEADS) : undefined),
+    [node, createNodeBlock]
+  );
+
+  const block = useMemo(
+    () => createNodeBlock(node?.type ? prop(node?.type, NODE_COMPONENTS) : undefined),
+    [node, createNodeBlock]
+  );
+
+  const inline = useMemo(
+    () => createNodeBlock(node?.type ? prop(node?.type, NODE_INLINES) : undefined),
+    [node, createNodeBlock]
+  );
+
+  return { head, block, inline };
+};

src/utils/hooks/node/useNodeCoverImage.ts

@@ -0,0 +1,17 @@
+import { INode } from '~/redux/types';
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { nodeSetCoverImage } from '~/redux/node/actions';
+
+export const useNodeCoverImage = (node: INode) => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (!node.cover) return;
+    dispatch(nodeSetCoverImage(node.cover));
+
+    return () => {
+      nodeSetCoverImage(undefined);
+    };
+  }, [dispatch, node.cover]);
+};

src/utils/hooks/node/useNodePermissions.ts

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import { canEditNode, canLikeNode, canStarNode } from '~/utils/node';
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { selectUser } from '~/redux/auth/selectors';
+import { INode } from '~/redux/types';
+
+export const useNodePermissions = (node: INode) => {
+  const user = useShallowSelect(selectUser);
+  const edit = useMemo(() => canEditNode(node, user), [node, user]);
+  const like = useMemo(() => canLikeNode(node, user), [node, user]);
+  const star = useMemo(() => canStarNode(node, user), [node, user]);
+
+  return [edit, like, star];
+};

src/utils/hooks/useScrollToTop.ts

@@ -0,0 +1,7 @@
+import { useEffect } from 'react';
+
+export const useScrollToTop = (deps?: any[]) => {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, deps || []);
+};

src/utils/hooks/user/userUser.ts

@@ -0,0 +1,4 @@
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { selectUser } from '~/redux/auth/selectors';
+
+export const useUser = () => useShallowSelect(selectUser);