diff --git a/packages/app/src/Hooks/useHistoryState.tsx b/packages/app/src/Hooks/useHistoryState.tsx new file mode 100644 index 00000000..9085ec08 --- /dev/null +++ b/packages/app/src/Hooks/useHistoryState.tsx @@ -0,0 +1,49 @@ +import { useEffect, useRef, useState } from "react"; + +function useHistoryState(initialValue, key) { + const currentHistoryState = history.state ? history.state[key] : undefined; + const myInitialValue = currentHistoryState === undefined ? initialValue : currentHistoryState; + const [state, setState] = useState(myInitialValue); + + const latestValue = useRef(state); + + const setHistoryState = value => { + const newHistoryState = { ...history.state, [key]: value }; + history.replaceState(newHistoryState, ""); + latestValue.current = value; + }; + + useEffect(() => { + if (state !== latestValue.current) { + setHistoryState(state); + const newHistoryState = { ...history.state, [key]: state }; + history.replaceState(newHistoryState, ""); + latestValue.current = state; + } + + // Cleanup logic + return () => { + if (state !== latestValue.current) { + const newHistoryState = { ...history.state, [key]: state }; + history.replaceState(newHistoryState, ""); // Save the final state + } + }; + }, [state, key]); + + const popStateListener = event => { + if (event.state && key in event.state) { + setState(event.state[key]); + } + }; + + useEffect(() => { + window.addEventListener("popstate", popStateListener); + return () => { + window.removeEventListener("popstate", popStateListener); + }; + }, []); + + return [state, setState]; +} + +export default useHistoryState; diff --git a/packages/app/src/Pages/Root.tsx b/packages/app/src/Pages/Root.tsx index 3ce379f1..06b52972 100644 --- a/packages/app/src/Pages/Root.tsx +++ b/packages/app/src/Pages/Root.tsx @@ -22,6 +22,7 @@ import TrendingHashtags from "@/Element/Trending/TrendingHashtags"; const InviteModal = lazy(() => import("@/Element/Invite")); import messages from "./messages"; +import useHistoryState from "@/Hooks/useHistoryState"; interface RelayOption { url: string; @@ -61,8 +62,8 @@ const FollowsHint = () => { export const GlobalTab = () => { const { relays } = useLogin(); - const [relay, setRelay] = useState(); - const [allRelays, setAllRelays] = useState(); + const [relay, setRelay] = useHistoryState(undefined, "global-relay"); + const [allRelays, setAllRelays] = useHistoryState(undefined, "global-relay-options"); const [now] = useState(unixNow()); const system = useContext(SnortContext);