From 4aa9c0043b0c6ed4f06816c01696b81cd511ae32 Mon Sep 17 00:00:00 2001 From: mewdev Date: Fri, 31 Jan 2025 19:03:58 +0100 Subject: [PATCH] wip: fixed urlUpdater url glitches --- apps/web/app/abc/providers/storeProvider.tsx | 15 ++-- apps/web/app/abc/utils/urlUpdater.tsx | 52 ++++++------- apps/web/app/abc/utils/urlUpdaterBackup.tsx | 77 ++++++++++++++++++++ 3 files changed, 110 insertions(+), 34 deletions(-) create mode 100644 apps/web/app/abc/utils/urlUpdaterBackup.tsx diff --git a/apps/web/app/abc/providers/storeProvider.tsx b/apps/web/app/abc/providers/storeProvider.tsx index 5c8c2014..77945432 100644 --- a/apps/web/app/abc/providers/storeProvider.tsx +++ b/apps/web/app/abc/providers/storeProvider.tsx @@ -35,10 +35,15 @@ type Store = { guideNumber: number | null; guide: Guide; isRekapitulace: boolean; - currentLocation: "navod" | "otazka" | "rekapitulace" | "vysledky" | null; + currentLocation: "navod" | "otazka" | "rekapitulace" | "vysledky" | "default"; setGuideNumber: (guideNumber: number) => void; setCurrentLocation: ( - currentLocation: "navod" | "otazka" | "rekapitulace" | "vysledky", + currentLocation: + | "navod" + | "otazka" + | "rekapitulace" + | "vysledky" + | "default", ) => void; setCurrentQuestion: (number: number) => void; setIsRekapitulace: (rekapitulaceState: boolean) => void; @@ -58,7 +63,7 @@ export const StoreProvider = ({ children, questions }: StoreProviderProps) => { const storeRef = useRef | undefined>(); if (!storeRef.current) { storeRef.current = createStore((set) => ({ - currentLocation: null, + currentLocation: "default", setCurrentLocation: (currentLocation) => set(() => ({ currentLocation: currentLocation })), setIsRekapitulace: (rekapitulaceState) => @@ -157,7 +162,7 @@ export const StoreProvider = ({ children, questions }: StoreProviderProps) => { currentQuestion: state.currentQuestion !== null && state.currentQuestion !== 0 ? state.currentQuestion - 1 - : null, + : state.currentQuestion, })), skipQuestion: () => set((state) => ({ @@ -165,7 +170,7 @@ export const StoreProvider = ({ children, questions }: StoreProviderProps) => { state.currentQuestion !== null && state.currentQuestion !== questions.length ? state.currentQuestion + 1 - : null, + : state.currentQuestion, })), guideNumber: null, guide: guide, diff --git a/apps/web/app/abc/utils/urlUpdater.tsx b/apps/web/app/abc/utils/urlUpdater.tsx index a27a2b1e..4168462d 100644 --- a/apps/web/app/abc/utils/urlUpdater.tsx +++ b/apps/web/app/abc/utils/urlUpdater.tsx @@ -8,7 +8,7 @@ type Props = { }; export default function UrlUpdater({ children }: Props) { - const path = usePathname(); + const currentUrl = usePathname(); const currentQuestion = useQuestionsStore((state) => state.currentQuestion); const setIsRekapitulace = useQuestionsStore( (state) => state.setIsRekapitulace, @@ -20,56 +20,50 @@ export default function UrlUpdater({ children }: Props) { const currentLocation = useQuestionsStore((state) => state.currentLocation); useEffect(() => { - // store location setter function locationSetter() { - if (path.includes("rekapitulace")) { + if ( + currentUrl.includes("rekapitulace") && + currentLocation !== "rekapitulace" + ) { setCurrentLocation("rekapitulace"); setIsRekapitulace(true); - } else if (path.includes("otazka")) { + } else if ( + currentUrl.includes("otazka") && + currentLocation !== "otazka" + ) { setCurrentLocation("otazka"); setIsRekapitulace(false); - } else if (path.includes("navod")) { + } else if (currentUrl.includes("navod") && currentLocation !== "navod") { setCurrentLocation("navod"); - } else if (path.includes("vysledky")) { + setIsRekapitulace(false); + } else if ( + currentUrl.includes("vysledky") && + currentLocation !== "vysledky" + ) { setCurrentLocation("vysledky"); setIsRekapitulace(false); } } - // url setter - function changeUrl() { - // insert conditionals here for edge cases? - if (currentLocation === "otazka" && currentQuestion !== null) { - // refactor url structure - history.replaceState({}, "", `/abc/otazka/${currentQuestion}`); - } else if (currentLocation === "navod") { - // refactor url structure - history.replaceState({}, "", `/abc/navod/${guideNumber}`); - } else if (currentLocation === "rekapitulace") { - history.replaceState({}, "", `/abc/rekapitulace`); - } else if (currentLocation === "vysledky") { - history.replaceState({}, "", `/abc/vysledky`); - } - } - // title setter + + locationSetter(); + }, [currentUrl, currentLocation]); + + useEffect(() => { function changeTitle() { if (currentLocation === "otazka") { - // refactor title structure document.title = `Otázka ${currentQuestion}`; + history.replaceState({}, "", `/abc/otazka/${currentQuestion}`); } else if (currentLocation === "navod") { - // refactor title structure document.title = `Návod ${guideNumber}`; + history.replaceState({}, "", `/abc/navod/${guideNumber}`); } else if (currentLocation === "rekapitulace") { document.title = `Rekapitulace`; } else if (currentLocation === "vysledky") { document.title = `Výsledky`; } } - - locationSetter(); changeTitle(); - changeUrl(); - }, [path, currentQuestion, guideNumber, currentLocation]); - + }, [guideNumber, currentQuestion]); return children; } diff --git a/apps/web/app/abc/utils/urlUpdaterBackup.tsx b/apps/web/app/abc/utils/urlUpdaterBackup.tsx new file mode 100644 index 00000000..a27a2b1e --- /dev/null +++ b/apps/web/app/abc/utils/urlUpdaterBackup.tsx @@ -0,0 +1,77 @@ +"use client"; +import { useEffect } from "react"; +import { useQuestionsStore } from "../providers/storeProvider"; +import { usePathname } from "next/navigation"; + +type Props = { + children: React.ReactNode; +}; + +export default function UrlUpdater({ children }: Props) { + const path = usePathname(); + const currentQuestion = useQuestionsStore((state) => state.currentQuestion); + const setIsRekapitulace = useQuestionsStore( + (state) => state.setIsRekapitulace, + ); + const setCurrentLocation = useQuestionsStore( + (state) => state.setCurrentLocation, + ); + const guideNumber = useQuestionsStore((state) => state.guideNumber); + const currentLocation = useQuestionsStore((state) => state.currentLocation); + + useEffect(() => { + // store location setter + function locationSetter() { + if (path.includes("rekapitulace")) { + setCurrentLocation("rekapitulace"); + setIsRekapitulace(true); + } else if (path.includes("otazka")) { + setCurrentLocation("otazka"); + setIsRekapitulace(false); + } else if (path.includes("navod")) { + setCurrentLocation("navod"); + } else if (path.includes("vysledky")) { + setCurrentLocation("vysledky"); + setIsRekapitulace(false); + } + } + // url setter + function changeUrl() { + // insert conditionals here for edge cases? + if (currentLocation === "otazka" && currentQuestion !== null) { + // refactor url structure + history.replaceState({}, "", `/abc/otazka/${currentQuestion}`); + } else if (currentLocation === "navod") { + // refactor url structure + history.replaceState({}, "", `/abc/navod/${guideNumber}`); + } else if (currentLocation === "rekapitulace") { + history.replaceState({}, "", `/abc/rekapitulace`); + } else if (currentLocation === "vysledky") { + history.replaceState({}, "", `/abc/vysledky`); + } + } + // title setter + function changeTitle() { + if (currentLocation === "otazka") { + // refactor title structure + document.title = `Otázka ${currentQuestion}`; + } else if (currentLocation === "navod") { + // refactor title structure + document.title = `Návod ${guideNumber}`; + } else if (currentLocation === "rekapitulace") { + document.title = `Rekapitulace`; + } else if (currentLocation === "vysledky") { + document.title = `Výsledky`; + } + } + + locationSetter(); + changeTitle(); + changeUrl(); + }, [path, currentQuestion, guideNumber, currentLocation]); + + return children; +} + +// TODO: +// 1. needs refactoring (url updates glitch)