diff --git a/src/components/Searchbar/Search.module.css b/src/components/Searchbar/Search.module.css index eadf012..c9adca2 100644 --- a/src/components/Searchbar/Search.module.css +++ b/src/components/Searchbar/Search.module.css @@ -9,3 +9,7 @@ .searchBox{ border: none !important; } + +.globalSearchTrigger{ + text-decoration: underline; +} diff --git a/src/components/Searchbar/Searchbar.tsx b/src/components/Searchbar/Searchbar.tsx index ee2b1a9..1fb6992 100644 --- a/src/components/Searchbar/Searchbar.tsx +++ b/src/components/Searchbar/Searchbar.tsx @@ -3,6 +3,7 @@ import { IconButton, SearchIcon, CloseIcon, + Typography, } from '@acid-info/lsd-react' import styles from './Search.module.css' import { SearchbarContainer } from '@/components/Searchbar/SearchbarContainer' @@ -17,9 +18,11 @@ import { addQueryToQuery, addTopicsToQuery, createMinimizedSearchText, + createSearchLink, extractQueryFromQuery, extractTopicsFromQuery, } from '@/utils/search.utils' +import Link from 'next/link' export type SearchbarProps = { searchScope?: ESearchScope @@ -27,7 +30,9 @@ export type SearchbarProps = { } export default function Searchbar(props: SearchbarProps) { - const { searchScope = ESearchScope.GLOBAL } = props + const [searchScope, setSearchScope] = useState( + props.searchScope || ESearchScope.GLOBAL, + ) const [active, setActive] = useState(false) const router = useRouter() @@ -61,6 +66,11 @@ export default function Searchbar(props: SearchbarProps) { useEffect(() => { setQuery(extractQueryFromQuery(router.query)) setFilterTags(extractTopicsFromQuery(router.query)) + if (router.pathname === '/article/[remoteId]') { + setSearchScope(ESearchScope.ARTICLE) + } else { + setSearchScope(ESearchScope.GLOBAL) + } }, [router.query.query, router.query.topics]) const performClear = useCallback(() => { @@ -103,6 +113,16 @@ export default function Searchbar(props: SearchbarProps) { setQuery(e.target.value) }} /> + {searchScope === ESearchScope.ARTICLE && ( + + + global search + + + )}
'Search through the LPE posts...', - article: () => `Search through the article`, + article: () => `Search through the article or switch to `, }, filterTags: [ 'Privacy', diff --git a/src/pages/search.tsx b/src/pages/search.tsx index d241aa3..7faea1b 100644 --- a/src/pages/search.tsx +++ b/src/pages/search.tsx @@ -40,6 +40,8 @@ export default function SearchPage({ }: SearchPageProps) { const router = useRouter() const hasUpdated = useRef(false) + const [mounted, setMounted] = useState(false) + const { query: { query = '', topics = [] }, } = router @@ -54,11 +56,6 @@ export default function SearchPage({ PostTypes.Block, ) - // console.log('articles', articles) - // console.log('blocks', blocks) - - const [mounted, setMounted] = useState(false) - useEffect(() => { setMounted(true) return () => { diff --git a/src/utils/search.utils.ts b/src/utils/search.utils.ts index 9fa3538..c8ceb2e 100644 --- a/src/utils/search.utils.ts +++ b/src/utils/search.utils.ts @@ -35,3 +35,19 @@ export const createMinimizedSearchText = ( } return txt } + +export const createSearchLink = (query: string, filterTags: string[]) => { + let link = '/search' + if (query.length > 0 || filterTags.length > 0) { + link += '?' + } + if (query.length > 0 && filterTags.length > 0) { + link += `query=${query}&topics=${filterTags.join(',')}` + } else if (query.length > 0) { + link += `query=${query}` + } else if (filterTags.length > 0) { + link += `topics=${filterTags.join(',')}` + } + + return link +}