queue/source/utilities/components/page-main.ts

import {Component, html} from 'htm/preact';
import browser from 'webextension-polyfill';

import Settings from '../settings';
import {Queue} from '../../types.d';
import {Link} from './link';
import {ConfirmButton} from './confirm-button';

type MainProps = {
  settings: Settings;
};

type MainState = {
  queue: Queue.Item[];
};

export class PageMain extends Component<MainProps, MainState> {
  constructor(props: MainProps) {
    super(props);
    this.state = {
      queue: props.settings.queue,
    };
  }

  removeItem = async (id: number) => {
    await this.props.settings.removeItem(id);
    this.setState({queue: this.props.settings.queue});
    await browser.runtime.sendMessage({action: 'queue update badge'});
  };

  render(): Queue.Component {
    const queueItems: Queue.Component[] = this.state.queue
      .sort((a, b) => a.added.getTime() - b.added.getTime())
      .map((item) => html`<${Item} item=${item} remove=${this.removeItem} />`);

    if (queueItems.length === 0) {
      queueItems.push(html`<li>No items queued. 🤷</li>`);
    }

    return html`
      <main class="page-main">
        <ul class="q-list">
          ${queueItems}
        </ul>

        <details class="usage">
          <summary>How do I use Queue?</summary>

          <p>Adding links to your queue:</p>
          <ul>
            <li>Right-click any link or tab and click "Add to Queue".</li>
          </ul>

          <p>Opening the next link from your queue:</p>
          <ul>
            <li>
              Click on the extension icon to open it in the current tab (when
              possible).
            </li>
            <li>
              Right-click the extension icon and click "Open next link in new
              tab".
            </li>
          </ul>

          <p>Opening the extension page:</p>
          <ul>
            <li>Double-click the extension icon.</li>
            <li>
              Right-click the extension icon and click "Open the extension
              page".
            </li>
          </ul>

          <p>Deleting queue items:</p>
          <ul>
            <li>
              Click the red button with the ✗ and then confirm it by clicking
              again.
            </li>
          </ul>
        </details>
      </main>
    `;
  }
}

type ItemProps = {
  item: Queue.Item;
  remove: (id: number) => Promise<void>;
};

function Item(props: ItemProps): Queue.Component {
  const added = props.item.added.toLocaleString();
  const {id, text, url} = props.item;

  return html`
    <li class="q-item">
      <p class="title">
        <${Link} text=${text ?? url} url=${url} />
      </p>

      <div class="buttons">
        <${ConfirmButton}
          class="confirm-button"
          clickHandler=${async () => props.remove(id)}
          confirmClass="confirm"
          confirmText="✓"
          text="✗"
          timeout=${5 * 1000}
          title="Remove"
        />
      </div>

      <p>
        <time datetime=${added} title="Link queued on ${added}.">
          ${added}
        </time>
      </p>
    </li>
  `;
}