From fb238fd45b8a9162625a6975ac676445c010aef5 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Sun, 2 Jan 2022 01:40:00 -0500
Subject: [PATCH] tri-state category view fields look great

---
 .../ModerationTtsCategoryListPage.tsx         | 48 +++++++++++++++----
 1 file changed, 39 insertions(+), 9 deletions(-)

diff --git a/fakeyou/src/v2/view/moderation/categories/ModerationTtsCategoryListPage.tsx b/fakeyou/src/v2/view/moderation/categories/ModerationTtsCategoryListPage.tsx
index a038315fab..fd3ce670ac 100644
--- a/fakeyou/src/v2/view/moderation/categories/ModerationTtsCategoryListPage.tsx
+++ b/fakeyou/src/v2/view/moderation/categories/ModerationTtsCategoryListPage.tsx
@@ -81,15 +81,30 @@ function ModerationTtsCategoryListPage(props: Props) {
         <strong>Show Unapproved:</strong>
         &nbsp;
         <label className="radio">
-          <input type="radio" name="unapproved" value="include" onChange={handleUnapprovedChange} />
+          <input 
+            type="radio" 
+            name="unapproved" 
+            value="include" 
+            checked={unapprovedView === ListTtsCategoriesTriState.Include}
+            onChange={handleUnapprovedChange} />
           Include
         </label>
         <label className="radio">
-          <input type="radio" name="unapproved" value="exclude" onChange={handleUnapprovedChange} />
+          <input 
+            type="radio" 
+            name="unapproved" 
+            value="exclude" 
+            checked={unapprovedView === ListTtsCategoriesTriState.Exclude}
+            onChange={handleUnapprovedChange} />
           Exclude
         </label>
         <label className="radio">
-          <input type="radio" name="unapproved" value="only" onChange={handleUnapprovedChange} />
+          <input 
+            type="radio" 
+            name="unapproved" 
+            value="only" 
+            checked={unapprovedView === ListTtsCategoriesTriState.Only}
+            onChange={handleUnapprovedChange} />
           Only
         </label>
       </div>
@@ -98,15 +113,30 @@ function ModerationTtsCategoryListPage(props: Props) {
         <strong>Show Deleted:</strong>
         &nbsp;
         <label className="radio">
-          <input type="radio" name="deleted" value="include" onChange={handleDeletedChange} />
+          <input 
+            type="radio" 
+            name="deleted" 
+            value="include" 
+            checked={deletedView === ListTtsCategoriesTriState.Include}
+            onChange={handleDeletedChange} />
           Include
         </label>
         <label className="radio">
-          <input type="radio" name="deleted" value="exclude" onChange={handleDeletedChange} />
+          <input 
+            type="radio" 
+            name="deleted" 
+            value="exclude" 
+            checked={deletedView === ListTtsCategoriesTriState.Exclude}
+            onChange={handleDeletedChange} />
           Exclude
         </label>
         <label className="radio">
-          <input type="radio" name="deleted" value="only" onChange={handleDeletedChange} />
+          <input 
+            type="radio" 
+            name="deleted" 
+            value="only" 
+            checked={deletedView === ListTtsCategoriesTriState.Only}
+            onChange={handleDeletedChange} />
           Only
         </label>
       </div>
@@ -189,9 +219,9 @@ function ModerationTtsCategoryListPage(props: Props) {
       </table>
 
       <p>
-        Only approved, non-deleted categories will show up publicly. New category suggestions by 
-        non-mods are "unapproved" by default. Use "deletion" to hide categories you don't want to 
-        deal with anymore.
+        <strong>Note: </strong> Only approved, non-deleted categories will show up publicly. 
+        New category suggestions by non-mods are "unapproved" by default. 
+        Use "deletion" to hide categories you don't want to deal with anymore.
       </p>
 
       <br />