Skip to content

Commit

Permalink
added user image section
Browse files Browse the repository at this point in the history
  • Loading branch information
@AnujChhikara
AnujChhikara committed Nov 24, 2024
1 parent 7dac663 commit 50a018b
Show file tree
Hide file tree
Showing 8 changed files with 209 additions and 54 deletions.
47 changes: 39 additions & 8 deletions __tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { mockGetTaskProgress } from '../../../../../__mocks__/db/progresses';
import { renderWithRouter } from '@/test_utils/createMockRouter';
import { readMoreFormatter } from '@/utils/common';
import { store } from '@/app/store';
import { USER_MANAGEMENT_URL } from '@/constants/url';
import { DEFAULT_AVATAR, USER_MANAGEMENT_URL } from '@/constants/url';

import {
ProgressUpdateCardPresentationProps,
Expand All @@ -19,6 +19,7 @@ import ProgressUpdateCardPresentation from '@/components/taskDetails/ProgressUpd
let initialProps: ProgressUpdateCardPresentationProps;
const titleToShow = mockGetTaskProgress.data[1].completed;
const username = 'mock-user-name';
const profileImageUrl = 'random-profile-pic-url';
const momentDate = moment(mockGetTaskProgress.data[2].createdAt);
const fullDate = momentDate.format('DD-MM-YY');
const time = momentDate.format('hh:mmA');
Expand Down Expand Up @@ -120,6 +121,7 @@ describe('ProgressUpdateCardPresentation Component', () => {
mockedOnCardClick = jest.fn<void, [React.MouseEvent<HTMLElement>]>();
initialProps = {
username: username,
profileImageUrl: profileImageUrl,
titleToShow: titleToShow,
isExpanded: false,
dateInAgoFormat: dateInAgoFormat,
Expand Down Expand Up @@ -222,7 +224,7 @@ describe('ProgressUpdateCardPresentation Component', () => {
expect(date).toHaveTextContent(dateInAgoFormat);
});

it('should render the name of the updater', () => {
it('should render the name and profile picture of the updater', () => {
(useRouter as jest.Mock).mockReturnValue({
query: { dev: 'true' },
});
Expand All @@ -235,10 +237,37 @@ describe('ProgressUpdateCardPresentation Component', () => {
</Provider>
);
const usernameElement = screen.getByTestId(
'progress-update-card-username'
'progress-update-card-user-info-container'
);
expect(usernameElement).toBeInTheDocument();
expect(usernameElement.textContent).toContain('mock-user-name');
const profileImageUrlElement = screen.getByTestId(
'progress-update-card-profile-picture'
);

expect(profileImageUrlElement).toBeInTheDocument();
expect(profileImageUrlElement).toHaveAttribute('src', profileImageUrl);
expect(profileImageUrlElement).toHaveAttribute('alt', 'Avatar');
});
it('should display the default avatar if profile url is empty', () => {
(useRouter as jest.Mock).mockReturnValue({
query: { dev: 'true' },
});
const props: ProgressUpdateCardPresentationProps = {
...initialProps,
profileImageUrl: '',
};
renderWithRouter(
<Provider store={store()}>
<ProgressUpdateCardPresentation {...props} />
</Provider>
);
const profileImageUrlElement = screen.getByTestId(
'progress-update-card-profile-picture'
);

expect(profileImageUrlElement).toBeInTheDocument();
expect(profileImageUrlElement).toHaveAttribute('src', DEFAULT_AVATAR);
});
it('should render the updater name as a link with the correct href', () => {
(useRouter as jest.Mock).mockReturnValue({
Expand All @@ -254,7 +283,7 @@ describe('ProgressUpdateCardPresentation Component', () => {
);

const linkElement = screen
.getByTestId('progress-update-card-username')
.getByTestId('progress-update-card-user-info-container')
.querySelector('a');
expect(linkElement).toBeInTheDocument();
expect(linkElement).toHaveAttribute(
Expand All @@ -263,7 +292,7 @@ describe('ProgressUpdateCardPresentation Component', () => {
);
expect(linkElement?.textContent).toContain(username);
});
it('should prevent event propagation when clicking on the username link', () => {
it('should prevent event propagation when clicking on the user info container', () => {
(useRouter as jest.Mock).mockReturnValue({
query: { dev: 'true' },
});
Expand All @@ -274,16 +303,18 @@ describe('ProgressUpdateCardPresentation Component', () => {
</Provider>
);

const usernameLink = screen.getByRole('link', { name: username });
const userInfoContainer = screen.getByTestId(
'progress-update-card-user-info-container'
);

const stopPropagationMock = jest.fn();

usernameLink.addEventListener(
userInfoContainer.addEventListener(
'click',
(event) => (event.stopPropagation = stopPropagationMock)
);

fireEvent.click(usernameLink);
fireEvent.click(userInfoContainer);
expect(stopPropagationMock).toHaveBeenCalled();
});

Expand Down
6 changes: 4 additions & 2 deletions src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,9 @@ export default function LatestProgressUpdateCard({
const { data: userData } = useGetUserDetailsByIdQuery({
searchString: userId,
});
const username = userData?.user?.username ?? '';
const profileImageUrl = userData?.user?.picture?.url ?? '';

const username = userData?.user?.username;
const dateInAgoFormat = momentDate.fromNow();
const fullDate = momentDate.format('dddd, MMMM DD, YYYY, hh:mm A [GMT] Z');
const tooltipText = `Updated at ${fullDate}`;
Expand Down Expand Up @@ -79,7 +80,8 @@ export default function LatestProgressUpdateCard({

return (
<LatestProgressUpdateCardPresentation
username={username ?? ''}
username={username}
profileImageUrl={profileImageUrl}
dataToShowState={dataToShowState}
tooltipText={tooltipText}
onMoreOrLessButtonClick={onMoreOrLessButtonClick}
Expand Down
29 changes: 25 additions & 4 deletions src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@ import {
import Tooltip from '@/components/common/Tooltip/Tooltip';
import styles from './latest-progress-update-card.module.scss';
import { USER_MANAGEMENT_URL } from '@/constants/url';

import { DEFAULT_AVATAR } from '@/constants/url';
export default function LatestProgressUpdateCardPresentation({
username,
profileImageUrl,
dataToShowState,
tooltipText,
onMoreOrLessButtonClick,
Expand Down Expand Up @@ -90,15 +91,35 @@ export default function LatestProgressUpdateCardPresentation({
</Tooltip>
{isDevMode && (
<span
data-testid="latest-progress-update-card-username"
data-testid="latest-progress-update-card-user-info-container"
className={
styles['latest-progress-update-card-username']
styles[
'latest-progress-update-card__user-info-container'
]
}
>
by &nbsp;
by
<a
href={`${USER_MANAGEMENT_URL}?username=${username}`}
className={
styles[
'latest-progress-update-card__user-info-link'
]
}
>
<img
src={
profileImageUrl == ''
? DEFAULT_AVATAR
: profileImageUrl
}
alt={'Avatar'}
className={
styles[
'latest-progress-update-card__profile-picture'
]
}
/>
{username}
</a>
</span>
Expand Down
6 changes: 4 additions & 2 deletions src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,9 @@ export default memo(function ProgressUpdateCard({
const { data: userData } = useGetUserDetailsByIdQuery({
searchString: userId,
});
const username = userData?.user?.username ?? '';
const profileImageUrl = userData?.user?.picture?.url ?? '';

const username = userData?.user?.username;
const charactersToShow = 70;
const readMoreTitle = readMoreFormatter(data?.completed, charactersToShow);
const titleToShow = readMoreTitle;
Expand Down Expand Up @@ -79,7 +80,8 @@ export default memo(function ProgressUpdateCard({
}
return (
<ProgressUpdateCardPresentation
username={username ?? ''}
username={username}
profileImageUrl={profileImageUrl}
dataToShowState={dataToShowState}
titleToShow={titleToShow}
onMoreOrLessButtonClick={onMoreOrLessButtonClick}
Expand Down
110 changes: 73 additions & 37 deletions src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,11 @@ import {
ProgressUpdateCardPresentationProps,
ProgressUpdateDataToShow,
} from './progressUpdateCard.types';
import { USER_MANAGEMENT_URL } from '@/constants/url';
import { DEFAULT_AVATAR, USER_MANAGEMENT_URL } from '@/constants/url';

export default function ProgressUpdateCardPresentation({
username,
profileImageUrl,
titleToShow,
dateInAgoFormat,
tooltipString,
Expand Down Expand Up @@ -66,53 +67,88 @@ export default function ProgressUpdateCardPresentation({
<h3 className={styles['progress-update-card__title']}>
{titleToShow}
</h3>

<Tooltip
tooltipPosition={
isDevMode
? { top: '-2.4rem', right: '4rem' }
: { top: '-25px', right: '-2rem' }
<div
className={
styles['progress-update-card__details-container']
}
content={tooltipString}
>
<span
className={
styles['progress-update-card__date-container']
<Tooltip
tooltipPosition={
isDevMode
? { top: '-2.4rem', right: '4rem' }
: { top: '-25px', right: '-2rem' }
}
onClick={(event) => event.stopPropagation()}
data-testid="progress-update-card-date"
content={tooltipString}
>
<FaRegClock />
<span
className={
styles['progress-update-card__date-text']
styles[
'progress-update-card__date-container'
]
}
onClick={(event) => event.stopPropagation()}
data-testid="progress-update-card-date"
>
{dateInAgoFormat}
<FaRegClock />
<span
className={
styles[
'progress-update-card__date-text'
]
}
>
{dateInAgoFormat}
</span>
</span>
</span>
</Tooltip>
</Tooltip>

{isDevMode && (
<span
data-testid="progress-update-card-username"
onClick={(event) => event.stopPropagation()}
>
by &nbsp;
<a
href={`${USER_MANAGEMENT_URL}?username=${username}`}
{isDevMode && (
<span
data-testid="progress-update-card-user-info-container"
className={
styles[
'progress-update-card__user-info-container'
]
}
onClick={(event) => event.stopPropagation()}
>
{username}
</a>
</span>
)}
<FaAngleRight
data-testid="progress-update-card-angle-icon"
style={{
transform: isExpanded ? 'rotate(90deg)' : 'none',
transition: 'transform 1s',
}}
/>
by
<a
href={`${USER_MANAGEMENT_URL}?username=${username}`}
className={
styles[
'progress-update-card__user-info-link'
]
}
>
<img
src={
profileImageUrl == ''
? DEFAULT_AVATAR
: profileImageUrl
}
alt={'Avatar'}
data-testid="progress-update-card-profile-picture"
className={
styles[
'progress-update-card__profile-picture'
]
}
/>{' '}
{username}
</a>
</span>
)}
<FaAngleRight
data-testid="progress-update-card-angle-icon"
style={{
transform: isExpanded
? 'rotate(90deg)'
: 'none',
transition: 'transform 1s',
}}
/>
</div>
</div>

<div
Expand Down
24 changes: 23 additions & 1 deletion src/components/taskDetails/ProgressUpdateCard/latest-progress-update-card.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,9 @@
&:last-of-type {
display: flex;
justify-content: flex-end;
@media (width<=425px) {
justify-content: flex-start;
}
}

.latest-progress-update-card__more-less-button {
Expand All @@ -67,13 +70,32 @@
.latest-progress-update-card__date-container {
position: relative;
display: flex;
align-items: center;
justify-content: start;
gap: 5px;
z-index: 0;
cursor: pointer;
font-size: 0.934rem;
}
.latest-progress-update-card-username {
.latest-progress-update-card__user-info-container {
font-size: 1rem;
display: flex;
align-items: center;
gap: 4px;
}
.latest-progress-update-card__user-info-link {
display: flex;
align-items: center;
}
.latest-progress-update-card__profile-picture {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
@media (width<=425px) {
width: 28px;
height: 28px;
}
}
}
}
Loading

0 comments on commit 50a018b

Please sign in to comment.