wonderlandpark/core
2
1
Fork 0
mirror of https://github.com/koreanbots/core.git synced 2025-12-16 06:20:24 +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 () => { const onSubmit = async () => {
setHidden(true) setHidden(true)
redirectTo(router, `/search/?query=${encodeURIComponent(query)}`) redirectTo(router, `/search/?q=${encodeURIComponent(query)}`)
} }
return <div> return <div>

35
pages/search.tsx
View File

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