🐛 Fix hotkey bug in image reader (#205)

* 🐛 Fix hotkey bug in image reader

Fixes #203

* 🧑‍💻 Add nuke script to clean cargo and pnpm

apps/desktop/moon.yml

@@ -34,13 +34,6 @@ tasks:
       mergeDeps: 'replace'
       mergeInputs: 'replace'
 
-  # # TODO: need to have more targets.
-  # build:
-  #   # tauri build --target universal-apple-darwin
-  #   command: 'pnpm tauri build'
-  #   local: true
-  #   deps:
-  #     - '~:build-webapp'
-
-  # build-webapp:
-  #   command: 'pnpm vite build'
+  nuke:
+    command: 'pnpm exec rimraf -rf node_modules'
+    local: true

apps/web/moon.yml

@@ -22,3 +22,6 @@ tasks:
   build:
     command: 'vite build'
     local: true
+
+  nuke:
+    command: 'rimraf -rf node_modules'

docs/moon.yml

@@ -37,3 +37,6 @@ tasks:
     options:
       shell: true
       runFromWorkspaceRoot: false
+
+  nuke:
+    command: 'rimraf -rf node_modules'

package.json

@@ -23,7 +23,8 @@
 		"build:web": "pnpm web build && pnpm build:server",
 		"build:desktop": "pnpm desktop build",
 		"moon": "moon --color --log trace",
-		"prettify": "prettier --config prettier.config.js --ignore-path .prettierignore --write ."
+		"prettify": "prettier --config prettier.config.js --ignore-path .prettierignore --write .",
+		"nuke": "cargo clean && cargo codegen && moon run :nuke && pnpm i"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.23.2",
@@ -46,6 +47,7 @@
 		"prettier": "^3.0.3",
 		"prettier-eslint": "^16.1.1",
 		"prettier-plugin-tailwindcss": "^0.5.6",
+		"rimraf": "^5.0.5",
 		"trash-cli": "^5.0.0",
 		"tsconfig-moon": "^1.3.0",
 		"typescript": "^5.2.2"

packages/components/moon.yml

@@ -8,3 +8,6 @@ tasks:
   storybook:
     command: 'start-storybook -p 6006'
     local: true
+
+  nuke:
+    command: 'rimraf -rf node_modules'

packages/interface/src/components/readers/image-based/PagedReader.tsx

@@ -20,11 +20,11 @@ export type PagedReaderProps = {
 }
 
 /**
- * A component that renders a reader for image-based media. Images are displayed one at a time,
+ * A reader component for image-based media. Images are displayed one at a time,
  * however preloading is done to reduce wait times for consecutive pages.
  *
  * Note: This component lacks animations between pages. The `AnimatedPagedReader` component
- * has animations, as the name suggests lol.
+ * will have animations between pages, but is currently a WIP
  */
 export default function PagedReader({
 	currentPage,
@@ -36,13 +36,14 @@ export default function PagedReader({
 
 	const [toolbarVisible, { toggle: toggleToolbar, off: hideToolbar }] = useBoolean(false)
 
+	const pageCount = media.pages
 	/**
 	 * This effect is responsible for preloading the next 2 pages relative to the current page. This is done to
 	 * try and prevent wait times for the next page to load.
 	 */
 	useEffect(
 		() => {
-			const pageArray = Array.from({ length: media.pages })
+			const pageArray = Array.from({ length: pageCount })
 
 			const start = currentPage >= 1 ? currentPage - 1 : 0
 
@@ -53,7 +54,7 @@ export default function PagedReader({
 		},
 
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[currentPage, media.pages],
+		[currentPage, pageCount],
 	)
 
 	/**
@@ -82,10 +83,10 @@ export default function PagedReader({
 	 * A simple function that does a little bit of validation before calling the onPageChange callback.
 	 * This is done to prevent the user from going to a page that doesn't exist.
 	 *
-	 * @param newPage The new page to navigate to
+	 * @param newPage The new page to navigate to (1-indexed)
 	 */
 	function handlePageChange(newPage: number) {
-		if (newPage < media.pages && newPage > 0) {
+		if (newPage <= media.pages && newPage > 0) {
 			onPageChange(newPage)
 		}
 	}
@@ -126,7 +127,8 @@ export default function PagedReader({
 				visible={toolbarVisible}
 				onPageChange={handlePageChange}
 			/>
-			<SideBarControl position="left" onClick={() => onPageChange(currentPage - 1)} />
+			<SideBarControl position="left" onClick={() => handlePageChange(currentPage - 1)} />
+			{/* TODO: better error handling for the loaded image */}
 			<img
 				className="z-30 max-h-full w-full select-none md:w-auto"
 				src={getPageUrl(currentPage)}
@@ -136,7 +138,7 @@ export default function PagedReader({
 				}}
 				onClick={toggleToolbar}
 			/>
-			<SideBarControl position="right" onClick={() => onPageChange(currentPage + 1)} />
+			<SideBarControl position="right" onClick={() => handlePageChange(currentPage + 1)} />
 		</div>
 	)
 }