give responsibility of marking as read and expanding to caller

commafeed-client/src/components/content/FeedEntries.tsx

@@ -2,6 +2,7 @@ import { t } from "@lingui/macro"
 import { openModal } from "@mantine/modals"
 import { Constants } from "app/constants"
 import {
+    ExpendableEntry,
     loadMoreEntries,
     markAllEntries,
     markEntry,
@@ -31,6 +32,25 @@ export function FeedEntries() {
 
     const selectedEntry = entries.find(e => e.id === selectedEntryId)
 
+    const headerClicked = (entry: ExpendableEntry, event: React.MouseEvent) => {
+        if (event.button === 1 || event.ctrlKey || event.metaKey) {
+            // middle click
+            dispatch(markEntry({ entry, read: true }))
+        } else if (event.button === 0) {
+            // main click
+            // don't trigger the link
+            event.preventDefault()
+
+            dispatch(
+                selectEntry({
+                    entry,
+                    expand: !entry.expanded,
+                    markAsRead: !entry.expanded,
+                })
+            )
+        }
+    }
+
     // references to entries html elements
     const refs = useRef<{ [id: string]: HTMLDivElement }>({})
     useEffect(() => {
@@ -59,17 +79,32 @@ export function FeedEntries() {
         dispatch(reloadEntries())
     })
     useMousetrap("j", () => {
-        dispatch(selectNextEntry())
+        dispatch(
+            selectNextEntry({
+                expand: true,
+                markAsRead: true,
+            })
+        )
     })
     useMousetrap("k", () => {
-        dispatch(selectPreviousEntry())
+        dispatch(
+            selectPreviousEntry({
+                expand: true,
+                markAsRead: true,
+            })
+        )
     })
     useMousetrap("space", () => {
         if (selectedEntry) {
             if (selectedEntry.expanded) {
                 const ref = refs.current[selectedEntry.id]
                 if (Constants.layout.isBottomVisible(ref)) {
-                    dispatch(selectNextEntry())
+                    dispatch(
+                        selectNextEntry({
+                            expand: true,
+                            markAsRead: true,
+                        })
+                    )
                 } else {
                     const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
                     scrollArea?.scrollTo({
@@ -78,10 +113,21 @@ export function FeedEntries() {
                     })
                 }
             } else {
-                dispatch(selectEntry(selectedEntry))
+                dispatch(
+                    selectEntry({
+                        entry: selectedEntry,
+                        expand: true,
+                        markAsRead: true,
+                    })
+                )
             }
         } else {
-            dispatch(selectNextEntry())
+            dispatch(
+                selectNextEntry({
+                    expand: true,
+                    markAsRead: true,
+                })
+            )
         }
     })
     useMousetrap("shift+space", () => {
@@ -89,7 +135,12 @@ export function FeedEntries() {
             if (selectedEntry.expanded) {
                 const ref = refs.current[selectedEntry.id]
                 if (Constants.layout.isTopVisible(ref)) {
-                    dispatch(selectPreviousEntry())
+                    dispatch(
+                        selectPreviousEntry({
+                            expand: true,
+                            markAsRead: true,
+                        })
+                    )
                 } else {
                     const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
                     scrollArea?.scrollTo({
@@ -98,14 +149,25 @@ export function FeedEntries() {
                     })
                 }
             } else {
-                dispatch(selectPreviousEntry())
+                dispatch(
+                    selectPreviousEntry({
+                        expand: true,
+                        markAsRead: true,
+                    })
+                )
             }
         }
     })
     useMousetrap(["o", "enter"], () => {
         // toggle expanded status
         if (!selectedEntry) return
-        dispatch(selectEntry(selectedEntry))
+        dispatch(
+            selectEntry({
+                entry: selectedEntry,
+                expand: !selectedEntry.expanded,
+                markAsRead: !selectedEntry.expanded,
+            })
+        )
     })
     useMousetrap("v", () => {
         // open tab in foreground
@@ -160,14 +222,18 @@ export function FeedEntries() {
             useWindow={false}
             getScrollParent={() => document.getElementById(Constants.dom.mainScrollAreaId)}
         >
-            {entries.map(e => (
+            {entries.map(entry => (
                 <div
-                    key={e.id}
+                    key={entry.id}
                     ref={el => {
-                        refs.current[e.id] = el!
+                        refs.current[entry.id] = el!
                     }}
                 >
-                    <FeedEntry entry={e} expanded={!!e.expanded || viewMode === "expanded"} />
+                    <FeedEntry
+                        entry={entry}
+                        expanded={!!entry.expanded || viewMode === "expanded"}
+                        onHeaderClick={event => headerClicked(entry, event)}
+                    />
                 </div>
             ))}
         </InfiniteScroll>

commafeed-client/src/components/content/FeedEntry.tsx

@@ -1,7 +1,6 @@
 import { Anchor, Box, createStyles, Divider, Paper } from "@mantine/core"
 import { Constants } from "app/constants"
-import { markEntry, selectEntry } from "app/slices/entries"
-import { useAppDispatch, useAppSelector } from "app/store"
+import { useAppSelector } from "app/store"
 import { Entry } from "app/types"
 import React from "react"
 import { FeedEntryBody } from "./FeedEntryBody"
@@ -12,6 +11,7 @@ import { FeedEntryHeader } from "./FeedEntryHeader"
 interface FeedEntryProps {
     entry: Entry
     expanded: boolean
+    onHeaderClick: (e: React.MouseEvent) => void
 }
 
 const useStyles = createStyles((theme, props: FeedEntryProps) => {
@@ -38,22 +38,8 @@ const useStyles = createStyles((theme, props: FeedEntryProps) => {
 export function FeedEntry(props: FeedEntryProps) {
     const { classes } = useStyles(props)
     const viewMode = useAppSelector(state => state.user.settings?.viewMode)
-    const dispatch = useAppDispatch()
     const compactHeader = viewMode === "title" && !props.expanded
 
-    const headerClicked = (e: React.MouseEvent) => {
-        if (e.button === 1 || e.ctrlKey || e.metaKey) {
-            // middle click
-            dispatch(markEntry({ entry: props.entry, read: true }))
-        } else if (e.button === 0) {
-            // main click
-            // don't trigger the link
-            e.preventDefault()
-
-            dispatch(selectEntry(props.entry))
-        }
-    }
-
     return (
         <Paper shadow="xs" withBorder className={classes.paper}>
             <Anchor
@@ -61,8 +47,8 @@ export function FeedEntry(props: FeedEntryProps) {
                 href={props.entry.url}
                 target="_blank"
                 rel="noreferrer"
-                onClick={headerClicked}
-                onAuxClick={headerClicked}
+                onClick={props.onHeaderClick}
+                onAuxClick={props.onHeaderClick}
             >
                 <Box p="xs">
                     {compactHeader && <FeedEntryCompactHeader entry={props.entry} />}