feat: Add "Search in article" filter checkbox to results page

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
This commit is contained in:
2025-12-16 17:06:53 -07:00
parent a10f120fed
commit 3f97048599
2 changed files with 29 additions and 3 deletions
+23 -1
View File
@@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Link, useLocation, useHistory } from 'react-router-dom';
import { Helmet } from 'react-helmet';
import queryString from 'query-string';
import { sourceLink, infoLine, logos } from './utils.js';
import AbortController from 'abort-controller';
@@ -8,6 +9,19 @@ function Results() {
const [stories, setStories] = useState(false);
const [error, setError] = useState(false);
const location = useLocation();
const history = useHistory();
const handleFilterChange = e => {
const isChecked = e.target.checked;
const currentQuery = queryString.parse(location.search);
if (isChecked) {
currentQuery.article = 'true';
} else {
delete currentQuery.article;
}
history.push('/search?' + queryString.stringify(currentQuery));
};
useEffect(() => {
const controller = new AbortController();
@@ -32,11 +46,19 @@ function Results() {
};
}, [location.search]);
const searchInArticle = queryString.parse(location.search).article === 'true';
return (
<div className='container'>
<Helmet>
<title>Search Results | QotNews</title>
</Helmet>
<div style={{marginBottom: '1rem'}}>
<input type="checkbox" id="search-in-article" className="checkbox" checked={searchInArticle} onChange={handleFilterChange} />
<label htmlFor="search-in-article">Search in article</label>
</div>
{error && <p>Connection error?</p>}
{stories ?
<>
+6 -2
View File
@@ -15,7 +15,9 @@ function Search() {
const newSearch = event.target.value;
setSearch(newSearch);
if (newSearch.length >= 3) {
const searchQuery = queryString.stringify({ 'q': newSearch });
const currentQuery = queryString.parse(location.search);
currentQuery.q = newSearch;
const searchQuery = queryString.stringify(currentQuery);
history.replace('/search?' + searchQuery);
} else {
history.replace('/');
@@ -24,7 +26,9 @@ function Search() {
const searchAgain = (event) => {
event.preventDefault();
const searchString = queryString.stringify({ 'q': event.target[0].value });
const currentQuery = queryString.parse(location.search);
currentQuery.q = event.target[0].value;
const searchString = queryString.stringify(currentQuery);
history.push('/search?' + searchString);
inputRef.current.blur();
}