-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(comment): add comment on article
- add comment reducer and actions tests and implementation - add comment form [starts #165273535]
- Loading branch information
Arthur Kalule
committed
Jun 21, 2019
1 parent
afe7b2c
commit 12e69d7
Showing
28 changed files
with
1,431 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,106 @@ | ||
@import 'assets/MainStyle.scss'; | ||
|
||
.comment_form { | ||
> form { | ||
width: 100%; | ||
//padding: none; | ||
background: none; | ||
|
||
& textarea { | ||
outline: none; | ||
width: 100%; | ||
border: 0.06rem #2D658623 solid; | ||
background: $white; | ||
border-radius: 0.7rem; | ||
padding: 0.5rem; | ||
height: 4rem; | ||
|
||
&:hover, &:focus { | ||
border: 0.06rem #2D658656 solid; | ||
} | ||
} | ||
|
||
& i { | ||
color: #C21F39; | ||
} | ||
} | ||
} | ||
|
||
.comment { | ||
display: grid; | ||
grid-template-columns: repeat(4, 1fr); | ||
grid-gap: 1.2rem; | ||
//box-shadow: 0 0 0 0.1rem rgba(34, 34, 34, 0.06); | ||
border-radius: 5%; | ||
padding: 0.2rem; | ||
margin-bottom: 0.8rem; | ||
|
||
&__img { | ||
grid-column: 1/ span 1; | ||
grid-row: 1; | ||
justify-self: end; | ||
top: 50%; | ||
width: 4.375rem; | ||
box-shadow: 0 0 0.4rem rgba(0,0,0,.6); | ||
border-radius: 50%; | ||
} | ||
|
||
&__header { | ||
grid-column: 2 /span 3; | ||
grid-row: 1; | ||
display: inline-grid; | ||
grid-template-columns: repeat(3, 1fr); | ||
align-items: center; | ||
border-bottom: 1px solid #E5E5E5; | ||
|
||
&__author { | ||
grid-column: span 1; | ||
grid-row: 1; | ||
color: $primary; | ||
transition: color .3s ease-in-out; | ||
justify-self: start; | ||
|
||
&:hover { | ||
color: #222; | ||
text-decoration: underline; | ||
} | ||
|
||
} | ||
|
||
&__timestamp { | ||
grid-column: 2/span 2; | ||
grid-row: 1; | ||
color: #AEADAD; | ||
justify-self: end; | ||
} | ||
|
||
} | ||
|
||
&__body { | ||
grid-column: 2/span 3; | ||
grid-row: 2; | ||
display: block; | ||
color: rgba(34, 34, 34, 0.64); | ||
} | ||
|
||
&__footer { | ||
grid-column: 2/span 3; | ||
grid-row: 3; | ||
padding-bottom: 0.8rem; | ||
|
||
> .delete { | ||
color: #FF492E; | ||
border: none; | ||
|
||
&:hover { | ||
border: none; | ||
background-color: transparent; | ||
} | ||
|
||
} | ||
|
||
&__actions { | ||
justify-self: end; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
import React from 'react'; | ||
import { shallow } from 'enzyme'; | ||
import { Comment, mapStateToProps, mapDispatchToProps } from 'components/Comment/'; | ||
import commentTestData from 'store/reducers/commentReducer/__mocks__'; | ||
|
||
|
||
describe('Comment Box', () => { | ||
let wrapper; | ||
const getCommentsFn = jest.fn(); | ||
const deleteCommentFn = jest.fn(); | ||
const props = { | ||
getComments: getCommentsFn, | ||
deleteComment: deleteCommentFn, | ||
comments: commentTestData, | ||
articleSlug: 'javascript-code', | ||
commentsCount: commentTestData.length, | ||
username: 'zack' | ||
}; | ||
|
||
it('should render without crushing', () => { | ||
wrapper = shallow(<Comment | ||
{...props} | ||
/>); | ||
|
||
expect(wrapper).toMatchSnapshot(); | ||
}); | ||
|
||
it('should map state to props', () => { | ||
const mockedState = { | ||
loginReducer: { | ||
user: { | ||
username: 'arthur' | ||
} | ||
}, | ||
commentReducer: { | ||
comments: commentTestData, | ||
commentsCount: commentTestData.length, | ||
} | ||
}; | ||
|
||
const state = mapStateToProps(mockedState); | ||
|
||
expect(state.username).toEqual('arthur'); | ||
expect(state.commentsCount).toBe(2); | ||
}); | ||
|
||
it('should map dispatch to props', () => { | ||
mapDispatchToProps(getCommentsFn).getComments(); | ||
expect(getCommentsFn).toHaveBeenCalled(); | ||
|
||
mapDispatchToProps(deleteCommentFn).deleteComment(); | ||
expect(deleteCommentFn).toHaveBeenCalled(); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
// react | ||
import React from 'react'; | ||
|
||
// Third-party library | ||
import PropTypes from 'prop-types'; | ||
|
||
// Components | ||
import DeleteComment from 'components/Comment/DeleteComment'; | ||
|
||
|
||
const date = timestamp => (new Date(timestamp).toString().slice(0, 25)); | ||
const CommentBox = ( | ||
{ | ||
commentId, author: { username, image }, | ||
created_at, body, articleSlug, deleteComment, authenticatedUsername | ||
} | ||
) => ( | ||
<div className="comment"> | ||
<img className="comment__img" alt="author" src={image} /> | ||
<div className="comment__header"> | ||
<p className="comment__header__author">{username}</p> | ||
<span className="comment__header__timestamp">{date(created_at)}</span> | ||
</div> | ||
<div className="comment__body">{body}</div> | ||
<div className="comment_footer"> | ||
{' '} | ||
{} | ||
</div> | ||
<div className="comment__footer"> | ||
<DeleteComment | ||
author={username} | ||
commentId={commentId} | ||
articleSlug={articleSlug} | ||
deleteComment={deleteComment} | ||
authenticatedUsername={authenticatedUsername} | ||
/> | ||
</div> | ||
|
||
</div> | ||
); | ||
|
||
// PropType validation | ||
CommentBox.propTypes = { | ||
authenticatedUsername: PropTypes.string.isRequired, | ||
deleteComment: PropTypes.func.isRequired, | ||
articleSlug: PropTypes.string.isRequired, | ||
commentId: PropTypes.number.isRequired, | ||
body: PropTypes.string.isRequired, | ||
created_at: PropTypes.string.isRequired, | ||
author: PropTypes.shape({ | ||
username: PropTypes.string.isRequired, | ||
}).isRequired, | ||
}; | ||
|
||
export default CommentBox; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import React from 'react'; | ||
import { shallow } from 'enzyme'; | ||
import CommentBox from 'components/Comment/CommentBox'; | ||
|
||
|
||
describe('Comment Box', () => { | ||
let wrapper; | ||
const props = { | ||
author: { username: 'arthur' }, | ||
commentId: 1, | ||
created_at: '2019-06-15T06:02:00.086733Z', | ||
body: 'my first comment', | ||
articleSlug: 'my_article_slug', | ||
deleteComment: jest.fn(), | ||
authenticatedUsername: 'arthur', | ||
}; | ||
|
||
it('should render without crushing', () => { | ||
wrapper = shallow(<CommentBox | ||
{...props} | ||
/>); | ||
|
||
expect(wrapper).toMatchSnapshot(); | ||
}); | ||
}); |
Oops, something went wrong.