Convert `Annotation` to TS

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

@@ -2,6 +2,7 @@ import { CardActions, Spinner } from '@hypothesis/frontend-shared/lib/next';
 import classnames from 'classnames';
 import { useMemo } from 'preact/hooks';
 
+import type { Annotation as IAnnotation } from '../../../types/api';
 import { useSidebarStore } from '../../store';
 import {
   annotationRole,
@@ -10,6 +11,7 @@ import {
   quote,
 } from '../../helpers/annotation-metadata';
 import { annotationDisplayName } from '../../helpers/annotation-user';
+import type { AnnotationsService } from '../../services/annotations';
 import { withServices } from '../../service-context';
 
 import AnnotationActionBar from './AnnotationActionBar';
@@ -19,21 +21,6 @@ import AnnotationHeader from './AnnotationHeader';
 import AnnotationQuote from './AnnotationQuote';
 import AnnotationReplyToggle from './AnnotationReplyToggle';
 
-/**
- * @typedef {import("../../../types/api").Annotation} Annotation
- */
-
-/**
- * @typedef AnnotationProps
- * @prop {Annotation} annotation
- * @prop {boolean} isReply
- * @prop {VoidFunction} [onToggleReplies] - Callback to expand/collapse reply
- *   threads. The presence of a function indicates a toggle should be rendered.
- * @prop {number} replyCount - Number of replies to this annotation's thread
- * @prop {boolean} threadIsCollapsed - Is the thread to which this annotation belongs currently collapsed?
- * @prop {import('../../services/annotations').AnnotationsService} annotationsService
- */
-
 function SavingMessage() {
   return (
     <div
@@ -56,6 +43,24 @@ function SavingMessage() {
     </div>
   );
 }
+
+export type AnnotationProps = {
+  annotation: IAnnotation;
+  isReply: boolean;
+  /** Number of replies to this annotation's thread */
+  replyCount: number;
+  /** Is the thread to which this annotation belongs currently collapsed? */
+  threadIsCollapsed: boolean;
+  /**
+   * Callback to expand/collapse reply threads. The presence of a function
+   * indicates a toggle should be rendered.
+   */
+  onToggleReplies?: () => void;
+
+  // injected
+  annotationsService: AnnotationsService;
+};
+
 /**
  * A single annotation.
  *
@@ -68,7 +73,7 @@ function Annotation({
   replyCount,
   threadIsCollapsed,
   annotationsService,
-}) {
+}: AnnotationProps) {
   const store = useSidebarStore();
 
   const annotationQuote = quote(annotation);