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:
@@ -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 ?
|
||||
<>
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user