diff --git a/app/features/map-planner/components/Planner.tsx b/app/features/map-planner/components/Planner.tsx index b49f68dae..a6425aed3 100644 --- a/app/features/map-planner/components/Planner.tsx +++ b/app/features/map-planner/components/Planner.tsx @@ -8,7 +8,6 @@ import { } from "@tldraw/tldraw"; import randomInt from "just-random-integer"; import * as React from "react"; -import { useForceRefreshOnMount } from "~/hooks/useForceRefresh"; import { usePlannerBg } from "~/hooks/usePlannerBg"; import { useTranslation } from "~/hooks/useTranslation"; import type { LanguageCode } from "~/modules/i18n"; @@ -35,14 +34,11 @@ export default function Planner() { const { i18n } = useTranslation(); const plannerBgParams = usePlannerBg(); - const appRef = React.useRef(); - const app = appRef.current!; - - useForceRefreshOnMount(); + const [app, setApp] = React.useState(null); const handleMount = React.useCallback( (mountedApp: TldrawApp) => { - appRef.current = mountedApp; + setApp(mountedApp); mountedApp.setSetting( "language", ourLanguageToTldrawLanguage(i18n.language) @@ -138,7 +134,7 @@ export default function Planner() { randomInt(imageSpawnBoxLeft, imageSpawnBoxRight), randomInt(imageSpawnBoxTop, imageSpawnBoxBottom), ], - cb: () => app.selectTool("select"), + cb: () => app?.selectTool("select"), }); }, [ @@ -157,6 +153,7 @@ export default function Planner() { mode: ModeShort; style: StageBackgroundStyle; }) => { + if (!app) return; app.resetDocument(); handleAddImage({ src: stageMinimapImageUrlWithEnding(urlArgs), @@ -184,7 +181,7 @@ export default function Planner() { {t("common:plans.poweredBy", { name: "tldraw" })} - + ); } diff --git a/app/hooks/useForceRefresh.tsx b/app/hooks/useForceRefresh.tsx deleted file mode 100644 index db558bd5b..000000000 --- a/app/hooks/useForceRefresh.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import * as React from "react"; - -export function useForceRefreshOnMount() { - const [, setOne] = React.useState(0); - - React.useEffect(() => { - setOne(1); - }, []); -}