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/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/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/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 ( + + + + ); +} 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..fb49f727f5 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 } } `; @@ -116,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; } @@ -132,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`