From dcdd7e0710ff265ce0a0ddad0f7eae4d841f5cb6 Mon Sep 17 00:00:00 2001 From: wonderlandpark Date: Thu, 6 May 2021 09:14:48 +0900 Subject: [PATCH] fix: router instance called at serverside while rendering --- components/Login.tsx | 16 ++++++++++++++++ components/Redirect.tsx | 11 +++++++---- pages/bots/[id]/index.tsx | 7 ++----- pages/bots/[id]/vote.tsx | 19 ++++++++----------- pages/developers/applications/index.tsx | 14 ++++++-------- pages/manage/[id].tsx | 12 ++++-------- pages/panel.tsx | 14 +++++--------- pages/search.tsx | 14 +++++++------- pages/users/[id].tsx | 11 +++-------- utils/Tools.ts | 3 ++- 10 files changed, 60 insertions(+), 61 deletions(-) create mode 100644 components/Login.tsx diff --git a/components/Login.tsx b/components/Login.tsx new file mode 100644 index 0000000..e5a96bf --- /dev/null +++ b/components/Login.tsx @@ -0,0 +1,16 @@ +import { redirectTo } from '@utils/Tools' +import { useRouter } from 'next/router' +import { useEffect } from 'react' + +const Login: React.FC = ({ children }) => { + const router = useRouter() + useEffect(() => { + localStorage.redirectTo = window.location.href + redirectTo(router, 'login') + }) + return <> + {children} + +} + +export default Login \ No newline at end of file diff --git a/components/Redirect.tsx b/components/Redirect.tsx index c82b38d..28c781e 100644 --- a/components/Redirect.tsx +++ b/components/Redirect.tsx @@ -1,4 +1,4 @@ -import { ReactNode } from 'react' +import { ReactNode, useEffect } from 'react' import dynamic from 'next/dynamic' import { useRouter } from 'next/router' @@ -6,22 +6,25 @@ import { redirectTo } from '@utils/Tools' const Container = dynamic(() => import('@components/Container')) -const Redirect = ({ to, children }:RedirectProps):JSX.Element => { +const Redirect = ({ to, text=true, children }:RedirectProps):JSX.Element => { const router = useRouter() if(!to) throw new Error('No Link') - redirectTo(router, to) + useEffect(() => { + redirectTo(router, to) + }, []) if(children) return <> {children} return
- 자동으로 리다이렉트되지 않는다면 클릭해세요. + {text && '자동으로 리다이렉트되지 않는다면 클릭해세요.'}
} interface RedirectProps { to: string + text?: boolean children?: ReactNode } diff --git a/pages/bots/[id]/index.tsx b/pages/bots/[id]/index.tsx index cc0105b..d3e2ab0 100644 --- a/pages/bots/[id]/index.tsx +++ b/pages/bots/[id]/index.tsx @@ -35,6 +35,7 @@ const Button = dynamic(() => import('@components/Button')) const TextArea = dynamic(() => import('@components/Form/TextArea')) const Modal = dynamic(() => import('@components/Modal')) const NSFW = dynamic(() => import('@components/NSFW')) +const Login = dynamic(() => import('@components/Login')) const Bots: NextPage = ({ data, desc, date, user, theme, csrfToken }) => { const bg = checkBotFlag(data?.flags, 'trusted') && data?.banner @@ -42,10 +43,6 @@ const Bots: NextPage = ({ data, desc, date, user, theme, csrfToken }) const [ nsfw, setNSFW ] = useState() const [ reportModal, setReportModal ] = useState(false) const [ reportRes, setReportRes ] = useState>(null) - function toLogin() { - localStorage.redirectTo = window.location.href - redirectTo(router, 'login') - } useEffect(() => { setNSFW(localStorage.nsfw) }, []) @@ -188,7 +185,7 @@ const Bots: NextPage = ({ data, desc, date, user, theme, csrfToken }) ))}
{ - if(!user) toLogin() + if(!user) return else setReportModal(true) }} aria-hidden='true'> diff --git a/pages/bots/[id]/vote.tsx b/pages/bots/[id]/vote.tsx index 24253f0..5044672 100644 --- a/pages/bots/[id]/vote.tsx +++ b/pages/bots/[id]/vote.tsx @@ -5,7 +5,7 @@ import { useRouter } from 'next/router' import { Bot, CsrfContext, ResponseProps, Theme, User } from '@types' import { get } from '@utils/Query' -import { makeBotURL, parseCookie, checkBotFlag, redirectTo } from '@utils/Tools' +import { makeBotURL, parseCookie, checkBotFlag } from '@utils/Tools' import { ParsedUrlQuery } from 'querystring' @@ -16,6 +16,7 @@ import { useState } from 'react' import Fetch from '@utils/Fetch' import Day from '@utils/Day' import { getJosaPicker } from 'josa' +import { KoreanbotsEndPoints } from '@utils/Constants' const Container = dynamic(() => import('@components/Container')) @@ -25,6 +26,7 @@ const Tag = dynamic(() => import('@components/Tag')) const Segment = dynamic(() => import('@components/Segment')) const SEO = dynamic(() => import('@components/SEO')) const Advertisement = dynamic(() => import('@components/Advertisement')) +const Login = dynamic(() => import('@components/Login')) const VoteBot: NextPage = ({ data, user, csrfToken, theme }) => { const [ votingStatus, setVotingStatus ] = useState(0) @@ -35,18 +37,13 @@ const VoteBot: NextPage = ({ data, user, csrfToken, theme }) => { router.push(`/bots/${data.id}`) return <> } - if(!user) { - localStorage.redirectTo = window.location.href - redirectTo(router, 'login') - return - } + if(!user) return + + + if((checkBotFlag(data.flags, 'trusted') || checkBotFlag(data.flags, 'partnered')) && data.vanity && data.vanity !== router.query.id) router.push(`/bots/${data.vanity}/vote?csrfToken=${csrfToken}`) return - + {data.name}{getJosaPicker('로')(data.name)} 돌아가기 diff --git a/pages/developers/applications/index.tsx b/pages/developers/applications/index.tsx index 961f223..ca1295b 100644 --- a/pages/developers/applications/index.tsx +++ b/pages/developers/applications/index.tsx @@ -1,22 +1,20 @@ import { NextPage, NextPageContext } from 'next' import dynamic from 'next/dynamic' -import { useRouter } from 'next/router' import { get } from '@utils/Query' -import { parseCookie, redirectTo } from '@utils/Tools' +import { parseCookie } from '@utils/Tools' import { Bot, User } from '@types' const Application = dynamic(() => import('@components/Application')) const DeveloperLayout = dynamic(() => import('@components/DeveloperLayout')) +const SEO = dynamic(() => import('@components/SEO')) +const Login = dynamic(() => import('@components/Login')) const Applications: NextPage = ({ user }) => { - const router = useRouter() - if(!user) { - localStorage.redirectTo = window.location.href - redirectTo(router, 'login') - return - } + if(!user) return + + return

나의 봇

한국 디스코드봇 리스트 API를 활용하여 봇에 다양한 기능을 추가해보세요.

diff --git a/pages/manage/[id].tsx b/pages/manage/[id].tsx index 987f91c..7615a73 100644 --- a/pages/manage/[id].tsx +++ b/pages/manage/[id].tsx @@ -35,6 +35,7 @@ const Message = dynamic(() => import('@components/Message')) const Modal = dynamic(() => import('@components/Modal')) const Captcha = dynamic(() => import('@components/Captcha')) const SEO = dynamic(() => import('@components/SEO')) +const Login = dynamic(() => import('@components/Login')) const ManageBotPage:NextPage = ({ bot, user, csrfToken, theme }) => { const [ data, setData ] = useState(null) @@ -42,10 +43,6 @@ const ManageBotPage:NextPage = ({ bot, user, csrfToken, theme }) const [ transferModal, setTransferModal ] = useState(false) const [ deleteModal, setDeleteModal ] = useState(false) const router = useRouter() - function toLogin() { - localStorage.redirectTo = window.location.href - redirectTo(router, 'login') - } async function submitBot(value: ManageBot) { const res = await Fetch(`/bots/${bot.id}`, { method: 'PATCH', body: JSON.stringify(cleanObject(value)) }) @@ -59,10 +56,9 @@ const ManageBotPage:NextPage = ({ bot, user, csrfToken, theme }) } if(!bot) return - if(!user) { - toLogin() - return - } + if(!user) return + + if(!(bot.owners as User[]).find(el => el.id === user.id) && !checkUserFlag(user.flags, 'staff')) return return diff --git a/pages/panel.tsx b/pages/panel.tsx index 1108f85..7d2304a 100644 --- a/pages/panel.tsx +++ b/pages/panel.tsx @@ -4,7 +4,7 @@ import dynamic from 'next/dynamic' import { useRouter } from 'next/router' import { get } from '@utils/Query' -import { parseCookie, redirectTo } from '@utils/Tools' +import { parseCookie } from '@utils/Tools' import { Bot, SubmittedBot, User } from '@types' import Fetch from '@utils/Fetch' import { getToken } from '@utils/Csrf' @@ -15,18 +15,14 @@ const ResponsiveGrid = dynamic(() => import('@components/ResponsiveGrid')) const Button = dynamic(() => import('@components/Button')) const BotCard = dynamic(() => import('@components/BotCard')) const SubmittedBotCard = dynamic(() => import('@components/SubmittedBotCard')) +const Login = dynamic(() => import('@components/Login')) const Panel:NextPage = ({ logged, user, submits, csrfToken }) => { const router = useRouter() const [ submitLimit, setSubmitLimit ] = useState(8) - function toLogin() { - localStorage.redirectTo = window.location.href - redirectTo(router, 'login') - } - if(!logged) { - toLogin() - return - } + if(!logged) return + + return

관리 패널

diff --git a/pages/search.tsx b/pages/search.tsx index 09006c5..cf67dee 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -1,12 +1,10 @@ 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 { SearchQuerySchema } from '@utils/Yup' -import { redirectTo } from '@utils/Tools' const Hero = dynamic(() => import('@components/Hero')) @@ -16,13 +14,10 @@ const BotCard = dynamic(() => import('@components/BotCard')) const Container = dynamic(() => import('@components/Container')) const ResponsiveGrid = dynamic(() => import('@components/ResponsiveGrid')) const Paginator = dynamic(() => import('@components/Paginator')) +const Redirect = dynamic(() => import('@components/Redirect')) const Search:NextPage = ({ data, query }) => { - const router = useRouter() - if(!query?.q) { - redirectTo(router, '/') - return <> - } + if(!query?.q) return return <> @@ -46,6 +41,11 @@ const Search:NextPage = ({ data, query }) => { } export const getServerSideProps = async(ctx: Context) => { + if(!ctx.query?.q) { + ctx.res.statusCode = 301 + ctx.res.setHeader('Location', '/') + return { props: {} } + } let data: BotList if(!ctx.query.page) ctx.query.page = '1' const validate = await SearchQuerySchema.validate(ctx.query).then(el => el).catch(() => null) diff --git a/pages/users/[id].tsx b/pages/users/[id].tsx index 71c30a3..3482a87 100644 --- a/pages/users/[id].tsx +++ b/pages/users/[id].tsx @@ -1,6 +1,5 @@ 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' @@ -9,7 +8,7 @@ import { Field, Form, Formik } from 'formik' import { Bot, User, ResponseProps, Theme } from '@types' import { get } from '@utils/Query' -import { checkUserFlag, parseCookie, redirectTo } from '@utils/Tools' +import { checkUserFlag, parseCookie } from '@utils/Tools' import { getToken } from '@utils/Csrf' import Fetch from '@utils/Fetch' import { ReportSchema } from '@utils/Yup' @@ -30,15 +29,11 @@ const Message = dynamic(() => import('@components/Message')) const Modal = dynamic(() => import('@components/Modal')) const Button = dynamic(() => import('@components/Button')) const TextArea = dynamic(() => import('@components/Form/TextArea')) +const Login = dynamic(() => import('@components/Login')) const Users: NextPage = ({ user, data, csrfToken, theme }) => { - const router = useRouter() const [ reportModal, setReportModal ] = useState(false) const [ reportRes, setReportRes ] = useState>(null) - function toLogin() { - localStorage.redirectTo = window.location.href - redirectTo(router, 'login') - } if (!data?.id) return return ( @@ -92,7 +87,7 @@ const Users: NextPage = ({ user, data, csrfToken, theme }) => { )}