feat: profile images in the comments link to profile page

__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,

__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 = {

__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,

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 (
     <Container data-testid="comment">
       <Header>
-        <RoundedImage
-          imgSrc={comment.author.image}
-          imgAlt={`${comment.author.name}'s profile image`}
-          background="var(--theme-background-highlight)"
-        />
+        <ProfileLink user={comment.author} />
         <Metadata>
           <CommentAuthor>{comment.author.name}</CommentAuthor>
           <CommentPublishDate dateTime={comment.createdAt}>

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

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<HTMLAnchorElement> {
+  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 (
+    <Container
+      href={user.permalink}
+      title={`Go to ${user.name}'s profile`}
+      {...props}
+    >
+      <Image
+        imgSrc={user.image}
+        imgAlt={`${user.name}'s profile image`}
+        background="var(--theme-background-highlight)"
+      />
+    </Container>
+  );
+}

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({
     <Container data-testid="subcomment">
       <ProfileContainer>
         <Timeline data-testid="timeline" firstComment={firstComment} />
-        <SmallRoundedImage
-          imgSrc={comment.author.image}
-          imgAlt={`${comment.author.name}'s profile image`}
-          background="var(--theme-background-highlight)"
-        />
+        <SmallProfileLink user={comment.author} />
       </ProfileContainer>
       <ContentContainer>
         <SubCommentBox>

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,35 +118,26 @@ 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;
 }
 
 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`