Merge pull request #204 from omnivore-app/fix/u-keyboard-cmd

Fix implementation of `u` key

packages/web/components/templates/KeyboardShortcutListModal.tsx

@@ -18,6 +18,7 @@ import {
   highlightBarKeyboardCommands,
   articleKeyboardCommands,
 } from '../../lib/keyboardShortcuts/navigationShortcuts'
+import { useRouter } from 'next/router'
 
 type KeyboardShortcutListModalProps = {
   onOpenChange: (open: boolean) => void
@@ -26,6 +27,8 @@ type KeyboardShortcutListModalProps = {
 export function KeyboardShortcutListModal(
   props: KeyboardShortcutListModalProps
 ): JSX.Element {
+  const router = useRouter()
+
   return (
     <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
       <ModalOverlay />
@@ -71,7 +74,7 @@ export function KeyboardShortcutListModal(
           />
           <ShortcutListSection
             title="Article"
-            commands={articleKeyboardCommands(() => {})}
+            commands={articleKeyboardCommands(router, () => {})}
           />
           <ShortcutListSection
             title="Highlight Bar"

packages/web/components/templates/article/ArticleContainer.tsx

@@ -10,7 +10,6 @@ import { MutableRefObject, useEffect, useState } from 'react'
 import { ReportIssuesModal } from './ReportIssuesModal'
 import { reportIssueMutation } from '../../../lib/networking/mutations/reportIssueMutation'
 import { ArticleHeaderToolbar } from './ArticleHeaderToolbar'
-import Head from 'next/head'
 import { articleKeyboardCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts'
 import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
 import { ShareArticleModal } from './ShareArticleModal'
@@ -19,6 +18,7 @@ import { webBaseURL } from '../../../lib/appConfig'
 import { updateThemeLocally } from '../../../lib/themeUpdater'
 import { EditLabelsModal } from './EditLabelsModal'
 import Script from 'next/script'
+import { useRouter } from 'next/router'
 
 type ArticleContainerProps = {
   viewerUsername: string
@@ -33,6 +33,7 @@ type ArticleContainerProps = {
 }
 
 export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
+  const router = useRouter()
   const [showShareModal, setShowShareModal] = useState(false)
   const [showLabelsModal, setShowLabelsModal] = useState(false)
   const [showNotesSidebar, setShowNotesSidebar] = useState(false)
@@ -48,7 +49,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
   }
 
   useKeyboardShortcuts(
-    articleKeyboardCommands(async (action) => {
+    articleKeyboardCommands(router, async (action) => {
       switch (action) {
         case 'openOriginalArticle':
           const url = props.article.url

packages/web/lib/keyboardShortcuts/navigationShortcuts.ts

@@ -11,14 +11,10 @@ export function navigationCommands(
       shortcutKeyDescription: 'g then h',
       callback: () => router?.push('/home'),
     },
-    // {
-    //   shortcutKeys: ['g', 'd'],
-    //   callback: () => router.push('/discover'),
-    // },
     {
-      shortcutKeys: ['b|u'],
+      shortcutKeys: ['b'],
       actionDescription: 'Go back',
-      shortcutKeyDescription: 'b or u',
+      shortcutKeyDescription: 'b',
       callback: () => router?.back(),
     },
   ]
@@ -213,6 +209,7 @@ type ArticleKeyboardAction =
   | 'editLabels'
 
 export function articleKeyboardCommands(
+  router: NextRouter | undefined,
   actionHandler: (action: ArticleKeyboardAction) => void
 ): KeyboardCommand[] {
   return [
@@ -222,6 +219,12 @@ export function articleKeyboardCommands(
       shortcutKeyDescription: 'o',
       callback: () => actionHandler('openOriginalArticle'),
     },
+    {
+      shortcutKeys: ['u'],
+      actionDescription: 'Back to library',
+      shortcutKeyDescription: 'u',
+      callback: () => router?.push('/home'),
+    },
     {
       shortcutKeys: ['+'],
       actionDescription: 'Increase font size',