Skip to content

Commit

Permalink
Address lints, extract list of PrefSettings to a SolverPreferencesLis…
Browse files Browse the repository at this point in the history
…t component
  • Loading branch information
adamthedog committed Feb 1, 2024
1 parent fcf1116 commit 6d79523
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 130 deletions.
64 changes: 12 additions & 52 deletions app/components/Puzzle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down Expand Up @@ -699,7 +699,6 @@ export const Puzzle = ({
[
dispatch,
loadingPlayState,
state.currentTimeWindowStart,
state.success,
state.dismissedSuccess,
]
Expand Down Expand Up @@ -1033,7 +1032,8 @@ export const Puzzle = ({
),
[state.autocheck, isSlate]
);


const user = props.user;
const moreMenu = useMemo(
() => (
<>
Expand Down Expand Up @@ -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>
Expand All @@ -1238,8 +1197,9 @@ export const Puzzle = ({
[
muted,
props.isAdmin,
props.user?.uid,
props.user,
props.prefs,
user,
puzzle,
setMuted,
state.success,
Expand Down
95 changes: 95 additions & 0 deletions app/components/SolverPreferencesList.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
);
};
83 changes: 5 additions & 78 deletions app/pages/account.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { PROFILE_PIC, COVER_PIC } from '../lib/style';
import {
UnsubscribeFlags,
AccountPrefsT,
AccountPrefsFlagsT,
} from '../lib/prefs';

import dynamic from 'next/dynamic';
Expand All @@ -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: {} };
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 6d79523

Please sign in to comment.