From 168ed3215f659d44215fd02ac05cc1fe58be4e06 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 20 Dec 2021 22:59:32 +0100 Subject: chore: create search view --- src/components/PostsList/PostsList.tsx | 2 +- src/components/SearchForm/SearchForm.tsx | 4 ++ src/pages/recherche/index.tsx | 110 +++++++++++++++++++++++++++++++ src/services/graphql/queries.ts | 15 ++++- 4 files changed, 127 insertions(+), 4 deletions(-) create mode 100644 src/pages/recherche/index.tsx diff --git a/src/components/PostsList/PostsList.tsx b/src/components/PostsList/PostsList.tsx index 03e8834..da72032 100644 --- a/src/components/PostsList/PostsList.tsx +++ b/src/components/PostsList/PostsList.tsx @@ -39,7 +39,7 @@ const PostsList = ({ const getPostsList = () => { return data.map((page) => { if (page.posts.length === 0) { - return

{t`No results found.`}

; + return

{t`No results found.`}

; } else { return ( diff --git a/src/components/SearchForm/SearchForm.tsx b/src/components/SearchForm/SearchForm.tsx index c02c224..e37ba9e 100644 --- a/src/components/SearchForm/SearchForm.tsx +++ b/src/components/SearchForm/SearchForm.tsx @@ -1,11 +1,13 @@ import { ButtonSubmit } from '@components/Buttons'; import { Form, Input } from '@components/Form'; import { t } from '@lingui/macro'; +import { useRouter } from 'next/router'; import { FormEvent, useEffect, useRef, useState } from 'react'; const SearchForm = ({ isOpened }: { isOpened: boolean }) => { const [query, setQuery] = useState(''); const inputRef = useRef(null); + const router = useRouter(); useEffect(() => { setTimeout(() => { @@ -17,6 +19,8 @@ const SearchForm = ({ isOpened }: { isOpened: boolean }) => { const launchSearch = (e: FormEvent) => { e.preventDefault(); + router.push({ pathname: '/recherche', query: { s: query } }); + setQuery(''); }; return ( diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx new file mode 100644 index 0000000..6de5816 --- /dev/null +++ b/src/pages/recherche/index.tsx @@ -0,0 +1,110 @@ +import { Button } from '@components/Buttons'; +import Layout from '@components/Layouts/Layout'; +import PostsList from '@components/PostsList/PostsList'; +import { config } from '@config/website'; +import { t } from '@lingui/macro'; +import { getPublishedPosts } from '@services/graphql/queries'; +import { NextPageWithLayout } from '@ts/types/app'; +import { PostsList as PostsListData } from '@ts/types/blog'; +import { loadTranslation } from '@utils/helpers/i18n'; +import { GetStaticProps } from 'next'; +import Head from 'next/head'; +import { useRouter } from 'next/router'; +import { ReactElement, useEffect, useState } from 'react'; +import useSWRInfinite from 'swr/infinite'; + +const Search: NextPageWithLayout = () => { + const [query, setQuery] = useState(''); + const router = useRouter(); + + useEffect(() => { + if (!router.isReady) return; + + if (router.query?.s && typeof router.query.s === 'string') { + setQuery(router.query.s); + } + }, [router.isReady, router.query.s]); + + const getKey = (pageIndex: number, previousData: PostsListData) => { + if (previousData && !previousData.posts) return null; + + const args = + pageIndex === 0 + ? { first: config.postsPerPage, searchQuery: query } + : { + first: config.postsPerPage, + after: previousData.pageInfo.endCursor, + searchQuery: query, + }; + + return args; + }; + + const { data, error, size, setSize } = useSWRInfinite( + getKey, + getPublishedPosts + ); + + const head = { + title: t`Search results for ${query}] | Armand Philippot`, + description: t`Discover search results for ${query}].`, + }; + + const isLoadingInitialData = !data && !error; + const isLoadingMore: boolean = + isLoadingInitialData || + (size > 0 && data !== undefined && typeof data[size - 1] === 'undefined'); + + if (error) return
{t`Failed to load.`}
; + if (!data) return
{t`Loading...`}
; + + const hasNextPage = data && data[data.length - 1].pageInfo.hasNextPage; + + return ( + <> + + {head.title} + + +
+
+

+ {query + ? t`Search results for: ${query}` + : t({ + id: 'msg.search', + comment: 'Search page title', + message: 'Search', + })} +

+
+
+ + {hasNextPage && ( + + )} +
+
+ + ); +}; + +Search.getLayout = (page: ReactElement) => {page}; + +export const getStaticProps: GetStaticProps = async (context) => { + const translation = await loadTranslation( + context.locale!, + process.env.NODE_ENV === 'production' + ); + + return { + props: { + translation, + }, + }; +}; + +export default Search; diff --git a/src/services/graphql/queries.ts b/src/services/graphql/queries.ts index b449612..652caa1 100644 --- a/src/services/graphql/queries.ts +++ b/src/services/graphql/queries.ts @@ -28,13 +28,22 @@ import { fetchApi } from './api'; export const getPublishedPosts = async ({ first = 10, after = '', + searchQuery = '', +}: { + first: number; + after?: string; + searchQuery?: string; }): Promise => { const query = gql` - query AllPublishedPosts($first: Int, $after: String) { + query AllPublishedPosts($first: Int, $after: String, $searchQuery: String) { posts( after: $after first: $first - where: { status: PUBLISH, orderby: { field: DATE, order: DESC } } + where: { + status: PUBLISH + orderby: { field: DATE, order: DESC } + search: $searchQuery + } ) { edges { cursor @@ -91,7 +100,7 @@ export const getPublishedPosts = async ({ } `; - const variables = { first, after }; + const variables = { first, after, searchQuery }; const response = await fetchApi(query, variables); const formattedPosts = response.posts.edges.map((post) => { const formattedPost = getFormattedPostPreview(post.node); -- cgit v1.2.3