diff --git a/src/containers/node/BorisLayout/index.tsx b/src/containers/node/BorisLayout/index.tsx index c868b511..f88ec1c5 100644 --- a/src/containers/node/BorisLayout/index.tsx +++ b/src/containers/node/BorisLayout/index.tsx @@ -4,6 +4,12 @@ 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'; +import { NodeComments } from '~/components/node/NodeComments'; +import styles from './styles.scss'; +import { CommentForm } from '~/components/node/CommentForm'; +import { Filler } from '~/components/containers/Filler'; +import { Group } from '~/components/containers/Group'; +import { GodRays } from '~/components/main/GodRays'; const mapStateToProps = state => ({ node: selectNode(state), @@ -27,14 +33,26 @@ const id = 696; const BorisLayoutUnconnected: FC = ({ node: { is_loading, is_loading_comments, comments = [], current: node, related }, + user: { is_user }, nodeLoadNode, }) => { useEffect(() => { if (is_loading) return; - nodeLoadNode(id); + nodeLoadNode(id, 'DESC'); }, [nodeLoadNode, id]); - return
{comments.length}
; + return ( +
+
+
+ + + {is_user && } + + + +
+ ); }; const BorisLayout = connect( diff --git a/src/containers/node/BorisLayout/styles.scss b/src/containers/node/BorisLayout/styles.scss new file mode 100644 index 00000000..9611f84f --- /dev/null +++ b/src/containers/node/BorisLayout/styles.scss @@ -0,0 +1,47 @@ +.wrap { + display: flex; + align-items: flex-start; + justify-content: center; + flex-direction: row; +} + +.container { + margin-top: 33vh; + flex: 3; + z-index: 2; + padding: $gap; + background: $content_bg; + border-radius: $radius; +} + +.column { + flex: 1; + background: $content_bg; + height: 400px; + position: relative; + z-index: 2; + margin-top: 33vh; + margin-right: $gap; + border-radius: $radius; +} + +.content { + padding: $gap; + text-align: center; + font: $font_24_bold; + text-transform: uppercase; + position: relative; + display: none; +} + +.cover { + position: fixed; + z-index: 1; + top: 0; + left: 0; + width: 100%; + height: 100vh; + overflow: hidden; + // background: linear-gradient($red, transparentize($red, 1)); + background: 50% 0% no-repeat/cover url('~/sprites/illustrate.svg'); +} diff --git a/src/redux/node/actions.ts b/src/redux/node/actions.ts index 66d81184..4262b48a 100644 --- a/src/redux/node/actions.ts +++ b/src/redux/node/actions.ts @@ -18,8 +18,9 @@ export const nodeGotoNode = (id: number, node_type: INode['type']) => ({ type: NODE_ACTIONS.GOTO_NODE, }); -export const nodeLoadNode = (id: number) => ({ +export const nodeLoadNode = (id: number, order?: 'ASC' | 'DESC') => ({ id, + order, type: NODE_ACTIONS.LOAD_NODE, }); diff --git a/src/redux/node/api.ts b/src/redux/node/api.ts index 044f80c6..35049cd7 100644 --- a/src/redux/node/api.ts +++ b/src/redux/node/api.ts @@ -58,12 +58,14 @@ export const postNodeComment = ({ export const getNodeComments = ({ id, access, + order = 'ASC', }: { id: number; access: string; + order: 'ASC' | 'DESC'; }): Promise> => api - .get(API.NODE.COMMENT(id), configWithToken(access)) + .get(API.NODE.COMMENT(id), configWithToken(access, { params: { order } })) .then(resultMiddleware) .catch(errorMiddleware); diff --git a/src/redux/node/sagas.ts b/src/redux/node/sagas.ts index cac8d508..c2a22b19 100644 --- a/src/redux/node/sagas.ts +++ b/src/redux/node/sagas.ts @@ -96,7 +96,7 @@ function* onNodeGoto({ id, node_type }: ReturnType) { yield put(push(URLS.NODE_URL(id))); } -function* onNodeLoad({ id }: ReturnType) { +function* onNodeLoad({ id, order = 'ASC' }: ReturnType) { yield put(nodeSetLoading(true)); yield put(nodeSetLoadingComments(true)); yield put(nodeSetCommentData(0, { ...EMPTY_COMMENT })); @@ -123,7 +123,7 @@ function* onNodeLoad({ id }: ReturnType) { data: { related }, }, } = yield all({ - comments: call(reqWrapper, getNodeComments, { id }), + comments: call(reqWrapper, getNodeComments, { id, order }), related: call(reqWrapper, getNodeRelated, { id }), }); diff --git a/src/sprites/illustrate.svg b/src/sprites/illustrate.svg new file mode 100644 index 00000000..e1e38a58 --- /dev/null +++ b/src/sprites/illustrate.svg @@ -0,0 +1,1361 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +