Skip to content

Commit 2e5da0b

Browse files
velopertvelopert
committed
Render comment list
1 parent 2e0c259 commit 2e5da0b

File tree

9 files changed

+126
-20
lines changed

9 files changed

+126
-20
lines changed

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"@types/redux-devtools-extension": "^2.13.2",
3636
"@types/redux-mock-store": "^1.0.0",
3737
"@types/snakecase-keys": "^2.1.0",
38-
"@types/styled-components": "^4.1.14",
38+
"@types/styled-components": "^4.1.16",
3939
"@types/turndown": "^5.0.0",
4040
"@typescript-eslint/eslint-plugin": "^1.9.0",
4141
"@typescript-eslint/parser": "^1.9.0",
@@ -118,7 +118,7 @@
118118
"snakecase-keys": "^2.1.0",
119119
"strip-markdown": "^3.0.3",
120120
"style-loader": "0.23.1",
121-
"styled-components": "^4.2.0",
121+
"styled-components": "^4.3.1",
122122
"terser-webpack-plugin": "1.2.2",
123123
"tslint": "^5.12.1",
124124
"tslint-config-airbnb": "^5.11.1",

‎src/components/base/HeaderUserIcon.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export interface HeaderUserIconProps {
3939
onClick: () => void;
4040
}
4141

42+
// TODO: show user thumbnail
4243
const HeaderUserIcon: React.SFC<HeaderUserIconProps> = ({ onClick }) => {
4344
return (
4445
<HeaderUserIconBlock onClick={onClick}>

‎src/components/post/PostCommentItem.tsx

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,15 @@ import palette from '../../lib/styles/palette';
55
import { formatDate } from '../../lib/utils';
66
import Typography from '../common/Typography';
77
import { PlusBoxIcon } from '../../static/svg';
8+
import { userThumbnail } from '../../static/images';
89

9-
const PostCommentItemBlock = styled.div``;
10+
const PostCommentItemBlock = styled.div`
11+
padding-top: 1.5rem;
12+
padding-bottom: 1.5rem;
13+
& + & {
14+
border-top: 1px solid ${palette.gray2};
15+
}
16+
`;
1017
const CommentHead = styled.div`
1118
margin-bottom: 1.5rem;
1219
display: flex;
@@ -15,7 +22,10 @@ const CommentHead = styled.div`
1522
display: flex;
1623
align-items: center;
1724
img {
25+
width: 3.375rem;
26+
height: 3.375rem;
1827
display: block;
28+
border-radius: 50%;
1929
}
2030
.comment-info {
2131
margin-left: 1rem;
@@ -26,6 +36,7 @@ const CommentHead = styled.div`
2636
color: ${palette.gray8};
2737
}
2838
.date {
39+
margin-top: 0.5rem;
2940
color: ${palette.gray6};
3041
font-size: 0.875rem;
3142
}
@@ -40,9 +51,9 @@ const CommentHead = styled.div`
4051
color: ${palette.gray5};
4152
text-decoration: underline;
4253
}
43-
& + & {
44-
margin-left: 0.5rem;
45-
}
54+
}
55+
span + span {
56+
margin-left: 0.5rem;
4657
}
4758
}
4859
`;
@@ -54,6 +65,7 @@ const CommentFoot = styled.div`
5465
display: flex;
5566
align-items: center;
5667
color: ${palette.teal6};
68+
font-weight: bold;
5769
svg {
5870
margin-right: 0.5rem;
5971
}
@@ -71,7 +83,7 @@ const PostCommentItem: React.FC<PostCommentItemProps> = ({ comment }) => {
7183
<CommentHead>
7284
<div className="profile">
7385
<img
74-
src={user.profile.thumbnail || ''}
86+
src={user.profile.thumbnail || userThumbnail}
7587
alt="comment-user-thumbnail"
7688
/>
7789
<div className="comment-info">

‎src/components/post/PostCommentsList.tsx

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
11
import * as React from 'react';
22
import styled from 'styled-components';
3+
import { Comment } from '../../lib/graphql/post';
4+
import PostCommentItem from './PostCommentItem';
35

46
const PostCommentsListBlock = styled.div``;
57

6-
export interface PostCommentsListProps {}
8+
export interface PostCommentsListProps {
9+
comments: Comment[];
10+
}
711

8-
const PostCommentsList: React.FC<PostCommentsListProps> = props => {
9-
return <PostCommentsListBlock />;
12+
const PostCommentsList: React.FC<PostCommentsListProps> = ({ comments }) => {
13+
return (
14+
<PostCommentsListBlock>
15+
{comments.map(comment => (
16+
<PostCommentItem comment={comment} key={comment.id} />
17+
))}
18+
</PostCommentsListBlock>
19+
);
1020
};
1121

1222
export default PostCommentsList;

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import * as React from 'react';
2+
import { render } from 'react-testing-library';
3+
import PostCommentsList, { PostCommentsListProps } from '../PostCommentsList';
4+
5+
describe('PostCommentsList', () => {
6+
const sampleComments = [
7+
{
8+
id: 'a38d0552-d2a4-4079-96ca-09aef72f00e1',
9+
user: {
10+
id: '0bcdf3e5-a228-42c3-8b52-3f0dc118dfd8',
11+
username: 'blablabla',
12+
profile: {
13+
thumbnail: null,
14+
},
15+
},
16+
text: 'Comment #1',
17+
replies_count: 0,
18+
created_at: '2019-06-15T14:22:28.198Z',
19+
},
20+
{
21+
id: '069f8843-44bb-483b-94f7-fca4cf9fcf4a',
22+
user: {
23+
id: '0bcdf3e5-a228-42c3-8b52-3f0dc118dfd8',
24+
username: 'blablabla',
25+
profile: {
26+
thumbnail: null,
27+
},
28+
},
29+
text: 'Comment #2',
30+
replies_count: 0,
31+
created_at: '2019-06-17T14:19:03.263Z',
32+
},
33+
{
34+
id: 'd93d1975-f99e-415f-9d41-594a7ff6921a',
35+
user: {
36+
id: '0bcdf3e5-a228-42c3-8b52-3f0dc118dfd8',
37+
username: 'blablabla',
38+
profile: {
39+
thumbnail: null,
40+
},
41+
},
42+
text: 'Comment #3',
43+
replies_count: 0,
44+
created_at: '2019-06-17T14:24:14.457Z',
45+
},
46+
];
47+
const setup = (props: Partial<PostCommentsListProps> = {}) => {
48+
const initialProps: PostCommentsListProps = {
49+
comments: sampleComments,
50+
};
51+
const utils = render(<PostCommentsList {...initialProps} {...props} />);
52+
return {
53+
...utils,
54+
};
55+
};
56+
it('renders comment list', () => {
57+
const { getByText } = setup();
58+
getByText('Comment #1');
59+
getByText('Comment #2');
60+
getByText('Comment #3');
61+
});
62+
});

‎src/containers/post/PostComments.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from 'react';
22
import PostCommentsTemplate from '../../components/post/PostCommentsTemplate';
33
import PostCommentsWriteContainer from './PostCommentsWriteContainer';
44
import { Comment } from '../../lib/graphql/post';
5+
import PostCommentsList from '../../components/post/PostCommentsList';
56

67
export interface PostCommentsProps {
78
comments: Comment[];
@@ -12,6 +13,7 @@ const PostComments: React.FC<PostCommentsProps> = ({ comments, postId }) => {
1213
return (
1314
<PostCommentsTemplate count={comments.length}>
1415
<PostCommentsWriteContainer postId={postId} />
16+
<PostCommentsList comments={comments} />
1517
</PostCommentsTemplate>
1618
);
1719
};

‎src/containers/post/PostCommentsWriteContainer.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,20 @@ const PostCommentsWriteContainer: React.FC<PostCommentsWriteContainerProps> = ({
3131
},
3232
});
3333
setComment('');
34-
client.query({
34+
await client.query({
3535
query: RELOAD_COMMENTS,
3636
variables: {
3737
id: postId,
3838
},
3939
fetchPolicy: 'network-only',
4040
});
41-
} catch (e) {}
41+
} catch (e) {
42+
console.log(e);
43+
}
4244
};
45+
if (error) {
46+
console.log(error);
47+
}
4348
return (
4449
<PostCommentsWrite
4550
onChange={onChange}

‎src/lib/graphql/post.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,7 @@ export const RELOAD_COMMENTS = gql`
160160
}
161161
text
162162
replies_count
163+
created_at
163164
}
164165
}
165166
}

‎yarn.lock

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1333,10 +1333,10 @@
13331333
resolved "https://registry.yarnpkg.com/@types/snakecase-keys/-/snakecase-keys-2.1.0.tgz#d64fe4793a2a2b143644415d299c69748e911e66"
13341334
integrity sha512-yoDyTa4SBpcENbp+X5voveHWKGJUBBqYeF3Ua5jsatVgyO6ZVCBTDKm5JByb3KIOZJ6AuBpkwHMdIFL/MTfFMg==
13351335

1336-
"@types/styled-components@^4.1.14":
1337-
version "4.1.14"
1338-
resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.1.14.tgz#fe029b0bfb2d26af7f9bd4dd4811b31961ff6d49"
1339-
integrity sha512-X5t+uomPU9vxWNnfEpw2W7RtJDpsWCsBizQq95gB2QXrG5qsALV1/H7tfv4xYhTmiG5CGtcbfp4nU4yhhEqTsw==
1336+
"@types/styled-components@^4.1.16":
1337+
version "4.1.16"
1338+
resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.1.16.tgz#63fb33d02bc41d70a3af88711849b6df5d2a58e0"
1339+
integrity sha512-h4VtEopz0AS2oAbZlVSG1gnEhvx0LXcmYn9jD/y8Z/OHimsQygYFeDPbUDH/rJOaQu3T+PgAgRtOTG2IZyUTVg==
13401340
dependencies:
13411341
"@types/react" "*"
13421342
"@types/react-native" "*"
@@ -6238,6 +6238,11 @@ is-utf8@^0.2.0:
62386238
resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
62396239
integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
62406240

6241+
is-what@^3.2.3:
6242+
version "3.2.3"
6243+
resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.2.3.tgz#50f76f1bd8e56967e15765d1d34302513701997b"
6244+
integrity sha512-c4syLgFnjXTH5qd82Fp/qtUIeM0wA69xbI0KH1QpurMIvDaZFrS8UtAa4U52Dc2qSznaMxHit0gErMp6A/Qk1w==
6245+
62416246
is-whitespace-character@^1.0.0:
62426247
version "1.0.2"
62436248
resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.2.tgz#ede53b4c6f6fb3874533751ec9280d01928d03ed"
@@ -7462,6 +7467,13 @@ memory-fs@^0.4.0, memory-fs@~0.4.1:
74627467
errno "^0.1.3"
74637468
readable-stream "^2.0.1"
74647469

7470+
merge-anything@^2.2.4:
7471+
version "2.2.5"
7472+
resolved "https://registry.yarnpkg.com/merge-anything/-/merge-anything-2.2.5.tgz#37ef13f36359ee64f09c657d2cef45f7e29493f9"
7473+
integrity sha512-WgZGR7EQ1D8pyh57uKBbkPhUCJZLGdMzbDaxL4MDTJSGsvtpGdm8myr6DDtgJwT46xiFBlHqxbveDRpFBWlKWQ==
7474+
dependencies:
7475+
is-what "^3.2.3"
7476+
74657477
merge-deep@^3.0.2:
74667478
version "3.0.2"
74677479
resolved "https://registry.yarnpkg.com/merge-deep/-/merge-deep-3.0.2.tgz#f39fa100a4f1bd34ff29f7d2bf4508fbb8d83ad2"
@@ -10936,17 +10948,18 @@ [email protected]:
1093610948
loader-utils "^1.1.0"
1093710949
schema-utils "^1.0.0"
1093810950

10939-
styled-components@^4.2.0:
10940-
version "4.2.0"
10941-
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.2.0.tgz#811fbbec4d64c7189f6c7482b9eb6fefa7fefef7"
10942-
integrity sha512-L/LzkL3ZbBhqIVHdR7DbYujy4tqvTNRfc+4JWDCYyhTatI+8CRRQUmdaR0+ARl03DWsfKLhjewll5uNLrqrl4A==
10951+
styled-components@^4.3.1:
10952+
version "4.3.1"
10953+
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.3.1.tgz#18c3709f4ed9d582cd206b1acd8b758a211dd114"
10954+
integrity sha512-04XKQFFSEx3qTeN5I4kiSeajrwG6juDMw2+vUgvfxeXFegE40TuPKS4fFey8RJP1Ii1AoVQVUOglrdUUey0ZHw==
1094310955
dependencies:
1094410956
"@babel/helper-module-imports" "^7.0.0"
1094510957
"@emotion/is-prop-valid" "^0.7.3"
1094610958
"@emotion/unitless" "^0.7.0"
1094710959
babel-plugin-styled-components ">= 1"
1094810960
css-to-react-native "^2.2.2"
1094910961
memoize-one "^5.0.0"
10962+
merge-anything "^2.2.4"
1095010963
prop-types "^15.5.4"
1095110964
react-is "^16.6.0"
1095210965
stylis "^3.5.0"

0 commit comments

Comments
 (0)