From cf16cbf0f9b3f59e85eed5f1cb1dfd0153df76d0 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Thu, 7 Nov 2019 14:01:41 +0700 Subject: [PATCH] added boris route --- src/containers/App.tsx | 2 + src/containers/node/BorisLayout/index.tsx | 45 +++++++++++++++++++++++ src/containers/node/NodeLayout/index.tsx | 8 ++-- src/index.tsx | 5 ++- src/redux/node/actions.ts | 7 +++- src/redux/node/constants.ts | 1 + src/redux/node/sagas.ts | 15 +++++--- 7 files changed, 70 insertions(+), 13 deletions(-) create mode 100644 src/containers/node/BorisLayout/index.tsx diff --git a/src/containers/App.tsx b/src/containers/App.tsx index ed7fa617..9e42ff44 100644 --- a/src/containers/App.tsx +++ b/src/containers/App.tsx @@ -17,6 +17,7 @@ import { BlurWrapper } from '~/components/containers/BlurWrapper'; import { PageCover } from '~/components/containers/PageCover'; import { NodeLayout } from './node/NodeLayout'; import { BottomContainer } from '~/containers/main/BottomContainer'; +import { BorisLayout } from './node/BorisLayout'; const mapStateToProps = state => ({ modal: selectModal(state), @@ -41,6 +42,7 @@ const Component: FC = ({ modal: { is_shown } }) => { + diff --git a/src/containers/node/BorisLayout/index.tsx b/src/containers/node/BorisLayout/index.tsx new file mode 100644 index 00000000..c868b511 --- /dev/null +++ b/src/containers/node/BorisLayout/index.tsx @@ -0,0 +1,45 @@ +import React, { FC, useEffect } from 'react'; +import { RouteComponentProps } from 'react-router'; +import * as NODE_ACTIONS from '~/redux/node/actions'; +import { selectNode } from '~/redux/node/selectors'; +import { selectUser } from '~/redux/auth/selectors'; +import { connect } from 'react-redux'; + +const mapStateToProps = state => ({ + node: selectNode(state), + user: selectUser(state), +}); + +const mapDispatchToProps = { + nodeLoadNode: NODE_ACTIONS.nodeLoadNode, + nodeUpdateTags: NODE_ACTIONS.nodeUpdateTags, + nodeSetCoverImage: NODE_ACTIONS.nodeSetCoverImage, + nodeEdit: NODE_ACTIONS.nodeEdit, + nodeLike: NODE_ACTIONS.nodeLike, + nodeStar: NODE_ACTIONS.nodeStar, +}; + +type IProps = ReturnType & + typeof mapDispatchToProps & + RouteComponentProps<{ id: string }> & {}; + +const id = 696; + +const BorisLayoutUnconnected: FC = ({ + node: { is_loading, is_loading_comments, comments = [], current: node, related }, + nodeLoadNode, +}) => { + useEffect(() => { + if (is_loading) return; + nodeLoadNode(id); + }, [nodeLoadNode, id]); + + return
{comments.length}
; +}; + +const BorisLayout = connect( + mapStateToProps, + mapDispatchToProps +)(BorisLayoutUnconnected); + +export { BorisLayout }; diff --git a/src/containers/node/NodeLayout/index.tsx b/src/containers/node/NodeLayout/index.tsx index 1f0ba928..354df176 100644 --- a/src/containers/node/NodeLayout/index.tsx +++ b/src/containers/node/NodeLayout/index.tsx @@ -25,7 +25,7 @@ const mapStateToProps = state => ({ }); const mapDispatchToProps = { - nodeLoadNode: NODE_ACTIONS.nodeLoadNode, + nodeGotoNode: NODE_ACTIONS.nodeGotoNode, nodeUpdateTags: NODE_ACTIONS.nodeUpdateTags, nodeSetCoverImage: NODE_ACTIONS.nodeSetCoverImage, nodeEdit: NODE_ACTIONS.nodeEdit, @@ -45,7 +45,7 @@ const NodeLayoutUnconnected: FC = memo( node: { is_loading, is_loading_comments, comments = [], current: node, related }, user, user: { is_user }, - nodeLoadNode, + nodeGotoNode, nodeUpdateTags, nodeEdit, nodeLike, @@ -58,8 +58,8 @@ const NodeLayoutUnconnected: FC = memo( useEffect(() => { if (is_loading) return; - nodeLoadNode(parseInt(id, 10), null); - }, [nodeLoadNode, id]); + nodeGotoNode(parseInt(id, 10), null); + }, [nodeGotoNode, id]); const onTagsChange = useCallback( (tags: string[]) => { diff --git a/src/index.tsx b/src/index.tsx index c001fa32..de290a7a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -62,8 +62,8 @@ render( ); /* - - comment editing - - boris with comments + --> boris with comments + - profile modal - profile editing - messages @@ -78,6 +78,7 @@ render( - better node brief update - social integration (assimilate) + - comment editing Done: - better dialogs: https://codepen.io/muemue/pen/abbEMMy diff --git a/src/redux/node/actions.ts b/src/redux/node/actions.ts index b97f5c5d..66d81184 100644 --- a/src/redux/node/actions.ts +++ b/src/redux/node/actions.ts @@ -12,9 +12,14 @@ export const nodeSetSaveErrors = (errors: IValidationErrors) => ({ type: NODE_ACTIONS.SET_SAVE_ERRORS, }); -export const nodeLoadNode = (id: number, node_type: INode['type']) => ({ +export const nodeGotoNode = (id: number, node_type: INode['type']) => ({ id, node_type, + type: NODE_ACTIONS.GOTO_NODE, +}); + +export const nodeLoadNode = (id: number) => ({ + id, type: NODE_ACTIONS.LOAD_NODE, }); diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts index 6ee77182..db8e5afc 100644 --- a/src/redux/node/constants.ts +++ b/src/redux/node/constants.ts @@ -18,6 +18,7 @@ const prefix = 'NODE.'; export const NODE_ACTIONS = { SAVE: `${prefix}SAVE`, LOAD_NODE: `${prefix}LOAD_NODE`, + GOTO_NODE: `${prefix}GOTO_NODE`, EDIT: `${prefix}EDIT`, LIKE: `${prefix}LIKE`, diff --git a/src/redux/node/sagas.ts b/src/redux/node/sagas.ts index 26f6c4ec..2447ae06 100644 --- a/src/redux/node/sagas.ts +++ b/src/redux/node/sagas.ts @@ -20,6 +20,7 @@ import { nodeEdit, nodeLike, nodeSetRelated, + nodeGotoNode, } from './actions'; import { postNode, @@ -89,17 +90,19 @@ function* onNodeSave({ node }: ReturnType) { return yield put(modalSetShown(false)); } -function* onNodeLoad({ id, node_type }: ReturnType) { +function* onNodeGoto({ id, node_type }: ReturnType) { + if (node_type) yield put(nodeSetCurrent({ ...EMPTY_NODE, type: node_type })); + yield put(nodeLoadNode(id)); + yield put(push(URLS.NODE_URL(id))); +} + +function* onNodeLoad({ id }: ReturnType) { yield put(nodeSetLoading(true)); yield put(nodeSetLoadingComments(true)); yield put(nodeSetSaveErrors({})); yield put(nodeSetCommentData(0, { ...EMPTY_COMMENT })); yield put(nodeSetRelated(null)); - if (node_type) yield put(nodeSetCurrent({ ...EMPTY_NODE, type: node_type })); - - yield put(push(URLS.NODE_URL(id))); - const { data: { node, error }, } = yield call(reqWrapper, getNode, { id }); @@ -113,7 +116,6 @@ function* onNodeLoad({ id, node_type }: ReturnType) { yield put(nodeSetSaveErrors({})); yield put(nodeSetCurrent(node)); - // todo: load comments const { comments: { data: { comments }, @@ -232,6 +234,7 @@ function* onStarSaga({ id }: ReturnType) { export default function* nodeSaga() { yield takeLatest(NODE_ACTIONS.SAVE, onNodeSave); + 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);