Commit 6dad6f3a authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner

Convert AnnotationTimestamps to TS

parent 92da12dd
......@@ -73,7 +73,7 @@ function AnnotationHeader({
// Link (URL) to single-annotation view for this annotation, if it has
// been provided by the service. Note: this property is not currently
// present on third-party annotations.
const annotationUrl = annotation.links?.html || '';
const annotationURL = annotation.links?.html || '';
const showEditedTimestamp = useMemo(() => {
return hasBeenEdited(annotation) && !isCollapsedReply;
......@@ -92,7 +92,7 @@ function AnnotationHeader({
// is a third-party annotation.
// Also, of course, verify that there is a URL to the document (titleLink)
const documentLink =
annotationUrl && documentInfo.titleLink ? documentInfo.titleLink : '';
annotationURL && documentInfo.titleLink ? documentInfo.titleLink : '';
// Show document information on non-sidebar routes, assuming there is a title
// to show, at the least
const showDocumentInfo =
......@@ -131,7 +131,7 @@ function AnnotationHeader({
<AnnotationTimestamps
annotationCreated={annotation.created}
annotationUpdated={annotation.updated}
annotationUrl={annotationUrl}
annotationURL={annotationURL}
withEditedTimestamp={showEditedTimestamp}
/>
</div>
......
......@@ -7,14 +7,13 @@ import {
formatDate,
} from '../../util/time';
/**
* @typedef AnnotationTimestampsProps
* @prop {string} annotationCreated
* @prop {string} annotationUpdated
* @prop {string} [annotationUrl]
* @prop {boolean} [withEditedTimestamp] - Should a timestamp for when this
* annotation was last edited be rendered?
*/
export type AnnotationTimestampProps = {
annotationCreated: string;
annotationUpdated: string;
annotationURL?: string;
/** Display a relative last-updated timestamp */
withEditedTimestamp?: boolean;
};
/**
* Render textual timestamp information for an annotation. This includes
......@@ -29,9 +28,9 @@ import {
export default function AnnotationTimestamps({
annotationCreated,
annotationUpdated,
annotationUrl,
annotationURL,
withEditedTimestamp,
}) {
}: AnnotationTimestampProps) {
// "Current" time, used when calculating the relative age of `timestamp`.
const [now, setNow] = useState(() => new Date());
const createdDate = useMemo(
......@@ -88,14 +87,14 @@ export default function AnnotationTimestamps({
({editedString}){' '}
</span>
)}
{annotationUrl ? (
{annotationURL ? (
<LinkBase
// The light-text hover color is not a standard color for a Link, so
// LinkBase is used here
classes="text-color-text-light hover:text-color-text-light hover:underline"
target="_blank"
title={created.absolute}
href={annotationUrl}
href={annotationURL}
>
{created.relative}
</LinkBase>
......
......@@ -14,7 +14,7 @@ describe('AnnotationTimestamps', () => {
<AnnotationTimestamps
annotationCreated="2015-05-10T20:18:56.613388+00:00"
annotationUpdated="2015-05-10T20:18:56.613388+00:00"
annotationUrl="http://www.example.com"
annotationURL="http://www.example.com"
withEditedTimestamp={false}
{...props}
/>
......@@ -49,7 +49,7 @@ describe('AnnotationTimestamps', () => {
});
it('renders an unlinked created timestamp if annotation does not have a link', () => {
const wrapper = createComponent({ annotationUrl: '' });
const wrapper = createComponent({ annotationURL: '' });
const link = wrapper.find('Link');
const span = wrapper.find('span[data-testid="timestamp-created"]');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment