add global search link to article searchbox
This commit is contained in:
parent
d079ec5115
commit
72f986f43d
|
@ -9,3 +9,7 @@
|
||||||
.searchBox{
|
.searchBox{
|
||||||
border: none !important;
|
border: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.globalSearchTrigger{
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
|
@ -3,6 +3,7 @@ import {
|
||||||
IconButton,
|
IconButton,
|
||||||
SearchIcon,
|
SearchIcon,
|
||||||
CloseIcon,
|
CloseIcon,
|
||||||
|
Typography,
|
||||||
} from '@acid-info/lsd-react'
|
} from '@acid-info/lsd-react'
|
||||||
import styles from './Search.module.css'
|
import styles from './Search.module.css'
|
||||||
import { SearchbarContainer } from '@/components/Searchbar/SearchbarContainer'
|
import { SearchbarContainer } from '@/components/Searchbar/SearchbarContainer'
|
||||||
|
@ -17,9 +18,11 @@ import {
|
||||||
addQueryToQuery,
|
addQueryToQuery,
|
||||||
addTopicsToQuery,
|
addTopicsToQuery,
|
||||||
createMinimizedSearchText,
|
createMinimizedSearchText,
|
||||||
|
createSearchLink,
|
||||||
extractQueryFromQuery,
|
extractQueryFromQuery,
|
||||||
extractTopicsFromQuery,
|
extractTopicsFromQuery,
|
||||||
} from '@/utils/search.utils'
|
} from '@/utils/search.utils'
|
||||||
|
import Link from 'next/link'
|
||||||
|
|
||||||
export type SearchbarProps = {
|
export type SearchbarProps = {
|
||||||
searchScope?: ESearchScope
|
searchScope?: ESearchScope
|
||||||
|
@ -27,7 +30,9 @@ export type SearchbarProps = {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Searchbar(props: SearchbarProps) {
|
export default function Searchbar(props: SearchbarProps) {
|
||||||
const { searchScope = ESearchScope.GLOBAL } = props
|
const [searchScope, setSearchScope] = useState<ESearchScope>(
|
||||||
|
props.searchScope || ESearchScope.GLOBAL,
|
||||||
|
)
|
||||||
const [active, setActive] = useState(false)
|
const [active, setActive] = useState(false)
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
|
@ -61,6 +66,11 @@ export default function Searchbar(props: SearchbarProps) {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setQuery(extractQueryFromQuery(router.query))
|
setQuery(extractQueryFromQuery(router.query))
|
||||||
setFilterTags(extractTopicsFromQuery(router.query))
|
setFilterTags(extractTopicsFromQuery(router.query))
|
||||||
|
if (router.pathname === '/article/[remoteId]') {
|
||||||
|
setSearchScope(ESearchScope.ARTICLE)
|
||||||
|
} else {
|
||||||
|
setSearchScope(ESearchScope.GLOBAL)
|
||||||
|
}
|
||||||
}, [router.query.query, router.query.topics])
|
}, [router.query.query, router.query.topics])
|
||||||
|
|
||||||
const performClear = useCallback(() => {
|
const performClear = useCallback(() => {
|
||||||
|
@ -103,6 +113,16 @@ export default function Searchbar(props: SearchbarProps) {
|
||||||
setQuery(e.target.value)
|
setQuery(e.target.value)
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
{searchScope === ESearchScope.ARTICLE && (
|
||||||
|
<GlobalSearchTrigger
|
||||||
|
href={createSearchLink(query, filterTags)}
|
||||||
|
className={!active ? '' : 'hide'}
|
||||||
|
>
|
||||||
|
<Typography variant="body2" className={styles.globalSearchTrigger}>
|
||||||
|
global search
|
||||||
|
</Typography>
|
||||||
|
</GlobalSearchTrigger>
|
||||||
|
)}
|
||||||
<div>
|
<div>
|
||||||
<IconButton
|
<IconButton
|
||||||
className={styles.searchButton}
|
className={styles.searchButton}
|
||||||
|
@ -180,3 +200,15 @@ const SearchBox = styled.div`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
`
|
`
|
||||||
|
|
||||||
|
const GlobalSearchTrigger = styled(Link)`
|
||||||
|
position: absolute;
|
||||||
|
left: 256px;
|
||||||
|
top: 7px;
|
||||||
|
|
||||||
|
transition: opacity 250ms ease-in-out;
|
||||||
|
|
||||||
|
&.hide {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
|
@ -2,7 +2,7 @@ export const copyConfigs = {
|
||||||
search: {
|
search: {
|
||||||
searchbarPlaceholders: {
|
searchbarPlaceholders: {
|
||||||
global: () => 'Search through the LPE posts...',
|
global: () => 'Search through the LPE posts...',
|
||||||
article: () => `Search through the article`,
|
article: () => `Search through the article or switch to `,
|
||||||
},
|
},
|
||||||
filterTags: [
|
filterTags: [
|
||||||
'Privacy',
|
'Privacy',
|
||||||
|
|
|
@ -40,6 +40,8 @@ export default function SearchPage({
|
||||||
}: SearchPageProps) {
|
}: SearchPageProps) {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const hasUpdated = useRef(false)
|
const hasUpdated = useRef(false)
|
||||||
|
const [mounted, setMounted] = useState(false)
|
||||||
|
|
||||||
const {
|
const {
|
||||||
query: { query = '', topics = [] },
|
query: { query = '', topics = [] },
|
||||||
} = router
|
} = router
|
||||||
|
@ -54,11 +56,6 @@ export default function SearchPage({
|
||||||
PostTypes.Block,
|
PostTypes.Block,
|
||||||
)
|
)
|
||||||
|
|
||||||
// console.log('articles', articles)
|
|
||||||
// console.log('blocks', blocks)
|
|
||||||
|
|
||||||
const [mounted, setMounted] = useState(false)
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setMounted(true)
|
setMounted(true)
|
||||||
return () => {
|
return () => {
|
||||||
|
|
|
@ -35,3 +35,19 @@ export const createMinimizedSearchText = (
|
||||||
}
|
}
|
||||||
return txt
|
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
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue