diff --git a/apps/website/components/blog-search/blog-search.tsx b/apps/website/components/blog-search/blog-search.tsx index f057966..d3b2b03 100644 --- a/apps/website/components/blog-search/blog-search.tsx +++ b/apps/website/components/blog-search/blog-search.tsx @@ -1,10 +1,59 @@ +import {useEffect, useState} from "react"; +import {BehaviorSubject, catchError, debounceTime, delay, distinctUntilChanged, filter, map, of, switchMap} from "rxjs"; +import {useRouter} from "next/router"; +import {MeiliSearch} from "meilisearch"; +import {useDispatch} from "react-redux"; + +import {environment} from "../../environments/environment"; + import styles from './blog-search.module.scss'; +import {setSearchState} from "../../store/searchSlice"; /* eslint-disable-next-line */ export interface BlogSearchProps { } export function BlogSearch(props: BlogSearchProps) { + const router = useRouter(); + const [client, setClient] = useState(null); + const [loading, setLoading] = useState(false); + const [subject, setSubject] = useState(null); + const dispatch = useDispatch(); + + useEffect(() => { + if (subject === null) { + const sub = new BehaviorSubject(''); + const client = new MeiliSearch({ + host: 'http://127.0.0.1:7700', + apiKey: environment.meiliMasterKey + }) + setSubject(sub); + setClient(client); + } else { + subject.pipe( + map((s: string) => s.trim()), + distinctUntilChanged(), + filter((s: string) => s.length >= 2), + debounceTime(200), + map((value) => { + setLoading(true); + return value; + }), + delay(2000), + switchMap(async (value: string) => { + const index = await client.getIndex('article'); + const articles = await index.search(value); + setLoading(false); + await router.push('/search'); + dispatch(setSearchState(articles.hits)); + }), + catchError((err) => of(false)) + ).subscribe(() => setLoading(false)); + } + }, [subject]); + + const onSearchChange = (e) => subject.next(e.target.value); + return (
@@ -12,23 +61,55 @@ export function BlogSearch(props: BlogSearchProps) { className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search
-
- - )} + {loading && ( + )}
-); + ); } export default BlogSearch; diff --git a/apps/website/components/card-blog-details/card-blog-details.tsx b/apps/website/components/card-blog-details/card-blog-details.tsx index 6eb8c3d..6d849c1 100644 --- a/apps/website/components/card-blog-details/card-blog-details.tsx +++ b/apps/website/components/card-blog-details/card-blog-details.tsx @@ -27,7 +27,6 @@ export function CardBlogDetails({item}: CardBlogDetailsProps) { const {slug} = item.category.data.attributes; const {title} = item; const shareUrl = `${environment.appUrl}/blog/${slug}/${item.slug}`; - console.log(shareUrl); return (
diff --git a/apps/website/components/footer/footer.tsx b/apps/website/components/footer/footer.tsx index b76978b..dd74c44 100644 --- a/apps/website/components/footer/footer.tsx +++ b/apps/website/components/footer/footer.tsx @@ -15,7 +15,7 @@ export function Footer({items = []}) { } return ( -