Revert ScrollToTop component back to class-based

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>

webclient/src/Feed.js

@@ -7,6 +7,7 @@ import { sourceLink, infoLine, logos } from './utils.js';
 function Feed({ updateCache }) {
 	const [stories, setStories] = useState(() => JSON.parse(localStorage.getItem('stories')) || false);
 	const [error, setError] = useState('');
+	const [loadingStatus, setLoadingStatus] = useState(null);
 
 	useEffect(() => {
 		fetch('/api')
@@ -30,6 +31,8 @@ function Feed({ updateCache }) {
 						localStorage.setItem('stories', JSON.stringify(newApiStories));
 					}
 
+					setLoadingStatus({ current: 0, total: newApiStories.length });
+
 					let currentStories = Array.isArray(stories) ? [...stories] : [];
 					let preloadedCount = 0;
 
@@ -50,6 +53,7 @@ function Feed({ updateCache }) {
 							console.log('Preloaded story:', fullStory.id, fullStory.title);
 							updateCache(fullStory.id, fullStory);
 							preloadedCount++;
+							setLoadingStatus({ current: preloadedCount, total: newApiStories.length });
 
 							const existingStoryIndex = currentStories.findIndex(s => s.id === newStory.id);
 							if (existingStoryIndex > -1) {
@@ -58,7 +62,6 @@ function Feed({ updateCache }) {
 							currentStories.unshift(newStory);
 
 							localStorage.setItem('stories', JSON.stringify(currentStories));
-							setStories(currentStories);
 						} catch (error) {
 							let errorMessage;
 							if (error.name === 'AbortError') {
@@ -82,6 +85,7 @@ function Feed({ updateCache }) {
 
 					localStorage.setItem('stories', JSON.stringify(finalStories));
 					setStories(finalStories);
+					setLoadingStatus(null);
 				},
 				(error) => {
 					const errorMessage = `Failed to fetch the main story list from the API. Your connection may be down or the server might be experiencing issues. ${error.toString()}.`;
@@ -96,6 +100,7 @@ function Feed({ updateCache }) {
 				<title>QotNews</title>
 				<meta name="robots" content="index" />
 			</Helmet>
+			{loadingStatus && <p>Fetching stories {loadingStatus.current} / {loadingStatus.total}...</p>}
 			{error &&
 				<details style={{marginBottom: '1rem'}}>
 					<summary>Connection error? Click to expand.</summary>

webclient/src/ScrollToTop.js

@@ -1,10 +1,14 @@
-import { useEffect } from 'react';
+import React from 'react';
-import { useLocation } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 
-function ScrollToTop() {
+class ScrollToTop extends React.Component {
-	const { pathname } = useLocation();
+	componentDidUpdate(prevProps) {
+		//console.log(this.props.location.pathname, prevProps.location.pathname);
+
+		if (this.props.location.pathname === prevProps.location.pathname) {
+			return;
+		}
 
-	useEffect(() => {
 		if (localStorage.getItem('scrollLock') === 'True') {
 			localStorage.setItem('scrollLock', 'False');
 			return;
@@ -12,9 +16,11 @@ function ScrollToTop() {
 
 		window.scrollTo(0, 0);
 		document.body.scrollTop = 0;
-	}, [pathname]);
-
-	return null;
 	}
 
-export default ScrollToTop;
+	render() {
+		return null;
+	}
+}
+
+export default withRouter(ScrollToTop);