made node editor use SWR

src/containers/dialogs/EditorDialog/index.tsx

@@ -1,4 +1,4 @@
-import React, { createElement, FC, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { createElement, FC, useCallback, useMemo, useState } from 'react';
 import { IDialogProps } from '~/redux/modal/constants';
 import styles from './styles.module.scss';
 import { NODE_EDITORS } from '~/redux/node/constants';
@@ -25,7 +25,7 @@ const EditorDialog: FC<Props> = ({ node, onRequestClose }) => {
 
   const uploader = useFileUploader(UPLOAD_SUBJECTS.EDITOR, UPLOAD_TARGETS.NODES, node.files);
   const formik = useNodeFormFormik(node, uploader, onRequestClose);
-  const { values, handleSubmit, dirty, status, setStatus } = formik;
+  const { values, handleSubmit, dirty, status } = formik;
 
   const component = useMemo(() => node.type && prop(node.type, NODE_EDITORS), [node.type]);
 
@@ -49,14 +49,6 @@ const EditorDialog: FC<Props> = ({ node, onRequestClose }) => {
 
   const error = useTranslatedError(status);
 
-  useEffect(() => {
-    if (!status) {
-      return;
-    }
-
-    setStatus('');
-  }, [setStatus, status, values]);
-
   useCloseOnEscape(onClose);
 
   if (!component) {

src/containers/dialogs/EditorEditDialog/index.tsx

@@ -1,15 +1,12 @@
-import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { FC, useCallback, useMemo } from 'react';
-import { EMPTY_NODE } from '~/redux/node/constants';
 import { EditorDialog } from '~/containers/dialogs/EditorDialog';
 import { useHistory, useRouteMatch } from 'react-router';
 import { ModalWrapper } from '~/components/dialogs/ModalWrapper';
-import { apiGetNodeWithCancel } from '~/redux/node/api';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
 import styles from './styles.module.scss';
+import { useGetNode } from '~/utils/hooks/data/useGetNode';
 
 const EditorEditDialog: FC = () => {
-  const [data, setData] = useState(EMPTY_NODE);
-  const [isLoading, setLoading] = useState(true);
   const history = useHistory();
 
   const {
@@ -25,23 +22,9 @@ const EditorEditDialog: FC = () => {
     history.replace(backUrl);
   }, [backUrl, history]);
 
-  useEffect(() => {
+  const { node, isLoading } = useGetNode(parseInt(id, 10));
-    if (!id) {
-      return;
-    }
 
-    const { request, cancel } = apiGetNodeWithCancel({ id });
+  if (isLoading || !node) {
-
-    setLoading(true);
-    request
-      .then(data => setData(data.node))
-      .then(() => setLoading(false))
-      .catch(console.log);
-
-    return () => cancel();
-  }, [id]);
-
-  if (isLoading) {
     return (
       <ModalWrapper onOverlayClick={goBack}>
         <div className={styles.loader}>
@@ -51,7 +34,7 @@ const EditorEditDialog: FC = () => {
     );
   }
 
-  return <EditorDialog node={data} onRequestClose={goBack} />;
+  return <EditorDialog node={node} onRequestClose={goBack} />;
 };
 
 export { EditorEditDialog };

src/utils/hooks/data/useGetNode.ts

@@ -0,0 +1,19 @@
+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';
+
+export const useGetNode = (id?: INode['id']) => {
+  const { data, isValidating: isLoading } = useSWR<AxiosResponse<ApiGetNodeResponse>>(
+    API.NODE.GET_NODE(id || ''),
+    api.get
+  );
+
+  if (!id) {
+    return { node: undefined, isLoading: false };
+  }
+
+  return { node: data?.data.node, isLoading };
+};

src/utils/hooks/data/useGetNodeRelated.ts

@@ -0,0 +1,15 @@
+import { INode } from '~/redux/types';
+import useSWR from 'swr';
+import { AxiosResponse } from 'axios';
+import { ApiGetNodeRelatedResult } from '~/redux/node/types';
+import { API } from '~/constants/api';
+import { api } from '~/utils/api';
+
+export const useGetNodeRelated = (id?: INode['id']) => {
+  const { data, isValidating: isLoading } = useSWR<AxiosResponse<ApiGetNodeRelatedResult>>(
+    API.NODE.RELATED(id),
+    api.get
+  );
+
+  return { related: data?.data.related, isLoading };
+};

src/utils/providers/NodeRelatedProvider.tsx

@@ -1,11 +1,8 @@
 import React, { FC } from 'react';
 import { INode } from '~/redux/types';
 import { NodeRelatedContextProvider } from '~/utils/context/NodeRelatedContextProvider';
-import { ApiGetNodeRelatedResult, INodeRelated } from '~/redux/node/types';
+import { INodeRelated } from '~/redux/node/types';
-import useSWR from 'swr';
+import { useGetNodeRelated } from '~/utils/hooks/data/useGetNodeRelated';
-import { API } from '~/constants/api';
-import { api } from '~/utils/api';
-import { AxiosResponse } from 'axios';
 
 interface NodeRelatedProviderProps {
   id: INode['id'];
@@ -17,16 +14,10 @@ const defaultValue: INodeRelated = {
 };
 
 const NodeRelatedProvider: FC<NodeRelatedProviderProps> = ({ id, children }) => {
-  const { data, isValidating } = useSWR<AxiosResponse<ApiGetNodeRelatedResult>>(
+  const { related, isLoading } = useGetNodeRelated(id);
-    API.NODE.RELATED(id),
-    api.get
-  );
 
   return (
-    <NodeRelatedContextProvider
+    <NodeRelatedContextProvider related={related || defaultValue} isLoading={isLoading}>
-      related={data?.data?.related || defaultValue}
-      isLoading={isValidating}
-    >
       {children}
     </NodeRelatedContextProvider>
   );