Commit 0facdc30 authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner

Convert `ModerationBanner` to TS

parent 72dc229d
...@@ -5,30 +5,31 @@ import { ...@@ -5,30 +5,31 @@ import {
} from '@hypothesis/frontend-shared/lib/next'; } from '@hypothesis/frontend-shared/lib/next';
import classnames from 'classnames'; import classnames from 'classnames';
import type { Annotation } from '../../types/api';
import type { APIService } from '../services/api';
import type { ToastMessengerService } from '../services/toast-messenger';
import { useSidebarStore } from '../store'; import { useSidebarStore } from '../store';
import * as annotationMetadata from '../helpers/annotation-metadata'; import * as annotationMetadata from '../helpers/annotation-metadata';
import { withServices } from '../service-context'; import { withServices } from '../service-context';
/** export type ModerationBannerProps = {
* @typedef {import('../../types/api').Annotation} Annotation annotation: Annotation;
*/
/** // injected
* @typedef ModerationBannerProps api: APIService;
* @prop {Annotation} annotation - toastMessenger: ToastMessengerService;
* The annotation object for this banner. This contains state about the flag count };
* or its hidden value.
* @prop {import('../services/api').APIService} api
* @prop {import('../services/toast-messenger').ToastMessengerService} toastMessenger
*/
/** /**
* Banner allows moderators to hide/unhide the flagged * Banner allows moderators to hide/unhide the flagged annotation from other
* annotation from other users. * users.
*
* @param {ModerationBannerProps} props
*/ */
function ModerationBanner({ annotation, api, toastMessenger }) { function ModerationBanner({
annotation,
api,
toastMessenger,
}: ModerationBannerProps) {
const store = useSidebarStore(); const store = useSidebarStore();
const flagCount = annotationMetadata.flagCount(annotation); const flagCount = annotationMetadata.flagCount(annotation);
...@@ -39,7 +40,7 @@ function ModerationBanner({ annotation, api, toastMessenger }) { ...@@ -39,7 +40,7 @@ function ModerationBanner({ annotation, api, toastMessenger }) {
* Hide an annotation from non-moderator users. * Hide an annotation from non-moderator users.
*/ */
const hideAnnotation = () => { const hideAnnotation = () => {
const id = /** @type {string} */ (annotation.id); const id = annotation.id!;
api.annotation api.annotation
.hide({ id }) .hide({ id })
.then(() => { .then(() => {
...@@ -54,7 +55,7 @@ function ModerationBanner({ annotation, api, toastMessenger }) { ...@@ -54,7 +55,7 @@ function ModerationBanner({ annotation, api, toastMessenger }) {
* Un-hide an annotation from non-moderator users. * Un-hide an annotation from non-moderator users.
*/ */
const unhideAnnotation = () => { const unhideAnnotation = () => {
const id = /** @type {string} */ (annotation.id); const id = annotation.id!;
api.annotation api.annotation
.unhide({ id }) .unhide({ id })
.then(() => { .then(() => {
...@@ -72,9 +73,7 @@ function ModerationBanner({ annotation, api, toastMessenger }) { ...@@ -72,9 +73,7 @@ function ModerationBanner({ annotation, api, toastMessenger }) {
<div <div
className={classnames( className={classnames(
'flex gap-x-3 bg-grey-1 text-color-text font-semibold', 'flex gap-x-3 bg-grey-1 text-color-text font-semibold',
// Vertical margins should ultimately be handled by the parent, but // FIXME: Refactor margins: where possible manage them in a parent
// until we can refactor outer components (e.g. `ThreadCard`), this
// component manages its own bottom margin
'mb-2 ', 'mb-2 ',
{ {
// For top-level annotations, use negative margins to "break out" of // For top-level annotations, use negative margins to "break out" of
......
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