From 8109dd3a85328c3be91f98e7d7b58533abbdc0b4 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 8 Mar 2022 12:57:57 -0800 Subject: [PATCH 1/4] Fix implementation of `u` key The `u` key isn't supposed to be a general purpose back key, there is a `b` command for that. The `u` key should just be used as an "up" command to go from the reader to the library. --- .../web/components/templates/article/ArticleContainer.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/web/components/templates/article/ArticleContainer.tsx b/packages/web/components/templates/article/ArticleContainer.tsx index 6d4c379b5..cbe9d85ad 100644 --- a/packages/web/components/templates/article/ArticleContainer.tsx +++ b/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 From dad777ce6d034e045698146e4dc00dabc688f0cd Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 8 Mar 2022 13:02:38 -0800 Subject: [PATCH 2/4] Move the `u` command to the reader view --- .../lib/keyboardShortcuts/navigationShortcuts.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/web/lib/keyboardShortcuts/navigationShortcuts.ts b/packages/web/lib/keyboardShortcuts/navigationShortcuts.ts index 29c5eff7e..a1575f51d 100644 --- a/packages/web/lib/keyboardShortcuts/navigationShortcuts.ts +++ b/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, 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', From a84d79464a06c7bfe6a302d30c8466bbabe893aa Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 8 Mar 2022 13:07:03 -0800 Subject: [PATCH 3/4] Make the router param optional --- packages/web/components/templates/KeyboardShortcutListModal.tsx | 2 +- packages/web/lib/keyboardShortcuts/navigationShortcuts.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web/components/templates/KeyboardShortcutListModal.tsx b/packages/web/components/templates/KeyboardShortcutListModal.tsx index 3c9076a30..9ae97e1fd 100644 --- a/packages/web/components/templates/KeyboardShortcutListModal.tsx +++ b/packages/web/components/templates/KeyboardShortcutListModal.tsx @@ -71,7 +71,7 @@ export function KeyboardShortcutListModal( /> {})} + commands={articleKeyboardCommands(router, () => {})} /> void ): KeyboardCommand[] { return [ From 7137aaf4fcf6a7b047a0667052261c29984b01f7 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 8 Mar 2022 20:05:18 -0800 Subject: [PATCH 4/4] useRouter --- .../web/components/templates/KeyboardShortcutListModal.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/web/components/templates/KeyboardShortcutListModal.tsx b/packages/web/components/templates/KeyboardShortcutListModal.tsx index 9ae97e1fd..9ba255933 100644 --- a/packages/web/components/templates/KeyboardShortcutListModal.tsx +++ b/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 (