Convert `AnnotationBody` to TS

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

@@ -6,6 +6,9 @@ import {
 import classnames from 'classnames';
 import { useMemo, useState } from 'preact/hooks';
 
+import type { Annotation } from '../../../types/api';
+import type { SidebarSettings } from '../../../types/config';
+
 import { useSidebarStore } from '../../store';
 import { isThirdPartyUser } from '../../helpers/account-id';
 import { isHidden } from '../../helpers/annotation-metadata';
@@ -17,20 +20,20 @@ import MarkdownView from '../MarkdownView';
 import TagList from '../TagList';
 import TagListItem from '../TagListItem';
 
-/**
- * @typedef {import("../../../types/api").Annotation} Annotation
- * @typedef {import("../../../types/config").SidebarSettings} SidebarSettings
- */
+type ToggleExcerptButtonProps = {
+  classes?: string;
+  setCollapsed: (collapse: boolean) => void;
+  collapsed: boolean;
+};
 
 /**
  * Button to expand or collapse the annotation excerpt (content)
- *
- * @param {object} props
- *   @param {string} [props.classes]
- *   @param {(collapse:boolean) => void} props.setCollapsed
- *   @param {boolean} props.collapsed
  */
-function ToggleExcerptButton({ classes, setCollapsed, collapsed }) {
+function ToggleExcerptButton({
+  classes,
+  setCollapsed,
+  collapsed,
+}: ToggleExcerptButtonProps) {
   const toggleText = collapsed ? 'More' : 'Less';
   return (
     <Button
@@ -51,18 +54,17 @@ function ToggleExcerptButton({ classes, setCollapsed, collapsed }) {
   );
 }
 
-/**
- * @typedef AnnotationBodyProps
- * @prop {Annotation} annotation - The annotation in question
- * @prop {SidebarSettings} settings
- */
+export type AnnotationBodyProps = {
+  annotation: Annotation;
+
+  // injected
+  settings: SidebarSettings;
+};
 
 /**
  * Display the rendered content of an annotation.
- *
- * @param {AnnotationBodyProps} props
  */
-function AnnotationBody({ annotation, settings }) {
+function AnnotationBody({ annotation, settings }: AnnotationBodyProps) {
   // Should the text content of `Excerpt` be rendered in a collapsed state,
   // assuming it is collapsible (exceeds allotted collapsed space)?
   const [collapsed, setCollapsed] = useState(true);
@@ -88,10 +90,7 @@ function AnnotationBody({ annotation, settings }) {
     [annotation, defaultAuthority]
   );
 
-  /**
-   * @param {string} tag
-   */
-  const createTagSearchURL = tag => {
+  const createTagSearchURL = (tag: string) => {
     return store.getLink('search.tag', { tag });
   };