core/pages/users/[id]/report.tsx

import { NextPage } from 'next'
import Link from 'next/link'
import dynamic from 'next/dynamic'
import { Field, Form, Formik } from 'formik'

import { CsrfContext, ResponseProps, User } from '@types'
import { get } from '@utils/Query'
import { makeUserURL, parseCookie } from '@utils/Tools'

import { ParsedUrlQuery } from 'querystring'

import NotFound from 'pages/404'
import { getToken } from '@utils/Csrf'
import { DMCA, TextField } from '@components/ReportTemplate'
import { useState } from 'react'
import Fetch from '@utils/Fetch'
import { ReportSchema } from '@utils/Yup'
import { getJosaPicker } from 'josa'
import { reportCats } from '@utils/Constants'
import { NextSeo } from 'next-seo'

const Container = dynamic(() => import('@components/Container'))
const Message = dynamic(() => import('@components/Message'))
const Login = dynamic(() => import('@components/Login'))

const ReportUser: NextPage<ReportUserProps> = ({ data, user, csrfToken }) => {
	const [reportRes, setReportRes] = useState<ResponseProps<unknown>>(null)
	if (!data?.id) return <NotFound />
	if (!user)
		return (
			<Login>
				<NextSeo title='신고하기' />
			</Login>
		)
	if (user?.id === data.id)
		return (
			<>
				<div className='flex h-screen select-none items-center justify-center'>
					<div className='container mx-auto px-20 text-center md:text-left'>
						<h1 className='text-6xl font-semibold'>저런..!</h1>
						<p className='mt-2 text-lg text-gray-400'>
							유감스럽게도 자기 자신은 신고할 수 없습니다.
						</p>
					</div>
				</div>
			</>
		)
	return (
		<Container paddingTop className='py-10'>
			<NextSeo title={`${data.globalName} 신고하기`} />
			<Link href={makeUserURL(data)} className='text-blue-500 hover:opacity-80'>
				<i className='fas fa-arrow-left mb-3 mt-3' /> <strong>{data.globalName}</strong>
				{getJosaPicker('로')(data.globalName)}돌아가기
			</Link>
			{reportRes?.code === 200 ? (
				<Message type='success'>
					<h2 className='text-lg font-semibold'>성공적으로 제출하였습니다!</h2>
					<p>
						더 자세한 설명이 필요할 수 있습니다.{' '}
						<strong>
							반드시{' '}
							<a className='text-blue-600 hover:text-blue-500' href='/discord'>
								공식 디스코드
							</a>
							에 참여해주세요!!
						</strong>
					</p>
				</Message>
			) : (
				<Formik
					onSubmit={async (body) => {
						const res = await Fetch(`/users/${data.id}/report`, {
							method: 'POST',
							body: JSON.stringify(body),
						})
						setReportRes(res)
					}}
					validationSchema={ReportSchema}
					initialValues={{
						category: null,
						description: '',
						_csrf: csrfToken,
					}}
				>
					{({ errors, touched, values, setFieldValue }) => (
						<Form>
							<div className='mb-5'>
								{reportRes && (
									<div className='my-5'>
										<Message type='error'>
											<h2 className='text-lg font-semibold'>{reportRes.message}</h2>
											<ul className='list-disc'>
												{reportRes.errors?.map((el, n) => <li key={n}>{el}</li>)}
											</ul>
										</Message>
									</div>
								)}
								<h3 className='font-bold'>신고 구분</h3>
								<p className='mb-1 text-sm text-gray-400'>해당되는 항목을 선택해주세요.</p>
								{reportCats.map((el) => (
									<div key={el}>
										<label>
											<Field type='radio' name='category' value={el} className='mr-1.5 py-2' />
											{el}
										</label>
									</div>
								))}
								<div className='mt-1 text-xs font-light text-red-500'>
									{errors.category && touched.category ? (errors.category as string) : null}
								</div>
								{values.category && (
									<>
										{values.category === '오픈소스 라이선스, 저작권 위반 등 권리 침해' ? (
											<DMCA
												values={values}
												errors={errors}
												touched={touched}
												setFieldValue={setFieldValue}
											/>
										) : values.category === '괴롭힘, 모욕, 명예훼손' ? (
											<>
												<Message type='info'>
													<h3 className='text-xl font-bold'>
														본인 혹은 다른 사람이 위험에 처해 있나요?
													</h3>
													<p>당신은 소중한 사람입니다.</p>
													<p className='list-item list-inside list-disc'>
														자살예방상담전화 1393 | 청소년전화 1388
													</p>
												</Message>
											</>
										) : (
											''
										)}
										{!['오픈소스 라이선스, 저작권 위반 등 권리 침해'].includes(values.category) && (
											<>
												<h3 className='mt-2 font-bold'>설명</h3>
												<p className='mb-1 text-sm text-gray-400'>최대한 자세하게 기재해주세요.</p>
												<TextField
													values={values}
													errors={errors}
													touched={touched}
													setFieldValue={setFieldValue}
												/>
											</>
										)}
									</>
								)}
							</div>
						</Form>
					)}
				</Formik>
			)}
		</Container>
	)
}

export const getServerSideProps = async (ctx: Context) => {
	const parsed = parseCookie(ctx.req)
	const data = await get.user.load(ctx.query.id)
	const user = await get.Authorization(parsed?.token)

	return {
		props: {
			csrfToken: getToken(ctx.req, ctx.res),
			data,
			user: await get.user.load(user || ''),
		},
	}
}

interface ReportUserProps {
	csrfToken: string
	data: User
	user: User
}

interface Context extends CsrfContext {
	query: URLQuery
}

interface URLQuery extends ParsedUrlQuery {
	id: string
}

export default ReportUser