admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

#2133 Add comments icon and count to Timeline card (#2205)

Browse Source 
* fix

* #2133 added comments icon and count on notes tab

* reverted changes in people-filters.tsx

* added comment icon and count on timeline in People/Companies

* removed infra/dev/scripts/hashicorp.gpg

* added comment count and icon on timeline cards with seperate react component

* used isNonEmptyArray typeguard for array length check

* updated review feedback

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Pallavi Varshney
2023-11-09 07:34:54 -08:00
committed by GitHub
parent f26be4d837
commit c8eda61704
2 changed files with 65 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
front/src/modules/activities/comment/CommentCounter.tsx Normal file
View File

@ -0,0 +1,28 @@
import React from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconComment } from '@/ui/display/icon';
const StyledCommentIcon = styled.div`
align-items: center;
color: ${({ theme }) => theme.font.color.light};
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
`;
const CommentCounter = ({ commentCount }: { commentCount: number }) => {
const theme = useTheme();
return (
<div>
{commentCount > 0 && (
<StyledCommentIcon>
<IconComment size={theme.icon.size.md} />
{commentCount}
</StyledCommentIcon>
)}
</div>
);
};
export default CommentCounter;

59
front/src/modules/activities/timeline/components/TimelineActivityCardFooter.tsx
View File

@ -1,11 +1,13 @@
import { isNonEmptyArray } from '@apollo/client/utilities';
import styled from '@emotion/styled';
import CommentCounter from '@/activities/comment/CommentCounter';
import { UserChip } from '@/users/components/UserChip';
import { Activity, User } from '~/generated/graphql';
import { beautifyExactDate } from '~/utils/date-utils';
type TimelineActivityCardFooterProps = {
activity: Pick<Activity, 'id' | 'dueAt'> & {
activity: Pick<Activity, 'id' | 'dueAt' | 'comments'> & {
assignee?: Pick<User, 'id' | 'displayName' | 'avatarUrl'> | null;
};
};
@ -26,26 +28,39 @@ const StyledVerticalSeparator = styled.div`
height: 24px;
`;
const StyledComment = styled.div`
margin-left: auto;
`;
export const TimelineActivityCardFooter = ({
activity,
}: TimelineActivityCardFooterProps) => (
<>
{(activity.assignee || activity.dueAt) && (
<StyledContainer>
{activity.assignee && (
<UserChip
id={activity.assignee.id}
name={activity.assignee.displayName ?? ''}
pictureUrl={activity.assignee.avatarUrl ?? ''}
/>
)}
{activity.dueAt && (
<>
{activity.assignee && <StyledVerticalSeparator />}
{beautifyExactDate(activity.dueAt)}
</>
)}
</StyledContainer>
)}
</>
);
}: TimelineActivityCardFooterProps) => {
const hasComments = isNonEmptyArray(activity.comments || []);
return (
<>
{(activity.assignee || activity.dueAt || hasComments) && (
<StyledContainer>
{activity.assignee && (
<UserChip
id={activity.assignee.id}
name={activity.assignee.displayName ?? ''}
pictureUrl={activity.assignee.avatarUrl ?? ''}
/>
)}
{activity.dueAt && (
<>
{activity.assignee && <StyledVerticalSeparator />}
{beautifyExactDate(activity.dueAt)}
</>
)}
<StyledComment>
{hasComments && (
<CommentCounter commentCount={activity.comments?.length || 0} />
)}
</StyledComment>
</StyledContainer>
)}
</>
);
};