99 use swr (#100)

* 99: made node use SWR

* 99: fixed comments for SWR node

* 99: added error toast to useNodeFormFormik.ts

src/components/comment/Comment/index.tsx

@@ -8,8 +8,9 @@ import classNames from 'classnames';
 import { NEW_COMMENT_CLASSNAME } from '~/constants/comment';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
-  is_empty?: boolean;
-  is_loading?: boolean;
+  nodeId: number;
+  isEmpty?: boolean;
+  isLoading?: boolean;
   group: ICommentGroup;
   isSame?: boolean;
   canEdit?: boolean;
@@ -20,9 +21,10 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
 const Comment: FC<IProps> = memo(
   ({
     group,
-    is_empty,
+    nodeId,
+    isEmpty,
     isSame,
-    is_loading,
+    isLoading,
     className,
     canEdit,
     onDelete,
@@ -34,8 +36,8 @@ const Comment: FC<IProps> = memo(
         className={classNames(className, {
           [NEW_COMMENT_CLASSNAME]: group.hasNew,
         })}
-        isEmpty={is_empty}
-        isLoading={is_loading}
+        isEmpty={isEmpty}
+        isLoading={isLoading}
         user={group.user}
         isNew={group.hasNew && !isSame}
         {...props}
@@ -48,9 +50,10 @@ const Comment: FC<IProps> = memo(
 
             return (
               <CommentContent
+                nodeId={nodeId}
                 comment={comment}
                 key={comment.id}
-                can_edit={!!canEdit}
+                canEdit={!!canEdit}
                 onDelete={onDelete}
                 onShowImageModal={onShowImageModal}
               />

src/components/comment/CommentContent/index.tsx

@@ -13,106 +13,108 @@ import { PRESETS } from '~/constants/urls';
 import { COMMENT_BLOCK_RENDERERS } from '~/constants/comment';
 import { CommentMenu } from '../CommentMenu';
 import { CommentForm } from '~/components/comment/CommentForm';
-import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
-import { selectNode } from '~/redux/node/selectors';
 
 interface IProps {
+  nodeId: number;
   comment: IComment;
-  can_edit: boolean;
+  canEdit: boolean;
   onDelete: (id: IComment['id'], isLocked: boolean) => void;
   onShowImageModal: (images: IFile[], index: number) => void;
 }
 
-const CommentContent: FC<IProps> = memo(({ comment, can_edit, onDelete, onShowImageModal }) => {
-  const [isEditing, setIsEditing] = useState(false);
-  const { current } = useShallowSelect(selectNode);
+const CommentContent: FC<IProps> = memo(
+  ({ comment, canEdit, nodeId, onDelete, onShowImageModal }) => {
+    const [isEditing, setIsEditing] = useState(false);
 
-  const startEditing = useCallback(() => setIsEditing(true), [setIsEditing]);
-  const stopEditing = useCallback(() => setIsEditing(false), [setIsEditing]);
+    const startEditing = useCallback(() => setIsEditing(true), [setIsEditing]);
+    const stopEditing = useCallback(() => setIsEditing(false), [setIsEditing]);
 
-  const groupped = useMemo<Record<keyof typeof UPLOAD_TYPES, IFile[]>>(
-    () =>
-      reduce(
-        (group, file) =>
-          file.type ? assocPath([file.type], append(file, group[file.type]), group) : group,
-        {},
-        comment.files
-      ),
-    [comment]
-  );
+    const groupped = useMemo<Record<keyof typeof UPLOAD_TYPES, IFile[]>>(
+      () =>
+        reduce(
+          (group, file) =>
+            file.type ? assocPath([file.type], append(file, group[file.type]), group) : group,
+          {},
+          comment.files
+        ),
+      [comment]
+    );
 
-  const onLockClick = useCallback(() => {
-    onDelete(comment.id, !comment.deleted_at);
-  }, [comment, onDelete]);
+    const onLockClick = useCallback(() => {
+      onDelete(comment.id, !comment.deleted_at);
+    }, [comment, onDelete]);
 
-  const menu = useMemo(
-    () => can_edit && <CommentMenu onDelete={onLockClick} onEdit={startEditing} />,
-    [can_edit, startEditing, onLockClick]
-  );
+    const menu = useMemo(
+      () => canEdit && <CommentMenu onDelete={onLockClick} onEdit={startEditing} />,
+      [canEdit, startEditing, onLockClick]
+    );
 
-  const blocks = useMemo(
-    () =>
-      !!comment.text.trim()
-        ? formatCommentText(path(['user', 'username'], comment), comment.text)
-        : [],
-    [comment]
-  );
+    const blocks = useMemo(
+      () =>
+        !!comment.text.trim()
+          ? formatCommentText(path(['user', 'username'], comment), comment.text)
+          : [],
+      [comment]
+    );
 
-  if (isEditing) {
-    return <CommentForm nodeId={current.id} comment={comment} onCancelEdit={stopEditing} />;
-  }
+    if (isEditing) {
+      return <CommentForm nodeId={nodeId} comment={comment} onCancelEdit={stopEditing} />;
+    }
 
-  return (
-    <div className={styles.wrap}>
-      {comment.text && (
-        <Group className={classnames(styles.block, styles.block_text)}>
-          {menu}
+    return (
+      <div className={styles.wrap}>
+        {comment.text && (
+          <Group className={classnames(styles.block, styles.block_text)}>
+            {menu}
 
-          <Group className={styles.renderers}>
-            {blocks.map(
-              (block, key) =>
-                COMMENT_BLOCK_RENDERERS[block.type] &&
-                createElement(COMMENT_BLOCK_RENDERERS[block.type], { block, key })
-            )}
+            <Group className={styles.renderers}>
+              {blocks.map(
+                (block, key) =>
+                  COMMENT_BLOCK_RENDERERS[block.type] &&
+                  createElement(COMMENT_BLOCK_RENDERERS[block.type], { block, key })
+              )}
+            </Group>
+
+            <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
           </Group>
+        )}
 
-          <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
-        </Group>
-      )}
+        {groupped.image && groupped.image.length > 0 && (
+          <div className={classnames(styles.block, styles.block_image)}>
+            {menu}
 
-      {groupped.image && groupped.image.length > 0 && (
-        <div className={classnames(styles.block, styles.block_image)}>
-          {menu}
+            <div
+              className={classNames(styles.images, {
+                [styles.multiple]: groupped.image.length > 1,
+              })}
+            >
+              {groupped.image.map((file, index) => (
+                <div key={file.id} onClick={() => onShowImageModal(groupped.image, index)}>
+                  <img src={getURL(file, PRESETS['600'])} alt={file.name} />
+                </div>
+              ))}
+            </div>
 
-          <div
-            className={classNames(styles.images, { [styles.multiple]: groupped.image.length > 1 })}
-          >
-            {groupped.image.map((file, index) => (
-              <div key={file.id} onClick={() => onShowImageModal(groupped.image, index)}>
-                <img src={getURL(file, PRESETS['600'])} alt={file.name} />
+            <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
+          </div>
+        )}
+
+        {groupped.audio && groupped.audio.length > 0 && (
+          <Fragment>
+            {groupped.audio.map(file => (
+              <div className={classnames(styles.block, styles.block_audio)} key={file.id}>
+                {menu}
+
+                <AudioPlayer file={file} />
+
+                <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
               </div>
             ))}
-          </div>
-
-          <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
-        </div>
-      )}
-
-      {groupped.audio && groupped.audio.length > 0 && (
-        <Fragment>
-          {groupped.audio.map(file => (
-            <div className={classnames(styles.block, styles.block_audio)} key={file.id}>
-              {menu}
-
-              <AudioPlayer file={file} />
-
-              <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
-            </div>
-          ))}
-        </Fragment>
-      )}
-    </div>
-  );
-});
+          </Fragment>
+        )}
+      </div>
+    );
+  }
+);
 
 export { CommentContent };

src/components/editors/AudioEditor/index.tsx

@@ -10,7 +10,7 @@ import styles from './styles.module.scss';
 import { NodeEditorProps } from '~/redux/node/types';
 import { useNodeImages } from '~/utils/hooks/node/useNodeImages';
 import { useNodeAudios } from '~/utils/hooks/node/useNodeAudios';
-import { useNodeFormContext } from '~/utils/hooks/useNodeFormFormik';
+import { useNodeFormContext } from '~/utils/hooks/node/useNodeFormFormik';
 import { useFileUploaderContext } from '~/utils/hooks/useFileUploader';
 import { UploadDropzone } from '~/components/upload/UploadDropzone';
 

src/components/editors/EditorActionsPanel/index.tsx

@@ -1,9 +1,8 @@
 import React, { FC, createElement } from 'react';
 import styles from './styles.module.scss';
-import { INode } from '~/redux/types';
 import { NODE_PANEL_COMPONENTS } from '~/redux/node/constants';
 import { has } from 'ramda';
-import { useNodeFormContext } from '~/utils/hooks/useNodeFormFormik';
+import { useNodeFormContext } from '~/utils/hooks/node/useNodeFormFormik';
 
 const EditorActionsPanel: FC = () => {
   const { values } = useNodeFormContext();

src/components/editors/EditorButtons/index.tsx

@@ -4,7 +4,7 @@ import { Group } from '~/components/containers/Group';
 import { InputText } from '~/components/input/InputText';
 import { Button } from '~/components/input/Button';
 import { Padder } from '~/components/containers/Padder';
-import { useNodeFormContext } from '~/utils/hooks/useNodeFormFormik';
+import { useNodeFormContext } from '~/utils/hooks/node/useNodeFormFormik';
 
 const EditorButtons: FC = () => {
   const { values, handleChange, isSubmitting } = useNodeFormContext();
@@ -28,6 +28,7 @@ const EditorButtons: FC = () => {
           iconRight="check"
           color={values.is_promoted ? 'primary' : 'lab'}
           disabled={isSubmitting}
+          type="submit"
         />
       </Group>
     </Padder>

src/components/editors/EditorPublicSwitch/index.tsx

@@ -3,7 +3,7 @@ import { IEditorComponentProps } from '~/redux/node/types';
 import { Button } from '~/components/input/Button';
 import { Icon } from '~/components/input/Icon';
 import styles from './styles.module.scss';
-import { useNodeFormContext } from '~/utils/hooks/useNodeFormFormik';
+import { useNodeFormContext } from '~/utils/hooks/node/useNodeFormFormik';
 
 interface IProps extends IEditorComponentProps {}
 

src/components/editors/EditorUploadButton/index.tsx

@@ -5,7 +5,7 @@ import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 import { IEditorComponentProps } from '~/redux/node/types';
 import { useFileUploaderContext } from '~/utils/hooks/useFileUploader';
 import { getFileType } from '~/utils/uploader';
-import { useNodeFormContext } from '~/utils/hooks/useNodeFormFormik';
+import { useNodeFormContext } from '~/utils/hooks/node/useNodeFormFormik';
 import { Button } from '~/components/input/Button';
 
 type IProps = IEditorComponentProps & {

src/components/editors/EditorUploadCoverButton/index.tsx

@@ -12,7 +12,7 @@ import { Icon } from '~/components/input/Icon';
 import { PRESETS } from '~/constants/urls';
 import { IEditorComponentProps } from '~/redux/node/types';
 import { useFileUploader, useFileUploaderContext } from '~/utils/hooks/useFileUploader';
-import { useNodeFormContext } from '~/utils/hooks/useNodeFormFormik';
+import { useNodeFormContext } from '~/utils/hooks/node/useNodeFormFormik';
 import { getFileType } from '~/utils/uploader';
 
 type IProps = IEditorComponentProps & {};

src/components/editors/TextEditor/index.tsx

@@ -4,7 +4,7 @@ import styles from './styles.module.scss';
 import { Textarea } from '~/components/input/Textarea';
 import { path } from 'ramda';
 import { NodeEditorProps } from '~/redux/node/types';
-import { useNodeFormContext } from '~/utils/hooks/useNodeFormFormik';
+import { useNodeFormContext } from '~/utils/hooks/node/useNodeFormFormik';
 
 type IProps = NodeEditorProps & {};
 

src/components/editors/VideoEditor/index.tsx

@@ -6,7 +6,7 @@ import { InputText } from '~/components/input/InputText';
 import classnames from 'classnames';
 import { getYoutubeThumb } from '~/utils/dom';
 import { NodeEditorProps } from '~/redux/node/types';
-import { useNodeFormContext } from '~/utils/hooks/useNodeFormFormik';
+import { useNodeFormContext } from '~/utils/hooks/node/useNodeFormFormik';
 
 type IProps = NodeEditorProps & {};
 

src/components/node/NodeImageSwiperBlock/index.tsx

@@ -64,7 +64,6 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
       <div className={styles.single}>
         <ImagePreloader
           file={images[0]}
-          onLoad={updateSwiper}
           onClick={() => onOpenPhotoSwipe(0)}
           className={styles.image}
         />

src/containers/dialogs/EditorCreateDialog/index.tsx

@@ -3,6 +3,10 @@ import { EMPTY_NODE, NODE_TYPES } from '~/redux/node/constants';
 import { EditorDialog } from '~/containers/dialogs/EditorDialog';
 import { useHistory, useRouteMatch } from 'react-router';
 import { values } from 'ramda';
+import { INode } from '~/redux/types';
+import { apiPostNode } from '~/redux/node/api';
+import { useUpdateNode } from '~/utils/hooks/data/useUpdateNode';
+import { useCreateNode } from '~/utils/hooks/data/useCreateNode';
 
 const EditorCreateDialog: FC = () => {
   const history = useHistory();
@@ -25,11 +29,21 @@ const EditorCreateDialog: FC = () => {
 
   const data = useRef({ ...EMPTY_NODE, type, is_promoted: !isInLab });
 
+  const createNode = useCreateNode();
+
+  const onSubmit = useCallback(
+    async (node: INode) => {
+      await createNode(node);
+      goBack();
+    },
+    [goBack, createNode]
+  );
+
   if (!type || !isExist) {
     return null;
   }
 
-  return <EditorDialog node={data.current} onRequestClose={goBack} />;
+  return <EditorDialog node={data.current} onRequestClose={goBack} onSubmit={onSubmit} />;
 };
 
 export { EditorCreateDialog };

src/containers/dialogs/EditorDialog/index.tsx

@@ -5,7 +5,7 @@ import { NODE_EDITORS } from '~/redux/node/constants';
 import { BetterScrollDialog } from '../BetterScrollDialog';
 import { CoverBackdrop } from '~/components/containers/CoverBackdrop';
 import { prop } from 'ramda';
-import { useNodeFormFormik } from '~/utils/hooks/useNodeFormFormik';
+import { useNodeFormFormik } from '~/utils/hooks/node/useNodeFormFormik';
 import { EditorButtons } from '~/components/editors/EditorButtons';
 import { FileUploaderProvider, useFileUploader } from '~/utils/hooks/useFileUploader';
 import { UPLOAD_SUBJECTS, UPLOAD_TARGETS } from '~/redux/uploads/constants';
@@ -15,16 +15,18 @@ import { ModalWrapper } from '~/components/dialogs/ModalWrapper';
 import { useTranslatedError } from '~/utils/hooks/useTranslatedError';
 import { useCloseOnEscape } from '~/utils/hooks';
 import { EditorConfirmClose } from '~/components/editors/EditorConfirmClose';
+import { on } from 'cluster';
 
 interface Props extends IDialogProps {
   node: INode;
+  onSubmit: (node: INode) => Promise<unknown>;
 }
 
-const EditorDialog: FC<Props> = ({ node, onRequestClose }) => {
+const EditorDialog: FC<Props> = ({ node, onRequestClose, onSubmit }) => {
   const [isConfirmModalShown, setConfirmModalShown] = useState(false);
 
   const uploader = useFileUploader(UPLOAD_SUBJECTS.EDITOR, UPLOAD_TARGETS.NODES, node.files);
-  const formik = useNodeFormFormik(node, uploader, onRequestClose);
+  const formik = useNodeFormFormik(node, uploader, onRequestClose, onSubmit);
   const { values, handleSubmit, dirty, status } = formik;
 
   const component = useMemo(() => node.type && prop(node.type, NODE_EDITORS), [node.type]);
@@ -71,6 +73,7 @@ const EditorDialog: FC<Props> = ({ node, onRequestClose }) => {
                 {isConfirmModalShown && (
                   <EditorConfirmClose onApprove={onRequestClose} onDecline={closeConfirmModal} />
                 )}
+
                 <div className={styles.editor}>{createElement(component)}</div>
               </>
             </BetterScrollDialog>

src/containers/dialogs/EditorEditDialog/index.tsx

@@ -5,7 +5,8 @@ import { ModalWrapper } from '~/components/dialogs/ModalWrapper';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
 import styles from './styles.module.scss';
 import { useGetNode } from '~/utils/hooks/data/useGetNode';
-import { EMPTY_NODE } from '~/redux/node/constants';
+import { useUpdateNode } from '~/utils/hooks/data/useUpdateNode';
+import { INode } from '~/redux/types';
 
 const EditorEditDialog: FC = () => {
   const history = useHistory();
@@ -24,6 +25,15 @@ const EditorEditDialog: FC = () => {
   }, [backUrl, history]);
 
   const { node, isLoading } = useGetNode(parseInt(id, 10));
+  const updateNode = useUpdateNode(parseInt(id, 10));
+
+  const onSubmit = useCallback(
+    async (node: INode) => {
+      await updateNode(node);
+      goBack();
+    },
+    [updateNode, goBack]
+  );
 
   if (isLoading || !node) {
     return (
@@ -35,7 +45,7 @@ const EditorEditDialog: FC = () => {
     );
   }
 
-  return <EditorDialog node={node || EMPTY_NODE} onRequestClose={goBack} />;
+  return <EditorDialog node={node} onRequestClose={goBack} onSubmit={onSubmit} />;
 };
 
 export { EditorEditDialog };

src/containers/node/NodeComments/index.tsx

@@ -9,6 +9,7 @@ import { useGrouppedComments } from '~/utils/hooks/node/useGrouppedComments';
 import { useCommentContext } from '~/utils/context/CommentContextProvider';
 import { Comment } from '~/components/comment/Comment';
 import { useUserContext } from '~/utils/context/UserContextProvider';
+import { useNodeContext } from '~/utils/context/NodeContextProvider';
 
 interface IProps {
   order: 'ASC' | 'DESC';
@@ -16,6 +17,8 @@ interface IProps {
 
 const NodeComments: FC<IProps> = memo(({ order }) => {
   const user = useUserContext();
+  const { node } = useNodeContext();
+
   const {
     comments,
     count,
@@ -41,12 +44,17 @@ const NodeComments: FC<IProps> = memo(({ order }) => {
     [left, onLoadMoreComments]
   );
 
+  if (!node?.id) {
+    return null;
+  }
+
   return (
     <div className={styles.wrap}>
       {order === 'DESC' && more}
 
       {groupped.map(group => (
         <Comment
+          nodeId={node.id!}
           key={group.ids.join()}
           group={group}
           canEdit={canEditComment(group, user)}

src/pages/node/[id].tsx

@@ -12,6 +12,7 @@ import { CommentContextProvider } from '~/utils/context/CommentContextProvider';
 import { TagsContextProvider } from '~/utils/context/TagsContextProvider';
 import { useNodePermissions } from '~/utils/hooks/node/useNodePermissions';
 import { NodeRelatedProvider } from '~/utils/providers/NodeRelatedProvider';
+import { useGetNode } from '~/utils/hooks/data/useGetNode';
 
 type Props = RouteComponentProps<{ id: string }> & {};
 
@@ -20,14 +21,8 @@ const NodePage: FC<Props> = ({
     params: { id },
   },
 }) => {
-  const {
-    node,
-    isLoading,
-    isLoadingComments,
-    comments,
-    commentsCount,
-    lastSeenCurrent,
-  } = useFullNode(id);
+  const { node, isLoading } = useGetNode(parseInt(id, 10));
+  const { isLoadingComments, comments, commentsCount, lastSeenCurrent } = useFullNode(id);
 
   const onShowImageModal = useImageModal();
   const { onLoadMoreComments, onDelete: onDeleteComment } = useNodeComments(parseInt(id, 10));
@@ -39,6 +34,11 @@ const NodePage: FC<Props> = ({
 
   useScrollToTop([id, isLoadingComments]);
 
+  if (!node) {
+    // TODO: do something here
+    return null;
+  }
+
   return (
     <NodeContextProvider node={node} isLoading={isLoading}>
       <NodeRelatedProvider id={parseInt(id, 10)} tags={node.tags}>

src/redux/node/actions.ts

@@ -47,16 +47,7 @@ export const nodePostLocalComment = (
   nodeId,
   comment,
   callback,
-  type: NODE_ACTIONS.POST_COMMENT,
-});
-
-export const nodeSubmitLocal = (
-  node: INode,
-  callback: (e?: string, errors?: Record<string, string>) => void
-) => ({
-  node,
-  callback,
-  type: NODE_ACTIONS.SUBMIT_LOCAL,
+  type: NODE_ACTIONS.POST_LOCAL_COMMENT,
 });
 
 export const nodeSetSendingComment = (is_sending_comment: boolean) => ({
@@ -69,34 +60,6 @@ export const nodeSetComments = (comments: IComment[]) => ({
   type: NODE_ACTIONS.SET_COMMENTS,
 });
 
-export const nodeUpdateTags = (id: INode['id'], tags: string[]) => ({
-  type: NODE_ACTIONS.UPDATE_TAGS,
-  id,
-  tags,
-});
-
-export const nodeDeleteTag = (id: INode['id'], tagId: ITag['ID']) => ({
-  type: NODE_ACTIONS.DELETE_TAG,
-  id: id!,
-  tagId,
-});
-
-export const nodeSetTags = (tags: ITag[]) => ({
-  type: NODE_ACTIONS.SET_TAGS,
-  tags,
-});
-
-export const nodeCreate = (node_type: INode['type'], isLab?: boolean) => ({
-  type: NODE_ACTIONS.CREATE,
-  node_type,
-  isLab,
-});
-
-export const nodeEdit = (id: INode['id']) => ({
-  type: NODE_ACTIONS.EDIT,
-  id,
-});
-
 export const nodeLike = (id: INode['id']) => ({
   type: NODE_ACTIONS.LIKE,
   id,
@@ -113,17 +76,13 @@ export const nodeLock = (id: INode['id'], is_locked: boolean) => ({
   is_locked,
 });
 
-export const nodeLockComment = (id: IComment['id'], is_locked: boolean) => ({
+export const nodeLockComment = (id: number, is_locked: boolean, nodeId: number) => ({
   type: NODE_ACTIONS.LOCK_COMMENT,
+  nodeId,
   id,
   is_locked,
 });
 
-export const nodeEditComment = (id: IComment['id']) => ({
-  type: NODE_ACTIONS.EDIT_COMMENT,
-  id,
-});
-
 export const nodeSetEditor = (editor: INode) => ({
   type: NODE_ACTIONS.SET_EDITOR,
   editor,

src/redux/node/api.ts

@@ -42,9 +42,6 @@ export type ApiGetNodeCommentsResponse = { comments: IComment[]; comment_count:
 export const apiPostNode = ({ node }: ApiPostNodeRequest) =>
   api.post<ApiPostNodeResult>(API.NODE.SAVE, node).then(cleanResult);
 
-export const apiPostNodeLocal = ({ node }: ApiPostNodeRequest) =>
-  api.post<ApiPostNodeResult>(API.NODE.SAVE, node).then(cleanResult);
-
 export const getNodeDiff = ({
   start,
   end,
@@ -69,7 +66,10 @@ export const getNodeDiff = ({
     .then(cleanResult);
 
 export const apiGetNode = ({ id }: ApiGetNodeRequest, config?: AxiosRequestConfig) =>
-  api.get<ApiGetNodeResponse>(API.NODE.GET_NODE(id), config).then(cleanResult);
+  api
+    .get<ApiGetNodeResponse>(API.NODE.GET_NODE(id), config)
+    .then(cleanResult)
+    .then(data => ({ node: data.node, last_seen: data.last_seen }));
 
 export const apiGetNodeWithCancel = ({ id }: ApiGetNodeRequest) => {
   const cancelToken = axios.CancelToken.source();

src/redux/node/constants.ts

@@ -22,22 +22,18 @@ import { LabPad } from '~/components/lab/LabPad';
 import { LabDescription } from '~/components/lab/LabDescription';
 import { LabVideo } from '~/components/lab/LabVideo';
 import { LabAudio } from '~/components/lab/LabAudioBlock';
-import { LabLine } from '~/components/lab/LabLine';
 
 const prefix = 'NODE.';
 export const NODE_ACTIONS = {
-  SUBMIT_LOCAL: `${prefix}SUBMIT_LOCAL`,
   LOAD_NODE: `${prefix}LOAD_NODE`,
   GOTO_NODE: `${prefix}GOTO_NODE`,
   SET: `${prefix}SET`,
 
-  EDIT: `${prefix}EDIT`,
   LIKE: `${prefix}LIKE`,
   STAR: `${prefix}STAR`,
   LOCK: `${prefix}LOCK`,
   LOCK_COMMENT: `${prefix}LOCK_COMMENT`,
   EDIT_COMMENT: `${prefix}EDIT_COMMENT`,
-  CREATE: `${prefix}CREATE`,
   LOAD_MORE_COMMENTS: `${prefix}LOAD_MORE_COMMENTS`,
 
   SET_SAVE_ERRORS: `${prefix}SET_SAVE_ERRORS`,
@@ -47,13 +43,10 @@ export const NODE_ACTIONS = {
   SET_CURRENT: `${prefix}SET_CURRENT`,
   SET_EDITOR: `${prefix}SET_EDITOR`,
 
-  POST_COMMENT: `${prefix}POST_LOCAL_COMMENT`,
+  POST_LOCAL_COMMENT: `${prefix}POST_LOCAL_COMMENT`,
   SET_COMMENTS: `${prefix}SET_COMMENTS`,
   SET_RELATED: `${prefix}SET_RELATED`,
 
-  UPDATE_TAGS: `${prefix}UPDATE_TAGS`,
-  DELETE_TAG: `${prefix}DELETE_TAG`,
-  SET_TAGS: `${prefix}SET_TAGS`,
   SET_COVER_IMAGE: `${prefix}SET_COVER_IMAGE`,
 };
 

src/redux/node/handlers.ts

@@ -10,7 +10,6 @@ import {
   nodeSetLoadingComments,
   nodeSetSaveErrors,
   nodeSetSendingComment,
-  nodeSetTags,
 } from './actions';
 import { INodeState } from './reducer';
 
@@ -41,9 +40,6 @@ const setSendingComment = (
 const setComments = (state: INodeState, { comments }: ReturnType<typeof nodeSetComments>) =>
   assocPath(['comments'], comments, state);
 
-const setTags = (state: INodeState, { tags }: ReturnType<typeof nodeSetTags>) =>
-  assocPath(['current', 'tags'], tags, state);
-
 const setEditor = (state: INodeState, { editor }: ReturnType<typeof nodeSetEditor>) =>
   assocPath(['editor'], editor, state);
 
@@ -60,7 +56,6 @@ export const NODE_HANDLERS = {
   [NODE_ACTIONS.SET_CURRENT]: setCurrent,
   [NODE_ACTIONS.SET_SENDING_COMMENT]: setSendingComment,
   [NODE_ACTIONS.SET_COMMENTS]: setComments,
-  [NODE_ACTIONS.SET_TAGS]: setTags,
   [NODE_ACTIONS.SET_EDITOR]: setEditor,
   [NODE_ACTIONS.SET_COVER_IMAGE]: setCoverImage,
 };

src/redux/node/sagas.ts

@@ -1,11 +1,7 @@
 import { call, put, select, takeLatest, takeLeading } from 'redux-saga/effects';
-import { push } from 'connected-react-router';
 
 import { COMMENTS_DISPLAY, EMPTY_NODE, NODE_ACTIONS, NODE_EDITOR_DATA } from './constants';
 import {
-  nodeCreate,
-  nodeDeleteTag,
-  nodeEdit,
   nodeGotoNode,
   nodeLike,
   nodeLoadNode,
@@ -15,21 +11,13 @@ import {
   nodeSet,
   nodeSetComments,
   nodeSetCurrent,
-  nodeSetEditor,
-  nodeSetLoading,
   nodeSetLoadingComments,
-  nodeSetTags,
-  nodeSubmitLocal,
-  nodeUpdateTags,
 } from './actions';
 import {
-  apiDeleteNodeTag,
-  apiGetNode,
   apiGetNodeComments,
   apiLockComment,
   apiLockNode,
   apiPostComment,
-  apiPostNode,
   apiPostNodeHeroic,
   apiPostNodeLike,
   apiPostNodeTags,
@@ -45,6 +33,8 @@ 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) {
   const {
@@ -66,42 +56,6 @@ export function* updateNodeEverywhere(node) {
   );
 }
 
-function* onNodeSubmitLocal({ node, callback }: ReturnType<typeof nodeSubmitLocal>) {
-  try {
-    const { errors, node: result }: Unwrap<typeof apiPostNode> = yield call(apiPostNode, { node });
-
-    if (errors && Object.values(errors).length > 0) {
-      callback('', errors);
-      return;
-    }
-
-    if (node.is_promoted) {
-      const nodes: ReturnType<typeof selectFlowNodes> = yield select(selectFlowNodes);
-      const updated_flow_nodes = node.id
-        ? nodes.map(item => (item.id === result.id ? result : item))
-        : [result, ...nodes];
-      yield put(flowSetNodes(updated_flow_nodes));
-    } else {
-      const nodes: ReturnType<typeof selectLabListNodes> = yield select(selectLabListNodes);
-      const updated_lab_nodes = node.id
-        ? nodes.map(item => (item.node.id === result.id ? { ...item, node: result } : item))
-        : [{ node: result, comment_count: 0, last_seen: node.created_at }, ...nodes];
-      yield put(labSetList({ nodes: updated_lab_nodes }));
-    }
-
-    const { current } = yield select(selectNode);
-
-    if (node.id && current.id === result.id) {
-      yield put(nodeSetCurrent(result));
-    }
-
-    callback();
-    return;
-  } catch (error) {
-    callback(error.message);
-  }
-}
-
 function* onNodeGoto({ id, node_type }: ReturnType<typeof nodeGotoNode>) {
   if (!id) {
     return;
@@ -164,22 +118,9 @@ function* nodeGetComments(id: INode['id']) {
 }
 
 function* onNodeLoad({ id }: ReturnType<typeof nodeLoadNode>) {
-  // Get node body
-  try {
-    yield put(nodeSetLoading(true));
-    yield put(nodeSetLoadingComments(true));
-
-    const { node, last_seen }: Unwrap<typeof apiGetNode> = yield call(apiGetNode, { id });
-
-    yield put(nodeSet({ current: node, lastSeenCurrent: last_seen }));
-    yield put(nodeSetLoading(false));
-  } catch (error) {
-    yield put(push(URLS.ERRORS.NOT_FOUND));
-    yield put(nodeSetLoading(false));
-  }
-
   // Comments
   try {
+    yield put(nodeSetLoadingComments(true));
     yield call(nodeGetComments, id);
 
     yield put(
@@ -197,82 +138,24 @@ function* onPostComment({ nodeId, comment, callback }: ReturnType<typeof nodePos
       id: nodeId,
     });
 
-    const { current }: ReturnType<typeof selectNode> = yield select(selectNode);
+    const { comments }: ReturnType<typeof selectNode> = yield select(selectNode);
 
-    if (current?.id === nodeId) {
-      const { comments }: ReturnType<typeof selectNode> = yield select(selectNode);
-
-      if (!comment.id) {
-        yield put(nodeSetComments([data.comment, ...comments]));
-      } else {
-        yield put(
-          nodeSet({
-            comments: comments.map(item => (item.id === comment.id ? data.comment : item)),
-          })
-        );
-      }
-
-      callback();
+    if (!comment.id) {
+      yield put(nodeSetComments([data.comment, ...comments]));
+    } else {
+      yield put(
+        nodeSet({
+          comments: comments.map(item => (item.id === comment.id ? data.comment : item)),
+        })
+      );
     }
+
+    callback();
   } catch (error) {
     return callback(error.message);
   }
 }
 
-function* onUpdateTags({ id, tags }: ReturnType<typeof nodeUpdateTags>) {
-  try {
-    const { node }: Unwrap<typeof apiPostNodeTags> = yield call(apiPostNodeTags, { id, tags });
-    const { current }: ReturnType<typeof selectNode> = yield select(selectNode);
-    if (!node || !node.id || node.id !== current.id) return;
-    yield put(nodeSetTags(node.tags));
-  } catch {}
-}
-
-function* onDeleteTag({ id, tagId }: ReturnType<typeof nodeDeleteTag>) {
-  try {
-    const { tags }: Unwrap<typeof apiDeleteNodeTag> = yield call(apiDeleteNodeTag, { id, tagId });
-    yield put(nodeSetTags(tags));
-  } catch {}
-}
-
-function* onCreateSaga({ node_type: type, isLab }: ReturnType<typeof nodeCreate>) {
-  if (!type || !has(type, NODE_EDITOR_DIALOGS)) return;
-
-  yield put(
-    nodeSetEditor({
-      ...EMPTY_NODE,
-      ...(NODE_EDITOR_DATA[type] || {}),
-      type,
-      is_promoted: !isLab,
-    })
-  );
-
-  yield put(modalShowDialog(NODE_EDITOR_DIALOGS[type]));
-}
-
-function* onEditSaga({ id }: ReturnType<typeof nodeEdit>) {
-  try {
-    if (!id) {
-      return;
-    }
-
-    yield put(modalShowDialog(DIALOGS.LOADING));
-
-    const { node }: Unwrap<typeof apiGetNode> = yield call(apiGetNode, { id });
-
-    if (!node.type || !has(node.type, NODE_EDITOR_DIALOGS)) return;
-
-    if (!NODE_EDITOR_DIALOGS[node?.type]) {
-      throw new Error('Unknown node type');
-    }
-
-    yield put(nodeSetEditor(node));
-    yield put(modalShowDialog(NODE_EDITOR_DIALOGS[node.type]));
-  } catch (error) {
-    yield put(modalSetShown(false));
-  }
-}
-
 function* onLikeSaga({ id }: ReturnType<typeof nodeLike>) {
   const { current }: ReturnType<typeof selectNode> = yield select(selectNode);
 
@@ -330,22 +213,12 @@ function* onLockSaga({ id, is_locked }: ReturnType<typeof nodeLock>) {
   }
 }
 
-function* onLockCommentSaga({ id, is_locked }: ReturnType<typeof nodeLockComment>) {
-  const { current, comments }: ReturnType<typeof selectNode> = yield select(selectNode);
+function* onLockCommentSaga({ nodeId, id, is_locked }: ReturnType<typeof nodeLockComment>) {
+  const { comments }: ReturnType<typeof selectNode> = yield select(selectNode);
 
   try {
-    yield put(
-      nodeSetComments(
-        comments.map(comment =>
-          comment.id === id
-            ? { ...comment, deleted_at: is_locked ? new Date().toISOString() : undefined }
-            : comment
-        )
-      )
-    );
-
     const data: Unwrap<typeof apiLockComment> = yield call(apiLockComment, {
-      current: current.id,
+      current: nodeId,
       id,
       is_locked,
     });
@@ -357,26 +230,15 @@ function* onLockCommentSaga({ id, is_locked }: ReturnType<typeof nodeLockComment
         )
       )
     );
-  } catch {
-    yield put(
-      nodeSetComments(
-        comments.map(comment =>
-          comment.id === id ? { ...comment, deleted_at: current.deleted_at } : comment
-        )
-      )
-    );
+  } catch (e) {
+    showErrorToast(e);
   }
 }
 
 export default function* nodeSaga() {
-  yield takeLatest(NODE_ACTIONS.SUBMIT_LOCAL, onNodeSubmitLocal);
   yield takeLatest(NODE_ACTIONS.GOTO_NODE, onNodeGoto);
   yield takeLatest(NODE_ACTIONS.LOAD_NODE, onNodeLoad);
-  yield takeLatest(NODE_ACTIONS.POST_COMMENT, onPostComment);
-  yield takeLatest(NODE_ACTIONS.UPDATE_TAGS, onUpdateTags);
-  yield takeLatest(NODE_ACTIONS.DELETE_TAG, onDeleteTag);
-  yield takeLatest(NODE_ACTIONS.CREATE, onCreateSaga);
-  yield takeLatest(NODE_ACTIONS.EDIT, onEditSaga);
+  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);

src/utils/errors/showToast.ts

@@ -0,0 +1,9 @@
+export const showErrorToast = (error: unknown) => {
+  if (!(error instanceof Error)) {
+    console.warn('catched strange exception', error);
+    return;
+  }
+
+  // TODO: show toast or something
+  console.warn(error.message);
+};

src/utils/hooks/data/useCreateNode.ts

@@ -0,0 +1,34 @@
+import { useCallback } from 'react';
+import { INode } from '~/redux/types';
+import { apiPostNode } from '~/redux/node/api';
+import { selectFlowNodes } from '~/redux/flow/selectors';
+import { flowSetNodes } from '~/redux/flow/actions';
+import { selectLabListNodes } from '~/redux/lab/selectors';
+import { labSetList } from '~/redux/lab/actions';
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { useDispatch } from 'react-redux';
+
+export const useCreateNode = () => {
+  const dispatch = useDispatch();
+  const flowNodes = useShallowSelect(selectFlowNodes);
+  const labNodes = useShallowSelect(selectLabListNodes);
+
+  return useCallback(
+    async (node: INode) => {
+      const result = await apiPostNode({ node });
+
+      // TODO: use another store here someday
+      if (node.is_promoted) {
+        const updatedNodes = [result.node, ...flowNodes];
+        dispatch(flowSetNodes(updatedNodes));
+      } else {
+        const updatedNodes = [
+          { node: result.node, comment_count: 0, last_seen: node.created_at },
+          ...labNodes,
+        ];
+        dispatch(labSetList({ nodes: updatedNodes }));
+      }
+    },
+    [flowNodes, labNodes, dispatch]
+  );
+};

src/utils/hooks/data/useGetNode.ts

@@ -1,19 +1,29 @@
-import { INode } from '~/redux/types';
 import useSWR from 'swr';
-import { AxiosResponse } from 'axios';
 import { ApiGetNodeResponse } from '~/redux/node/types';
 import { API } from '~/constants/api';
-import { api } from '~/utils/api';
+import { useOnNodeSeen } from '~/utils/hooks/node/useOnNodeSeen';
+import { apiGetNode } from '~/redux/node/api';
+import { useCallback } from 'react';
+import { INode } from '~/redux/types';
 
-export const useGetNode = (id?: INode['id']) => {
-  const { data, isValidating: isLoading } = useSWR<AxiosResponse<ApiGetNodeResponse>>(
-    API.NODE.GET_NODE(id || ''),
-    api.get
+export const useGetNode = (id: number) => {
+  const { data, isValidating, mutate } = useSWR<ApiGetNodeResponse>(API.NODE.GET_NODE(id), () =>
+    apiGetNode({ id })
   );
 
-  if (!id) {
-    return { node: undefined, isLoading: false };
-  }
+  const update = useCallback(
+    async (node?: Partial<INode>) => {
+      if (!data?.node) {
+        await mutate();
+        return;
+      }
 
-  return { node: data?.data.node, isLoading };
+      await mutate({ node: { ...data.node, ...node } }, true);
+    },
+    [data, mutate]
+  );
+
+  useOnNodeSeen(data?.node);
+
+  return { node: data?.node, isLoading: isValidating && !data, update };
 };

src/utils/hooks/data/useUpdateNode.ts

@@ -0,0 +1,43 @@
+import { useGetNode } from '~/utils/hooks/data/useGetNode';
+import { useCallback } from 'react';
+import { INode } from '~/redux/types';
+import { apiPostNode } from '~/redux/node/api';
+import { selectFlowNodes } from '~/redux/flow/selectors';
+import { flowSetNodes } from '~/redux/flow/actions';
+import { selectLabListNodes } from '~/redux/lab/selectors';
+import { labSetList } from '~/redux/lab/actions';
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { useDispatch } from 'react-redux';
+
+export const useUpdateNode = (id: number) => {
+  const dispatch = useDispatch();
+  const { update } = useGetNode(id);
+  const flowNodes = useShallowSelect(selectFlowNodes);
+  const labNodes = useShallowSelect(selectLabListNodes);
+
+  return useCallback(
+    async (node: INode) => {
+      const result = await apiPostNode({ node });
+
+      if (!update) {
+        return;
+      }
+
+      await update(result.node);
+
+      // TODO: use another store here someday
+      if (node.is_promoted) {
+        const updatedNodes = flowNodes.map(item =>
+          item.id === result.node.id ? result.node : item
+        );
+        dispatch(flowSetNodes(updatedNodes));
+      } else {
+        const updatedNodes = labNodes.map(item =>
+          item.node.id === result.node.id ? { ...item, node: result.node } : item
+        );
+        dispatch(labSetList({ nodes: updatedNodes }));
+      }
+    },
+    [update, flowNodes, dispatch, labNodes]
+  );
+};

src/utils/hooks/node/useFullNode.ts

@@ -14,7 +14,7 @@ export const useFullNode = (id: string) => {
   } = useShallowSelect(selectNode);
 
   useLoadNode(id);
-  useOnNodeSeen(node);
+  // useOnNodeSeen(node);
 
   return { node, comments, commentsCount, lastSeenCurrent, isLoading, isLoadingComments };
 };

src/utils/hooks/node/useLoadNode.ts

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
-import { nodeGotoNode, nodeSetCurrent } from '~/redux/node/actions';
+import { nodeGotoNode } from '~/redux/node/actions';
 import { useDispatch } from 'react-redux';
-import { EMPTY_NODE } from '~/redux/node/constants';
 
 // useLoadNode loads node on id change
 export const useLoadNode = (id: any) => {
@@ -9,9 +8,5 @@ export const useLoadNode = (id: any) => {
 
   useEffect(() => {
     dispatch(nodeGotoNode(parseInt(id, 10), undefined));
-
-    return () => {
-      dispatch(nodeSetCurrent(EMPTY_NODE));
-    };
   }, [dispatch, id]);
 };

src/utils/hooks/node/useNodeActions.ts

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

src/utils/hooks/node/useNodeComments.ts

@@ -1,16 +1,16 @@
 import { useCallback } from 'react';
 import { nodeLoadMoreComments, nodeLockComment } from '~/redux/node/actions';
-import { IComment, INode } from '~/redux/types';
+import { IComment } from '~/redux/types';
 import { useDispatch } from 'react-redux';
 
-export const useNodeComments = (id: INode['id']) => {
+export const useNodeComments = (nodeId: number) => {
   const dispatch = useDispatch();
 
   const onLoadMoreComments = useCallback(() => dispatch(nodeLoadMoreComments()), [dispatch]);
 
   const onDelete = useCallback(
-    (id: IComment['id'], locked: boolean) => dispatch(nodeLockComment(id, locked)),
-    [dispatch]
+    (id: IComment['id'], locked: boolean) => dispatch(nodeLockComment(id, locked, nodeId)),
+    [dispatch, nodeId]
   );
 
   return { onLoadMoreComments, onDelete };

src/utils/hooks/node/useNodeFormFormik.ts

@@ -1,15 +1,14 @@
 import { INode } from '~/redux/types';
 import { FileUploader } from '~/utils/hooks/useFileUploader';
-import { useCallback, useEffect, useRef } from 'react';
-import { FormikHelpers, useFormik, useFormikContext } from 'formik';
+import { useCallback, useRef } from 'react';
+import { FormikConfig, FormikHelpers, useFormik, useFormikContext } from 'formik';
 import { object } from 'yup';
-import { useDispatch } from 'react-redux';
-import { nodeSubmitLocal } from '~/redux/node/actions';
 import { keys } from 'ramda';
+import { showErrorToast } from '~/utils/errors/showToast';
 
 const validationSchema = object().shape({});
 
-const onSuccess = ({ resetForm, setStatus, setSubmitting, setErrors }: FormikHelpers<INode>) => (
+const afterSubmit = ({ resetForm, setStatus, setSubmitting, setErrors }: FormikHelpers<INode>) => (
   e?: string,
   errors?: Record<string, string>
 ) => {
@@ -17,6 +16,7 @@ const onSuccess = ({ resetForm, setStatus, setSubmitting, setErrors }: FormikHel
 
   if (e) {
     setStatus(e);
+    showErrorToast(e);
     return;
   }
 
@@ -33,17 +33,9 @@ const onSuccess = ({ resetForm, setStatus, setSubmitting, setErrors }: FormikHel
 export const useNodeFormFormik = (
   values: INode,
   uploader: FileUploader,
-  stopEditing: () => void
+  stopEditing: () => void,
+  sendSaveRequest: (node: INode) => Promise<unknown>
 ) => {
-  const dispatch = useDispatch();
-  const onSubmit = useCallback(
-    (values: INode, helpers: FormikHelpers<INode>) => {
-      helpers.setSubmitting(true);
-      dispatch(nodeSubmitLocal(values, onSuccess(helpers)));
-    },
-    [dispatch]
-  );
-
   const { current: initialValues } = useRef(values);
 
   const onReset = useCallback(() => {
@@ -52,7 +44,19 @@ export const useNodeFormFormik = (
     if (stopEditing) stopEditing();
   }, [uploader, stopEditing]);
 
-  const formik = useFormik<INode>({
+  const onSubmit = useCallback<FormikConfig<INode>['onSubmit']>(
+    async (values, helpers) => {
+      try {
+        await sendSaveRequest({ ...values, files: uploader.files });
+        afterSubmit(helpers)();
+      } catch (error) {
+        afterSubmit(helpers)(error?.response?.data?.error, error?.response?.data?.errors);
+      }
+    },
+    [sendSaveRequest, uploader.files]
+  );
+
+  return useFormik<INode>({
     initialValues,
     validationSchema,
     onSubmit,
@@ -60,17 +64,6 @@ export const useNodeFormFormik = (
     initialStatus: '',
     validateOnChange: true,
   });
-
-  useEffect(
-    () => {
-      formik.setFieldValue('files', uploader.files);
-    },
-    // because it breaks files logic
-    // eslint-disable-next-line
-    [uploader.files, formik.setFieldValue]
-  );
-
-  return formik;
 };
 
 export const useNodeFormContext = () => useFormikContext<INode>();

src/utils/hooks/node/useNodeImages.ts

@@ -3,10 +3,6 @@ import { useMemo } from 'react';
 import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 
 export const useNodeImages = (node: INode) => {
-  if (!node?.files) {
-    return [];
-  }
-
   return useMemo(() => node.files.filter(file => file && file.type === UPLOAD_TYPES.IMAGE), [
     node.files,
   ]);

src/utils/hooks/node/useNodePermissions.ts

@@ -4,7 +4,7 @@ import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
 import { selectUser } from '~/redux/auth/selectors';
 import { INode } from '~/redux/types';
 
-export const useNodePermissions = (node: INode) => {
+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]);

src/utils/hooks/node/useNodeTags.ts

@@ -1,19 +1,24 @@
-import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router';
 import { useCallback } from 'react';
-import { nodeDeleteTag, nodeUpdateTags } from '~/redux/node/actions';
-import { INode, ITag } from '~/redux/types';
+import { ITag } from '~/redux/types';
 import { URLS } from '~/constants/urls';
+import { useGetNode } from '~/utils/hooks/data/useGetNode';
+import { apiDeleteNodeTag, apiPostNodeTags } from '~/redux/node/api';
 
-export const useNodeTags = (id: INode['id']) => {
-  const dispatch = useDispatch();
+export const useNodeTags = (id: number) => {
+  const { update } = useGetNode(id);
   const history = useHistory();
 
   const onChange = useCallback(
-    (tags: string[]) => {
-      dispatch(nodeUpdateTags(id, tags));
+    async (tags: string[]) => {
+      try {
+        const result = await apiPostNodeTags({ id, tags });
+        await update({ tags: result.node.tags });
+      } catch (error) {
+        console.warn(error);
+      }
     },
-    [dispatch, id]
+    [id, update]
   );
 
   const onClick = useCallback(
@@ -28,10 +33,15 @@ export const useNodeTags = (id: INode['id']) => {
   );
 
   const onDelete = useCallback(
-    (tagId: ITag['ID']) => {
-      dispatch(nodeDeleteTag(id, tagId));
+    async (tagId: ITag['ID']) => {
+      try {
+        const result = await apiDeleteNodeTag({ id, tagId });
+        await update({ tags: result.tags });
+      } catch (e) {
+        console.warn(e);
+      }
     },
-    [dispatch, id]
+    [id, update]
   );
 
   return { onDelete, onChange, onClick };

src/utils/hooks/node/useOnNodeSeen.ts

@@ -2,15 +2,22 @@ import { INode } from '~/redux/types';
 import { useDispatch } from 'react-redux';
 import { labSeenNode } from '~/redux/lab/actions';
 import { flowSeenNode } from '~/redux/flow/actions';
+import { useEffect } from 'react';
 
 // useOnNodeSeen updates node seen status across all needed places
-export const useOnNodeSeen = (node: INode) => {
+export const useOnNodeSeen = (node?: INode) => {
   const dispatch = useDispatch();
 
-  // Remove node from updated
-  if (node.is_promoted) {
-    dispatch(flowSeenNode(node.id));
-  } else {
-    dispatch(labSeenNode(node.id));
-  }
+  useEffect(() => {
+    if (!node?.id) {
+      return;
+    }
+
+    // Remove node from updated
+    if (node.is_promoted) {
+      dispatch(flowSeenNode(node.id));
+    } else {
+      dispatch(labSeenNode(node.id));
+    }
+  }, [dispatch, node]);
 };

src/utils/node.ts

@@ -4,18 +4,17 @@ import { IUser } from '~/redux/auth/types';
 import { path } from 'ramda';
 import { NODE_TYPES } from '~/redux/node/constants';
 
-export const canEditNode = (node: Partial<INode>, user: Partial<IUser>): boolean =>
+export const canEditNode = (node?: Partial<INode>, user?: Partial<IUser>): boolean =>
   path(['role'], user) === USER_ROLES.ADMIN ||
   (path(['user', 'id'], node) && path(['user', 'id'], node) === path(['id'], user));
 
-export const canEditComment = (comment: Partial<ICommentGroup>, user: Partial<IUser>): boolean =>
-  path(['role'], user) === USER_ROLES.ADMIN ||
-  (path(['user', 'id'], comment) && path(['user', 'id'], comment) === path(['id'], user));
+export const canEditComment = (comment?: Partial<ICommentGroup>, user?: Partial<IUser>): boolean =>
+  path(['role'], user) === USER_ROLES.ADMIN || path(['user', 'id'], comment) === path(['id'], user);
 
-export const canLikeNode = (node: Partial<INode>, user: Partial<IUser>): boolean =>
-  path(['role'], user) && path(['role'], user) !== USER_ROLES.GUEST;
+export const canLikeNode = (node?: Partial<INode>, user?: Partial<IUser>): boolean =>
+  path(['role'], user) !== USER_ROLES.GUEST;
 
-export const canStarNode = (node: Partial<INode>, user: Partial<IUser>): boolean =>
-  (node.type === NODE_TYPES.IMAGE || node.is_promoted === false) &&
-  path(['role'], user) &&
+export const canStarNode = (node?: Partial<INode>, user?: Partial<IUser>): boolean =>
+  path(['type'], node) === NODE_TYPES.IMAGE &&
+  path(['is_promoted'], node) === false &&
   path(['role'], user) === USER_ROLES.ADMIN;