Skip to content

Commit 2e0c259

Browse files
velopertvelopert
committed
Initialize PostCommentItem
1 parent 379a790 commit 2e0c259

File tree

9 files changed

+216
-4
lines changed

9 files changed

+216
-4
lines changed

‎src/components/post/PostCommentItem.tsx

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import * as React from 'react';
2+
import styled from 'styled-components';
3+
import { Comment } from '../../lib/graphql/post';
4+
import palette from '../../lib/styles/palette';
5+
import { formatDate } from '../../lib/utils';
6+
import Typography from '../common/Typography';
7+
import { PlusBoxIcon } from '../../static/svg';
8+
9+
const PostCommentItemBlock = styled.div``;
10+
const CommentHead = styled.div`
11+
margin-bottom: 1.5rem;
12+
display: flex;
13+
justify-content: space-between;
14+
.profile {
15+
display: flex;
16+
align-items: center;
17+
img {
18+
display: block;
19+
}
20+
.comment-info {
21+
margin-left: 1rem;
22+
line-height: 1;
23+
.username {
24+
font-size: 1rem;
25+
font-weight: bold;
26+
color: ${palette.gray8};
27+
}
28+
.date {
29+
color: ${palette.gray6};
30+
font-size: 0.875rem;
31+
}
32+
}
33+
}
34+
.actions {
35+
font-size: 0.875rem;
36+
color: ${palette.gray6};
37+
span {
38+
cursor: pointer;
39+
&:hover {
40+
color: ${palette.gray5};
41+
text-decoration: underline;
42+
}
43+
& + & {
44+
margin-left: 0.5rem;
45+
}
46+
}
47+
}
48+
`;
49+
50+
const CommentText = styled.p``;
51+
const CommentFoot = styled.div`
52+
margin-top: 2rem;
53+
.toggler {
54+
display: flex;
55+
align-items: center;
56+
color: ${palette.teal6};
57+
svg {
58+
margin-right: 0.5rem;
59+
}
60+
}
61+
`;
62+
63+
export interface PostCommentItemProps {
64+
comment: Comment;
65+
}
66+
67+
const PostCommentItem: React.FC<PostCommentItemProps> = ({ comment }) => {
68+
const { user, created_at, text } = comment;
69+
return (
70+
<PostCommentItemBlock>
71+
<CommentHead>
72+
<div className="profile">
73+
<img
74+
src={user.profile.thumbnail || ''}
75+
alt="comment-user-thumbnail"
76+
/>
77+
<div className="comment-info">
78+
<div className="username">{user.username}</div>
79+
<div className="date">{formatDate(created_at)}</div>
80+
</div>
81+
</div>
82+
<div className="actions">
83+
<span>수정</span>
84+
<span>삭제</span>
85+
</div>
86+
</CommentHead>
87+
<Typography>
88+
<CommentText>{text}</CommentText>
89+
</Typography>
90+
<CommentFoot>
91+
<div className="toggler">
92+
<PlusBoxIcon />
93+
<span>답글 달기</span>
94+
</div>
95+
</CommentFoot>
96+
</PostCommentItemBlock>
97+
);
98+
};
99+
100+
export default PostCommentItem;

‎src/components/post/PostCommentsList.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import * as React from 'react';
2+
import styled from 'styled-components';
3+
4+
const PostCommentsListBlock = styled.div``;
5+
6+
export interface PostCommentsListProps {}
7+
8+
const PostCommentsList: React.FC<PostCommentsListProps> = props => {
9+
return <PostCommentsListBlock />;
10+
};
11+
12+
export default PostCommentsList;

‎src/components/post/__tests__/PostCommentItem.test.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import * as React from 'react';
2+
import { render } from 'react-testing-library';
3+
import PostCommentItem, { PostCommentItemProps } from '../PostCommentItem';
4+
import { Comment } from '../../../lib/graphql/post';
5+
import { formatDate } from '../../../lib/utils';
6+
7+
describe('PostCommentItem', () => {
8+
const sampleComment: Comment = {
9+
id: '70d24d3b-a6ce-46a3-86c5-1cba95843841',
10+
user: {
11+
id: '0bcdf3e5-a228-42c3-8b52-3f0dc118dfd8',
12+
username: 'blablabla',
13+
profile: {
14+
thumbnail: 'https://velog.io/sample.png',
15+
},
16+
},
17+
text: 'Hey there',
18+
replies_count: 0,
19+
created_at: '2019-06-14T14:53:11.979Z',
20+
};
21+
22+
const setup = (props: Partial<PostCommentItemProps> = {}) => {
23+
const initialProps: PostCommentItemProps = { comment: sampleComment };
24+
const utils = render(<PostCommentItem {...initialProps} {...props} />);
25+
return {
26+
...utils,
27+
};
28+
};
29+
it('renders properly', () => {
30+
const { getByText, getByAltText } = setup();
31+
getByText(sampleComment.user.username);
32+
getByText(formatDate(sampleComment.created_at));
33+
expect(getByAltText('comment-user-thumbnail')).toHaveAttribute(
34+
'src',
35+
sampleComment.user.profile.thumbnail!,
36+
);
37+
getByText(sampleComment.text);
38+
});
39+
});

‎src/containers/post/__tests__/PostCommentsWriteContainer.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,17 @@ import { render, fireEvent } from 'react-testing-library';
33
import PostCommentsWriteContainer, {
44
PostCommentsWriteContainerProps,
55
} from '../PostCommentsWriteContainer';
6+
import { MockedProvider } from 'react-apollo/test-utils';
67

78
describe('PostCommentsWriteContainer', () => {
89
const setup = (props: Partial<PostCommentsWriteContainerProps> = {}) => {
9-
const initialProps: PostCommentsWriteContainerProps = {};
10+
const initialProps: PostCommentsWriteContainerProps = {
11+
postId: 'd91aa54b-0e2c-4a18-9104-ec32ea7218a3',
12+
};
1013
const utils = render(
11-
<PostCommentsWriteContainer {...initialProps} {...props} />,
14+
<MockedProvider>
15+
<PostCommentsWriteContainer {...initialProps} {...props} />
16+
</MockedProvider>,
1217
);
1318

1419
const textarea = utils.getByPlaceholderText(

‎src/containers/post/__tests__/PostViewer.test.tsx

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@ describe('PostViewer', () => {
4949
title: 'VELOPERT.LOG',
5050
},
5151
},
52-
comments_count: 8,
5352
comments: [
5453
{
5554
id: '70d24d3b-a6ce-46a3-86c5-1cba95843841',
@@ -62,6 +61,7 @@ describe('PostViewer', () => {
6261
},
6362
text: 'Hey there',
6463
replies_count: 0,
64+
created_at: '2019-06-13T14:27:25.463Z',
6565
},
6666
{
6767
id: '0f700ebd-0dec-469a-adb8-c47bae2b8f18',
@@ -74,6 +74,7 @@ describe('PostViewer', () => {
7474
},
7575
text: 'Hey there',
7676
replies_count: 0,
77+
created_at: '2019-06-13T14:27:31.265Z',
7778
},
7879
{
7980
id: '90f3b558-4af3-41bb-95dd-ed9571609f25',
@@ -86,6 +87,7 @@ describe('PostViewer', () => {
8687
},
8788
text: 'Hey there',
8889
replies_count: 0,
90+
created_at: '2019-06-13T14:27:53.898Z',
8991
},
9092
{
9193
id: 'd4365762-08e8-4928-a387-4255e4392291',
@@ -98,6 +100,7 @@ describe('PostViewer', () => {
98100
},
99101
text: 'Hey there',
100102
replies_count: 3,
103+
created_at: '2019-06-13T14:42:28.873Z',
101104
},
102105
{
103106
id: '383d590d-d3ed-4f07-994e-cbea3127195d',
@@ -110,6 +113,46 @@ describe('PostViewer', () => {
110113
},
111114
text: 'Hey there',
112115
replies_count: 0,
116+
created_at: '2019-06-13T14:42:58.100Z',
117+
},
118+
{
119+
id: 'a0bc6974-582a-4eb1-8273-627e1df7c527',
120+
user: {
121+
id: '0bcdf3e5-a228-42c3-8b52-3f0dc118dfd8',
122+
username: 'blablabla',
123+
profile: {
124+
thumbnail: null,
125+
},
126+
},
127+
text: 'aw3b5aw35w35bw3a',
128+
replies_count: 0,
129+
created_at: '2019-06-14T14:43:22.312Z',
130+
},
131+
{
132+
id: '86fa0b3f-1493-424c-aff4-49e1b059caf6',
133+
user: {
134+
id: '0bcdf3e5-a228-42c3-8b52-3f0dc118dfd8',
135+
username: 'blablabla',
136+
profile: {
137+
thumbnail: null,
138+
},
139+
},
140+
text: '잘된거니?',
141+
replies_count: 0,
142+
created_at: '2019-06-14T14:43:27.840Z',
143+
},
144+
{
145+
id: '4e76da59-048a-4d2d-b11f-4f6194dff4f5',
146+
user: {
147+
id: '0bcdf3e5-a228-42c3-8b52-3f0dc118dfd8',
148+
username: 'blablabla',
149+
profile: {
150+
thumbnail: null,
151+
},
152+
},
153+
text: 'afasdfsdf',
154+
replies_count: 0,
155+
created_at: '2019-06-14T14:49:08.871Z',
113156
},
114157
],
115158
},
@@ -173,6 +216,7 @@ describe('PostViewer', () => {
173216
title: 'VELOPERT.LOG',
174217
},
175218
},
219+
comments: [],
176220
},
177221
},
178222
},

‎src/lib/graphql/post.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,13 @@ export interface Comment {
2929
id: string;
3030
username: string;
3131
profile: {
32-
thumbnail: string;
32+
thumbnail: string | null;
3333
};
3434
};
3535
text: string;
3636
replies_count: number;
3737
replies?: Comment[];
38+
created_at: string;
3839
}
3940

4041
// Post Type for PostList
@@ -138,6 +139,7 @@ export const READ_POST = gql`
138139
}
139140
text
140141
replies_count
142+
created_at
141143
}
142144
}
143145
}

‎src/static/svg/icon-minus-box.svg

Lines changed: 4 additions & 0 deletions
Loading

‎src/static/svg/icon-plus-box.svg

Lines changed: 4 additions & 0 deletions
Loading

‎src/static/svg/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,5 @@ export { ReactComponent as GlobeIcon } from './icon-globe.svg';
66
export { ReactComponent as LockIcon } from './icon-lock.svg';
77
export { ReactComponent as AddListIcon } from './icon-add-list.svg';
88
export { ReactComponent as ImageVector } from './vector-image.svg';
9+
export { ReactComponent as MinusBoxIcon } from './icon-minus-box.svg';
10+
export { ReactComponent as PlusBoxIcon } from './icon-plus-box.svg';

0 commit comments

Comments
 (0)