1
Fork 0
tildes-reextended/source/options/user-label-editor.tsx

270 lines
7.6 KiB
TypeScript
Raw Normal View History

2023-06-23 10:52:03 +00:00
import {Component, render, type JSX} from "preact";
import {type Value} from "@holllo/webextension-storage";
import {
initializeGlobals,
isValidTildesUsername,
log,
} from "../utilities/exports.js";
import {
type UserLabelsData,
type UserLabel,
fromStorage,
Feature,
createValueUserLabel,
2023-06-24 12:00:27 +00:00
saveUserLabels,
newUserLabelId,
2023-06-27 11:51:04 +00:00
} from "../storage/exports.js";
2023-06-23 10:52:03 +00:00
import "../scss/index.scss";
import "../scss/user-label-editor.scss";
window.addEventListener("load", async () => {
initializeGlobals();
const userLabels = await fromStorage(Feature.UserLabels);
render(<App userLabels={userLabels} />, document.body);
});
type Props = {
2023-06-24 12:00:27 +00:00
userLabels: UserLabelsData;
2023-06-23 10:52:03 +00:00
};
type State = {
newLabelUsername: string;
unsavedUserLabelIds: Set<number>;
2023-06-23 10:52:03 +00:00
userLabels: UserLabelsData;
2023-06-28 13:03:35 +00:00
userLabelsToRemove: UserLabelsData;
2023-06-23 10:52:03 +00:00
};
class App extends Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
newLabelUsername: "",
unsavedUserLabelIds: new Set(),
2023-06-24 12:00:27 +00:00
userLabels: props.userLabels,
2023-06-28 13:03:35 +00:00
userLabelsToRemove: [],
2023-06-23 10:52:03 +00:00
};
}
addNewLabel = async () => {
const {newLabelUsername, unsavedUserLabelIds, userLabels} = this.state;
2023-06-23 10:52:03 +00:00
if (!isValidTildesUsername(newLabelUsername)) {
return;
}
const existingUserLabel = userLabels.find(
({value: {username}}) =>
username.toLowerCase() === newLabelUsername.toLowerCase(),
2023-06-23 10:52:03 +00:00
);
const id = await newUserLabelId();
const userLabel = await createValueUserLabel({
color: "#ff00ff",
id,
priority: 0,
text: "New Label",
username: existingUserLabel?.value.username ?? newLabelUsername,
});
await userLabel.save();
userLabels.push(userLabel);
unsavedUserLabelIds.add(id);
this.setState({unsavedUserLabelIds, userLabels});
2023-06-23 10:52:03 +00:00
};
onNewUsernameInput = (event: Event) => {
const username = (event.target as HTMLInputElement).value;
this.setState({newLabelUsername: username});
};
editUserLabel = (event: Event, targetId: number, key: keyof UserLabel) => {
const {unsavedUserLabelIds} = this.state;
const index = this.state.userLabels.findIndex(
({value: {id}}) => id === targetId,
);
2023-06-23 10:52:03 +00:00
if (index === -1) {
log(`Tried to edit UserLabel with unknown ID: ${targetId}`);
return;
}
const newValue = (event.target as HTMLInputElement).value;
// eslint-disable-next-line unicorn/prefer-ternary
if (key === "id" || key === "priority") {
this.state.userLabels[index].value[key] = Number(newValue);
2023-06-23 10:52:03 +00:00
} else {
this.state.userLabels[index].value[key] = newValue;
2023-06-23 10:52:03 +00:00
}
unsavedUserLabelIds.add(targetId);
2023-06-23 10:52:03 +00:00
this.setState({
unsavedUserLabelIds,
2023-06-23 10:52:03 +00:00
userLabels: this.state.userLabels,
});
};
2023-06-28 13:03:35 +00:00
removeUserLabel = async (targetId: number) => {
const {unsavedUserLabelIds, userLabels, userLabelsToRemove} = this.state;
2023-06-28 13:03:35 +00:00
const index = userLabels.findIndex(({value}) => value.id === targetId);
userLabelsToRemove.push(...userLabels.splice(index, 1));
unsavedUserLabelIds.add(targetId);
2023-06-28 13:03:35 +00:00
2023-06-23 10:52:03 +00:00
this.setState({
unsavedUserLabelIds,
2023-06-23 10:52:03 +00:00
userLabels,
2023-06-28 13:03:35 +00:00
userLabelsToRemove,
2023-06-23 10:52:03 +00:00
});
};
2023-06-28 13:03:35 +00:00
saveUserLabels = async () => {
for (const userLabel of this.state.userLabelsToRemove) {
await userLabel.remove();
}
2023-06-24 12:00:27 +00:00
this.props.userLabels = this.state.userLabels;
void saveUserLabels(this.props.userLabels);
this.setState({unsavedUserLabelIds: new Set(), userLabelsToRemove: []});
2023-06-23 10:52:03 +00:00
};
render() {
const {newLabelUsername, unsavedUserLabelIds, userLabels} = this.state;
userLabels.sort((a, b) => a.value.username.localeCompare(b.value.username));
2023-06-23 10:52:03 +00:00
const labelGroups = new Map<string, UserLabel[]>();
for (const label of userLabels) {
const username = label.value.username.toLowerCase();
const group = labelGroups.get(username) ?? [];
group.push(label.value);
labelGroups.set(username, group);
2023-06-23 10:52:03 +00:00
}
const labels: JSX.Element[] = [];
for (const [username, group] of labelGroups) {
group.sort((a, b) =>
a.priority === b.priority
? a.text.localeCompare(b.text)
: b.priority - a.priority,
);
const labelPreviews: JSX.Element[] = group.map(({color, text}) => (
<span style={{background: color}} class="label-preview">
{text}
</span>
));
group.sort((a, b) => a.id - b.id);
const userLabels: JSX.Element[] = [];
for (const [index, label] of group.entries()) {
const textHandler = (event: Event) => {
this.editUserLabel(event, label.id, "text");
};
const colorHandler = (event: Event) => {
this.editUserLabel(event, label.id, "color");
};
const priorityHandler = (event: Event) => {
this.editUserLabel(event, label.id, "priority");
};
2023-06-28 13:03:35 +00:00
const removeHandler = async () => {
await this.removeUserLabel(label.id);
2023-06-23 10:52:03 +00:00
};
const hasUnsavedChanges = unsavedUserLabelIds.has(label.id);
2023-06-23 10:52:03 +00:00
userLabels.push(
<li class={hasUnsavedChanges ? "unsaved-changes" : ""} key={label.id}>
2023-06-23 10:52:03 +00:00
<div>
{index === 0 ? <label>Text</label> : undefined}
<input
onInput={textHandler}
placeholder="Text"
value={label.text}
/>
</div>
<div>
{index === 0 ? <label>Color</label> : undefined}
<input
onInput={colorHandler}
placeholder="Color"
value={label.color}
/>
</div>
<div>
{index === 0 ? <label>Priority</label> : undefined}
<input
onInput={priorityHandler}
placeholder="Priority"
type="number"
value={label.priority}
/>
</div>
<div>
{index === 0 ? <label>Controls</label> : undefined}
<button class="button destructive" onClick={removeHandler}>
Remove
</button>
</div>
</li>,
);
}
labels.push(
<div class="group">
<h2>
{username} {labelPreviews}
</h2>
<ul>{userLabels}</ul>
</div>,
);
}
const anyUnsavedChanges = unsavedUserLabelIds.size > 0;
2023-06-23 10:52:03 +00:00
return (
<>
<header class="page-header">
<h1>
<img src="/tildes-reextended.png" />
User Label Editor
</h1>
</header>
<main class="page-main user-label-editor">
<p class="info">
To add a new label, enter the username for who you'd like to add the
label for, then press the Add New Label button.
<br />
<b>Changes are not automatically saved!</b>
<br />
If there are any unsaved changes an asterisk will appear in the Save
All Changes button. To undo all unsaved changes simply refresh the
page.
</p>
<div class="main-controls">
<input
onInput={this.onNewUsernameInput}
placeholder="Username"
value={newLabelUsername}
/>
<button class="button" onClick={this.addNewLabel}>
Add New Label
</button>
<button
class={`save-button button ${
anyUnsavedChanges ? "unsaved-changes" : ""
}`}
onClick={this.saveUserLabels}
>
Save All Changes{anyUnsavedChanges ? "*" : ""}
2023-06-23 10:52:03 +00:00
</button>
</div>
<div class="groups">{labels}</div>
</main>
</>
);
}
}