|
- import { Component, h, Fragment } from 'preact';
- import classes from './AnnotationsList.module.scss';
- import { Annotation } from '../storage/Annotation';
- import { getTargetUrls } from 'web-annotation-utils';
- import { IAnnotationSource } from '../storage/AnnotationSource';
- import { AnnotationBody } from '../content_script/AnnotationBody';
-
- interface AnnotationsListProps {
- source?: IAnnotationSource;
- withTotal?: boolean;
- }
-
- interface AnnotationsListState {
- annotations?: Annotation[];
- totalAnnotationCount?: number;
- }
-
- export class AnnotationsList extends Component<
- AnnotationsListProps,
- AnnotationsListState
- > {
- state: AnnotationsListState = {};
-
- async componentDidMount() {
- await this.loadData();
- }
-
- async componentDidUpdate(previousProps: Readonly<AnnotationsListProps>) {
- if (
- previousProps.source?.lastModified !== this.props.source?.lastModified
- ) {
- this.loadData();
- }
- }
-
- async loadData() {
- let annotations;
- if (this.props.source) {
- if (this.props.source._id === undefined)
- throw new Error(`Got source without an _id`);
- annotations = await Annotation.getAnnotationsFromSource(
- this.props.source._id,
- );
- } else {
- annotations = await Annotation.getAll();
- }
- this.setState({ annotations });
- }
-
- render(
- { withTotal }: AnnotationsListProps,
- { annotations }: AnnotationsListState,
- ) {
- const annotationList = annotations?.map((annotation) => {
- const webAnnotation = annotation.data.annotation;
- return (
- <li class={classes.annotationWrapper} key={annotation.data._id}>
- <div class={classes.annotationBody}>
- <AnnotationBody
- body={webAnnotation.body}
- bodyValue={webAnnotation.bodyValue}
- />
- </div>
- <div>
- On:{' '}
- {getTargetUrls(webAnnotation.target).map((url) => (
- <><a href={url}>{url}</a>{' '}</>
- ))}
- </div>
- {' '}
- {/* <div class={classes.viewAsJson}>
- <a target="_blank" href={`data:application/json,${encodeURIComponent(JSON.stringify(annotation.data.annotation, null, 2))}`}>View annotation JSON</a>
- </div> */}
- </li>
- );
- });
-
- return (
- <>
- {annotationList ? (
- <ul class={classes.annotationList}>{annotationList}</ul>
- ) : (
- <p>
- <i>Loading…</i>
- </p>
- )}
- {withTotal && (
- <p>Total: {this.state.annotations?.length ?? <i>'counting…'</i>}</p>
- )}
- </>
- );
- }
- }
|