client: Reload entries by clicking on active menu item

assets/js/helpers/hooks.js

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+import { useLocation } from 'react-router-dom';
+
+/**
+ * Changes its return value whenever the value of forceReload field
+ * in the location state increases.
+ */
+export function useShouldReload() {
+    const location = useLocation();
+    const forceReload = location?.state?.forceReload;
+    const [oldForceReload, setOldForceReload] = useState(forceReload);
+
+    if (oldForceReload !== forceReload) {
+        setOldForceReload(forceReload);
+    }
+
+    // The location state is not persisted during navigation
+    // so forceReload would change to undefined on successive navigation,
+    // triggering an unwanter reload.
+    // We use a separate counter to prevent that.
+    const [reloadCounter, setReloadCounter] = useState(0);
+    if (forceReload !== undefined && forceReload !== oldForceReload) {
+        let newReloadCounter = reloadCounter + 1;
+
+        setReloadCounter(newReloadCounter);
+        return newReloadCounter;
+    }
+
+    return reloadCounter;
+}

assets/js/helpers/uri.js

@@ -64,3 +64,12 @@ export function makeEntriesLink(location, { filter, category, id, search }) {
 
     return path + (searchParam ? `?search=${encodeURIComponent(searchParam)}` : '');
 }
+
+export function forceReload(location) {
+    const state = location.state ?? {};
+
+    return {
+        ...state,
+        forceReload: (state.forceReload ?? 0) + 1,
+    };
+}

assets/js/templates/EntriesPage.jsx

@@ -11,6 +11,8 @@ import { LoadingState } from '../requests/LoadingState';
 import { Spinner, SpinnerBig } from './Spinner';
 import classNames from 'classnames';
 import { LocalizationContext } from '../helpers/i18n';
+import { useShouldReload } from '../helpers/hooks';
+import { forceReload } from '../helpers/uri';
 import { HttpError } from '../errors';
 
 function reloadList({ fetchParams, abortController, append = false, waitForSync = true, entryId = null, setLoadingState }) {
@@ -138,10 +140,11 @@ function handleRefreshSource({ event, source, setLoadingState, setNavExpanded, r
     });
 }
 
-export function EntriesPage({ entries, hasMore, loadingState, setLoadingState, forceReload, selectedEntry, expandedEntries, setNavExpanded, navSourcesExpanded, reload }) {
+export function EntriesPage({ entries, hasMore, loadingState, setLoadingState, selectedEntry, expandedEntries, setNavExpanded, navSourcesExpanded, reload }) {
     const allowedToUpdate = !selfoss.config.authEnabled || selfoss.config.allowPublicUpdate || selfoss.loggedin.value;
 
     const location = useLocation();
+    const forceReload = useShouldReload();
     const searchText = React.useMemo(() => {
         const queryString = new URLSearchParams(location.search);
 
@@ -358,7 +361,6 @@ EntriesPage.propTypes = {
     hasMore: PropTypes.bool.isRequired,
     loadingState: PropTypes.oneOf(Object.values(LoadingState)).isRequired,
     setLoadingState: PropTypes.func.isRequired,
-    forceReload: PropTypes.number.isRequired,
     selectedEntry: nullable(PropTypes.number).isRequired,
     expandedEntries: PropTypes.objectOf(PropTypes.bool).isRequired,
     setNavExpanded: PropTypes.func.isRequired,
@@ -377,10 +379,6 @@ const initialState = {
     selectedEntry: null,
     expandedEntries: {},
     loadingState: LoadingState.INITIAL,
-    /**
-     * HACK: A counter that is increased every time reload action (r key) is triggered.
-     */
-    forceReload: 0,
 };
 
 export default class StateHolder extends React.Component {
@@ -799,9 +797,12 @@ export default class StateHolder extends React.Component {
     }
 
     reload() {
-        this.setState({
-            ...initialState,
-            forceReload: this.state.forceReload + 1,
+        /**
+         * HACK: A counter that is increased every time reload action (r key) is triggered.
+         */
+        selfoss.history.replace({
+            ...this.props.location,
+            state: forceReload(this.props.location),
         });
     }
 
@@ -814,7 +815,6 @@ export default class StateHolder extends React.Component {
                 hasMore={this.state.hasMore}
                 loadingState={this.state.loadingState}
                 setLoadingState={this.setLoadingState}
-                forceReload={this.state.forceReload}
                 setNavExpanded={this.props.setNavExpanded}
                 navSourcesExpanded={this.props.navSourcesExpanded}
                 reload={this.reload}
@@ -824,6 +824,7 @@ export default class StateHolder extends React.Component {
 }
 
 StateHolder.propTypes = {
+    location: PropTypes.object.isRequired,
     match: PropTypes.object.isRequired,
     setNavExpanded: PropTypes.func.isRequired,
     navSourcesExpanded: PropTypes.bool.isRequired,

assets/js/templates/Item.jsx

@@ -6,7 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import { createFocusTrap } from 'focus-trap';
 import { nextprev, Direction } from '../shortcuts';
-import { makeEntriesLink } from '../helpers/uri';
+import { forceReload, makeEntriesLink } from '../helpers/uri';
 import * as icons from '../icons';
 import { LocalizationContext } from '../helpers/i18n';
 
@@ -148,13 +148,21 @@ function ItemTag({tag, color}) {
         () => ({ color: color.foreColor, backgroundColor: color.backColor }),
         [color]
     );
-    const location = useLocation();
+
+    const link = React.useCallback(
+        (location) => ({
+            ...location,
+            pathname: makeEntriesLink(location, { category: `tag-${tag}`, id: null }),
+            state: forceReload(location),
+        }),
+        [tag]
+    );
 
     return (
         <Link
             className="entry-tags-tag"
             style={style}
-            to={makeEntriesLink(location, { category: `tag-${tag}`, id: null })}
+            to={link}
             onClick={preventDefaultOnSmartphone}
         >
             {tag}
@@ -343,6 +351,15 @@ export default function Item({ currentTime, item, selected, expanded, setNavExpa
         [title]
     );
 
+    const sourceLink = React.useCallback(
+        (location) => ({
+            ...location,
+            pathname: makeEntriesLink(location, { category: `source-${item.source}`, id: null }),
+            state: forceReload(location),
+        }),
+        [item.source]
+    );
+
     const _ = React.useContext(LocalizationContext);
 
     return (
@@ -398,7 +415,7 @@ export default function Item({ currentTime, item, selected, expanded, setNavExpa
             {/* source */}
             <Link
                 className="entry-source"
-                to={makeEntriesLink(location, { category: `source-${item.source}`, id: null })}
+                to={sourceLink}
                 onClick={preventDefaultOnSmartphone}
             >
                 {sourcetitle}

assets/js/templates/NavFilters.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link, useLocation, useRouteMatch } from 'react-router-dom';
+import { Link, useRouteMatch } from 'react-router-dom';
 import classNames from 'classnames';
 import { FilterType } from '../Filter';
-import { makeEntriesLink, ENTRIES_ROUTE_PATTERN } from '../helpers/uri';
+import { forceReload, makeEntriesLink, ENTRIES_ROUTE_PATTERN } from '../helpers/uri';
 import Collapse from '@kunukn/react-collapse';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as icons from '../icons';
@@ -21,7 +21,6 @@ export default function NavFilters({
 }) {
     const [expanded, setExpanded] = React.useState(true);
 
-    const location = useLocation();
     // useParams does not seem to work.
     const match = useRouteMatch(ENTRIES_ROUTE_PATTERN);
     const params = match !== null ? match.params : {};
@@ -36,6 +35,33 @@ export default function NavFilters({
         [setNavExpanded]
     );
 
+    const newestLink = React.useCallback(
+        (location) => ({
+            ...location,
+            pathname: makeEntriesLink(location, { filter: FilterType.NEWEST, id: null }),
+            state: forceReload(location),
+        }),
+        []
+    );
+
+    const unreadLink = React.useCallback(
+        (location) => ({
+            ...location,
+            pathname: makeEntriesLink(location, { filter: FilterType.UNREAD, id: null }),
+            state: forceReload(location),
+        }),
+        []
+    );
+
+    const starredLink = React.useCallback(
+        (location) => ({
+            ...location,
+            pathname: makeEntriesLink(location, { filter: FilterType.STARRED, id: null }),
+            state: forceReload(location),
+        }),
+        []
+    );
+
     const _ = React.useContext(LocalizationContext);
 
     return (
@@ -44,14 +70,14 @@ export default function NavFilters({
             <Collapse isOpen={expanded} className="collapse-css-transition">
                 <ul id="nav-filter" aria-labelledby="nav-filter-title">
                     <li>
-                        <Link id="nav-filter-newest" to={makeEntriesLink(location, { filter: FilterType.NEWEST, id: null })} className={classNames({'nav-filter-newest': true, active: params.filter === FilterType.NEWEST})} onClick={collapseNav}>
+                        <Link id="nav-filter-newest" to={newestLink} className={classNames({'nav-filter-newest': true, active: params.filter === FilterType.NEWEST})} onClick={collapseNav}>
                             {_('newest')}
                             <span className={classNames({'offline-count': true, offline: offlineState, online: !offlineState, diff: allItemsCount !== allItemsOfflineCount && allItemsOfflineCount})} title={_('offline_count')}>{allItemsOfflineCount > 0 ? allItemsOfflineCount : ''}</span>
                             <span className="count" title={_('online_count')}>{allItemsCount > 0 ? allItemsCount : ''}</span>
                         </Link>
                     </li>
                     <li>
-                        <Link id="nav-filter-unread" to={makeEntriesLink(location, { filter: FilterType.UNREAD, id: null })} className={classNames({'nav-filter-unread': true, active: params.filter === FilterType.UNREAD})} onClick={collapseNav}>
+                        <Link id="nav-filter-unread" to={unreadLink} className={classNames({'nav-filter-unread': true, active: params.filter === FilterType.UNREAD})} onClick={collapseNav}>
                             {_('unread')}
                             <span className={classNames({'unread-count': true, offline: offlineState, online: !offlineState, unread: unreadItemsCount > 0})}>
                                 <span className={classNames({'offline-count': true, offline: offlineState, online: !offlineState, diff: unreadItemsCount !== unreadItemsOfflineCount && unreadItemsOfflineCount})} title={_('offline_count')}>{unreadItemsOfflineCount > 0 ? unreadItemsOfflineCount : ''}</span>
@@ -60,7 +86,7 @@ export default function NavFilters({
                         </Link>
                     </li>
                     <li>
-                        <Link id="nav-filter-starred" to={makeEntriesLink(location, { filter: FilterType.STARRED, id: null })} className={classNames({'nav-filter-starred': true, active: params.filter === FilterType.STARRED})} onClick={collapseNav}>
+                        <Link id="nav-filter-starred" to={starredLink} className={classNames({'nav-filter-starred': true, active: params.filter === FilterType.STARRED})} onClick={collapseNav}>
                             {_('starred')}
                             <span className={classNames({'offline-count': true, offline: offlineState, online: !offlineState, diff: starredItemsCount !== starredItemsOfflineCount && starredItemsOfflineCount})} title={_('offline_count')}>{starredItemsOfflineCount > 0 ? starredItemsOfflineCount : ''}</span>
                             <span className="count" title={_('online_count')}>{starredItemsCount > 0 ? starredItemsCount : ''}</span>

assets/js/templates/NavSources.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link, useLocation, useRouteMatch } from 'react-router-dom';
+import { Link, useRouteMatch } from 'react-router-dom';
 import { usePreviousImmediate } from 'rooks';
 import classNames from 'classnames';
 import { unescape } from 'html-escaper';
-import { makeEntriesLink, ENTRIES_ROUTE_PATTERN } from '../helpers/uri';
+import { forceReload, makeEntriesLink, ENTRIES_ROUTE_PATTERN } from '../helpers/uri';
 import Collapse from '@kunukn/react-collapse';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { LoadingState } from '../requests/LoadingState';
@@ -33,13 +33,20 @@ function handleTitleClick({ setExpanded, sourcesState, setSourcesState, setSourc
 }
 
 function Source({ source, active, collapseNav }) {
-    const location = useLocation();
+    const link = React.useCallback(
+        (location) => ({
+            ...location,
+            pathname: makeEntriesLink(location, { category: `source-${source.id}`, id: null }),
+            state: forceReload(location),
+        }),
+        [source.id]
+    );
 
     return (
         <li
             className={classNames({ read: source.unread === 0 })}
         >
-            <Link to={makeEntriesLink(location, { category: `source-${source.id}`, id: null })} className={classNames({active, unread: source.unread > 0})} onClick={collapseNav}>
+            <Link to={link} className={classNames({active, unread: source.unread > 0})} onClick={collapseNav}>
                 <span className="nav-source">{unescape(source.title)}</span>
                 <span className="unread">{source.unread > 0 ? source.unread : ''}</span>
             </Link>

assets/js/templates/NavTags.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import nullable from 'prop-types-nullable';
-import { Link, useLocation, useRouteMatch } from 'react-router-dom';
+import { Link, useRouteMatch } from 'react-router-dom';
 import classNames from 'classnames';
 import { unescape } from 'html-escaper';
-import { makeEntriesLink, ENTRIES_ROUTE_PATTERN } from '../helpers/uri';
+import { forceReload, makeEntriesLink, ENTRIES_ROUTE_PATTERN } from '../helpers/uri';
 import ColorChooser from './ColorChooser';
 import { updateTag } from '../requests/tags';
 import Collapse from '@kunukn/react-collapse';
@@ -13,7 +13,6 @@ import * as icons from '../icons';
 import { LocalizationContext } from '../helpers/i18n';
 
 function Tag({ tag, active, collapseNav }) {
-    const location = useLocation();
     const _ = React.useContext(LocalizationContext);
     const tagName = tag !== null ? tag.tag : null;
 
@@ -31,15 +30,25 @@ function Tag({ tag, active, collapseNav }) {
         [tagName]
     );
 
+    const category = tag === null ? 'all' : `tag-${tag.tag}`;
+    const link = React.useCallback(
+        (location) => ({
+            ...location,
+            pathname: makeEntriesLink(location, {
+                category,
+                id: null
+            }),
+            state: forceReload(location),
+        }),
+        [category]
+    );
+
     return (
         <li
             className={classNames({ read: tag !== null && tag.unread === 0 })}
         >
             <Link
-                to={makeEntriesLink(location, {
-                    category: tag === null ? 'all' : `tag-${tag.tag}`,
-                    id: null
-                })}
+                to={link}
                 className={classNames({ 'nav-tags-all': tag === null, active })}
                 onClick={collapseNav}
             >