From 93afa626dbd7f83804f7ede34e061bf6492cee26 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Tue, 26 Nov 2019 10:25:43 +0700 Subject: [PATCH] splitting comment text by blocks --- .../comment/CommentTextBlock/index.tsx | 20 ++++ .../comment/CommentTextBlock/styles.scss | 14 +++ src/components/node/CommentContent/index.tsx | 14 +-- .../node/CommentContent/styles.scss | 16 +-- .../profile/ProfileSettings/index.tsx | 90 +++++++--------- src/constants/comment.ts | 33 ++++++ src/index.tsx | 76 ++++++------- src/utils/dom.ts | 101 +++++++++--------- 8 files changed, 206 insertions(+), 158 deletions(-) create mode 100644 src/components/comment/CommentTextBlock/index.tsx create mode 100644 src/components/comment/CommentTextBlock/styles.scss create mode 100644 src/constants/comment.ts diff --git a/src/components/comment/CommentTextBlock/index.tsx b/src/components/comment/CommentTextBlock/index.tsx new file mode 100644 index 00000000..a782d0e3 --- /dev/null +++ b/src/components/comment/CommentTextBlock/index.tsx @@ -0,0 +1,20 @@ +import React, { FC } from 'react'; +import { ICommentBlock } from '~/constants/comment'; +import styles from './styles.scss'; + +interface IProps { + block: ICommentBlock; +} + +const CommentTextBlock: FC = ({ block }) => { + return ( +
${block.content}

`, + }} + /> + ); +}; + +export { CommentTextBlock }; diff --git a/src/components/comment/CommentTextBlock/styles.scss b/src/components/comment/CommentTextBlock/styles.scss new file mode 100644 index 00000000..659ea8c5 --- /dev/null +++ b/src/components/comment/CommentTextBlock/styles.scss @@ -0,0 +1,14 @@ +.text { + padding: $gap; + font-weight: 300; + font: $font_16_medium; + line-height: 20px; + box-sizing: border-box; + position: relative; + color: #cccccc; + word-break: break-word; + + b { + font-weight: 600; + } +} diff --git a/src/components/node/CommentContent/index.tsx b/src/components/node/CommentContent/index.tsx index 1e293693..95f08b6e 100644 --- a/src/components/node/CommentContent/index.tsx +++ b/src/components/node/CommentContent/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, useMemo, memo } from 'react'; +import React, { FC, useMemo, memo, createElement } from 'react'; import { IComment, IFile } from '~/redux/types'; import path from 'ramda/es/path'; import { formatCommentText, getURL, getPrettyDate } from '~/utils/dom'; @@ -11,6 +11,7 @@ import reduce from 'ramda/es/reduce'; import { AudioPlayer } from '~/components/media/AudioPlayer'; import classnames from 'classnames'; import { PRESETS } from '~/constants/urls'; +import { COMMENT_BLOCK_RENDERERS } from '~/constants/comment'; interface IProps { comment: IComment; @@ -31,12 +32,11 @@ const CommentContent: FC = memo(({ comment }) => { <> {comment.text && (
- + {formatCommentText(path(['user', 'username'], comment), comment.text).map( + (block, key) => + COMMENT_BLOCK_RENDERERS[block.type] && + createElement(COMMENT_BLOCK_RENDERERS[block.type], { block, key }) + )}
{getPrettyDate(comment.created_at)}
diff --git a/src/components/node/CommentContent/styles.scss b/src/components/node/CommentContent/styles.scss index 436fc10a..ca44e9cf 100644 --- a/src/components/node/CommentContent/styles.scss +++ b/src/components/node/CommentContent/styles.scss @@ -10,6 +10,7 @@ position: relative; padding-bottom: 10px; box-sizing: border-box; + flex-direction: column; &:first-child { border-top-right-radius: $radius; @@ -36,21 +37,6 @@ } } -.text { - padding: $gap; - font-weight: 300; - font: $font_16_medium; - line-height: 20px; - box-sizing: border-box; - position: relative; - color: #cccccc; - word-break: break-word; - - b { - font-weight: 600; - } -} - .date { position: absolute; bottom: 0; diff --git a/src/components/profile/ProfileSettings/index.tsx b/src/components/profile/ProfileSettings/index.tsx index c140d4ef..9339229e 100644 --- a/src/components/profile/ProfileSettings/index.tsx +++ b/src/components/profile/ProfileSettings/index.tsx @@ -1,56 +1,51 @@ -import React, { FC, useState, useEffect, useCallback } from "react"; -import styles from "./styles.scss"; -import { connect } from "react-redux"; -import classNames from "classnames"; -import { selectAuthUser, selectAuthProfile } from "~/redux/auth/selectors"; -import { Textarea } from "~/components/input/Textarea"; -import { Button } from "~/components/input/Button"; -import { Group } from "~/components/containers/Group"; -import { Filler } from "~/components/containers/Filler"; -import { TextInput } from "~/components/input/TextInput"; -import { InputText } from "~/components/input/InputText"; -import reject from "ramda/es/reject"; -import * as AUTH_ACTIONS from "~/redux/auth/actions"; -import { ERROR_LITERAL } from "~/constants/errors"; +import React, { FC, useState, useEffect, useCallback } from 'react'; +import styles from './styles.scss'; +import { connect } from 'react-redux'; +import classNames from 'classnames'; +import { selectAuthUser, selectAuthProfile } from '~/redux/auth/selectors'; +import { Textarea } from '~/components/input/Textarea'; +import { Button } from '~/components/input/Button'; +import { Group } from '~/components/containers/Group'; +import { Filler } from '~/components/containers/Filler'; +import { TextInput } from '~/components/input/TextInput'; +import { InputText } from '~/components/input/InputText'; +import reject from 'ramda/es/reject'; +import * as AUTH_ACTIONS from '~/redux/auth/actions'; +import { ERROR_LITERAL } from '~/constants/errors'; const mapStateToProps = state => ({ user: selectAuthUser(state), - profile: selectAuthProfile(state) + profile: selectAuthProfile(state), }); const mapDispatchToProps = { authPatchUser: AUTH_ACTIONS.authPatchUser, - authSetProfile: AUTH_ACTIONS.authSetProfile + authSetProfile: AUTH_ACTIONS.authSetProfile, }; -type IProps = ReturnType & - typeof mapDispatchToProps & {}; +type IProps = ReturnType & typeof mapDispatchToProps & {}; const ProfileSettingsUnconnected: FC = ({ user, profile: { patch_errors }, authPatchUser, - authSetProfile + authSetProfile, }) => { - const [password, setPassword] = useState(""); - const [new_password, setNewPassword] = useState(""); + const [password, setPassword] = useState(''); + const [new_password, setNewPassword] = useState(''); const [data, setData] = useState(user); - const setDescription = useCallback( - description => setData({ ...data, description }), - [data, setData] - ); - - const setEmail = useCallback(email => setData({ ...data, email }), [ + const setDescription = useCallback(description => setData({ ...data, description }), [ data, - setData + setData, ]); - const setUsername = useCallback(username => setData({ ...data, username }), [ - data, - setData - ]); + const setEmail = useCallback(email => setData({ ...data, email }), [data, setData]); + + const setUsername = useCallback(username => setData({ ...data, username }), [data, setData]); + + const setFullname = useCallback(fullname => setData({ ...data, fullname }), [data, setData]); const onSubmit = useCallback( event => { @@ -58,10 +53,11 @@ const ProfileSettingsUnconnected: FC = ({ const fields = reject(el => !el)({ email: data.email !== user.email && data.email, + fullname: data.fullname !== user.fullname && data.fullname, username: data.username !== user.username && data.username, password: password.length > 0 && password, new_password: new_password.length > 0 && new_password, - description: data.description !== user.description && data.description + description: data.description !== user.description && data.description, }); if (Object.values(fields).length === 0) return; @@ -78,15 +74,18 @@ const ProfileSettingsUnconnected: FC = ({ return (
-