1
Fork 0
tildes-reextended/source/options/components/hide-votes.tsx

76 lines
1.8 KiB
TypeScript
Raw Normal View History

2023-06-23 10:52:03 +00:00
import {Component} from "preact";
import {type Value} from "@holllo/webextension-storage";
import {
fromStorage,
Feature,
type HideVotesData,
2023-06-27 11:51:04 +00:00
} from "../../storage/exports.js";
2023-06-23 10:52:03 +00:00
import {Setting, type SettingProps} from "./index.js";
type State = {
hideVotes: Value<HideVotesData>;
};
type HideVotesKey = keyof State["hideVotes"]["value"];
export class HideVotesSetting extends Component<SettingProps, State> {
constructor(props: SettingProps) {
super(props);
this.state = {
hideVotes: undefined!,
};
}
async componentDidMount() {
this.setState({hideVotes: await fromStorage(Feature.HideVotes)});
}
toggle(target: HideVotesKey): void {
const hideVotes = this.state.hideVotes;
hideVotes.value[target] = !hideVotes.value[target];
void hideVotes.save();
this.setState({hideVotes});
}
render() {
const {hideVotes} = this.state;
if (hideVotes === undefined) {
return;
}
const checkboxesData: Array<{label: string; target: HideVotesKey}> = [
{label: "Your comments", target: "ownComments"},
{label: "Your topics", target: "ownTopics"},
{label: "Other's comments", target: "otherComments"},
{label: "Other's topics", target: "otherTopics"},
];
const checkboxes = checkboxesData.map(({label, target}) => (
<li>
<label class="styled-checkbox">
2023-06-23 10:52:03 +00:00
<input
type="checkbox"
checked={hideVotes.value[target]}
onClick={() => {
this.toggle(target);
}}
/>
{label}
</label>
</li>
));
return (
<Setting {...this.props}>
<p class="info">
Hides vote counts from topics and comments of yourself or other
people.
</p>
<ul class="checkbox-list">{checkboxes}</ul>
</Setting>
);
}
}