1
Fork 0
tildes-reextended/source/options/components/anonymize-usernames.tsx

75 lines
1.9 KiB
TypeScript

import {Component} from "preact";
import {
fromStorage,
isReplacementType,
Feature,
ReplacementType,
} from "../../storage/exports.js";
import {Setting, type SettingProps} from "./index.js";
type State = {
data?: Awaited<ReturnType<typeof fromStorage<Feature.AnonymizeUsernames>>>;
};
export class AnonymizeUsernamesSetting extends Component<SettingProps, State> {
constructor(props: SettingProps) {
super(props);
this.state = {
data: undefined,
};
}
async componentDidMount(): Promise<void> {
const data = await fromStorage(Feature.AnonymizeUsernames);
this.setState({data});
}
replacementTypeChanged = async (event: Event) => {
const newValue = (event.target as HTMLInputElement)!.value;
const {data} = this.state;
if (data === undefined || !isReplacementType(newValue)) {
return;
}
data.value.replacementType = newValue;
await data.save();
this.setState({data});
};
render() {
const {data} = this.state;
if (data === undefined) {
return;
}
const replacementType = data.value.replacementType;
const replacementTypeOptions = Object.values(ReplacementType).map((key) => (
<option selected={key === replacementType} value={key}>
{key
.replace(/-/g, " ")
.replace(/(\b[a-z])/gi, (character) => character.toUpperCase())}
</option>
));
return (
<Setting {...this.props}>
<p class="info">
Anonymizes usernames by replacing them with "Anonymous #".
<br />
Note that User Labels and Username Colors will still be applied to any
usernames as normal.
</p>
<ul class="checkbox-list">
<li>
<select onChange={this.replacementTypeChanged}>
{replacementTypeOptions}
</select>
</li>
</ul>
</Setting>
);
}
}