diff --git a/src/containers/dialogs/EditorDialog/index.tsx b/src/containers/dialogs/EditorDialog/index.tsx index 8be7e5af..7ba4854a 100644 --- a/src/containers/dialogs/EditorDialog/index.tsx +++ b/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 = ({ 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 = ({ node, onRequestClose }) => { const error = useTranslatedError(status); - useEffect(() => { - if (!status) { - return; - } - - setStatus(''); - }, [setStatus, status, values]); - useCloseOnEscape(onClose); if (!component) { diff --git a/src/containers/dialogs/EditorEditDialog/index.tsx b/src/containers/dialogs/EditorEditDialog/index.tsx index 8e4f2b73..94530312 100644 --- a/src/containers/dialogs/EditorEditDialog/index.tsx +++ b/src/containers/dialogs/EditorEditDialog/index.tsx @@ -1,15 +1,12 @@ -import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'; -import { EMPTY_NODE } from '~/redux/node/constants'; +import React, { FC, useCallback, useMemo } from 'react'; 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(() => { - if (!id) { - return; - } + const { node, isLoading } = useGetNode(parseInt(id, 10)); - const { request, cancel } = apiGetNodeWithCancel({ id }); - - setLoading(true); - request - .then(data => setData(data.node)) - .then(() => setLoading(false)) - .catch(console.log); - - return () => cancel(); - }, [id]); - - if (isLoading) { + if (isLoading || !node) { return (
@@ -51,7 +34,7 @@ const EditorEditDialog: FC = () => { ); } - return ; + return ; }; export { EditorEditDialog }; diff --git a/src/utils/hooks/data/useGetNode.ts b/src/utils/hooks/data/useGetNode.ts new file mode 100644 index 00000000..adb22903 --- /dev/null +++ b/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>( + API.NODE.GET_NODE(id || ''), + api.get + ); + + if (!id) { + return { node: undefined, isLoading: false }; + } + + return { node: data?.data.node, isLoading }; +}; diff --git a/src/utils/hooks/data/useGetNodeRelated.ts b/src/utils/hooks/data/useGetNodeRelated.ts new file mode 100644 index 00000000..5c0a5645 --- /dev/null +++ b/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>( + API.NODE.RELATED(id), + api.get + ); + + return { related: data?.data.related, isLoading }; +}; diff --git a/src/utils/providers/NodeRelatedProvider.tsx b/src/utils/providers/NodeRelatedProvider.tsx index 5c2cbf7a..b2e55a56 100644 --- a/src/utils/providers/NodeRelatedProvider.tsx +++ b/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 useSWR from 'swr'; -import { API } from '~/constants/api'; -import { api } from '~/utils/api'; -import { AxiosResponse } from 'axios'; +import { INodeRelated } from '~/redux/node/types'; +import { useGetNodeRelated } from '~/utils/hooks/data/useGetNodeRelated'; interface NodeRelatedProviderProps { id: INode['id']; @@ -17,16 +14,10 @@ const defaultValue: INodeRelated = { }; const NodeRelatedProvider: FC = ({ id, children }) => { - const { data, isValidating } = useSWR>( - API.NODE.RELATED(id), - api.get - ); + const { related, isLoading } = useGetNodeRelated(id); return ( - + {children} );