Convert AnnotationTimestamps to TS

src/sidebar/components/Annotation/AnnotationHeader.tsx

@@ -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>

src/sidebar/components/Annotation/AnnotationTimestamps.js → src/sidebar/components/Annotation/AnnotationTimestamps.tsx

@@ -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>

src/sidebar/components/Annotation/test/AnnotationTimestamps-test.js

@@ -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"]');