Merge pull request #108 from dancamdev/navigation-fix

Navigation fixes
stumpapp · Mar 26, 2023 · 43a77c0 · 43a77c0
2 parents 196595c + f5fa4dc
commit 43a77c0
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 77 deletions.
diff --git a/packages/client/src/stores/useTopBarStore.ts b/packages/client/src/stores/useTopBarStore.ts
@@ -5,12 +5,7 @@ import { StoreBase } from '.'
 
 export interface TopBarStore extends StoreBase<TopBarStore> {
 	title?: string
-	backwardsUrl?: string | number
-	forwardsUrl?: string | number
-
 	setTitle(title?: string): void
-	setBackwardsUrl(backwardsUrl?: string | number): void
-	setForwardsUrl(forwardsUrl?: string | number): void
 }
 
 export const useTopBarStore = create<TopBarStore>()(
@@ -21,12 +16,6 @@ export const useTopBarStore = create<TopBarStore>()(
 		set(changes) {
 			set((state) => ({ ...state, ...changes }))
 		},
-		setBackwardsUrl(backwardsUrl) {
-			set((store) => ({ ...store, backwardsUrl }))
-		},
-		setForwardsUrl(forwardsUrl) {
-			set((store) => ({ ...store, forwardsUrl }))
-		},
 		setTitle(title) {
 			set((store) => ({ ...store, title }))
 		},

diff --git a/packages/interface/src/AppRouter.tsx b/packages/interface/src/AppRouter.tsx
@@ -13,23 +13,23 @@ type LazyComponent = Promise<{
 
 // I'm still so annoyed at this lol
 const lazily = (loader: () => unknown) => React.lazy(() => loader() as LazyComponent)
-const Home = lazily(() => import('./pages/Home'))
-const LibraryOverview = lazily(() => import('./pages/library/LibraryOverview'))
-const LibraryFileExplorer = lazily(() => import('./pages/library/LibraryFileExplorer'))
-const CreateLibrary = lazily(() => import('./pages/library/CreateLibrary'))
-const SeriesOverview = lazily(() => import('./pages/SeriesOverview'))
-const BookOverview = lazily(() => import('./pages/book/BookOverview'))
-const ReadBook = lazily(() => import('./pages/book/ReadBook'))
-const ReadEpub = lazily(() => import('./pages/book/ReadEpub'))
-const SettingsLayout = lazily(() => import('./components/settings/SettingsLayout'))
-const GeneralSettings = lazily(() => import('./pages/settings/GeneralSettings'))
-const JobSettings = lazily(() => import('./pages/settings/JobSettings'))
-const ServerSettings = lazily(() => import('./pages/settings/ServerSettings'))
-const UserSettings = lazily(() => import('./pages/settings/UserSettings'))
-const FourOhFour = lazily(() => import('./pages/FourOhFour'))
-const ServerConnectionError = lazily(() => import('./pages/ServerConnectionError'))
-const LoginOrClaim = lazily(() => import('./pages/LoginOrClaim'))
-const OnBoarding = lazily(() => import('./pages/OnBoarding'))
+const Home = lazily(() => import('./pages/Home.js'))
+const LibraryOverview = lazily(() => import('./pages/library/LibraryOverview.js'))
+const LibraryFileExplorer = lazily(() => import('./pages/library/LibraryFileExplorer.js'))
+const CreateLibrary = lazily(() => import('./pages/library/CreateLibrary.js'))
+const SeriesOverview = lazily(() => import('./pages/SeriesOverview.js'))
+const BookOverview = lazily(() => import('./pages/book/BookOverview.js'))
+const ReadBook = lazily(() => import('./pages/book/ReadBook.js'))
+const ReadEpub = lazily(() => import('./pages/book/ReadEpub.js'))
+const SettingsLayout = lazily(() => import('./components/settings/SettingsLayout.js'))
+const GeneralSettings = lazily(() => import('./pages/settings/GeneralSettings.js'))
+const JobSettings = lazily(() => import('./pages/settings/JobSettings.js'))
+const ServerSettings = lazily(() => import('./pages/settings/ServerSettings.js'))
+const UserSettings = lazily(() => import('./pages/settings/UserSettings.js'))
+const FourOhFour = lazily(() => import('./pages/FourOhFour.js'))
+const ServerConnectionError = lazily(() => import('./pages/ServerConnectionError.js'))
+const LoginOrClaim = lazily(() => import('./pages/LoginOrClaim.js'))
+const OnBoarding = lazily(() => import('./pages/OnBoarding.js'))
 
 function OnBoardingRouter() {
 	return (

diff --git a/packages/interface/src/components/readers/utils/EpubControls.tsx b/packages/interface/src/components/readers/utils/EpubControls.tsx
@@ -91,7 +91,10 @@ function EpubHeaderControls({
 				align="flex-start"
 			>
 				<ButtonGroup isAttached>
-					<IconButton variant="ghost" onClick={() => navigate(`/books/${epub.media_entity.id}`)}>
+					{/* FIXME: This navigate(-3) is effectively going back three times.
+						Likely related unwanted exta pushing on the routes stack when 
+						opening an epub */}
+					<IconButton variant="ghost" onClick={() => navigate(-3)}>
 						<ArrowLeft className="text-lg" weight="regular" />
 					</IconButton>
 

diff --git a/packages/interface/src/components/sidebar/Sidebar.tsx b/packages/interface/src/components/sidebar/Sidebar.tsx
@@ -10,7 +10,7 @@ import {
 	useDisclosure,
 	VStack,
 } from '@chakra-ui/react'
-import { refreshUseLibrary, useLibraries } from '@stump/client'
+import { refreshUseLibrary, useAppProps, useLibraries } from '@stump/client'
 import type { Library } from '@stump/types'
 import clsx from 'clsx'
 import { AnimatePresence } from 'framer-motion'
@@ -187,6 +187,8 @@ export function SidebarContent() {
 		[libraries, locale, location.pathname],
 	)
 
+	const isBrowser = useAppProps()?.platform === 'browser'
+
 	return (
 		<>
 			<HStack px={2} justifyContent="space-between" alignItems="center">
@@ -205,7 +207,7 @@ export function SidebarContent() {
 					</Text>
 				</HStack>
 
-				<NavigationButtons />
+				{!isBrowser && <NavigationButtons />}
 			</HStack>
 
 			<VStack spacing={2} flexGrow={1} maxH="full" overflow="hidden" p={1}>

diff --git a/packages/interface/src/components/topbar/NavigationButtons.tsx b/packages/interface/src/components/topbar/NavigationButtons.tsx
@@ -1,37 +1,21 @@
 import { HStack, useColorModeValue } from '@chakra-ui/react'
-import { useTopBarStore } from '@stump/client'
 import { CaretLeft, CaretRight } from 'phosphor-react'
 import { useCallback } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
-import { To, useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 
 import Button from '../../ui/Button'
 
 export default function NavigationButtons() {
 	const navigate = useNavigate()
 
-	// FIXME: still not a perfect solution, but it works for now.
-	// https://github.com/remix-run/react-router/discussions/8782
-	const { backwardsUrl, forwardsUrl } = useTopBarStore(({ backwardsUrl, forwardsUrl }) => ({
-		backwardsUrl,
-		forwardsUrl,
-	}))
-
 	const navigateForward = useCallback(() => {
-		if (forwardsUrl != undefined) {
-			navigate(forwardsUrl as To)
-		} else if (forwardsUrl !== 0) {
-			navigate(1)
-		}
-	}, [navigate, forwardsUrl])
+		navigate(1)
+	}, [navigate])
 
 	const navigateBackward = useCallback(() => {
-		if (backwardsUrl) {
-			navigate(backwardsUrl as To)
-		} else if (backwardsUrl !== 0) {
-			navigate(-1)
-		}
-	}, [navigate, backwardsUrl])
+		navigate(-1)
+	}, [navigate])
 
 	// FIXME: this is pretty buggy, but it works for now.
 	// TODO: platform specific keybinds
@@ -63,7 +47,6 @@ export default function NavigationButtons() {
 				size="sm"
 				_hover={{ bg: useColorModeValue('gray.200', 'gray.750') }}
 				onClick={navigateBackward}
-				disabled={backwardsUrl === 0}
 			>
 				<CaretLeft size="0.75rem" />
 			</Button>
@@ -77,7 +60,6 @@ export default function NavigationButtons() {
 				size="sm"
 				_hover={{ bg: useColorModeValue('gray.200', 'gray.750') }}
 				onClick={navigateForward}
-				disabled={forwardsUrl === 0}
 			>
 				<CaretRight size="0.75rem" />
 			</Button>

diff --git a/packages/interface/src/pages/SeriesOverview.tsx b/packages/interface/src/pages/SeriesOverview.tsx
@@ -1,6 +1,6 @@
 import { Box, ButtonGroup, Heading, Spacer } from '@chakra-ui/react'
 import { getSeriesThumbnail } from '@stump/api'
-import { useLayoutMode, useSeries, useSeriesMedia, useTopBarStore } from '@stump/client'
+import { useLayoutMode, useSeries, useSeriesMedia } from '@stump/client'
 import { invalidateQueries } from '@stump/client/invalidate'
 import { QUERY_KEYS } from '@stump/client/query_keys'
 import type { Series } from '@stump/types'
@@ -68,8 +68,6 @@ export default function SeriesOverview() {
 		throw new Error('Series id is required')
 	}
 
-	const setBackwardsUrl = useTopBarStore((state) => state.setBackwardsUrl)
-
 	const { layoutMode } = useLayoutMode('SERIES')
 	const { series, isLoading: isLoadingSeries } = useSeries(id)
 	const { isLoading: isLoadingMedia, media, pageData } = useSeriesMedia(id, page)
@@ -84,19 +82,14 @@ export default function SeriesOverview() {
 	}, [isInView, containerRef, pageData?.current_page])
 
 	useEffect(() => {
-		if (series) {
-			setBackwardsUrl(`/libraries/${series.library_id}`)
-		}
-
 		return () => {
-			setBackwardsUrl()
 			// FIXME: why do I need to do this??? What I found was happening was that
 			// the next series returned from `useSeries` would be ~correct~ BUT it would
 			// be wrapped in an axios response, i.e. `{ data: { ... } }`. This doesn't make a
 			// lick of sense to me yet...
 			invalidateQueries({ keys: [QUERY_KEYS.series.get_by_id] })
 		}
-	}, [series, setBackwardsUrl])
+	}, [series])
 
 	// FIXME: ugly
 	if (isLoadingSeries) {

diff --git a/packages/interface/src/pages/book/BookOverview.tsx b/packages/interface/src/pages/book/BookOverview.tsx
@@ -1,6 +1,6 @@
 import { Box, Heading, Text, useColorModeValue } from '@chakra-ui/react'
-import { useMediaById, useTopBarStore } from '@stump/client'
-import { Suspense, useEffect } from 'react'
+import { useMediaById } from '@stump/client'
+import { Suspense } from 'react'
 import { Helmet } from 'react-helmet'
 import { useParams } from 'react-router-dom'
 
@@ -22,18 +22,6 @@ export default function BookOverview() {
 
 	const { media, isLoading } = useMediaById(id)
 
-	const setBackwardsUrl = useTopBarStore((state) => state.setBackwardsUrl)
-
-	useEffect(() => {
-		if (media?.series_id) {
-			setBackwardsUrl(`/series/${media.series_id}`)
-		}
-
-		return () => {
-			setBackwardsUrl()
-		}
-	}, [media, setBackwardsUrl])
-
 	const textColor = useColorModeValue('gray.700', 'gray.400')
 
 	if (!isLoading && !media) {