rewrite application navigation handlers

packages/app/constants/settings/components/sessions/index.jsx

@@ -4,7 +4,7 @@ import { Button } from "antd"
 export default (props) => {
     return <Button
         onClick={() => {
-            app.setLocation("/security/sessions")
+            app.location.push("/security/sessions")
             props.ctx.close()
         }}
     >

packages/app/src/components/FeaturedEventAnnouncement/index.jsx

@@ -12,7 +12,7 @@ export default (props) => {
             return false
         }
 
-        app.setLocation(`/featured-event/${props.data?._id}`)
+        app.location.push(`/featured-event/${props.data?._id}`)
     }
 
     return <div

packages/app/src/components/Footer/index.jsx

@@ -16,7 +16,7 @@ export default (props) => {
 
             if (link.location) {
                 linkProps.onClick = () => {
-                    app.setLocation(link.location)
+                    app.location.push(link.location)
                 }
             }
 

packages/app/src/components/Layout/sidebar/index.jsx

@@ -311,11 +311,11 @@ export default class Sidebar extends React.Component {
 
 		if (typeof this.state.pathResolvers === "object") {
 			if (typeof this.state.pathResolvers[e.key] !== "undefined") {
-				return window.app.setLocation(`/${this.state.pathResolvers[e.key]}`, 150)
+				return window.app.location.push(`/${this.state.pathResolvers[e.key]}`, 150)
 			}
 		}
 
-		return window.app.setLocation(`/${e.key}`, 150)
+		return window.app.location.push(`/${e.key}`, 150)
 	}
 
 	toggleExpanded = (to, force) => {

packages/app/src/components/Navigation/index.jsx

@@ -8,7 +8,7 @@ import "./index.less"
 
 export default class NavigationMenu extends React.Component {
     onClick = (id) => {
-        window.app.setLocation(`/${id}`)
+        window.app.location.push(`/${id}`)
         this.props.close()
     }
 

packages/app/src/components/Player/MediaPlayer/index.jsx

@@ -46,7 +46,7 @@ export class AudioPlayer extends React.Component {
     }
 
     openVisualizer = () => {
-        app.setLocation("/lyrics")
+        app.location.push("/lyrics")
     }
 
     inviteSync = () => {

packages/app/src/components/PlaylistTimelineEntry/index.jsx

@@ -13,7 +13,7 @@ export default (props) => {
     }
 
     const navigateToPlaylist = () => {
-        app.setLocation(`/play/${data._id}`)
+        app.location.push(`/play/${data._id}`)
     }
 
     return <div className="playlistTimelineEntry">

packages/app/src/components/PostCard/index.jsx

@@ -36,7 +36,7 @@ const messageRegexs = [
     {
         regex: /(@[a-zA-Z0-9_]+)/gi,
         fn: (key, result) => {
-            return <a key={key} onClick={() => window.app.setLocation(`/@${result[1].substr(1)}`)}>{result[1]}</a>
+            return <a key={key} onClick={() => window.app.location.push(`/@${result[1].substr(1)}`)}>{result[1]}</a>
         }
     },
 ]

packages/app/src/components/RenderError/index.jsx

@@ -33,7 +33,7 @@ export default (props) => {
 	}
 
 	const onClickGoMain = () => {
-		window.app.setLocation(config.app.mainPath ?? "/main")
+		window.app.location.push(config.app.mainPath ?? "/main")
 	}
 	const onClickReload = () => {
 		window.location.reload()

packages/app/src/components/WidgetsWrapper/index.jsx

@@ -232,7 +232,7 @@ export default class WidgetsWrapper extends React.Component {
                         id: "settings",
                         icon: "Settings",
                         onClick: () => {
-                            app.setLocation("/settings?tab=widgets")
+                            app.location.push("/settings?tab=widgets")
                         }
                     },
                 ]}

packages/app/src/pages/[param].jsx

@@ -7,7 +7,7 @@ export default (props) => {
     if (entryParam.startsWith("@")) {
         const username = entryParam.replace("@", "")
 
-        window.app.setLocation(`/account/${username}`, {
+        window.app.location.push(`/account/${username}`, {
             state: {
                 "noTransition": true,
             }

packages/app/src/pages/home/components/feed/index.jsx

@@ -13,7 +13,7 @@ const emptyListRender = () => {
         </h2>
 
         <p>
-            Search for new people to follow on <a onClick={() => app.setLocation("/?type=global")}>global</a> tab, and start view their posts.
+            Search for new people to follow on <a onClick={() => app.location.push("/?type=global")}>global</a> tab, and start view their posts.
         </p>
     </div>
 }

packages/app/src/pages/lyrics/index.jsx

@@ -620,7 +620,7 @@ export default class SyncLyrics extends React.Component {
         // listen when user exit full screen to exit cinematic mode
         document.addEventListener("fullscreenchange", () => {
             if (!document.fullscreenElement) {
-                app.backLocation()
+                app.location.back()
             }
         })
 

packages/app/src/pages/music/components/dashboard/releases/index.jsx

@@ -88,7 +88,7 @@ const openPlaylistCreator = ({
 }
 
 const navigateToPlaylist = (playlist_id) => {
-    return app.setLocation(`/play/${playlist_id}`)
+    return app.location.push(`/play/${playlist_id}`)
 }
 
 export default (props) => {

packages/app/src/pages/music/components/feed/index.jsx

@@ -143,7 +143,7 @@ const PlaylistItem = (props) => {
             return props.onClick(playlist)
         }
 
-        return app.setLocation(`/play/${playlist._id}`)
+        return app.location.push(`/play/${playlist._id}`)
     }
 
     const onClickPlay = (e) => {

packages/app/src/pages/music/creator/components/TracksUploads/index.jsx

@@ -332,7 +332,7 @@ export default (props) => {
 
     return <div className="tracksUploads">
         <p>
-            Uploading files that are not permitted by our <a onClick={() => app.setLocation("/terms")}>Terms of Service</a> may result in your account being suspended.
+            Uploading files that are not permitted by our <a onClick={() => app.location.push("/terms")}>Terms of Service</a> may result in your account being suspended.
         </p>
 
         <div className="uploadBox">

packages/app/src/pages/tv/tabs/feed/index.jsx

@@ -88,7 +88,7 @@ export default (props) => {
     const [L_Streams, R_Streams, E_Streams] = app.cores.api.useRequest(Livestream.getLivestreams)
 
     const onClickItem = (livestream) => {
-        app.setLocation(`/live/${livestream.streamUrl}`)
+        app.location.push(`/live/${livestream.streamUrl}`)
     }
 
     if (E_Streams) {

packages/app/src/router.jsx

@@ -73,8 +73,8 @@ function generatePageElementWrapper(route, element, bindProps) {
         if (routeDeclaration) {
             if (!bindProps.user && (window.location.pathname !== config.app?.authPath)) {
                 if (!routeDeclaration.public) {
-                    if (typeof window.app.setLocation === "function") {
+                    if (typeof window.app.location.push === "function") {
-                        window.app.setLocation(config.app?.authPath ?? "/login")
+                        window.app.location.push(config.app?.authPath ?? "/login")
                         return <div />
                     }
 
@@ -92,7 +92,7 @@ function generatePageElementWrapper(route, element, bindProps) {
                         status="403"
                         title="403"
                         subTitle="Sorry, you are not authorized to access this page."
-                        extra={<Button type="primary" onClick={() => window.app.setLocation("/")}>Back Home</Button>}
+                        extra={<Button type="primary" onClick={() => window.app.location.push("/")}>Back Home</Button>}
                     />
                 }
             }
@@ -140,52 +140,54 @@ function generatePageElementWrapper(route, element, bindProps) {
 
 export const PageRender = React.memo((props) => {
     const navigate = useNavigate()
-    app.location = useLocation()
 
-    React.useEffect(() => {
+    async function setLocation(to, state = {}) {
-        app.setLocation = async (to, state = {}) => {
+        // clean double slashes
-            // clean double slashes
+        to = to.replace(/\/{2,}/g, "/")
-            to = to.replace(/\/{2,}/g, "/")
 
-            // if state is a number, it's a delay
+        // if state is a number, it's a delay
-            if (typeof state !== "object") {
+        if (typeof state !== "object") {
-                state = {}
+            state = {}
-            }
-
-            const transitionDuration = app.cores.style.getValue("page-transition-duration") ?? "250ms"
-
-            state.transitionDelay = Number(transitionDuration.replace("ms", ""))
-
-            app.eventBus.emit("router.navigate", to, {
-                state,
-            })
-
-            app.location.lastPathname = app.location.pathname
-
-            if (state.transitionDelay >= 100) {
-                await new Promise((resolve) => {
-                    setTimeout(() => {
-                        resolve()
-                    }, state.transitionDelay)
-                })
-            }
-
-            return navigate(to, {
-                state
-            })
         }
 
-        app.backLocation = (state = {}) => {
+        const transitionDuration = app.cores.style.getValue("page-transition-duration") ?? "250ms"
-            let to = app.location.lastPathname
 
-            if (!to || to === app.location.pathname) {
+        state.transitionDelay = Number(transitionDuration.replace("ms", ""))
-                console.warn("No last location found, redirecting to /")
-                to = "/"
-            }
 
-            return navigate(to, {
+        app.eventBus.emit("router.navigate", to, {
-                state
+            state,
-            })
+        })
+
+        app.location.last = window.location
+
+        if (state.transitionDelay >= 100) {
+            await new Promise((resolve) => setTimeout(resolve, state.transitionDelay))
+        }
+
+        return navigate(to, {
+            state
+        })
+    }
+
+    async function backLocation() {
+        const transitionDuration = app.cores.style.getValue("page-transition-duration") ?? "250ms"
+
+        app.eventBus.emit("router.navigate")
+
+        app.location.last = window.location
+
+        if (transitionDuration >= 100) {
+            await new Promise((resolve) => setTimeout(resolve, transitionDuration))
+        }
+
+        return window.history.back()
+    }
+
+    React.useEffect(() => {
+        app.location = {
+            last: window.location,
+            push: setLocation,
+            back: backLocation,
         }
     }, [])
 

packages/app/src/theme/fixments.less

@@ -529,4 +529,26 @@
             }
         }
     }
+}
+
+.adm-action-sheet {
+    .adm-action-sheet-button-item-wrapper {
+        border-bottom-color: var(--border-color);
+
+        .adm-action-sheet-button-item {
+            .adm-action-sheet-button-item-name {
+                color: var(--text-color);
+
+                span {
+                    color: currentColor;
+                }
+            }
+        }
+
+        .adm-action-sheet-button-item-danger {
+            .adm-action-sheet-button-item-name {
+                color: var(--adm-color-danger);
+            }
+        }
+    }
 }