From 710c5934b57c5c5c5527d500194d3d318c731eb6 Mon Sep 17 00:00:00 2001 From: Ido Shamun Date: Sun, 27 Sep 2020 14:49:14 +0300 Subject: [PATCH 1/3] feat: profile images in the comments link to profile page --- components/MainComment.tsx | 14 +++----------- components/SubComment.tsx | 11 +++-------- graphql/comments.ts | 2 ++ 3 files changed, 8 insertions(+), 19 deletions(-) diff --git a/components/MainComment.tsx b/components/MainComment.tsx index 40010596bc..60c98b4ab4 100644 --- a/components/MainComment.tsx +++ b/components/MainComment.tsx @@ -1,16 +1,12 @@ import React, { ReactElement } from 'react'; import styled from 'styled-components'; import { Comment } from '../graphql/comments'; -import { - CommentBox, - CommentAuthor, - CommentPublishDate, - RoundedImage, -} from './utilities'; +import { CommentBox, CommentAuthor, CommentPublishDate } from './utilities'; import { commentDateFormat } from '../lib/dateFormat'; import { size2, size4 } from '../styles/sizes'; import CommentActionButtons from './CommentActionButtons'; import SubComment from './SubComment'; +import { ProfileLink } from './ProfileLink'; export interface Props { comment: Comment; @@ -48,11 +44,7 @@ export default function MainComment({ return (
- + {comment.author.name} diff --git a/components/SubComment.tsx b/components/SubComment.tsx index 6410e03c2c..e6559f90e9 100644 --- a/components/SubComment.tsx +++ b/components/SubComment.tsx @@ -2,10 +2,10 @@ import React, { ReactElement } from 'react'; import { Comment } from '../graphql/comments'; import styled from 'styled-components'; import { size1, size2, size4, size8 } from '../styles/sizes'; -import LazyImage from './LazyImage'; import { CommentAuthor, CommentBox, CommentPublishDate } from './utilities'; import { commentDateFormat } from '../lib/dateFormat'; import CommentActionButtons from './CommentActionButtons'; +import { ProfileLink } from './ProfileLink'; export interface Props { comment: Comment; @@ -25,10 +25,9 @@ const ProfileContainer = styled.div` position: relative; `; -const SmallRoundedImage = styled(LazyImage)` +const SmallProfileLink = styled(ProfileLink)` width: ${size8}; height: ${size8}; - border-radius: 100%; `; const ContentContainer = styled.div` @@ -69,11 +68,7 @@ export default function SubComment({ - + diff --git a/graphql/comments.ts b/graphql/comments.ts index 05a889acdd..1fae35f57c 100644 --- a/graphql/comments.ts +++ b/graphql/comments.ts @@ -7,6 +7,7 @@ export interface CommentAuthor { id: string; name: string; image: string; + permalink: string; } export interface Comment { @@ -33,6 +34,7 @@ export const COMMENT_FRAGMENT = gql` id name image + permalink } } `; From 309a32d6a52f9e5d9775ee3518308d719dcc43cb Mon Sep 17 00:00:00 2001 From: Ido Shamun Date: Sun, 27 Sep 2020 14:50:57 +0300 Subject: [PATCH 2/3] refactor: add missing files --- components/ProfileLink.tsx | 45 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 components/ProfileLink.tsx diff --git a/components/ProfileLink.tsx b/components/ProfileLink.tsx new file mode 100644 index 0000000000..e75ec97c4c --- /dev/null +++ b/components/ProfileLink.tsx @@ -0,0 +1,45 @@ +import React, { HTMLAttributes, ReactElement } from 'react'; +import styled from 'styled-components'; +import { size10 } from '../styles/sizes'; +import LazyImage from './LazyImage'; + +interface User { + name: string; + image: string; + permalink: string; +} + +export interface ProfileLinkProps extends HTMLAttributes { + user: User; +} + +const Container = styled.a` + display: block; + width: ${size10}; + height: ${size10}; +`; + +const Image = styled(LazyImage)` + width: 100%; + height: 100%; + border-radius: 100%; +`; + +export function ProfileLink({ + user, + ...props +}: ProfileLinkProps): ReactElement { + return ( + + + + ); +} From e4b06f4a5853230c3f6f3c4770261a6c063fa57b Mon Sep 17 00:00:00 2001 From: Ido Shamun Date: Sun, 27 Sep 2020 15:04:16 +0300 Subject: [PATCH 3/3] fix: types mismatch --- __tests__/CommentActionButtons.tsx | 1 + __tests__/MainComment.tsx | 1 + __tests__/SubComment.tsx | 1 + components/NewCommentModal.tsx | 7 ------- graphql/comments.ts | 17 ++++------------- 5 files changed, 7 insertions(+), 20 deletions(-) diff --git a/__tests__/CommentActionButtons.tsx b/__tests__/CommentActionButtons.tsx index cf7b0d3eaa..dd55c1ae91 100644 --- a/__tests__/CommentActionButtons.tsx +++ b/__tests__/CommentActionButtons.tsx @@ -38,6 +38,7 @@ const baseComment = { image: 'https://daily.dev/ido.png', id: 'u1', name: 'Ido', + permalink: 'https://daily.dev/ido', }, createdAt: new Date().toISOString(), upvoted: false, diff --git a/__tests__/MainComment.tsx b/__tests__/MainComment.tsx index 0dd6251148..ef64018890 100644 --- a/__tests__/MainComment.tsx +++ b/__tests__/MainComment.tsx @@ -9,6 +9,7 @@ const author = { image: 'https://daily.dev/ido.png', id: 'u1', name: 'Ido', + permalink: 'https://daily.dev/ido', }; const baseComment = { diff --git a/__tests__/SubComment.tsx b/__tests__/SubComment.tsx index ab825ee653..95aed56f0a 100644 --- a/__tests__/SubComment.tsx +++ b/__tests__/SubComment.tsx @@ -12,6 +12,7 @@ const baseComment = { image: 'https://daily.dev/ido.png', id: 'u1', name: 'Ido', + permalink: 'https://daily.dev/ido', }, createdAt: new Date(2017, 1, 10, 0, 0).toISOString(), upvoted: false, diff --git a/components/NewCommentModal.tsx b/components/NewCommentModal.tsx index 565fb27bdb..5996b9100a 100644 --- a/components/NewCommentModal.tsx +++ b/components/NewCommentModal.tsx @@ -166,14 +166,7 @@ export default function NewCommentModal({ __typename: 'CommentEdge', node: { ...data.comment, - upvoted: false, - author: { - id: user.id, - name: user.name, - image: user.image, - }, }, - // TODO: need to update the cursor somehow cursor: '', }; // Update the sub tree of the parent comment diff --git a/graphql/comments.ts b/graphql/comments.ts index 1fae35f57c..fb49f727f5 100644 --- a/graphql/comments.ts +++ b/graphql/comments.ts @@ -118,15 +118,6 @@ export const CANCEL_COMMENT_UPVOTE_MUTATION = gql` } `; -export const COMMENT_MUTATION_FRAGMENT = gql` - fragment CommentMutationFragment on Comment { - id - content - createdAt - permalink - } -`; - export interface CommentOnData { comment: Comment; } @@ -134,19 +125,19 @@ export interface CommentOnData { export const COMMENT_ON_POST_MUTATION = gql` mutation COMMENT_ON_POST_MUTATION($id: ID!, $content: String!) { comment: commentOnPost(postId: $id, content: $content) { - ...CommentMutationFragment + ...CommentFragment } } - ${COMMENT_MUTATION_FRAGMENT} + ${COMMENT_FRAGMENT} `; export const COMMENT_ON_COMMENT_MUTATION = gql` mutation COMMENT_ON_COMMENT_MUTATION($id: ID!, $content: String!) { comment: commentOnComment(commentId: $id, content: $content) { - ...CommentMutationFragment + ...CommentFragment } } - ${COMMENT_MUTATION_FRAGMENT} + ${COMMENT_FRAGMENT} `; export const DELETE_COMMENT_MUTATION = gql`