From 9799c38698e777fe863f7e3fe55eb08374398bc7 Mon Sep 17 00:00:00 2001 From: Jack Date: Sun, 11 Jan 2026 15:13:47 +0100 Subject: [PATCH] refactor: convert active page to a signal (@miodec) (#7342) --- .../__tests__/components/ScrollToTop.spec.tsx | 40 ++++++++++--------- .../ts/commandline/commandline-metadata.ts | 4 +- frontend/src/ts/commandline/commandline.ts | 4 +- frontend/src/ts/components/ScrollToTop.tsx | 21 +++------- .../src/ts/controllers/chart-controller.ts | 4 +- .../src/ts/controllers/page-controller.ts | 10 ++--- .../src/ts/controllers/pw-ad-controller.ts | 4 +- frontend/src/ts/elements/alerts.ts | 4 +- frontend/src/ts/elements/keymap.ts | 4 +- frontend/src/ts/elements/profile.ts | 4 +- .../src/ts/elements/settings/theme-picker.ts | 6 +-- frontend/src/ts/event-handlers/global.ts | 6 +-- frontend/src/ts/pages/account-settings.ts | 4 +- frontend/src/ts/pages/account.ts | 4 +- frontend/src/ts/pages/leaderboards.ts | 4 +- frontend/src/ts/pages/settings.ts | 6 +-- frontend/src/ts/pages/test.ts | 2 - frontend/src/ts/signals/core.ts | 4 ++ frontend/src/ts/states/active-page.ts | 11 ----- frontend/src/ts/test/test-config.ts | 4 +- frontend/src/ts/test/test-logic.ts | 11 +++-- frontend/src/ts/test/test-screenshot.ts | 6 +-- frontend/src/ts/test/test-ui.ts | 14 +++---- frontend/src/ts/ui.ts | 2 +- 24 files changed, 82 insertions(+), 101 deletions(-) create mode 100644 frontend/src/ts/signals/core.ts delete mode 100644 frontend/src/ts/states/active-page.ts diff --git a/frontend/__tests__/components/ScrollToTop.spec.tsx b/frontend/__tests__/components/ScrollToTop.spec.tsx index 222c12cd79eb..87bf82aabe5a 100644 --- a/frontend/__tests__/components/ScrollToTop.spec.tsx +++ b/frontend/__tests__/components/ScrollToTop.spec.tsx @@ -1,19 +1,14 @@ import { describe, it, expect, vi, beforeEach } from "vitest"; import { render } from "@solidjs/testing-library"; import { userEvent } from "@testing-library/user-event"; -import { - ScrollToTop, - __testing, - hideScrollToTop, -} from "../../src/ts/components/ScrollToTop"; -import * as ActivePage from "../../src/ts/states/active-page"; +import { ScrollToTop } from "../../src/ts/components/ScrollToTop"; +import * as CoreSignals from "../../src/ts/signals/core"; describe("ScrollToTop", () => { - const getActivePageMock = vi.spyOn(ActivePage, "get"); + const getActivePageMock = vi.spyOn(CoreSignals, "getActivePage"); beforeEach(() => { getActivePageMock.mockClear().mockReturnValue("account"); Object.defineProperty(window, "scrollY", { value: 0, writable: true }); - __testing.resetState(); }); function renderElement(): { @@ -44,18 +39,34 @@ describe("ScrollToTop", () => { expect(button).toHaveClass("invisible"); }); - it("becomes visible when scrollY > 100", () => { + it("becomes visible when scrollY > 100 on non-test pages", () => { const { button } = renderElement(); scrollTo(150); expect(button).not.toHaveClass("invisible"); }); - it("stays invisible on test page regardless of scroll", () => { + it("stays invisible on test page at scroll 0", () => { getActivePageMock.mockReturnValue("test"); const { button } = renderElement(); + + expect(button).toHaveClass("invisible"); + }); + + it("stays invisible on test page even with scroll > 100", () => { + getActivePageMock.mockReturnValue("test"); + const { button } = renderElement(); + scrollTo(150); + + expect(button).toHaveClass("invisible"); + }); + + it("becomes invisible when scroll < 100 on non-test pages", () => { + const { button } = renderElement(); scrollTo(150); + expect(button).not.toHaveClass("invisible"); + scrollTo(50); expect(button).toHaveClass("invisible"); }); @@ -74,15 +85,6 @@ describe("ScrollToTop", () => { expect(button).toHaveClass("invisible"); }); - it("hides button when hideScrollToTop is called", () => { - const { button } = renderElement(); - scrollTo(150); - - hideScrollToTop(); - - expect(button).toHaveClass("invisible"); - }); - it("cleans up scroll listener on unmount", () => { const removeEventListenerSpy = vi.spyOn(window, "removeEventListener"); const { unmount } = render(() => ); diff --git a/frontend/src/ts/commandline/commandline-metadata.ts b/frontend/src/ts/commandline/commandline-metadata.ts index 3b0da94b42e1..c8e4ab6a5400 100644 --- a/frontend/src/ts/commandline/commandline-metadata.ts +++ b/frontend/src/ts/commandline/commandline-metadata.ts @@ -9,7 +9,7 @@ import { areUnsortedArraysEqual } from "../utils/arrays"; import Config from "../config"; import { get as getTypingSpeedUnit } from "../utils/typing-speed-units"; import { Validation } from "../elements/input-validation"; -import * as ActivePage from "../states/active-page"; +import { getActivePage } from "../signals/core"; import { Fonts } from "../constants/fonts"; import { KnownFontName } from "@monkeytype/schemas/fonts"; import * as UI from "../ui"; @@ -278,7 +278,7 @@ export const commandlineConfigMetadata: CommandlineConfigMetadataObject = { inputValueConvert: (val) => val.trim().split(" ") as ConfigSchemas.CustomPolyglot, afterExec: () => { - if (ActivePage.get() === "test") { + if (getActivePage() === "test") { TestLogic.restart(); } }, diff --git a/frontend/src/ts/commandline/commandline.ts b/frontend/src/ts/commandline/commandline.ts index d5c640d3dd67..27f383160bb6 100644 --- a/frontend/src/ts/commandline/commandline.ts +++ b/frontend/src/ts/commandline/commandline.ts @@ -7,7 +7,7 @@ import { clearFontPreview } from "../ui"; import AnimatedModal, { ShowOptions } from "../utils/animated-modal"; import * as Notifications from "../elements/notifications"; import * as OutOfFocus from "../test/out-of-focus"; -import * as ActivePage from "../states/active-page"; +import { getActivePage } from "../signals/core"; import * as Loader from "../elements/loader"; import { Command, CommandsSubgroup, CommandWithValidation } from "./types"; import { areSortedArraysEqual, areUnsortedArraysEqual } from "../utils/arrays"; @@ -185,7 +185,7 @@ function hide(clearModalChain = false): void { afterAnimation: async () => { hideWarning(); addCommandlineBackground(); - if (ActivePage.get() !== "test") { + if (getActivePage() !== "test") { (document.activeElement as HTMLElement | undefined)?.blur(); } isAnimating = false; diff --git a/frontend/src/ts/components/ScrollToTop.tsx b/frontend/src/ts/components/ScrollToTop.tsx index 412d5f65e15b..ca1987366315 100644 --- a/frontend/src/ts/components/ScrollToTop.tsx +++ b/frontend/src/ts/components/ScrollToTop.tsx @@ -1,17 +1,12 @@ import { JSXElement, createSignal, onMount, onCleanup } from "solid-js"; -import * as ActivePage from "../states/active-page"; +import { getActivePage } from "../signals/core"; import "./ScrollToTop.scss"; -const [visible, setVisible] = createSignal(false); - -export function hideScrollToTop(): void { - setVisible(false); -} - export function ScrollToTop(): JSXElement { + const [visible, setVisible] = createSignal(false); + const handleScroll = (): void => { - const page = ActivePage.get(); - if (page === "test") return; + if (getActivePage() === "test") return; const scroll = window.scrollY; setVisible(scroll > 100); @@ -31,7 +26,7 @@ export function ScrollToTop(): JSXElement {
{ setVisible(false); @@ -46,9 +41,3 @@ export function ScrollToTop(): JSXElement {
); } - -export const __testing = { - resetState: (): void => { - setVisible(false); - }, -}; diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts index 4e9149471274..8f25bda9488f 100644 --- a/frontend/src/ts/controllers/chart-controller.ts +++ b/frontend/src/ts/controllers/chart-controller.ts @@ -32,7 +32,7 @@ import chartAnnotation, { } from "chartjs-plugin-annotation"; import chartTrendline from "chartjs-plugin-trendline"; import { get as getTypingSpeedUnit } from "../utils/typing-speed-units"; -import * as ActivePage from "../states/active-page"; +import { getActivePage } from "../signals/core"; Chart.register( BarController, @@ -1433,7 +1433,7 @@ export function updateAllChartColors(): void { } ConfigEvent.subscribe(({ key, newValue }) => { - if (key === "accountChart" && ActivePage.get() === "account") { + if (key === "accountChart" && getActivePage() === "account") { updateResults(); updateAccuracy(); updateAverage10(); diff --git a/frontend/src/ts/controllers/page-controller.ts b/frontend/src/ts/controllers/page-controller.ts index b191c40e5c99..c98391523a94 100644 --- a/frontend/src/ts/controllers/page-controller.ts +++ b/frontend/src/ts/controllers/page-controller.ts @@ -1,6 +1,6 @@ import * as Misc from "../utils/misc"; import * as Strings from "../utils/strings"; -import * as ActivePage from "../states/active-page"; +import { getActivePage, setActivePage } from "../signals/core"; import * as Settings from "../pages/settings"; import * as Account from "../pages/account"; import * as PageTest from "../pages/test"; @@ -174,7 +174,7 @@ export async function change( return false; } - if (!options.force && ActivePage.get() === pageName) { + if (!options.force && getActivePage() === pageName) { console.debug(`change page ${pageName} stoped, page already active`); return false; } else { @@ -196,7 +196,7 @@ export async function change( leaderboards: PageLeaderboards.page, }; - const previousPage = pages[ActivePage.get()]; + const previousPage = pages[getActivePage()]; const nextPage = pages[pageName]; const totalDuration = Misc.applyReducedMotion(250); @@ -246,7 +246,7 @@ export async function change( } pages.loading.element.addClass("active"); - ActivePage.set(pages.loading.id); + setActivePage(pages.loading.id); Focus.set(false); PageLoading.showError(); PageLoading.updateText( @@ -260,7 +260,7 @@ export async function change( //between updateTitle(nextPage); - ActivePage.set(nextPage.id); + setActivePage(nextPage.id); updateOpenGraphUrl(); Focus.set(false); diff --git a/frontend/src/ts/controllers/pw-ad-controller.ts b/frontend/src/ts/controllers/pw-ad-controller.ts index c0de3ee79b3f..2c0d1a795e7c 100644 --- a/frontend/src/ts/controllers/pw-ad-controller.ts +++ b/frontend/src/ts/controllers/pw-ad-controller.ts @@ -4,7 +4,7 @@ //@ts-nocheck too many errors from 3rd party ad code import Config from "../config"; -import * as ActivePage from "../states/active-page"; +import { getActivePage } from "../signals/core"; import * as TestState from "../test/test-state"; // Step 1: Create the Ramp Object, NOTE: selector id needed for tagged units only @@ -207,7 +207,7 @@ function getUnits(): unknown { export async function reinstate(): boolean { if (!rampReady) return; - if (ActivePage.get() === "test" && !TestState.resultVisible) { + if (getActivePage() === "test" && !TestState.resultVisible) { ramp.destroyUnits("all"); return; } diff --git a/frontend/src/ts/elements/alerts.ts b/frontend/src/ts/elements/alerts.ts index e94aa46125ba..c047aa91afc8 100644 --- a/frontend/src/ts/elements/alerts.ts +++ b/frontend/src/ts/elements/alerts.ts @@ -17,7 +17,7 @@ import { updateXp as accountPageUpdateProfile } from "./profile"; import { MonkeyMail } from "@monkeytype/schemas/users"; import * as XPBar from "../elements/xp-bar"; import * as AuthEvent from "../observables/auth-event"; -import * as ActivePage from "../states/active-page"; +import { getActivePage } from "../signals/core"; import { animate } from "animejs"; import { qs, qsr } from "../utils/dom"; @@ -117,7 +117,7 @@ function hide(): void { const snapxp = DB.getSnapshot()?.xp ?? 0; void XPBar.update(snapxp, totalXpClaimed); - const activePage = ActivePage.get(); + const activePage = getActivePage(); if (activePage === "account" || activePage === "profile") { accountPageUpdateProfile(activePage, snapxp + totalXpClaimed, true); } diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts index 3c1ac3d16109..25155e8401a6 100644 --- a/frontend/src/ts/elements/keymap.ts +++ b/frontend/src/ts/elements/keymap.ts @@ -6,7 +6,7 @@ import * as Misc from "../utils/misc"; import * as JSONData from "../utils/json-data"; import * as Hangul from "hangul-js"; import * as Notifications from "../elements/notifications"; -import * as ActivePage from "../states/active-page"; +import { getActivePage } from "../signals/core"; import * as TestWords from "../test/test-words"; import { capsState } from "../test/caps-warning"; import * as ShiftTracker from "../test/shift-tracker"; @@ -398,7 +398,7 @@ export async function refresh(): Promise { : Config.layout; if (Config.keymapMode === "off") return; - if (ActivePage.get() !== "test") return; + if (getActivePage() !== "test") return; if (!layoutName) return; try { let layoutNameDisplayString = layoutName; diff --git a/frontend/src/ts/elements/profile.ts b/frontend/src/ts/elements/profile.ts index 6db378ad37d3..f56bcfe29eb4 100644 --- a/frontend/src/ts/elements/profile.ts +++ b/frontend/src/ts/elements/profile.ts @@ -7,7 +7,7 @@ import * as Levels from "../utils/levels"; import * as DateTime from "@monkeytype/util/date-and-time"; import { getHTMLById } from "../controllers/badge-controller"; import { throttle } from "throttle-debounce"; -import * as ActivePage from "../states/active-page"; +import { getActivePage } from "../signals/core"; import { formatDistanceToNowStrict } from "date-fns/formatDistanceToNowStrict"; import { getHtmlByUserFlags } from "../controllers/user-flag-controller"; import Format from "../utils/format"; @@ -457,7 +457,7 @@ export function updateFriendRequestButton(): void { } } const throttledEvent = throttle(1000, () => { - const activePage = ActivePage.get(); + const activePage = getActivePage(); if (activePage && ["account", "profile"].includes(activePage)) { updateNameFontSize(activePage as ProfileViewPaths); } diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts index 38a414c98990..bcf7d6a419be 100644 --- a/frontend/src/ts/elements/settings/theme-picker.ts +++ b/frontend/src/ts/elements/settings/theme-picker.ts @@ -9,7 +9,7 @@ import * as Loader from "../loader"; import * as DB from "../../db"; import * as ConfigEvent from "../../observables/config-event"; import { isAuthenticated } from "../../firebase"; -import * as ActivePage from "../../states/active-page"; +import { getActivePage } from "../../signals/core"; import { CustomThemeColors, ThemeName } from "@monkeytype/schemas/configs"; import { captureException } from "../../sentry"; import { ThemesListSorted } from "../../constants/themes"; @@ -487,10 +487,10 @@ $(".pageSettings #saveCustomThemeButton").on("click", async () => { }); ConfigEvent.subscribe(({ key }) => { - if (key === "theme" && ActivePage.get() === "settings") { + if (key === "theme" && getActivePage() === "settings") { updateActiveButton(); } - if (key === "favThemes" && ActivePage.get() === "settings") { + if (key === "favThemes" && getActivePage() === "settings") { void fillPresetButtons(); } }); diff --git a/frontend/src/ts/event-handlers/global.ts b/frontend/src/ts/event-handlers/global.ts index 2fefcad0fb8c..3029b210645f 100644 --- a/frontend/src/ts/event-handlers/global.ts +++ b/frontend/src/ts/event-handlers/global.ts @@ -4,7 +4,7 @@ import Config from "../config"; import * as TestWords from "../test/test-words"; import * as Commandline from "../commandline/commandline"; import * as Notifications from "../elements/notifications"; -import * as ActivePage from "../states/active-page"; +import { getActivePage } from "../signals/core"; import { ModifierKeys } from "../constants/modifier-keys"; import { focusWords } from "../test/test-ui"; import * as TestLogic from "../test/test-logic"; @@ -17,7 +17,7 @@ document.addEventListener("keydown", (e) => { if (PageTransition.get()) return; if (e.key === undefined) return; - const pageTestActive: boolean = ActivePage.get() === "test"; + const pageTestActive: boolean = getActivePage() === "test"; if (pageTestActive && !TestState.resultVisible && !isInputElementFocused()) { const popupVisible: boolean = Misc.isAnyPopupVisible(); // this is nested because isAnyPopupVisible is a bit expensive @@ -74,7 +74,7 @@ document.addEventListener("keydown", (e) => { !isInteractiveElement) ) { e.preventDefault(); - if (ActivePage.get() === "test") { + if (getActivePage() === "test") { if (e.shiftKey) { ManualRestart.set(); } diff --git a/frontend/src/ts/pages/account-settings.ts b/frontend/src/ts/pages/account-settings.ts index 66de98e1a522..9da8849b3147 100644 --- a/frontend/src/ts/pages/account-settings.ts +++ b/frontend/src/ts/pages/account-settings.ts @@ -1,7 +1,7 @@ import { PageWithUrlParams } from "./page"; import * as Skeleton from "../utils/skeleton"; import { getAuthenticatedUser, isAuthenticated } from "../firebase"; -import * as ActivePage from "../states/active-page"; +import { getActivePage } from "../signals/core"; import { swapElements } from "../utils/misc"; import { getSnapshot } from "../db"; import Ape from "../ape"; @@ -147,7 +147,7 @@ function updateAccountSections(): void { } export function updateUI(): void { - if (ActivePage.get() !== "accountSettings") return; + if (getActivePage() !== "accountSettings") return; updateAuthenticationSections(); updateIntegrationSections(); updateAccountSections(); diff --git a/frontend/src/ts/pages/account.ts b/frontend/src/ts/pages/account.ts index f57c3ade6b85..cda151f5fec6 100644 --- a/frontend/src/ts/pages/account.ts +++ b/frontend/src/ts/pages/account.ts @@ -20,7 +20,7 @@ import * as ConnectionState from "../states/connection"; import * as Skeleton from "../utils/skeleton"; import type { ScaleChartOptions, LinearScaleOptions } from "chart.js"; import * as ConfigEvent from "../observables/config-event"; -import * as ActivePage from "../states/active-page"; +import { getActivePage } from "../signals/core"; import { getAuthenticatedUser } from "../firebase"; import * as Loader from "../elements/loader"; import * as ResultBatches from "../elements/result-batches"; @@ -1206,7 +1206,7 @@ qs(".pageAccount button.loadMoreResults")?.on("click", async () => { }); ConfigEvent.subscribe(({ key }) => { - if (ActivePage.get() === "account" && key === "typingSpeedUnit") { + if (getActivePage() === "account" && key === "typingSpeedUnit") { void update(); } }); diff --git a/frontend/src/ts/pages/leaderboards.ts b/frontend/src/ts/pages/leaderboards.ts index d9c78c1b0414..20fe1efffa5a 100644 --- a/frontend/src/ts/pages/leaderboards.ts +++ b/frontend/src/ts/pages/leaderboards.ts @@ -34,7 +34,7 @@ import { z } from "zod"; import { LocalStorageWithSchema } from "../utils/local-storage-with-schema"; import { UTCDateMini } from "@date-fns/utc"; import * as ConfigEvent from "../observables/config-event"; -import * as ActivePage from "../states/active-page"; +import { getActivePage } from "../signals/core"; import { PaginationQuery, FriendsOnlyQuery, @@ -1520,7 +1520,7 @@ onWindowLoad(async () => { }); ConfigEvent.subscribe(({ key }) => { - if (ActivePage.get() === "leaderboards" && key === "typingSpeedUnit") { + if (getActivePage() === "leaderboards" && key === "typingSpeedUnit") { updateContent(); fillUser(); } diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts index e539d8b84df3..a2ebcd55513d 100644 --- a/frontend/src/ts/pages/settings.ts +++ b/frontend/src/ts/pages/settings.ts @@ -11,7 +11,7 @@ import * as ThemePicker from "../elements/settings/theme-picker"; import * as Notifications from "../elements/notifications"; import * as ImportExportSettingsModal from "../modals/import-export-settings"; import * as ConfigEvent from "../observables/config-event"; -import * as ActivePage from "../states/active-page"; +import { getActivePage } from "../signals/core"; import { PageWithUrlParams } from "./page"; import { isAuthenticated } from "../firebase"; import { get as getTypingSpeedUnit } from "../utils/typing-speed-units"; @@ -591,7 +591,7 @@ export async function update( eventKey?: ConfigEvent.ConfigEventKey; } = {}, ): Promise { - if (ActivePage.get() !== "settings") { + if (getActivePage() !== "settings") { return; } @@ -993,7 +993,7 @@ ConfigEvent.subscribe(({ key, newValue }) => { } //make sure the page doesnt update a billion times when applying a preset/config at once if (configEventDisabled) return; - if (ActivePage.get() === "settings" && key !== "theme") { + if (getActivePage() === "settings" && key !== "theme") { void (key === "customBackground" ? updateFilterSectionVisibility() : update({ eventKey: key })); diff --git a/frontend/src/ts/pages/test.ts b/frontend/src/ts/pages/test.ts index eefd32e9b99c..3ff27d84d2cb 100644 --- a/frontend/src/ts/pages/test.ts +++ b/frontend/src/ts/pages/test.ts @@ -9,7 +9,6 @@ import * as Keymap from "../elements/keymap"; import * as TestConfig from "../test/test-config"; import { blurInputElement } from "../input/input-element"; import { qsr } from "../utils/dom"; -import { hideScrollToTop } from "../components/ScrollToTop"; export const page = new Page({ id: "test", @@ -36,6 +35,5 @@ export const page = new Page({ }); void TestConfig.instantUpdate(); void Keymap.refresh(); - hideScrollToTop(); }, }); diff --git a/frontend/src/ts/signals/core.ts b/frontend/src/ts/signals/core.ts new file mode 100644 index 000000000000..e0951801b92e --- /dev/null +++ b/frontend/src/ts/signals/core.ts @@ -0,0 +1,4 @@ +import { createSignal } from "solid-js"; +import { PageName } from "../pages/page"; + +export const [getActivePage, setActivePage] = createSignal("loading"); diff --git a/frontend/src/ts/states/active-page.ts b/frontend/src/ts/states/active-page.ts deleted file mode 100644 index fa8f96f8f17f..000000000000 --- a/frontend/src/ts/states/active-page.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { PageName } from "../pages/page"; - -let activePage: PageName = "loading"; - -export function get(): PageName { - return activePage; -} - -export function set(active: PageName): void { - activePage = active; -} diff --git a/frontend/src/ts/test/test-config.ts b/frontend/src/ts/test/test-config.ts index 5405c152678d..64d82659b815 100644 --- a/frontend/src/ts/test/test-config.ts +++ b/frontend/src/ts/test/test-config.ts @@ -2,7 +2,7 @@ import { ConfigValue, QuoteLength } from "@monkeytype/schemas/configs"; import { Mode } from "@monkeytype/schemas/shared"; import Config from "../config"; import * as ConfigEvent from "../observables/config-event"; -import * as ActivePage from "../states/active-page"; +import { getActivePage } from "../signals/core"; import { applyReducedMotion, promiseAnimate } from "../utils/misc"; import { areUnsortedArraysEqual } from "../utils/arrays"; import * as AuthEvent from "../observables/auth-event"; @@ -334,7 +334,7 @@ ConfigEvent.subscribe(({ key, newValue, previousValue }) => { // once the full config is loaded, we can apply everything once if (ignoreConfigEvent) return; - if (ActivePage.get() !== "test") return; + if (getActivePage() !== "test") return; if (key === "mode") { void update(previousValue, newValue); } else if ( diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts index 90138cefa18f..6a531b864aba 100644 --- a/frontend/src/ts/test/test-logic.ts +++ b/frontend/src/ts/test/test-logic.ts @@ -25,8 +25,7 @@ import * as TodayTracker from "./today-tracker"; import * as ChallengeContoller from "../controllers/challenge-controller"; import * as QuoteRateModal from "../modals/quote-rate"; import * as Result from "./result"; - -import * as ActivePage from "../states/active-page"; +import { getActivePage } from "../signals/core"; import * as TestInput from "./test-input"; import * as TestWords from "./test-words"; import * as WordsGenerator from "./words-generator"; @@ -163,7 +162,7 @@ export function restart(options = {} as RestartOptions): void { options.event?.preventDefault(); return; } - if (ActivePage.get() === "test") { + if (getActivePage() === "test") { if (!ManualRestart.get()) { if (Config.mode !== "zen") options.event?.preventDefault(); if ( @@ -386,7 +385,7 @@ async function init(): Promise { return await init(); } - if (ActivePage.get() === "test") { + if (getActivePage() === "test") { await Funbox.activate(); } @@ -1512,14 +1511,14 @@ $(".pageTest").on("click", "#testConfig .numbersMode.textButton", () => { }); $("header").on("click", "nav #startTestButton, #logo", () => { - if (ActivePage.get() === "test") restart(); + if (getActivePage() === "test") restart(); // Result.showConfetti(); }); // =============================== ConfigEvent.subscribe(({ key, newValue, nosave }) => { - if (ActivePage.get() === "test") { + if (getActivePage() === "test") { if (key === "language") { //automatically enable lazy mode for arabic if ( diff --git a/frontend/src/ts/test/test-screenshot.ts b/frontend/src/ts/test/test-screenshot.ts index 07a0c6c97afb..105275216431 100644 --- a/frontend/src/ts/test/test-screenshot.ts +++ b/frontend/src/ts/test/test-screenshot.ts @@ -6,7 +6,7 @@ import { getActiveFunboxesWithFunction } from "./funbox/list"; import * as DB from "../db"; import * as ThemeColors from "../elements/theme-colors"; import { format } from "date-fns/format"; -import * as ActivePage from "../states/active-page"; +import { getActivePage } from "../signals/core"; import { getHtmlByUserFlags } from "../controllers/user-flag-controller"; import * as Notifications from "../elements/notifications"; import { convertRemToPixels } from "../utils/numbers"; @@ -364,7 +364,7 @@ $(".pageTest").on("click", "#saveScreenshotButton", (event) => { }); $(document).on("keydown", (event) => { - if (!(TestState.resultVisible && ActivePage.get() === "test")) return; + if (!(TestState.resultVisible && getActivePage() === "test")) return; if (event.key !== "Shift") return; $("#result #saveScreenshotButton i") .removeClass("far fa-image") @@ -372,7 +372,7 @@ $(document).on("keydown", (event) => { }); $(document).on("keyup", (event) => { - if (!(TestState.resultVisible && ActivePage.get() === "test")) return; + if (!(TestState.resultVisible && getActivePage() === "test")) return; if (event.key !== "Shift") return; $("#result #saveScreenshotButton i") .removeClass("fas fa-download") diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts index 73c0110ff816..efbe30db3784 100644 --- a/frontend/src/ts/test/test-ui.ts +++ b/frontend/src/ts/test/test-ui.ts @@ -14,7 +14,7 @@ import * as CompositionState from "../states/composition"; import * as ConfigEvent from "../observables/config-event"; import * as Hangul from "hangul-js"; import * as ResultWordHighlight from "../elements/result-word-highlight"; -import * as ActivePage from "../states/active-page"; +import { getActivePage } from "../signals/core"; import Format from "../utils/format"; import { TimerColor, TimerOpacity } from "@monkeytype/schemas/configs"; import { convertRemToPixels } from "../utils/numbers"; @@ -293,7 +293,7 @@ async function joinOverlappingHints( async function updateHintsPosition(): Promise { if ( - ActivePage.get() !== "test" || + getActivePage() !== "test" || TestState.resultVisible || (Config.indicateTypos !== "below" && Config.indicateTypos !== "both") ) { @@ -501,7 +501,7 @@ export function appendEmptyWordElement( } export function updateWordsInputPosition(): void { - if (ActivePage.get() !== "test") return; + if (getActivePage() !== "test") return; const isTestRightToLeft = TestState.isDirectionReversed ? !TestState.isLanguageRightToLeft : TestState.isLanguageRightToLeft; @@ -581,7 +581,7 @@ export async function centerActiveLine(): Promise { } export function updateWordsWrapperHeight(force = false): void { - if (ActivePage.get() !== "test" || TestState.resultVisible) return; + if (getActivePage() !== "test" || TestState.resultVisible) return; if (!force && Config.mode !== "custom") return; const outOfFocusEl = document.querySelector( ".outOfFocusWarning", @@ -913,7 +913,7 @@ function getNlCharWidth( } export async function scrollTape(noAnimation = false): Promise { - if (ActivePage.get() !== "test" || TestState.resultVisible) return; + if (getActivePage() !== "test" || TestState.resultVisible) return; await centeringActiveLine; @@ -1858,7 +1858,7 @@ export function onTestRestart(source: "testPage" | "resultPage"): void { } currentTestLine = 0; - if (ActivePage.get() === "test") { + if (getActivePage() === "test") { AdController.updateFooterAndVerticalAds(false); } AdController.destroyResult(); @@ -2022,7 +2022,7 @@ ConfigEvent.subscribe(({ key, newValue }) => { void applyBurstHeatmap(); } if (key === "highlightMode") { - if (ActivePage.get() === "test") { + if (getActivePage() === "test") { void updateWordLetters({ input: TestInput.input.current, wordIndex: TestState.activeWordIndex, diff --git a/frontend/src/ts/ui.ts b/frontend/src/ts/ui.ts index 568a21cb1f50..85bec60e67b6 100644 --- a/frontend/src/ts/ui.ts +++ b/frontend/src/ts/ui.ts @@ -5,7 +5,7 @@ import * as TestState from "./test/test-state"; import * as ConfigEvent from "./observables/config-event"; import { debounce, throttle } from "throttle-debounce"; import * as TestUI from "./test/test-ui"; -import { get as getActivePage } from "./states/active-page"; +import { getActivePage } from "./signals/core"; import { isDevEnvironment } from "./utils/misc"; import { isCustomTextLong } from "./states/custom-text-name"; import { canQuickRestart } from "./utils/quick-restart";