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

148 lines
3.5 KiB
TypeScript
Raw Normal View History

import {Component, html} from 'htm/preact';
2022-03-05 13:10:45 +00:00
import {Settings} from '../../settings/settings.js';
import {updateBadge} from '../../utilities/badge.js';
2022-03-05 13:10:45 +00:00
import {History} from '../../utilities/history.js';
import {ConfirmButton} from './confirm-button.js';
import {Link} from './link.js';
2020-11-11 17:17:37 +00:00
2022-03-05 13:10:45 +00:00
type Props = {
history: History;
2020-11-11 17:17:37 +00:00
settings: Settings;
};
2022-03-05 13:10:45 +00:00
type State = {
queue: Queue.Item[];
};
2020-11-11 17:17:37 +00:00
2022-03-05 13:10:45 +00:00
export class PageMain extends Component<Props, State> {
constructor(props: Props) {
super(props);
2022-03-05 13:10:45 +00:00
this.state = {
queue: props.settings.queue,
};
2020-11-11 17:17:37 +00:00
}
removeItem = async (id: number) => {
2022-03-05 13:10:45 +00:00
const {settings} = this.props;
await settings.removeQueueItem(id);
await updateBadge(settings);
2022-03-05 13:10:45 +00:00
this.setState({queue: this.props.settings.queue});
};
2020-11-11 17:17:37 +00:00
2022-03-05 13:10:45 +00:00
render() {
const queueItems = this.state.queue
.sort((a, b) => a.added.getTime() - b.added.getTime())
2022-03-05 13:10:45 +00:00
.map(
(item) => html`<${queueItem} item=${item} remove=${this.removeItem} />`,
);
2020-11-11 17:17:37 +00:00
if (queueItems.length === 0) {
queueItems.push(html`<li>No items queued. 🤷</li>`);
}
2020-11-11 17:17:37 +00:00
2022-03-05 13:10:45 +00:00
const historyItems = this.props.history.queue
.sort((a, b) => b.added.getTime() - a.added.getTime())
2022-03-05 13:10:45 +00:00
.map((item) => html`<${queueItem} item=${item} />`);
2022-03-05 13:10:45 +00:00
let history: HtmComponent | undefined;
if (historyItems.length > 0) {
2022-03-05 13:10:45 +00:00
history = html`
<details class="history">
<summary>Queue history</summary>
2022-03-05 13:10:45 +00:00
<ul class="q-list">
${historyItems}
</ul>
</details>
`;
}
return html`
<main class="page-main">
<ul class="q-list">
${queueItems}
2020-11-11 17:17:37 +00:00
</ul>
${history}
<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.</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>
`;
}
2020-11-11 17:17:37 +00:00
}
type ItemProps = {
item: Queue.Item;
remove?: (id: number) => Promise<void>;
2020-11-11 17:17:37 +00:00
};
2022-03-05 13:10:45 +00:00
function queueItem(props: ItemProps): HtmComponent {
const added = props.item.added.toLocaleString();
const {id, text, url} = props.item;
let remove;
if (props.remove !== undefined) {
2022-03-05 13:10:45 +00:00
remove = html`
<${ConfirmButton}
cssClass="confirm-button"
clickHandler=${async () => props.remove!(id)}
confirmClass="confirm"
confirmText="✓"
text="✗"
timeout=${5 * 1000}
title="Remove"
/>
`;
}
2020-11-11 17:17:37 +00:00
return html`
<li class="q-item">
<p class="title">
<${Link} text=${text ?? url} url=${url} />
</p>
<div class="buttons">${remove}</div>
2020-11-11 17:17:37 +00:00
<p>
<time datetime=${added} title="Link queued on ${added}.">
${added}
2020-11-11 17:17:37 +00:00
</time>
</p>
</li>
`;
}