client: Fix state handling

Some state action dispatchers in class components would refer to `this.state` property
when given a function as the action argument. Since React 18 automatically batches state updates,
calling such broken dispatcher after another dispatch in the same render might discard
the changes performed by the earlier dispatcher because `this.state` would contain the state
before the render started.

Let’s pass a function to `this.setState` and use the state argument provided by the dispatch
to always get the freshest state.

Fixes: #1454

client/js/templates/App.jsx

@@ -423,129 +423,155 @@ export default class App extends React.Component {
 
     setTags(tags) {
         if (typeof tags === 'function') {
-            this.setState({
-                tags: tags(this.state.tags)
-            });
+            this.setState(
+                (state) => ({
+                    tags: tags(state.tags),
+                })
+            );
         } else {
             this.setState({ tags });
         }
     }
 
     setTagsState(tagsState) {
         if (typeof tagsState === 'function') {
-            this.setState({
-                tagsState: tagsState(this.state.tagsState)
-            });
+            this.setState(
+                (state) => ({
+                    tagsState: tagsState(state.tagsState),
+                })
+            );
         } else {
             this.setState({ tagsState });
         }
     }
 
     setSources(sources) {
         if (typeof sources === 'function') {
-            this.setState({
-                sources: sources(this.state.sources)
-            });
+            this.setState(
+                (state) => ({
+                    sources: sources(state.sources),
+                })
+            );
         } else {
             this.setState({ sources });
         }
     }
 
     setSourcesState(sourcesState) {
         if (typeof sourcesState === 'function') {
-            this.setState({
-                sourcesState: sourcesState(this.state.sourcesState)
-            });
+            this.setState(
+                (state) => ({
+                    sourcesState: sourcesState(state.sourcesState),
+                })
+            );
         } else {
             this.setState({ sourcesState });
         }
     }
 
     setOfflineState(offlineState) {
         if (typeof offlineState === 'function') {
-            this.setState({
-                offlineState: offlineState(this.state.offlineState)
-            });
+            this.setState(
+                (state) => ({
+                    offlineState: offlineState(state.offlineState),
+                })
+            );
         } else {
             this.setState({ offlineState });
         }
     }
 
     setNavSourcesExpanded(navSourcesExpanded) {
         if (typeof navSourcesExpanded === 'function') {
-            this.setState({
-                navSourcesExpanded: navSourcesExpanded(this.state.navSourcesExpanded)
-            });
+            this.setState(
+                (state) => ({
+                    navSourcesExpanded: navSourcesExpanded(state.navSourcesExpanded),
+                })
+            );
         } else {
             this.setState({ navSourcesExpanded });
         }
     }
 
     setUnreadItemsCount(unreadItemsCount) {
         if (typeof unreadItemsCount === 'function') {
-            this.setState({
-                unreadItemsCount: unreadItemsCount(this.state.unreadItemsCount)
-            });
+            this.setState(
+                (state) => ({
+                    unreadItemsCount: unreadItemsCount(state.unreadItemsCount),
+                })
+            );
         } else {
             this.setState({ unreadItemsCount });
         }
     }
 
     setUnreadItemsOfflineCount(unreadItemsOfflineCount) {
         if (typeof unreadItemsOfflineCount === 'function') {
-            this.setState({
-                unreadItemsOfflineCount: unreadItemsOfflineCount(this.state.unreadItemsOfflineCount)
-            });
+            this.setState(
+                (state) => ({
+                    unreadItemsOfflineCount: unreadItemsOfflineCount(state.unreadItemsOfflineCount),
+                })
+            );
         } else {
             this.setState({ unreadItemsOfflineCount });
         }
     }
 
     setStarredItemsCount(starredItemsCount) {
         if (typeof starredItemsCount === 'function') {
-            this.setState({
-                starredItemsCount: starredItemsCount(this.state.starredItemsCount)
-            });
+            this.setState(
+                (state) => ({
+                    starredItemsCount: starredItemsCount(state.starredItemsCount),
+                })
+            );
         } else {
             this.setState({ starredItemsCount });
         }
     }
 
     setStarredItemsOfflineCount(starredItemsOfflineCount) {
         if (typeof starredItemsOfflineCount === 'function') {
-            this.setState({
-                starredItemsOfflineCount: starredItemsOfflineCount(this.state.starredItemsOfflineCount)
-            });
+            this.setState(
+                (state) => ({
+                    starredItemsOfflineCount: starredItemsOfflineCount(state.starredItemsOfflineCount),
+                })
+            );
         } else {
             this.setState({ starredItemsOfflineCount });
         }
     }
 
     setAllItemsCount(allItemsCount) {
         if (typeof allItemsCount === 'function') {
-            this.setState({
-                allItemsCount: allItemsCount(this.state.allItemsCount)
-            });
+            this.setState(
+                (state) => ({
+                    allItemsCount: allItemsCount(state.allItemsCount),
+                })
+            );
         } else {
             this.setState({ allItemsCount });
         }
     }
 
     setAllItemsOfflineCount(allItemsOfflineCount) {
         if (typeof allItemsOfflineCount === 'function') {
-            this.setState({
-                allItemsOfflineCount: allItemsOfflineCount(this.state.allItemsOfflineCount)
-            });
+            this.setState(
+                (state) => ({
+                    allItemsOfflineCount: allItemsOfflineCount(state.allItemsOfflineCount),
+                })
+            );
         } else {
             this.setState({ allItemsOfflineCount });
         }
     }
 
     setGlobalMessage(globalMessage) {
         if (typeof globalMessage === 'function') {
-            this.setState({
-                globalMessage: globalMessage(this.state.globalMessage)
-            });
+            this.setState(
+                (state) => ({
+                    globalMessage: globalMessage(state.globalMessage),
+                })
+            );
         } else {
             this.setState({ globalMessage });
         }

client/js/templates/EntriesPage.jsx

@@ -479,7 +479,11 @@ export default class StateHolder extends React.Component {
 
     setEntries(entries) {
         if (typeof entries === 'function') {
-            this.setState({ entries: entries(this.state.entries) });
+            this.setState(
+                (state) => ({
+                    entries: entries(state.entries),
+                })
+            );
         } else {
             this.setState({ entries });
         }
@@ -495,7 +499,11 @@ export default class StateHolder extends React.Component {
      */
     setSelectedEntry(selectedEntry) {
         if (typeof selectedEntry === 'function') {
-            this.setState({ selectedEntry: selectedEntry(this.state.selectedEntry) });
+            this.setState(
+                (state) => ({
+                    selectedEntry: selectedEntry(state.selectedEntry),
+                })
+            );
         } else {
             this.setState({ selectedEntry });
         }
@@ -511,9 +519,11 @@ export default class StateHolder extends React.Component {
 
     setExpandedEntries(expandedEntries) {
         if (typeof expandedEntries === 'function') {
-            this.setState({
-                expandedEntries: expandedEntries(this.state.expandedEntries)
-            });
+            this.setState(
+                (state) => ({
+                    expandedEntries: expandedEntries(state.expandedEntries)
+                })
+            );
         } else {
             this.setState({ expandedEntries });
         }
@@ -650,15 +660,23 @@ export default class StateHolder extends React.Component {
 
     setHasMore(hasMore) {
         if (typeof hasMore === 'function') {
-            this.setState({ hasMore: hasMore(this.state.hasMore) });
+            this.setState(
+                (state) => ({
+                    hasMore: hasMore(state.hasMore),
+                })
+            );
         } else {
             this.setState({ hasMore });
         }
     }
 
     setLoadingState(loadingState) {
         if (typeof loadingState === 'function') {
-            this.setState({ loadingState: loadingState(this.state.loadingState) });
+            this.setState(
+                (state) => ({
+                    loadingState: loadingState(state.loadingState),
+                })
+            );
         } else {
             this.setState({ loadingState });
         }