Ba 2270 clickable profile in comments

packages/components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @baseapp-frontend/components
 
+## 1.0.15
+
+### Patch Changes
+
+- Clickable profile on comments
+
 ## 1.0.14
 
 ### Patch Changes
@@ -11,7 +17,7 @@
 
 ### Patch Changes
 
-- Remove `ProfileSettingsComponent` Appbar, it should now use `AppbarNavigationLayout` layout when it's rendered on a page route. 
+- Remove `ProfileSettingsComponent` Appbar, it should now use `AppbarNavigationLayout` layout when it's rendered on a page route.
 - Updated dependencies
   - @baseapp-frontend/design-system@1.0.6
 

packages/components/cypress/support/commands.ts

@@ -1,8 +1,10 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import '@testing-library/cypress/add-commands'
 import 'cypress-plugin-steps'
+import * as Router from 'next/navigation'
 
 import '../../styles/tailwind/globals.css'
+import { RouterChainable } from './types'
 
 /// <reference types="cypress" />
 // ***********************************************
@@ -41,3 +43,26 @@ import '../../styles/tailwind/globals.css'
 //     }
 //   }
 // }
+
+Cypress.Commands.add('mockNextRouter', () => {
+  const router = {
+    push: cy.stub().as('router:push'),
+    back: cy.stub().as('router:back'),
+    forward: cy.stub().as('router:forward'),
+    refresh: cy.stub().as('router:refresh'),
+    replace: cy.stub().as('router:replace'),
+    prefetch: cy.stub().as('router:prefetch'),
+    pathname: '/mock-path',
+  }
+
+  cy.stub(Router, 'useRouter').returns(router)
+  return cy.wrap(router) as unknown as Cypress.Chainable<RouterChainable>
+})
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mockNextRouter(): Cypress.Chainable<RouterChainable>
+    }
+  }
+}

packages/components/cypress/support/types.ts

@@ -0,0 +1,9 @@
+export type RouterChainable = {
+  push: sinon.SinonStub
+  back: sinon.SinonStub
+  forward: sinon.SinonStub
+  refresh: sinon.SinonStub
+  replace: sinon.SinonStub
+  prefetch: sinon.SinonStub
+  pathname: string
+}

packages/components/modules/comments/web/CommentItem/index.tsx

@@ -2,10 +2,12 @@
 
 import { FC, useRef, useState, useTransition } from 'react'
 
+import { ClickableAvatar } from '@baseapp-frontend/design-system/components/web/avatars'
 
 import { Typography } from '@mui/material'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
 import { useRefetchableFragment } from 'react-relay'
-import { AvatarWithPlaceholder } from '@baseapp-frontend/design-system/components/web/avatars'
 
 import { CommentItemRefetchQuery } from '../../../../__generated__/CommentItemRefetchQuery.graphql'
 import { CommentItem_comment$key } from '../../../../__generated__/CommentItem_comment.graphql'
@@ -34,12 +36,14 @@ const CommentItem: FC<CommentItemProps> = ({
   CommentReplyButton = DefaultCommentReplyButton,
   CommentPinnedBadge = DefaultCommentPinnedBadge,
   CommentReactionButton = DefaultCommentReactionButton,
+  profilePath = '/profile',
 }) => {
   const [comment, refetchCommentItem] = useRefetchableFragment<
     CommentItemRefetchQuery,
     CommentItem_comment$key
   >(CommentItemFragmentQuery, commentRef)
   const { setCommentReply } = useCommentReply()
+  const router = useRouter()
 
   const commentItemRef = useRef<HTMLDivElement>(null)
 
@@ -59,6 +63,8 @@ const CommentItem: FC<CommentItemProps> = ({
 
   const [deleteComment, isDeletingComment] = useCommentDeleteMutation()
 
+  const profileUrl = `${profilePath}/${comment?.user?.pk}`
+
   const showReplies = () => {
     if (isReplyExpanded) return
 
@@ -135,16 +141,19 @@ const CommentItem: FC<CommentItemProps> = ({
           ref={commentItemRef}
         >
           <CommentContainer>
-            <AvatarWithPlaceholder
+            <ClickableAvatar
               width={40}
               height={40}
               alt={comment.user?.fullName ?? `Comment's user avatar`}
               src={comment.user?.avatar?.url}
+              onClick={() => router.push(profileUrl)}
             />
             <div className="grid gap-3">
               <div className="grid grid-cols-1 justify-start">
                 <div className="grid grid-cols-[repeat(2,max-content)] items-center gap-2">
-                  <Typography variant="subtitle2">{comment.user?.fullName}</Typography>
+                  <Link href={profileUrl}>
+                    <Typography variant="subtitle2">{comment.user?.fullName}</Typography>
+                  </Link>
                   <CommentPinnedBadge isPinned={comment.isPinned} />
                 </div>
                 {renderCommentContent()}

packages/components/modules/comments/web/CommentItem/types.ts

@@ -34,6 +34,7 @@ export interface CommentItemProps {
   CommentReplyButton?: FC<CommentReplyButtonProps>
   CommentPinnedBadge?: FC<CommentPinnedBadgeProps>
   Timestamp?: FC<TimestampProps>
+  profilePath?: string
 }
 
 export interface CommentContainerWrapperProps extends BoxProps {

packages/components/modules/comments/web/Comments/__tests__/Comments.cy.tsx

@@ -1,5 +1,8 @@
 import { createTestEnvironment } from '@baseapp-frontend/graphql'
 
+import { AppRouterContext } from 'next/dist/shared/lib/app-router-context.shared-runtime'
+import * as Router from 'next/navigation'
+
 import '../../../../../styles/tailwind/globals.css'
 import {
   commentDeleteMockData,
@@ -26,10 +29,17 @@ import CommentsForTesting from './__utils__/CommentsForTesting'
 describe('Comments', () => {
   it('should render comments and be able to interact with it', () => {
     const { environment, resolveMostRecentOperation } = createTestEnvironment()
-
-    cy.mount(<CommentsForTesting environment={environment} />).then(() => {
-      resolveMostRecentOperation({ mockResolvers: commentsResolver })
-    })
+    cy.mockNextRouter()
+      .then((router) => {
+        cy.mount(
+          <AppRouterContext.Provider value={router}>
+            <CommentsForTesting environment={environment} />
+          </AppRouterContext.Provider>,
+        )
+      })
+      .then(() => {
+        resolveMostRecentOperation({ mockResolvers: commentsResolver })
+      })
     cy.findByText('This is a regular comment.').should('exist')
 
     cy.step('Create a comment and check if it was created')
@@ -176,9 +186,18 @@ describe('Comments', () => {
   it('should render more comments when the bottom is reached', () => {
     const { environment, resolveMostRecentOperation } = createTestEnvironment()
     cy.viewport(500, 350)
-    cy.mount(<CommentsForTesting environment={environment} />).then(() => {
-      resolveMostRecentOperation({ mockResolvers: commentsWithNextPageResolver })
-    })
+
+    cy.mockNextRouter()
+      .then((router) => {
+        cy.mount(
+          <AppRouterContext.Provider value={router}>
+            <CommentsForTesting environment={environment} />
+          </AppRouterContext.Provider>,
+        )
+      })
+      .then(() => {
+        resolveMostRecentOperation({ mockResolvers: commentsWithNextPageResolver })
+      })
 
     cy.step('See the first four comments')
     cy.findByText('First comment').should('exist')
@@ -216,12 +235,23 @@ describe('Comments', () => {
   })
 
   it('should be able to render all comment`s replies', () => {
+    const router = {
+      push: cy.stub().as('router:push'),
+    }
+    cy.stub(Router, 'useRouter').returns(router)
     cy.viewport(500, 1000)
     const { environment, resolveMostRecentOperation } = createTestEnvironment()
-    cy.mount(<CommentsForTesting environment={environment} />).then(() => {
-      resolveMostRecentOperation({ mockResolvers: commentsWithElevenRepliesResolver })
-    })
-
+    cy.mockNextRouter()
+      .then((router) => {
+        cy.mount(
+          <AppRouterContext.Provider value={router}>
+            <CommentsForTesting environment={environment} />
+          </AppRouterContext.Provider>,
+        )
+      })
+      .then(() => {
+        resolveMostRecentOperation({ mockResolvers: commentsWithElevenRepliesResolver })
+      })
     cy.step('See the first comment and its replies')
     cy.findByRole('button', { name: /reply to comment comment-with-eleven-replies/i })
       .click()

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/components",
   "description": "BaseApp components modules such as comments, notifications, messages, and more.",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "sideEffects": false,
   "scripts": {
     "babel:transpile": "babel modules -d tmp-babel --extensions .ts,.tsx --ignore '**/__tests__/**','**/__storybook__/**'",