refactor: refactor Results component to functional component

webclient/src/Results.js

@@ -1,95 +1,73 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import { sourceLink, infoLine, logos } from './utils.js';
 import AbortController from 'abort-controller';
 
-class Results extends React.Component {
+function Results() {
-	constructor(props) {
+	const [stories, setStories] = useState(false);
-		super(props);
+	const [error, setError] = useState(false);
+	const location = useLocation();
 
-		this.state = {
+	useEffect(() => {
-			stories: false,
+		const controller = new AbortController();
-			error: false,
+		const signal = controller.signal;
-		};
 
-		this.controller = null;
+		const search = location.search;
-	}
-
-	performSearch = () => {
-		if (this.controller) {
-			this.controller.abort();
-		}
-
-		this.controller = new AbortController();
-		const signal = this.controller.signal;
-
-		const search = this.props.location.search;
 		fetch('/api/search' + search, { method: 'get', signal: signal })
 			.then(res => res.json())
 			.then(
 				(result) => {
-					this.setState({ stories: result.hits });
+					setStories(result.hits);
 				},
 				(error) => {
 					if (error.message !== 'The operation was aborted. ') {
-						this.setState({ error: true });
+						setError(true);
 					}
 				}
 			);
-	}
 
-	componentDidMount() {
+		return () => {
-		this.performSearch();
+			controller.abort();
-	}
+		};
+	}, [location.search]);
 
-	componentDidUpdate(prevProps) {
+	return (
-		if (this.props.location.search !== prevProps.location.search) {
+		<div className='container'>
-			this.performSearch();
+			<Helmet>
-		}
+				<title>Search Results | QotNews</title>
-	}
+			</Helmet>
+			{error && <p>Connection error?</p>}
+			{stories ?
+				<>
+					<p>Search results:</p>
+					<div className='comment lined'>
+						{stories.length ?
+							stories.map(x =>
+								<div className='item' key={x.id}>
+									<div className='title'>
+										<Link className='link' to={'/' + x.id}>
+											<img className='source-logo' src={logos[x.source]} alt='source logo' /> {x.title}
+										</Link>
 
-	render() {
+										<span className='source'>
-		const stories = this.state.stories;
+											({sourceLink(x)})
-		const error = this.state.error;
+										</span>
-
-		return (
-			<div className='container'>
-				<Helmet>
-					<title>Search Results | QotNews</title>
-				</Helmet>
-				{error && <p>Connection error?</p>}
-				{stories ?
-					<>
-						<p>Search results:</p>
-						<div className='comment lined'>
-							{stories.length ?
-								stories.map(x =>
-									<div className='item' key={x.id}>
-										<div className='title'>
-											<Link className='link' to={'/' + x.id}>
-												<img className='source-logo' src={logos[x.source]} alt='source logo' /> {x.title}
-											</Link>
-
-											<span className='source'>
-												({sourceLink(x)})
-											</span>
-										</div>
-
-										{infoLine(x)}
 									</div>
-								)
+
-							:
+									{infoLine(x)}
-								<p>none</p>
+								</div>
-							}
+							)
-						</div>
+						:
-					</>
+							<p>none</p>
-				:
+						}
-					<p>loading...</p>
+					</div>
-				}
+				</>
-			</div>
+			:
-		);
+				<p>loading...</p>
-	}
+			}
+		</div>
+	);
 }
 
 export default Results;