event handler cleanups

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "fluent-reader",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

src/components/article.tsx

@@ -5,6 +5,7 @@ import { RSSItem } from "../scripts/models/item"
 import { Stack, CommandBarButton, IContextualMenuProps, FocusZone, ContextualMenuItemType, Spinner, Icon, Link } from "@fluentui/react"
 import { RSSSource, SourceOpenTarget } from "../scripts/models/source"
 import { shareSubmenu } from "./context-menu"
+import { platformCtrl } from "../scripts/utils"
 
 const FONT_SIZE_OPTIONS = [12, 13, 14, 15, 16, 17, 18, 19, 20]
 
@@ -12,7 +13,7 @@ type ArticleProps = {
     item: RSSItem
     source: RSSSource
     locale: string
-    shortcuts: (item: RSSItem, key: string) => void
+    shortcuts: (item: RSSItem, e: KeyboardEvent) => void
     dismiss: () => void
     offsetItem: (offset: number) => void
     toggleHasRead: (item: RSSItem) => void
@@ -72,7 +73,7 @@ class Article extends React.Component<ArticleProps, ArticleState> {
                 key: "openInBrowser",
                 text: intl.get("openExternal"),
                 iconProps: { iconName: "NavigateExternalInline" },
-                onClick: e => { window.utils.openExternal(this.props.item.link, window.utils.platform === "darwin" ? e.metaKey : e.ctrlKey) }
+                onClick: e => { window.utils.openExternal(this.props.item.link, platformCtrl(e)) }
             },
             {
                 key: "copyURL",
@@ -117,7 +118,6 @@ class Article extends React.Component<ArticleProps, ArticleState> {
                     this.toggleWebpage()
                     break
                 default:
-                    this.props.shortcuts(this.props.item, input.key)
                     const keyboardEvent = new KeyboardEvent("keydown", {
                         code: input.code,
                         key: input.key,
@@ -128,6 +128,7 @@ class Article extends React.Component<ArticleProps, ArticleState> {
                         repeat: input.isAutoRepeat,
                         bubbles: true
                     })
+                    this.props.shortcuts(this.props.item, keyboardEvent)
                     document.dispatchEvent(keyboardEvent)
                     break
             }

src/components/cards/card.tsx

@@ -1,6 +1,7 @@
 import * as React from "react"
 import { RSSSource, SourceOpenTarget } from "../../scripts/models/source"
 import { RSSItem } from "../../scripts/models/item"
+import { platformCtrl } from "../../scripts/utils"
 
 export namespace Card {
     export type Props = {
@@ -8,7 +9,7 @@ export namespace Card {
         item: RSSItem
         source: RSSSource
         keyword: string
-        shortcuts: (item: RSSItem, key: string) => void
+        shortcuts: (item: RSSItem, e: KeyboardEvent) => void
         markRead: (item: RSSItem) => void
         contextMenu: (feedId: string, item: RSSItem, e) => void
         showItem: (fid: string, item: RSSItem) => void
@@ -16,7 +17,7 @@ export namespace Card {
 
     const openInBrowser = (props: Props, e: React.MouseEvent) => {
         props.markRead(props.item)
-        window.utils.openExternal(props.item.link, window.utils.platform === "darwin" ? e.metaKey : e.ctrlKey)
+        window.utils.openExternal(props.item.link, platformCtrl(e))
     }
 
     export const bindEventsToProps = (props: Props) => ({
@@ -55,6 +56,6 @@ export namespace Card {
     }
 
     const onKeyDown = (props: Props, e: React.KeyboardEvent) => {
-        props.shortcuts(props.item, e.key)
+        props.shortcuts(props.item, e.nativeEvent)
     }
 }

src/components/context-menu.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import intl from "react-intl-universal"
 import QRCode from "qrcode.react"
-import { cutText, webSearch, getSearchEngineName } from "../scripts/utils"
+import { cutText, webSearch, getSearchEngineName, platformCtrl } from "../scripts/utils"
 import { ContextualMenu, IContextualMenuItem, ContextualMenuItemType, DirectionalHint } from "office-ui-fabric-react/lib/ContextualMenu"
 import { ContextMenuType } from "../scripts/models/app"
 import { RSSItem } from "../scripts/models/item"
@@ -77,7 +77,7 @@ export class ContextMenu extends React.Component<ContextMenuProps> {
                     iconProps: { iconName: "NavigateExternalInline" },
                     onClick: (e) => {
                         this.props.markRead(this.props.item)
-                        window.utils.openExternal(this.props.item.link, window.utils.platform === "darwin" ? e.metaKey : e.ctrlKey)
+                        window.utils.openExternal(this.props.item.link, platformCtrl(e))
                     }
                 },
                 {
@@ -158,7 +158,7 @@ export class ContextMenu extends React.Component<ContextMenuProps> {
                     text: intl.get("openExternal"),
                     iconProps: { iconName: "NavigateExternalInline" },
                     onClick: (e) => { 
-                        if (window.utils.platform === "darwin" ? e.metaKey : e.ctrlKey) {
+                        if (platformCtrl(e)) {
                             window.utils.imageCallback(ImageCallbackTypes.OpenExternalBg)
                         } else {
                             window.utils.imageCallback(ImageCallbackTypes.OpenExternal)

src/components/feeds/feed.tsx

@@ -12,7 +12,7 @@ export type FeedProps = FeedReduxProps & {
     items: RSSItem[]
     sourceMap: Object
     keyword: string
-    shortcuts: (item: RSSItem, key: string) => void
+    shortcuts: (item: RSSItem, e: KeyboardEvent) => void
     markRead: (item: RSSItem) => void
     contextMenu: (feedId: string, item: RSSItem, e) => void
     loadMore: (feed: RSSFeed) => void

src/containers/article-container.tsx

@@ -28,7 +28,7 @@ const makeMapStateToProps = () => {
 
 const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
-        shortcuts: (item: RSSItem, key: string) => dispatch(itemShortcuts(item, key)),
+        shortcuts: (item: RSSItem, e: KeyboardEvent) => dispatch(itemShortcuts(item, e)),
         dismiss: () => dispatch(dismissItem()),
         offsetItem: (offset: number) => dispatch(showOffsetItem(offset)),
         toggleHasRead: (item: RSSItem) => dispatch(item.hasRead ? markUnread(item) : markRead(item)),

src/containers/feed-container.tsx

@@ -33,7 +33,7 @@ const makeMapStateToProps = () => {
 }
 const mapDispatchToProps = dispatch => {
     return {
-        shortcuts: (item: RSSItem, key: string) => dispatch(itemShortcuts(item, key)),
+        shortcuts: (item: RSSItem, e: KeyboardEvent) => dispatch(itemShortcuts(item, e)),
         markRead: (item: RSSItem) => dispatch(markRead(item)),
         contextMenu: (feedId: string, item: RSSItem, e) => dispatch(openItemMenu(item, feedId, e)),
         loadMore: (feed: RSSFeed) => dispatch(loadMore(feed)),

src/scripts/models/item.ts

@@ -1,6 +1,6 @@
 import * as db from "../db"
 import intl from "react-intl-universal"
-import { domParser, htmlDecode, ActionStatus, AppThunk } from "../utils"
+import { domParser, htmlDecode, ActionStatus, AppThunk, platformCtrl } from "../utils"
 import { RSSSource } from "./source"
 import { FeedActionTypes, INIT_FEED, LOAD_MORE, FilterType, initFeeds } from "./feed"
 import Parser from "@yang991178/rss-parser"
@@ -331,21 +331,22 @@ export function toggleHidden(item: RSSItem): AppThunk {
     }
 }
 
-export function itemShortcuts(item: RSSItem, key: string): AppThunk {
+export function itemShortcuts(item: RSSItem, e: KeyboardEvent): AppThunk {
     return (dispatch) => {
-        switch (key) {
+        switch (e.key) {
             case "m": case "M":
                 if (item.hasRead) dispatch(markUnread(item))
                 else dispatch(markRead(item))
                 break
             case "b": case "B":
                 if (!item.hasRead) dispatch(markRead(item))
-                window.utils.openExternal(item.link)
+                window.utils.openExternal(item.link, platformCtrl(e))
                 break
             case "s": case "S":
                 dispatch(toggleStarred(item))
                 break
             case "h": case "H":
+                if (!item.hasRead) dispatch(markRead(item))
                 dispatch(toggleHidden(item))
                 break
         }

src/scripts/models/source.ts

@@ -226,7 +226,6 @@ function insertSource(source: RSSSource): AppThunk<Promise<RSSSource>> {
             }))
         })
     }
-
 }
 
 export function addSource(url: string, name: string = null, batch = false): AppThunk<Promise<number>> {

src/scripts/utils.ts

@@ -189,3 +189,7 @@ export function validateRegex(regex: string, flags = ""): RegExp {
         return null
     }
 }
+
+export function platformCtrl(e: React.MouseEvent | React.KeyboardEvent | MouseEvent | KeyboardEvent) {
+    return window.utils.platform === "darwin" ? e.metaKey : e.ctrlKey
+}