dh_demo

[...path].tsx (4470B)

---

 import { SubmitButton } from '@/components/elements/Button'
 import Title from '@/components/elements/Title'
 import Field from '@/components/form/Field'
 import Fields from '@/components/form/Fields'
 import Form from '@/components/form/Form'
 import Container from '@/components/layout/Container'
 import Divider from '@/components/layout/Divider'
 import Hero from '@/components/layout/Hero'
 import Section from '@/components/layout/Section'
 import { Pagination } from '@/components/Pagination'
 import ThreadList from '@/components/threads/ThreadList'
 import WikiBase from '@/components/wiki/WikiBase'
 import { ApiError } from '@/lib/apierror'
 import { withConnection } from '@/lib/model_helpers'
 import { Thread } from '@/lib/models/thread'
 import { getWikiAndPageACLViaPath } from '@/lib/models/wiki_acl'
 import { countWikiTalks, listWikiTalks } from '@/lib/models/wiki_talk'
 import { parseIntOrDefault } from '@/lib/utils/number'
 import { CreateTalkResponse } from '@/pages/api/talks/[slug]/[...path]'
 import { GetServerSideProps } from 'next'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
 
 const PAGE_SIZE = 10
 
 export interface TestPageProps {
   wikiSlug: string
   pageId: number
   pagePath: string
   talks: Thread[]
   counts: number
   page: number
 }
 
 export const getServerSideProps: GetServerSideProps<TestPageProps> = async (context) => {
   const { slug, path: paths } = context.query
   if (typeof slug !== 'string' || !Array.isArray(paths)) {
     return {
       notFound: true,
     }
   }
 
   const path = paths.join('/')
 
   const page = Math.max(1, parseIntOrDefault(context.query.page, 1))
 
   return await withConnection(async (conn) => {
     const aclInfo = await getWikiAndPageACLViaPath(conn, [slug, path])
     if (aclInfo == null || aclInfo.pageId == null) {
       return { notFound: true }
     }
 
     const talks = await listWikiTalks(conn, [aclInfo.pageId, PAGE_SIZE, (page - 1) * PAGE_SIZE])
     const counts = await countWikiTalks(conn, [aclInfo.pageId])
 
     return {
       props: {
         wikiSlug: slug,
         pageId: aclInfo.pageId,
         pagePath: path,
         talks: talks,
         counts: counts,
         page: page,
       },
     }
   })
 }
 
 export default function TestPage (props: TestPageProps) {
   return (
     <WikiBase pageKind={'talk'} title={props.pagePath}>
       <Section>
         {props.talks.length === 0 ? (
           <div>No talks</div>
         ) : (
           <>
             <ThreadList threads={props.talks}/>
             <Pagination
               page={props.page}
               totalCount={props.counts}
               pageSize={PAGE_SIZE}
             />
           </>
         )}
       </Section>
 
       <Divider/>
 
       <Section>
         <Title>새 주제 만들기</Title>
         <NewTalk {...props} />
       </Section>
     </WikiBase>
   )
 }
 
 function NewTalk (props: TestPageProps) {
   const router = useRouter()
 
   const [title, setTitle] = useState('')
   const [content, setContent] = useState('')
 
   const [isLoading, setLoading] = useState(false)
   const [submitError, setSubmitError] = useState<ApiError | null>(null)
 
   const handleSubmit = () => {
     setLoading(true)
 
     !(async () => {
       const res = await fetch(`/api/talks/${props.wikiSlug}/${props.pagePath}`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({
           title: title,
           content: content,
         }),
       })
 
       const data = await res.json()
 
       if (!res.ok) {
         setLoading(false)
         setSubmitError(data)
         return
       }
 
       await router.push(`/threads/${(data as CreateTalkResponse).thread}`)
     })().catch((err) => {
       setLoading(false)
       console.error(err)
     })
   }
 
   return (
     <>
       <Form onSubmit={handleSubmit}>
         <Fields>
           <Field
             type="text"
             placeholder="제목"
             value={title}
             onValueChange={setTitle}
             disabled={isLoading}
             color={submitError ? 'error' : undefined}
           />
 
           <Field
             type="textarea"
             placeholder="내용"
             value={content}
             onValueChange={setContent}
             disabled={isLoading}
             color={submitError ? 'error' : undefined}
             message={submitError ? submitError.message : undefined}
           />
 
           <SubmitButton value="만들기"/>
         </Fields>
       </Form>
     </>
   )
 }