99 use swr (#100)

* 99: made node use SWR

* 99: fixed comments for SWR node

* 99: added error toast to useNodeFormFormik.ts

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)}