From 009e8232d481f67fe06b2b94046e7b1417b11b2c Mon Sep 17 00:00:00 2001
From: wonderlandpark <wonderbotsupport@naver.com>
Date: Sat, 13 Mar 2021 22:23:09 +0900
Subject: [PATCH] feat: can't report self

---
 pages/bots/[id]/index.tsx |  11 +++-
 pages/users/[id].tsx      | 128 ++++++++++++++++++++++----------------
 2 files changed, 82 insertions(+), 57 deletions(-)

diff --git a/pages/bots/[id]/index.tsx b/pages/bots/[id]/index.tsx
index 9077233..3dca8eb 100644
--- a/pages/bots/[id]/index.tsx
+++ b/pages/bots/[id]/index.tsx
@@ -14,7 +14,7 @@ import { get } from '@utils/Query'
 import Day from '@utils/Day'
 import { ReportSchema } from '@utils/Yup'
 import Fetch from '@utils/Fetch'
-import { checkBotFlag, checkUserFlag, formatNumber, parseCookie } from '@utils/Tools'
+import { checkBotFlag, checkUserFlag, formatNumber, parseCookie, redirectTo } from '@utils/Tools'
 import { getToken } from '@utils/Csrf'
 
 import NotFound from '../../404'
@@ -41,6 +41,10 @@ const Bots: NextPage<BotsProps> = ({ data, date, user, theme, csrfToken, setThem
 	const router = useRouter()
 	const [ reportModal, setReportModal ] = useState(false)
 	const [ reportRes, setReportRes ] = useState<ResponseProps<null>>(null)
+	function toLogin() {
+		localStorage.redirectTo = window.location.href
+		redirectTo(router, 'login')
+	}
 	if (!data?.id) return <NotFound />
 	if((checkBotFlag(data.flags, 'trusted') || checkBotFlag(data.flags, 'partnered')) && data.vanity && data.vanity !== router.query.id) router.push(`/bots/${data.vanity}`)
 	return <div style={bg ? { background: `linear-gradient(to right, rgba(34, 36, 38, 0.68), rgba(34, 36, 38, 0.68)), url("${data.bg}") center top / cover no-repeat fixed` } : {}}>
@@ -182,7 +186,10 @@ const Bots: NextPage<BotsProps> = ({ data, date, user, theme, csrfToken, setThem
 									/>
 								))}
 								<div className='list grid'>
-									<a className='text-red-600 hover:underline cursor-pointer' onClick={() => setReportModal(true)} aria-hidden='true'>
+									<a className='text-red-600 hover:underline cursor-pointer' onClick={() => {
+										if(!user) toLogin()
+										else setReportModal(true)
+									}} aria-hidden='true'>
 										<i className='far fa-flag' />
 								신고하기
 									</a>
diff --git a/pages/users/[id].tsx b/pages/users/[id].tsx
index 7da0397..42d6435 100644
--- a/pages/users/[id].tsx
+++ b/pages/users/[id].tsx
@@ -1,5 +1,6 @@
 import { NextPage, NextPageContext } from 'next'
 import { useState } from 'react'
+import { useRouter } from 'next/router'
 import dynamic from 'next/dynamic'
 import { SnowflakeUtil } from 'discord.js'
 import { ParsedUrlQuery } from 'querystring'
@@ -7,8 +8,8 @@ import { josa } from 'josa'
 import { Field, Form, Formik } from 'formik'
 
 import { Bot, User, ResponseProps, Theme } from '@types'
-import * as Query from '@utils/Query'
-import { checkUserFlag } from '@utils/Tools'
+import { get } from '@utils/Query'
+import { checkUserFlag, parseCookie, redirectTo } from '@utils/Tools'
 import { getToken } from '@utils/Csrf'
 import Fetch from '@utils/Fetch'
 import { ReportSchema } from '@utils/Yup'
@@ -30,9 +31,14 @@ const Modal = dynamic(() => import('@components/Modal'))
 const Button = dynamic(() => import('@components/Button'))
 const TextArea = dynamic(() => import('@components/Form/TextArea'))
 
-const Users: NextPage<UserProps> = ({ data, csrfToken, theme }) => {
+const Users: NextPage<UserProps> = ({ user, data, csrfToken, theme }) => {
+	const router = useRouter()
 	const [ reportModal, setReportModal ] = useState(false)
 	const [ reportRes, setReportRes ] = useState<ResponseProps<null>>(null)
+	function toLogin() {
+		localStorage.redirectTo = window.location.href
+		redirectTo(router, 'login')
+	}
 	if (!data?.id) return <NotFound />
 	return (
 		<Container paddingTop className='py-10'>
@@ -89,65 +95,73 @@ const Users: NextPage<UserProps> = ({ data, csrfToken, theme }) => {
 							/>
 						)}
 						<div className='list-none mt-2'>
-							<a className='text-red-600 hover:underline cursor-pointer' onClick={() => setReportModal(true)} aria-hidden='true'>
+							<a className='text-red-600 hover:underline cursor-pointer' onClick={() => {
+								if(!user) toLogin()
+								else setReportModal(true)
+							}} aria-hidden='true'>
 								<i className='far fa-flag' />
 								신고하기
 							</a>
 						</div>
-						<Modal header={`${data.username}#${data.tag} 신고하기`} closeIcon isOpen={reportModal} onClose={() => {
+						<Modal header={user.id === data.id ? '자기 자신은 신고할 수 없습니다.' : `${data.username}#${data.tag} 신고하기`} closeIcon isOpen={reportModal} onClose={() => {
 							setReportModal(false)
 							setReportRes(null)
 						}} full dark={theme === 'dark'}>
 							{
-								reportRes?.code === 200 ? <Message type='success'>
-									<h2 className='text-lg font-semibold'>성공적으로 신고하였습니다!</h2>
-									<p>더 자세한 설명이 필요할 수 있습니다! <a className='text-blue-600 hover:text-blue-500' href='/discord'>공식 디스코드</a>에 참여해주세요</p>
-								</Message> : <Formik onSubmit={async (body) => {
-									const res = await Fetch<null>(`/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='text-gray-400 text-sm mb-1'>해당되는 항복을 선택해주세요.</p>
-													{
-														reportCats.map(el => 
-															<div key={el}>
-																<label>
-																	<Field type='radio' name='category' value={el} className='mr-1.5 py-2' />
-																	{el}
-																</label>
+								user.id === data.id ? <div className='text-center py-20'>
+									<h2 className='text-xl font-semibold'>
+										" 현명한 조언을 해주는 것은 자기 이외에는 없다. "
+									</h2>
+								</div> :
+									reportRes?.code === 200 ? <Message type='success'>
+										<h2 className='text-lg font-semibold'>성공적으로 신고하였습니다!</h2>
+										<p>더 자세한 설명이 필요할 수 있습니다! <a className='text-blue-600 hover:text-blue-500' href='/discord'>공식 디스코드</a>에 참여해주세요</p>
+									</Message> : <Formik onSubmit={async (body) => {
+										const res = await Fetch<null>(`/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>
-														)
-													}
-													<div className='mt-1 text-red-500 text-xs font-light'>{errors.category && touched.category ? errors.category : null}</div>
-													<h3 className='font-bold mt-2'>설명</h3>
-													<p className='text-gray-400 text-sm mb-1'>신고하시는 내용을 자세하게 설명해주세요.</p>
-													<TextArea name='description' placeholder='최대한 자세하게 설명해주세요!' theme={theme === 'dark' ? 'dark' : 'light'} value={values.description} setValue={(value) => setFieldValue('description', value)} />
-													<div className='mt-1 text-red-500 text-xs font-light'>{errors.description && touched.description ? errors.description : null}</div>
-												</div>
-												<Button className='bg-gray-500 hover:opacity-90 text-white' onClick={()=> setReportModal(false)}>취소</Button>
-												<Button type='submit' className='bg-red-500 hover:opacity-90 text-white'>제출</Button>
-											</Form>
-										)
-									}
-								</Formik>
+														}
+														<h3 className='font-bold'>신고 구분</h3>
+														<p className='text-gray-400 text-sm mb-1'>해당되는 항복을 선택해주세요.</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-red-500 text-xs font-light'>{errors.category && touched.category ? errors.category : null}</div>
+														<h3 className='font-bold mt-2'>설명</h3>
+														<p className='text-gray-400 text-sm mb-1'>신고하시는 내용을 자세하게 설명해주세요.</p>
+														<TextArea name='description' placeholder='최대한 자세하게 설명해주세요!' theme={theme === 'dark' ? 'dark' : 'light'} value={values.description} setValue={(value) => setFieldValue('description', value)} />
+														<div className='mt-1 text-red-500 text-xs font-light'>{errors.description && touched.description ? errors.description : null}</div>
+													</div>
+													<Button className='bg-gray-500 hover:opacity-90 text-white' onClick={()=> setReportModal(false)}>취소</Button>
+													<Button type='submit' className='bg-red-500 hover:opacity-90 text-white'>제출</Button>
+												</Form>
+											)
+										}
+									</Formik>
 							}
 						</Modal>
 					</div>
@@ -166,11 +180,15 @@ const Users: NextPage<UserProps> = ({ data, csrfToken, theme }) => {
 }
 
 export const getServerSideProps = async (ctx: Context) => {
-	const data = await Query.get.user.load(ctx.query.id)
-	return { props: { data, date: SnowflakeUtil.deconstruct(data?.id ?? '0')?.date?.toJSON(), csrfToken: getToken(ctx.req, ctx.res) } }
+	const parsed = parseCookie(ctx.req)
+	
+	const user = await get.Authorization(parsed?.token) || ''
+	const data = await get.user.load(ctx.query.id)
+	return { props: { user: await get.user.load(user), data, date: SnowflakeUtil.deconstruct(data?.id ?? '0')?.date?.toJSON(), csrfToken: getToken(ctx.req, ctx.res) } }
 }
 
 interface UserProps {
+	user: User
 	data: User
 	csrfToken: string
 	theme: Theme