a75eb0a569
## Description Adds a view for creation date and author to notes and tasks panel. Here is a preview of the new `ActivityCreationDate` component:  Closes #5424 ### Type of change <!-- Please delete options that are not relevant. --> - [x] New feature (non-breaking change which adds functionality) ## Checklist - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [x] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [x] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import styled from '@emotion/styled';
|
|
import { useRecoilState } from 'recoil';
|
|
|
|
import { Activity } from '@/activities/types/Activity';
|
|
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
|
|
import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
|
|
|
|
const StyledCreationDisplay = styled.span`
|
|
color: ${({ theme }) => theme.font.color.light};
|
|
display: flex;
|
|
font-size: ${({ theme }) => theme.font.size.md};
|
|
user-select: none;
|
|
width: 100%;
|
|
`;
|
|
|
|
type ActivityCreationDateProps = {
|
|
activityId: string;
|
|
};
|
|
|
|
export const ActivityCreationDate = ({
|
|
activityId,
|
|
}: ActivityCreationDateProps) => {
|
|
const [activityInStore] = useRecoilState(recordStoreFamilyState(activityId));
|
|
const activity = activityInStore as Activity;
|
|
|
|
const beautifiedDate = activity.createdAt
|
|
? beautifyPastDateRelativeToNow(activity.createdAt)
|
|
: null;
|
|
|
|
const authorName = activity.author?.name
|
|
? `${activity.author.name.firstName} ${activity.author.name.lastName}`
|
|
: null;
|
|
|
|
if (!activity.createdAt || !authorName) {
|
|
return <></>;
|
|
}
|
|
|
|
return (
|
|
<StyledCreationDisplay>
|
|
Created {beautifiedDate} by {authorName}
|
|
</StyledCreationDisplay>
|
|
);
|
|
};
|