wonderlandpark/core
2
1
Fork 0
mirror of https://github.com/koreanbots/core.git synced 2025-12-15 14:10:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: search query string change

Browse Source
This commit is contained in:
Junseo Park 2021-02-25 14:05:54 +09:00
parent 75c3a82c90
commit aeb7ef0238
2 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/Search.tsx
View File

@ -29,7 +29,7 @@ const Search = (): JSX.Element => {
const onSubmit = async () => {
setHidden(true)
redirectTo(router, `/search/?query=${encodeURIComponent(query)}`)
redirectTo(router, `/search/?q=${encodeURIComponent(query)}`)
}
return <div>

35
pages/search.tsx
View File

@ -1,11 +1,13 @@
import { NextPage, NextPageContext } from 'next'
import dynamic from 'next/dynamic'
import { useRouter } from 'next/router'
import { ParsedUrlQuery } from 'querystring'
import { BotList } from '@types'
import { get } from '@utils/Query'
import { PageCount } from '@utils/Yup'
import NotFound from './404'
import { SearchQuerySchema } from '@utils/Yup'
import { redirectTo } from '@utils/Tools'
const Hero = dynamic(() => import('@components/Hero'))
const Advertisement = dynamic(() => import('@components/Advertisement'))
@ -15,18 +17,23 @@ const Container = dynamic(() => import('@components/Container'))
const Paginator = dynamic(() => import('@components/Paginator'))
const Search:NextPage<SearchProps> = ({ data, query }) => {
if(!data || data.data.length === 0) return <NotFound />
const router = useRouter()
if(!query?.q) redirectTo(router, '/')
return <>
<Hero header={`"${query.query}" 검색 결과`} description={`'${query.query}' 에 대한 검색 결과입니다.`} />
<SEO title={`"${query.query}" 검색 결과`} description={`'${query.query}' 에 대한 검색 결과입니다.`} />
<Hero header={`"${query.q}" 검색 결과`} description={`'${query.q}' 에 대한 검색 결과입니다.`} />
<SEO title={`"${query.q}" 검색 결과`} description={`'${query.q}' 에 대한 검색 결과입니다.`} />
<Container>
<Advertisement />
<div className='grid gap-x-4 2xl:grid-cols-4 md:grid-cols-2 mt-20'>
{
data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
}
</div>
<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname={`/search?query=${query.query}`} />
{ !data || data.data.length === 0 ? <h1 className='text-3xl font-bold text-center py-20'>검색 결과가 없습니다.</h1> :
<>
<div className='grid gap-x-4 2xl:grid-cols-4 md:grid-cols-2 mt-20'>
{
data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
}
</div>
<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname={`/search?q=${query.q}`} />
</>
}
<Advertisement />
</Container>
</>
@ -35,9 +42,9 @@ const Search:NextPage<SearchProps> = ({ data, query }) => {
export const getServerSideProps = async(ctx: Context) => {
let data: BotList
if(!ctx.query.page) ctx.query.page = '1'
const validate = await PageCount.validate(ctx.query.page).then(el => el).catch(() => null)
const validate = await SearchQuerySchema.validate(ctx.query).then(el => el).catch(() => null)
if(!validate || isNaN(Number(ctx.query.page))) data = null
else data = await get.list.search.load(JSON.stringify({ query: ctx.query.query, page: ctx.query.page }))
else data = await get.list.search.load(JSON.stringify({ query: ctx.query.q, page: ctx.query.page }))
return {
props: {
@ -58,7 +65,7 @@ interface Context extends NextPageContext {
}
interface URLQuery extends ParsedUrlQuery {
query: string
q: string
page?: string
}