From dcba64042708bd841102c7b3f9628f4ec656caef Mon Sep 17 00:00:00 2001 From: Chen-I Lim Date: Tue, 19 Jan 2021 14:48:20 -0800 Subject: [PATCH] Add author's userId to comment --- webapp/src/blocks/board.ts | 2 +- webapp/src/blocks/card.ts | 2 +- webapp/src/blocks/commentBlock.ts | 15 +++++++-- webapp/src/blocks/dividerBlock.tsx | 2 +- webapp/src/blocks/imageBlock.ts | 2 +- webapp/src/blocks/textBlock.ts | 2 +- webapp/src/components/cardDetail.tsx | 42 ++++++++++++++------------ webapp/src/components/commentsList.tsx | 21 ++++++++----- webapp/src/viewModel/cardTree.ts | 7 +++-- webapp/src/viewModel/workspaceTree.ts | 2 +- 10 files changed, 59 insertions(+), 38 deletions(-) diff --git a/webapp/src/blocks/board.ts b/webapp/src/blocks/board.ts index 4ccad52c5..8dcbe18ff 100644 --- a/webapp/src/blocks/board.ts +++ b/webapp/src/blocks/board.ts @@ -44,7 +44,7 @@ interface Board extends IBlock { duplicate(): MutableBoard } -class MutableBoard extends MutableBlock { +class MutableBoard extends MutableBlock implements Board { get icon(): string { return this.fields.icon as string } diff --git a/webapp/src/blocks/card.ts b/webapp/src/blocks/card.ts index 622f5afe7..49ca2bd34 100644 --- a/webapp/src/blocks/card.ts +++ b/webapp/src/blocks/card.ts @@ -14,7 +14,7 @@ interface Card extends IBlock { duplicate(): MutableCard } -class MutableCard extends MutableBlock { +class MutableCard extends MutableBlock implements Card { get icon(): string { return this.fields.icon as string } diff --git a/webapp/src/blocks/commentBlock.ts b/webapp/src/blocks/commentBlock.ts index 93abbef88..31662d43d 100644 --- a/webapp/src/blocks/commentBlock.ts +++ b/webapp/src/blocks/commentBlock.ts @@ -4,12 +4,23 @@ import {IBlock} from '../blocks/block' import {MutableBlock} from './block' -type CommentBlock = IBlock +interface CommentBlock extends IBlock { + readonly userId: string +} + +class MutableCommentBlock extends MutableBlock implements CommentBlock { + get userId(): string { + return this.fields.userId as string + } + set userId(value: string) { + this.fields.userId = value + } -class MutableCommentBlock extends MutableBlock { constructor(block: any = {}) { super(block) this.type = 'comment' + + this.userId = block.fields?.userId || '' } } diff --git a/webapp/src/blocks/dividerBlock.tsx b/webapp/src/blocks/dividerBlock.tsx index 4d02678c2..d3ff51409 100644 --- a/webapp/src/blocks/dividerBlock.tsx +++ b/webapp/src/blocks/dividerBlock.tsx @@ -4,7 +4,7 @@ import {IContentBlock, MutableContentBlock} from './contentBlock' type DividerBlock = IContentBlock -class MutableDividerBlock extends MutableContentBlock { +class MutableDividerBlock extends MutableContentBlock implements DividerBlock { constructor(block: any = {}) { super(block) this.type = 'divider' diff --git a/webapp/src/blocks/imageBlock.ts b/webapp/src/blocks/imageBlock.ts index cc97fbdb8..e12797f6b 100644 --- a/webapp/src/blocks/imageBlock.ts +++ b/webapp/src/blocks/imageBlock.ts @@ -6,7 +6,7 @@ interface ImageBlock extends IContentBlock { readonly url: string } -class MutableImageBlock extends MutableContentBlock implements IContentBlock { +class MutableImageBlock extends MutableContentBlock implements ImageBlock { get url(): string { return this.fields.url as string } diff --git a/webapp/src/blocks/textBlock.ts b/webapp/src/blocks/textBlock.ts index 40c464f24..9de4fc96b 100644 --- a/webapp/src/blocks/textBlock.ts +++ b/webapp/src/blocks/textBlock.ts @@ -4,7 +4,7 @@ import {IContentBlock, MutableContentBlock} from './contentBlock' type TextBlock = IContentBlock -class MutableTextBlock extends MutableContentBlock { +class MutableTextBlock extends MutableContentBlock implements TextBlock { constructor(block: any = {}) { super(block) this.type = 'text' diff --git a/webapp/src/components/cardDetail.tsx b/webapp/src/components/cardDetail.tsx index b9339c3e2..22248320d 100644 --- a/webapp/src/components/cardDetail.tsx +++ b/webapp/src/components/cardDetail.tsx @@ -1,30 +1,29 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. import React from 'react' -import {FormattedMessage, IntlShape, injectIntl} from 'react-intl' +import {FormattedMessage, injectIntl, IntlShape} from 'react-intl' import {BlockIcons} from '../blockIcons' -import {MutableTextBlock} from '../blocks/textBlock' -import {BoardTree} from '../viewModel/boardTree' import {PropertyType} from '../blocks/board' -import {CardTree} from '../viewModel/cardTree' +import {MutableTextBlock} from '../blocks/textBlock' import mutator from '../mutator' +import {UserContext} from '../user' import {Utils} from '../utils' - -import MenuWrapper from '../widgets/menuWrapper' -import Menu from '../widgets/menu' -import PropertyMenu from '../widgets/propertyMenu' -import Editable from '../widgets/editable' +import {BoardTree} from '../viewModel/boardTree' +import {CardTree} from '../viewModel/cardTree' import Button from '../widgets/buttons/button' +import Editable from '../widgets/editable' import EmojiIcon from '../widgets/icons/emoji' +import Menu from '../widgets/menu' +import MenuWrapper from '../widgets/menuWrapper' +import PropertyMenu from '../widgets/propertyMenu' -import {MarkdownEditor} from './markdownEditor' -import ContentBlock from './contentBlock' -import CommentsList from './commentsList' import BlockIconSelector from './blockIconSelector' -import PropertyValueElement from './propertyValueElement' - import './cardDetail.scss' +import CommentsList from './commentsList' +import ContentBlock from './contentBlock' +import {MarkdownEditor} from './markdownEditor' +import PropertyValueElement from './propertyValueElement' type Props = { boardTree: BoardTree @@ -196,11 +195,16 @@ class CardDetail extends React.Component { {!this.props.readonly && <>
- + + {(user) => (user && + + )} +
} diff --git a/webapp/src/components/commentsList.tsx b/webapp/src/components/commentsList.tsx index be3b098b6..261cf2bd5 100644 --- a/webapp/src/components/commentsList.tsx +++ b/webapp/src/components/commentsList.tsx @@ -3,8 +3,7 @@ import React from 'react' import {FormattedMessage, injectIntl, IntlShape} from 'react-intl' -import {IBlock} from '../blocks/block' -import {MutableCommentBlock} from '../blocks/commentBlock' +import {CommentBlock, MutableCommentBlock} from '../blocks/commentBlock' import mutator from '../mutator' import {Utils} from '../utils' import Button from '../widgets/buttons/button' @@ -14,7 +13,8 @@ import './commentsList.scss' import {MarkdownEditor} from './markdownEditor' type Props = { - comments: readonly IBlock[] + comments: readonly CommentBlock[] + userId: string rootId: string cardId: string intl: IntlShape @@ -39,12 +39,16 @@ class CommentsList extends React.Component { } private sendComment = () => { - const {rootId, cardId} = this.props + const {userId, rootId, cardId} = this.props Utils.assertValue(cardId) - const block = new MutableCommentBlock({rootId, parentId: cardId, title: this.state.newComment}) - mutator.insertBlock(block, 'add comment') + const comment = new MutableCommentBlock() + comment.parentId = cardId + comment.rootId = rootId + comment.userId = userId + comment.title = this.state.newComment + mutator.insertBlock(comment, 'add comment') this.setState({newComment: ''}) } @@ -52,7 +56,6 @@ class CommentsList extends React.Component { const {comments, intl} = this.props // TODO: Replace this placeholder - const username = 'John Smith' const userImageUrl = 'data:image/svg+xml,' return ( @@ -62,7 +65,9 @@ class CommentsList extends React.Component { key={comment.id} comment={comment} userImageUrl={userImageUrl} - username={username} + + // TODO: Look up user name from userId + username={comment.userId} /> ))} diff --git a/webapp/src/viewModel/cardTree.ts b/webapp/src/viewModel/cardTree.ts index ce8f19c8d..0d7cf20b4 100644 --- a/webapp/src/viewModel/cardTree.ts +++ b/webapp/src/viewModel/cardTree.ts @@ -2,20 +2,21 @@ // See LICENSE.txt for license information. import {IBlock} from '../blocks/block' import {Card, MutableCard} from '../blocks/card' +import {CommentBlock} from '../blocks/commentBlock' import {IContentBlock} from '../blocks/contentBlock' import octoClient from '../octoClient' import {OctoUtils} from '../octoUtils' interface CardTree { readonly card: Card - readonly comments: readonly IBlock[] + readonly comments: readonly CommentBlock[] readonly contents: readonly IContentBlock[] readonly allBlocks: readonly IBlock[] } class MutableCardTree implements CardTree { card: MutableCard - comments: IBlock[] = [] + comments: CommentBlock[] = [] contents: IContentBlock[] = [] get allBlocks(): IBlock[] { @@ -53,7 +54,7 @@ class MutableCardTree implements CardTree { const cardTree = new MutableCardTree(card) cardTree.comments = blocks. filter((block) => block.type === 'comment'). - sort((a, b) => a.createAt - b.createAt) + sort((a, b) => a.createAt - b.createAt) as CommentBlock[] const contentBlocks = blocks.filter((block) => block.type === 'text' || block.type === 'image' || block.type === 'divider') as IContentBlock[] cardTree.contents = OctoUtils.getBlockOrder(card.contentOrder, contentBlocks) diff --git a/webapp/src/viewModel/workspaceTree.ts b/webapp/src/viewModel/workspaceTree.ts index 956b0f55a..4f0186f57 100644 --- a/webapp/src/viewModel/workspaceTree.ts +++ b/webapp/src/viewModel/workspaceTree.ts @@ -13,7 +13,7 @@ interface WorkspaceTree { readonly allBlocks: readonly IBlock[] } -class MutableWorkspaceTree { +class MutableWorkspaceTree implements WorkspaceTree { boards: Board[] = [] boardTemplates: Board[] = [] views: BoardView[] = []