From 36bf5ece75ad896004ef8166aad6eea66b987f69 Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Fri, 11 Aug 2023 11:23:46 +0200
Subject: [PATCH] Generate the replacement type options from the enum.

---
 .../components/anonymize-usernames.tsx        | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/source/options/components/anonymize-usernames.tsx b/source/options/components/anonymize-usernames.tsx
index e21498a..39779d9 100644
--- a/source/options/components/anonymize-usernames.tsx
+++ b/source/options/components/anonymize-usernames.tsx
@@ -1,5 +1,5 @@
 import {Component} from "preact";
-import {fromStorage, Feature} from "../../storage/exports.js";
+import {fromStorage, Feature, ReplacementType} from "../../storage/exports.js";
 import {Setting, type SettingProps} from "./index.js";
 
 type State = {
@@ -39,6 +39,13 @@ export class AnonymizeUsernamesSetting extends Component<SettingProps, State> {
     }
 
     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}>
@@ -52,15 +59,7 @@ export class AnonymizeUsernamesSetting extends Component<SettingProps, State> {
         <ul class="checkbox-list">
           <li>
             <select onChange={this.replacementTypeChanged}>
-              <option
-                selected={replacementType === "numerical"}
-                value="numerical"
-              >
-                Numerical
-              </option>
-              <option selected={replacementType === "hashed"} value="hashed">
-                Hashed
-              </option>
+              {replacementTypeOptions}
             </select>
           </li>
         </ul>