From fdebcbea745b97734ff8bedec54495f2ba5355ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A4ser?= Date: Thu, 9 Feb 2023 11:00:27 +0100 Subject: [PATCH] feat: Add search engine Actions : - add meilisearch - add store redux --- .../components/blog-search/blog-search.tsx | 97 +++++++++++- .../card-blog-details/card-blog-details.tsx | 1 - apps/website/components/footer/footer.tsx | 2 +- apps/website/components/header/header.tsx | 5 +- .../environments/environment.development.ts | 4 +- apps/website/environments/environment.prod.ts | 4 +- .../environments/environment.staging.ts | 4 +- apps/website/environments/environment.ts | 4 +- apps/website/pages/_app.tsx | 3 +- .../blog/[category_slug]/[post_slug].tsx | 1 - apps/website/pages/blog/index.tsx | 2 +- apps/website/pages/home/index.tsx | 7 +- apps/website/pages/lost-password/index.tsx | 2 +- apps/website/pages/reset-password/index.tsx | 2 +- apps/website/pages/search/index.module.scss | 7 + apps/website/pages/search/index.tsx | 69 +++++++++ apps/website/pages/sign-in/index.tsx | 1 - apps/website/pages/sign-up/index.tsx | 2 +- apps/website/store/searchSlice.ts | 47 ++++++ apps/website/store/store.ts | 22 +++ package-lock.json | 141 +++++++++++++++++- package.json | 4 + 22 files changed, 398 insertions(+), 33 deletions(-) create mode 100644 apps/website/pages/search/index.module.scss create mode 100644 apps/website/pages/search/index.tsx create mode 100644 apps/website/store/searchSlice.ts create mode 100644 apps/website/store/store.ts 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 ( -