From 6d79523d8b153d3624057163ad7b81b3205490ac Mon Sep 17 00:00:00 2001
From: adamthedog <dogsquid@live.com>
Date: Thu, 1 Feb 2024 18:38:26 -0500
Subject: [PATCH] Address lints, extract list of PrefSettings to a
 SolverPreferencesList component

---
 app/components/Puzzle.tsx                | 64 +++-------------
 app/components/SolverPreferencesList.tsx | 95 ++++++++++++++++++++++++
 app/pages/account.tsx                    | 83 ++-------------------
 3 files changed, 112 insertions(+), 130 deletions(-)
 create mode 100644 app/components/SolverPreferencesList.tsx

diff --git a/app/components/Puzzle.tsx b/app/components/Puzzle.tsx
index f7917b14..9d944920 100644
--- a/app/components/Puzzle.tsx
+++ b/app/components/Puzzle.tsx
@@ -150,7 +150,7 @@ import { SlateColorTheme } from './SlateColorTheme';
 import { Check, Clues, Grid, More, Pause, Reveal, Timer } from './SlateIcons';
 import { removeSpoilers } from '../lib/markdown/markdown';
 import { SlateBegin, SlatePause, SlateSuccess } from './SlateOverlays';
-import { PrefSetting } from '../pages/account';
+import { SolverPreferencesList } from './SolverPreferencesList';
 
 const ModeratingOverlay = dynamic(
   () => import('./ModerateOverlay').then((mod) => mod.ModeratingOverlay),
@@ -699,7 +699,6 @@ export const Puzzle = ({
     [
       dispatch,
       loadingPlayState,
-      state.currentTimeWindowStart,
       state.success,
       state.dismissedSuccess,
     ]
@@ -1033,7 +1032,8 @@ export const Puzzle = ({
     ),
     [state.autocheck, isSlate]
   );
-
+  
+  const user = props.user;
   const moreMenu = useMemo(
     () => (
       <>
@@ -1155,64 +1155,23 @@ export const Puzzle = ({
                       }}
                     />
                   ) : null}
-                  {props.user ? (
+                  {user !== undefined ? (
                     <NestedDropDown
                     closeParent={closeDropdown}
                     icon={<FaCog /> }
                     text={"Solver Preferences"}
                     >
                     {() =>
-                      <ul css={{
+                      <ul
+                      css={{
                         listStyleType: 'none',
                         padding: '0 10vw',
                       }}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                      }}
                       >
-                        <li>
-                          <PrefSetting
-                            prefs={props.prefs}
-                            userId={props.user!.uid}
-                            flag={'advanceOnPerpendicular'}
-                            text="Advance to next square when changing direction with arrow keys"
-                          />
-                        </li>
-                        <li>
-                          <PrefSetting
-                            prefs={props.prefs}
-                            userId={props.user!.uid}
-                            flag={'dontSkipCompleted'}
-                            invert={true}
-                            text="Skip over completed squares after entering a letter"
-                          />
-                        </li>
-                        <li>
-                          <PrefSetting
-                            prefs={props.prefs}
-                            userId={props.user!.uid!}
-                            flag={'dontAdvanceWordAfterCompletion'}
-                            invert={true}
-                            text="Move to next clue after completing an entry"
-                          />
-                        </li>
-                        <li>
-                          <PrefSetting
-                            prefs={props.prefs}
-                            userId={props.user!.uid}
-                            flag={'solveDownsOnly'}
-                            text="Start puzzles in downs-only mode"
-                          />
-                        </li>
-                        <li>
-                          <PrefSetting
-                            prefs={props.prefs}
-                            userId={props.user!.uid}
-                            flag={'dontPauseOnLostFocus'}
-                            invert={true}
-                            text="Pause solving when clicking away from the page"
-                          />
-                        </li>
+                        <SolverPreferencesList 
+                          prefs={props.prefs}
+                          userId={user.uid}
+                        />
                       </ul>
                     }
                     </NestedDropDown>
@@ -1238,8 +1197,9 @@ export const Puzzle = ({
     [
       muted,
       props.isAdmin,
-      props.user?.uid,
+      props.user,
       props.prefs,
+      user,
       puzzle,
       setMuted,
       state.success,
diff --git a/app/components/SolverPreferencesList.tsx b/app/components/SolverPreferencesList.tsx
new file mode 100644
index 00000000..bf303435
--- /dev/null
+++ b/app/components/SolverPreferencesList.tsx
@@ -0,0 +1,95 @@
+import { setDoc } from "firebase/firestore";
+import { AccountPrefsFlagsT, AccountPrefsT } from "../lib/prefs";
+import { logAsyncErrors } from "../lib/utils";
+import { useSnackbar } from "./Snackbar";
+import { getDocRef } from "../lib/firebaseWrapper";
+
+interface PrefSettingProps {
+    prefs: AccountPrefsT | undefined;
+    userId: string;
+    flag: keyof AccountPrefsFlagsT;
+    text: string;
+    invert?: boolean;
+}
+  
+export const PrefSetting = (props: PrefSettingProps) => {
+  const { showSnackbar } = useSnackbar();
+  const prefSet = props.prefs?.[props.flag] ?? false;
+  return (
+    <label>
+    <input
+      css={{ marginRight: '1em' }}
+      type="checkbox"
+      checked={props.invert ? !prefSet : prefSet}
+      onChange={logAsyncErrors(async (e) => {
+        await setDoc(
+          getDocRef('prefs', props.userId),
+            {
+            [props.flag]: props.invert ? !e.target.checked : e.target.checked,
+            },
+            { merge: true }
+        ).then(() => {
+            showSnackbar('Preferences Updated');
+        });
+        })}
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+    />
+    {props.text}
+    </label>
+);
+};
+
+export const SolverPreferencesList = ({prefs, userId}: {prefs?: AccountPrefsT, userId: string}) => {
+  if (!prefs) {
+    return null; // or some default content
+  }
+  return  (
+  <>
+    <li>
+      <PrefSetting
+        prefs={prefs}
+        userId={userId}
+        flag={'advanceOnPerpendicular'}
+        text="Advance to next square when changing direction with arrow keys"
+      />
+    </li>
+    <li>
+      <PrefSetting
+        prefs={prefs}
+        userId={userId}
+        flag={'dontSkipCompleted'}
+        invert={true}
+        text="Skip over completed squares after entering a letter"
+      />
+    </li>
+    <li>
+      <PrefSetting
+        prefs={prefs}
+        userId={userId}
+        flag={'dontAdvanceWordAfterCompletion'}
+        invert={true}
+        text="Move to next clue after completing an entry"
+      />
+    </li>
+    <li>
+      <PrefSetting
+        prefs={prefs}
+        userId={userId}
+        flag={'solveDownsOnly'}
+        text="Start puzzles in downs-only mode"
+      />
+    </li>
+    <li>
+      <PrefSetting
+        prefs={prefs}
+        userId={userId}
+        flag={'dontPauseOnLostFocus'}
+        invert={true}
+        text="Automatically pause solving when page loses focus"
+      />
+    </li>
+  </>
+  );
+};
\ No newline at end of file
diff --git a/app/pages/account.tsx b/app/pages/account.tsx
index 4012084d..6d58edf2 100644
--- a/app/pages/account.tsx
+++ b/app/pages/account.tsx
@@ -12,7 +12,6 @@ import { PROFILE_PIC, COVER_PIC } from '../lib/style';
 import {
   UnsubscribeFlags,
   AccountPrefsT,
-  AccountPrefsFlagsT,
 } from '../lib/prefs';
 
 import dynamic from 'next/dynamic';
@@ -36,6 +35,7 @@ import {
 import { signOut } from 'firebase/auth';
 import { BioEditor } from '../components/BioEditor';
 import { logAsyncErrors } from '../lib/utils';
+import { PrefSetting, SolverPreferencesList } from '../components/SolverPreferencesList';
 
 export const getStaticProps = withStaticTranslation(() => {
   return { props: {} };
@@ -81,40 +81,6 @@ const UnsubSetting = (props: UnsubSettingProps) => {
   );
 };
 
-interface PrefSettingProps {
-  prefs: AccountPrefsT | undefined;
-  userId: string;
-  flag: keyof AccountPrefsFlagsT;
-  text: string;
-  invert?: boolean;
-}
-
-export const PrefSetting = (props: PrefSettingProps) => {
-  const { showSnackbar } = useSnackbar();
-  const prefSet = props.prefs?.[props.flag] ?? false;
-  return (
-    <label>
-      <input
-        css={{ marginRight: '1em' }}
-        type="checkbox"
-        checked={props.invert ? !prefSet : prefSet}
-        onChange={logAsyncErrors(async (e) => {
-          await setDoc(
-            getDocRef('prefs', props.userId),
-            {
-              [props.flag]: props.invert ? !e.target.checked : e.target.checked,
-            },
-            { merge: true }
-          ).then(() => {
-            showSnackbar('Preferences Updated');
-          });
-        })}
-      />
-      {props.text}
-    </label>
-  );
-};
-
 export const AccountPage = ({ user, constructorPage, prefs }: AuthProps) => {
   const [settingProfilePic, setSettingProfilePic] = useState(false);
   const [settingCoverPic, setSettingCoverPic] = useState(false);
@@ -209,49 +175,10 @@ export const AccountPage = ({ user, constructorPage, prefs }: AuthProps) => {
             padding: '0 0',
           }}
         >
-          <li>
-            <PrefSetting
-              prefs={prefs}
-              userId={user.uid}
-              flag={'advanceOnPerpendicular'}
-              text="Advance to next square when changing direction with arrow keys"
-            />
-          </li>
-          <li>
-            <PrefSetting
-              prefs={prefs}
-              userId={user.uid}
-              flag={'dontSkipCompleted'}
-              invert={true}
-              text="Skip over completed squares after entering a letter"
-            />
-          </li>
-          <li>
-            <PrefSetting
-              prefs={prefs}
-              userId={user.uid}
-              flag={'dontAdvanceWordAfterCompletion'}
-              invert={true}
-              text="Move to next clue after completing an entry"
-            />
-          </li>
-          <li>
-            <PrefSetting
-              prefs={prefs}
-              userId={user.uid}
-              flag={'solveDownsOnly'}
-              text="Start puzzles in downs-only mode"
-            />
-          </li>
-          <li>
-            <PrefSetting
-              prefs={prefs}
-              userId={user.uid}
-              flag={'dontPauseOnLostFocus'}
-              invert={true}
-              text="Pause solving when clicking away from the page"
-            />
-          </li>
+          <SolverPreferencesList 
+            prefs={prefs}
+            userId={user.uid}
+          />
         </ul>
         <hr css={{ margin: '2em 0' }} />
         <h2>Browser-specific Settings</h2>