fixed node actions

src/components/node/NodePanel/index.tsx

@@ -1,32 +0,0 @@
-import React, { FC, memo } from 'react';
-import { INode } from '~/redux/types';
-import { NodePanelInner } from '~/components/node/NodePanelInner';
-import { useNodePermissions } from '~/utils/hooks/node/useNodePermissions';
-import { useNodeActions } from '~/utils/hooks/node/useNodeActions';
-import { shallowEqual } from 'react-redux';
-
-interface IProps {
-  node: INode;
-  isLoading: boolean;
-}
-
-const NodePanel: FC<IProps> = memo(({ node, isLoading }) => {
-  const [can_edit, can_like, can_star] = useNodePermissions(node);
-  const { onEdit, onLike, onStar, onLock } = useNodeActions(node);
-
-  return (
-    <NodePanelInner
-      node={node}
-      onEdit={onEdit}
-      onLike={onLike}
-      onStar={onStar}
-      onLock={onLock}
-      canEdit={can_edit}
-      canLike={can_like}
-      canStar={can_star}
-      isLoading={!!isLoading}
-    />
-  );
-}, shallowEqual);
-
-export { NodePanel };

src/components/node/NodePanelInner/index.tsx

@@ -1,7 +1,6 @@
-import React, { FC, memo } from 'react';
+import React, { VFC, memo } from 'react';
 import styles from './styles.module.scss';
 import { Icon } from '~/components/input/Icon';
-import { INode } from '~/redux/types';
 import classNames from 'classnames';
 import { Placeholder } from '~/components/placeholders/Placeholder';
 import { getPrettyDate } from '~/utils/dom';
@@ -9,8 +8,15 @@ import { URLS } from '~/constants/urls';
 import { Link } from 'react-router-dom';
 
 interface IProps {
-  node: Partial<INode>;
+  id?: number;
-  stack?: boolean;
+  title: string;
+  username?: string;
+  createdAt: string;
+  likeCount: number;
+
+  isHeroic: boolean;
+  isLocked: boolean;
+  isLiked: boolean;
 
   canEdit: boolean;
   canLike: boolean;
@@ -24,10 +30,17 @@ interface IProps {
   onLock: () => void;
 }
 
-const NodePanelInner: FC<IProps> = memo(
+const NodePanelInner: VFC<IProps> = memo(
   ({
-    node: { id, title, user, is_liked, is_heroic, deleted_at, created_at, like_count },
+    id,
-    stack,
+    title,
+    username,
+    createdAt,
+    likeCount,
+
+    isHeroic,
+    isLocked,
+    isLiked,
 
     canStar,
     canEdit,
@@ -41,19 +54,19 @@ const NodePanelInner: FC<IProps> = memo(
     onLock,
   }) => {
     return (
-      <div className={classNames(styles.wrap, { stack })}>
+      <div className={classNames(styles.wrap)}>
         <div className={styles.content}>
           <div className={styles.panel}>
             <div className={styles.title}>
               {isLoading ? <Placeholder width="40%" /> : title || '...'}
             </div>
 
-            {user && user.username && (
+            {!!username && (
               <div className={styles.name}>
                 {isLoading ? (
                   <Placeholder width="100px" />
                 ) : (
-                  `~${user.username.toLocaleLowerCase()}, ${getPrettyDate(created_at)}`
+                  `~${username.toLocaleLowerCase()}, ${getPrettyDate(createdAt)}`
                 )}
               </div>
             )}
@@ -67,8 +80,8 @@ const NodePanelInner: FC<IProps> = memo(
 
               <div className={styles.editor_buttons}>
                 {canStar && (
-                  <div className={classNames(styles.star, { is_heroic })}>
+                  <div className={classNames(styles.star, { [styles.is_heroic]: isHeroic })}>
-                    {is_heroic ? (
+                    {isHeroic ? (
                       <Icon icon="star_full" size={24} onClick={onStar} />
                     ) : (
                       <Icon icon="star" size={24} onClick={onStar} />
@@ -77,27 +90,29 @@ const NodePanelInner: FC<IProps> = memo(
                 )}
 
                 <div>
-                  <Icon icon={deleted_at ? 'locked' : 'unlocked'} size={24} onClick={onLock} />
+                  <Icon icon={isLocked ? 'locked' : 'unlocked'} size={24} onClick={onLock} />
                 </div>
 
-                <Link to={URLS.NODE_EDIT_URL(id)}>
+                {!!id && (
-                  <Icon icon="edit" size={24} onClick={onEdit} />
+                  <Link to={URLS.NODE_EDIT_URL(id)}>
-                </Link>
+                    <Icon icon="edit" size={24} onClick={onEdit} />
+                  </Link>
+                )}
               </div>
             </div>
           )}
 
           <div className={styles.buttons}>
             {canLike && (
-              <div className={classNames(styles.like, { is_liked })}>
+              <div className={classNames(styles.like, { [styles.is_liked]: isLiked })}>
-                {is_liked ? (
+                {isLiked ? (
                   <Icon icon="heart_full" size={24} onClick={onLike} />
                 ) : (
                   <Icon icon="heart" size={24} onClick={onLike} />
                 )}
 
-                {!!like_count && like_count > 0 && (
+                {!!likeCount && likeCount > 0 && (
-                  <div className={styles.like_count}>{like_count}</div>
+                  <div className={styles.like_count}>{likeCount}</div>
                 )}
               </div>
             )}

src/components/node/NodePanelInner/styles.module.scss

@@ -38,17 +38,6 @@
   justify-content: center;
   box-sizing: border-box;
   min-width: 0;
-
-  &:global(.stack) {
-    padding: 0 $gap;
-    bottom: 0;
-    position: fixed;
-    z-index: 5;
-
-    @include tablet {
-      padding: 0;
-    }
-  }
 }
 
 .content {
@@ -209,7 +198,7 @@
   position: relative;
   flex: 0 0 32px;
 
-  &:global(.is_liked) {
+  .is_liked {
     svg {
       fill: $red;
     }
@@ -249,7 +238,7 @@
   transition: fill, stroke 0.25s;
   will-change: transform;
 
-  &:global(.is_heroic) {
+  .is_heroic {
     svg {
       fill: $orange;
     }

src/layouts/NodeLayout/index.tsx

@@ -2,7 +2,6 @@ import React, { FC } from 'react';
 import { Route } from 'react-router';
 import { Card } from '~/components/containers/Card';
 
-import { NodePanel } from '~/components/node/NodePanel';
 import { Footer } from '~/components/main/Footer';
 
 import { SidebarRouter } from '~/containers/main/SidebarRouter';
@@ -15,12 +14,17 @@ import { EditorEditDialog } from '~/containers/dialogs/EditorEditDialog';
 
 import styles from './styles.module.scss';
 import { useNodeContext } from '~/utils/context/NodeContextProvider';
+import { useNodePermissions } from '~/utils/hooks/node/useNodePermissions';
+import { useNodeActions } from '~/utils/hooks/node/useNodeActions';
+import { NodePanelInner } from '~/components/node/NodePanelInner';
 
 type IProps = {};
 
 const NodeLayout: FC<IProps> = () => {
-  const { node, isLoading } = useNodeContext();
+  const { node, isLoading, update } = useNodeContext();
   const { head, block } = useNodeBlocks(node, isLoading);
+  const [canEdit, canLike, canStar] = useNodePermissions(node);
+  const { onEdit, onLike, onStar, onLock } = useNodeActions(node, update);
 
   useNodeCoverImage(node);
 
@@ -33,7 +37,24 @@ const NodeLayout: FC<IProps> = () => {
           {block}
 
           <div className={styles.panel}>
-            <NodePanel node={node} isLoading={isLoading} />
+            <NodePanelInner
+              id={node.id}
+              title={node.title}
+              username={node.user?.username}
+              likeCount={node?.like_count || 0}
+              isHeroic={!!node.is_promoted}
+              isLiked={!!node.is_liked}
+              isLocked={!!node.deleted_at}
+              isLoading={isLoading}
+              createdAt={node.created_at || ''}
+              canEdit={canEdit}
+              canLike={canLike}
+              canStar={canStar}
+              onEdit={onEdit}
+              onLike={onLike}
+              onStar={onStar}
+              onLock={onLock}
+            />
           </div>
 
           <NodeBottomBlock commentsOrder="DESC" />

src/pages/boris.tsx

@@ -9,12 +9,12 @@ import { useImageModal } from '~/utils/hooks/useImageModal';
 import { useNodeComments } from '~/utils/hooks/node/useNodeComments';
 import { useBoris } from '~/utils/hooks/boris/useBoris';
 import { NodeContextProvider } from '~/utils/context/NodeContextProvider';
+import { useGetNode } from '~/utils/hooks/data/useGetNode';
 
 const BorisPage: VFC = () => {
   const dispatch = useDispatch();
+  const { node, isLoading, update } = useGetNode(696);
   const {
-    current,
-    is_loading,
     comments,
     comment_count: count,
     is_loading_comments: isLoadingComments,
@@ -28,7 +28,7 @@ const BorisPage: VFC = () => {
   }, [dispatch]);
 
   return (
-    <NodeContextProvider node={current} isLoading={is_loading}>
+    <NodeContextProvider node={node} isLoading={isLoading} update={update}>
       <CommentContextProvider
         comments={comments}
         count={count}

src/pages/node/[id].tsx

@@ -21,7 +21,7 @@ const NodePage: FC<Props> = ({
     params: { id },
   },
 }) => {
-  const { node, isLoading } = useGetNode(parseInt(id, 10));
+  const { node, isLoading, update } = useGetNode(parseInt(id, 10));
   const { isLoadingComments, comments, commentsCount, lastSeenCurrent } = useFullNode(id);
 
   const onShowImageModal = useImageModal();
@@ -40,7 +40,7 @@ const NodePage: FC<Props> = ({
   }
 
   return (
-    <NodeContextProvider node={node} isLoading={isLoading}>
+    <NodeContextProvider node={node} isLoading={isLoading} update={update}>
       <NodeRelatedProvider id={parseInt(id, 10)} tags={node.tags}>
         <CommentContextProvider
           comments={comments}

src/redux/node/actions.ts

@@ -7,11 +7,6 @@ export const nodeSet = (node: Partial<INodeState>) => ({
   type: NODE_ACTIONS.SET,
 });
 
-export const nodeSetSaveErrors = (errors: IValidationErrors) => ({
-  errors,
-  type: NODE_ACTIONS.SET_SAVE_ERRORS,
-});
-
 export const nodeGotoNode = (id: INode['id'], node_type: INode['type']) => ({
   id,
   node_type,
@@ -60,22 +55,6 @@ export const nodeSetComments = (comments: IComment[]) => ({
   type: NODE_ACTIONS.SET_COMMENTS,
 });
 
-export const nodeLike = (id: INode['id']) => ({
-  type: NODE_ACTIONS.LIKE,
-  id,
-});
-
-export const nodeStar = (id: INode['id']) => ({
-  type: NODE_ACTIONS.STAR,
-  id,
-});
-
-export const nodeLock = (id: INode['id'], is_locked: boolean) => ({
-  type: NODE_ACTIONS.LOCK,
-  id,
-  is_locked,
-});
-
 export const nodeLockComment = (id: number, is_locked: boolean, nodeId: number) => ({
   type: NODE_ACTIONS.LOCK_COMMENT,
   nodeId,
@@ -83,11 +62,6 @@ export const nodeLockComment = (id: number, is_locked: boolean, nodeId: number)
   is_locked,
 });
 
-export const nodeSetEditor = (editor: INode) => ({
-  type: NODE_ACTIONS.SET_EDITOR,
-  editor,
-});
-
 export const nodeSetCoverImage = (current_cover_image?: IFile) => ({
   type: NODE_ACTIONS.SET_COVER_IMAGE,
   current_cover_image,

src/redux/node/constants.ts

@@ -29,23 +29,17 @@ export const NODE_ACTIONS = {
   GOTO_NODE: `${prefix}GOTO_NODE`,
   SET: `${prefix}SET`,
 
-  LIKE: `${prefix}LIKE`,
-  STAR: `${prefix}STAR`,
-  LOCK: `${prefix}LOCK`,
   LOCK_COMMENT: `${prefix}LOCK_COMMENT`,
   EDIT_COMMENT: `${prefix}EDIT_COMMENT`,
   LOAD_MORE_COMMENTS: `${prefix}LOAD_MORE_COMMENTS`,
 
-  SET_SAVE_ERRORS: `${prefix}SET_SAVE_ERRORS`,
   SET_LOADING: `${prefix}SET_LOADING`,
   SET_LOADING_COMMENTS: `${prefix}SET_LOADING_COMMENTS`,
   SET_SENDING_COMMENT: `${prefix}SET_SENDING_COMMENT`,
   SET_CURRENT: `${prefix}SET_CURRENT`,
-  SET_EDITOR: `${prefix}SET_EDITOR`,
 
   POST_LOCAL_COMMENT: `${prefix}POST_LOCAL_COMMENT`,
   SET_COMMENTS: `${prefix}SET_COMMENTS`,
-  SET_RELATED: `${prefix}SET_RELATED`,
 
   SET_COVER_IMAGE: `${prefix}SET_COVER_IMAGE`,
 };

src/redux/node/handlers.ts

@@ -5,10 +5,8 @@ import {
   nodeSetComments,
   nodeSetCoverImage,
   nodeSetCurrent,
-  nodeSetEditor,
   nodeSetLoading,
   nodeSetLoadingComments,
-  nodeSetSaveErrors,
   nodeSetSendingComment,
 } from './actions';
 import { INodeState } from './reducer';
@@ -18,9 +16,6 @@ const setData = (state: INodeState, { node }: ReturnType<typeof nodeSet>) => ({
   ...node,
 });
 
-const setSaveErrors = (state: INodeState, { errors }: ReturnType<typeof nodeSetSaveErrors>) =>
-  assocPath(['errors'], errors, state);
-
 const setLoading = (state: INodeState, { is_loading }: ReturnType<typeof nodeSetLoading>) =>
   assocPath(['is_loading'], is_loading, state);
 
@@ -40,9 +35,6 @@ const setSendingComment = (
 const setComments = (state: INodeState, { comments }: ReturnType<typeof nodeSetComments>) =>
   assocPath(['comments'], comments, state);
 
-const setEditor = (state: INodeState, { editor }: ReturnType<typeof nodeSetEditor>) =>
-  assocPath(['editor'], editor, state);
-
 const setCoverImage = (
   state: INodeState,
   { current_cover_image }: ReturnType<typeof nodeSetCoverImage>
@@ -50,12 +42,10 @@ const setCoverImage = (
 
 export const NODE_HANDLERS = {
   [NODE_ACTIONS.SET]: setData,
-  [NODE_ACTIONS.SET_SAVE_ERRORS]: setSaveErrors,
   [NODE_ACTIONS.SET_LOADING]: setLoading,
   [NODE_ACTIONS.SET_LOADING_COMMENTS]: setLoadingComments,
   [NODE_ACTIONS.SET_CURRENT]: setCurrent,
   [NODE_ACTIONS.SET_SENDING_COMMENT]: setSendingComment,
   [NODE_ACTIONS.SET_COMMENTS]: setComments,
-  [NODE_ACTIONS.SET_EDITOR]: setEditor,
   [NODE_ACTIONS.SET_COVER_IMAGE]: setCoverImage,
 };

src/redux/node/sagas.ts

@@ -1,11 +1,9 @@
 import { call, put, select, takeLatest, takeLeading } from 'redux-saga/effects';
 
-import { COMMENTS_DISPLAY, EMPTY_NODE, NODE_ACTIONS, NODE_EDITOR_DATA } from './constants';
+import { COMMENTS_DISPLAY, EMPTY_NODE, NODE_ACTIONS } from './constants';
 import {
   nodeGotoNode,
-  nodeLike,
   nodeLoadNode,
-  nodeLock,
   nodeLockComment,
   nodePostLocalComment,
   nodeSet,
@@ -13,27 +11,11 @@ import {
   nodeSetCurrent,
   nodeSetLoadingComments,
 } from './actions';
-import {
+import { apiGetNodeComments, apiLockComment, apiPostComment } from './api';
-  apiGetNodeComments,
-  apiLockComment,
-  apiLockNode,
-  apiPostComment,
-  apiPostNodeHeroic,
-  apiPostNodeLike,
-  apiPostNodeTags,
-} from './api';
 import { flowSetNodes } from '../flow/actions';
-import { modalSetShown, modalShowDialog } from '../modal/actions';
 import { selectFlowNodes } from '../flow/selectors';
-import { URLS } from '~/constants/urls';
 import { selectNode } from './selectors';
 import { INode, Unwrap } from '../types';
-import { NODE_EDITOR_DIALOGS } from '~/constants/dialogs';
-import { DIALOGS } from '~/redux/modal/constants';
-import { has } from 'ramda';
-import { selectLabListNodes } from '~/redux/lab/selectors';
-import { labSetList } from '~/redux/lab/actions';
-import { apiPostNode } from '~/redux/node/api';
 import { showErrorToast } from '~/utils/errors/showToast';
 
 export function* updateNodeEverywhere(node) {
@@ -156,63 +138,6 @@ function* onPostComment({ nodeId, comment, callback }: ReturnType<typeof nodePos
   }
 }
 
-function* onLikeSaga({ id }: ReturnType<typeof nodeLike>) {
-  const { current }: ReturnType<typeof selectNode> = yield select(selectNode);
-
-  try {
-    const count = current.like_count || 0;
-
-    yield call(updateNodeEverywhere, {
-      ...current,
-      is_liked: !current.is_liked,
-      like_count: current.is_liked ? Math.max(count - 1, 0) : count + 1,
-    });
-
-    const data: Unwrap<typeof apiPostNodeLike> = yield call(apiPostNodeLike, { id });
-
-    yield call(updateNodeEverywhere, {
-      ...current,
-      is_liked: data.is_liked,
-      like_count: data.is_liked ? count + 1 : Math.max(count - 1, 0),
-    });
-  } catch {}
-}
-
-function* onStarSaga({ id }: ReturnType<typeof nodeLike>) {
-  try {
-    const {
-      current,
-      current: { is_heroic },
-    } = yield select(selectNode);
-
-    yield call(updateNodeEverywhere, { ...current, is_heroic: !is_heroic });
-
-    const data: Unwrap<typeof apiPostNodeHeroic> = yield call(apiPostNodeHeroic, { id });
-
-    yield call(updateNodeEverywhere, { ...current, is_heroic: data.is_heroic });
-  } catch {}
-}
-
-function* onLockSaga({ id, is_locked }: ReturnType<typeof nodeLock>) {
-  const { current }: ReturnType<typeof selectNode> = yield select(selectNode);
-
-  try {
-    yield call(updateNodeEverywhere, {
-      ...current,
-      deleted_at: is_locked ? new Date().toISOString() : null,
-    });
-
-    const data: Unwrap<typeof apiLockNode> = yield call(apiLockNode, { id, is_locked });
-
-    yield call(updateNodeEverywhere, {
-      ...current,
-      deleted_at: data.deleted_at || undefined,
-    });
-  } catch {
-    yield call(updateNodeEverywhere, { ...current, deleted_at: current.deleted_at });
-  }
-}
-
 function* onLockCommentSaga({ nodeId, id, is_locked }: ReturnType<typeof nodeLockComment>) {
   const { comments }: ReturnType<typeof selectNode> = yield select(selectNode);
 
@@ -239,9 +164,6 @@ export default function* nodeSaga() {
   yield takeLatest(NODE_ACTIONS.GOTO_NODE, onNodeGoto);
   yield takeLatest(NODE_ACTIONS.LOAD_NODE, onNodeLoad);
   yield takeLatest(NODE_ACTIONS.POST_LOCAL_COMMENT, onPostComment);
-  yield takeLatest(NODE_ACTIONS.LIKE, onLikeSaga);
-  yield takeLatest(NODE_ACTIONS.STAR, onStarSaga);
-  yield takeLatest(NODE_ACTIONS.LOCK, onLockSaga);
   yield takeLatest(NODE_ACTIONS.LOCK_COMMENT, onLockCommentSaga);
   yield takeLeading(NODE_ACTIONS.LOAD_MORE_COMMENTS, onNodeLoadMoreComments);
 }

src/utils/context/NodeContextProvider.tsx

@@ -4,11 +4,13 @@ import React, { createContext, FC, useContext } from 'react';
 
 export interface NodeContextProps {
   node: INode;
+  update: (node: Partial<INode>) => Promise<unknown>;
   isLoading: boolean;
 }
 
 export const NodeContext = createContext<NodeContextProps>({
   node: EMPTY_NODE,
+  update: async () => {},
   isLoading: false,
 });
 

src/utils/hooks/data/useGetNode.ts

@@ -5,6 +5,7 @@ import { useOnNodeSeen } from '~/utils/hooks/node/useOnNodeSeen';
 import { apiGetNode } from '~/redux/node/api';
 import { useCallback } from 'react';
 import { INode } from '~/redux/types';
+import { EMPTY_NODE } from '~/redux/node/constants';
 
 export const useGetNode = (id: number) => {
   const { data, isValidating, mutate } = useSWR<ApiGetNodeResponse>(API.NODE.GET_NODE(id), () =>
@@ -25,5 +26,5 @@ export const useGetNode = (id: number) => {
 
   useOnNodeSeen(data?.node);
 
-  return { node: data?.node, isLoading: isValidating && !data, update };
+  return { node: data?.node || EMPTY_NODE, isLoading: isValidating && !data, update };
 };

src/utils/hooks/node/useNodeActions.ts

@@ -1,11 +1,12 @@
 import { INode } from '~/redux/types';
 import { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
-import { nodeLike, nodeLock, nodeStar } from '~/redux/node/actions';
 import { modalShowDialog } from '~/redux/modal/actions';
 import { NODE_EDITOR_DIALOGS } from '~/constants/dialogs';
+import { apiLockNode, apiPostNodeHeroic, apiPostNodeLike } from '~/redux/node/api';
+import { showErrorToast } from '~/utils/errors/showToast';
 
-export const useNodeActions = (node: INode) => {
+export const useNodeActions = (node: INode, update: (node: Partial<INode>) => Promise<unknown>) => {
   const dispatch = useDispatch();
 
   const onEdit = useCallback(() => {
@@ -16,9 +17,38 @@ export const useNodeActions = (node: INode) => {
     dispatch(modalShowDialog(NODE_EDITOR_DIALOGS[node.type]));
   }, [dispatch, node]);
 
-  const onLike = useCallback(() => dispatch(nodeLike(node.id)), [dispatch, node]);
+  const onLike = useCallback(async () => {
-  const onStar = useCallback(() => dispatch(nodeStar(node.id)), [dispatch, node]);
+    try {
-  const onLock = useCallback(() => dispatch(nodeLock(node.id, !node.deleted_at)), [dispatch, node]);
+      const result = await apiPostNodeLike({ id: node.id });
+      const likeCount = node.like_count || 0;
+
+      if (result.is_liked) {
+        await update({ like_count: likeCount + 1 });
+      } else {
+        await update({ like_count: likeCount - 1 });
+      }
+    } catch (error) {
+      showErrorToast(error);
+    }
+  }, [node.id, node.like_count, update]);
+
+  const onStar = useCallback(async () => {
+    try {
+      const result = await apiPostNodeHeroic({ id: node.id });
+      await update({ is_heroic: result.is_heroic });
+    } catch (error) {
+      showErrorToast(error);
+    }
+  }, [node.id, update]);
+
+  const onLock = useCallback(async () => {
+    try {
+      const result = await apiLockNode({ id: node.id, is_locked: !node.deleted_at });
+      await update({ deleted_at: result.deleted_at });
+    } catch (error) {
+      showErrorToast(error);
+    }
+  }, [node.deleted_at, node.id, update]);
 
   return { onEdit, onLike, onStar, onLock };
 };