From cd05d7ab88e670629a742bfa2137f2e686b70297 Mon Sep 17 00:00:00 2001 From: Luke Vella Date: Tue, 20 Jun 2023 11:25:34 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20Remove=20getServerSideProp?= =?UTF-8?q?s=20on=20invite=20page=20+=20handle=20404?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/layouts/poll-layout.tsx | 5 + apps/web/src/pages/404.tsx | 11 +-- apps/web/src/pages/invite/[urlId].tsx | 98 +++++++++++-------- apps/web/src/pages/poll/[urlId].tsx | 4 +- packages/backend/next/trpc/client.ts | 1 + packages/backend/trpc/routers/auth.ts | 11 +++ 6 files changed, 76 insertions(+), 54 deletions(-) diff --git a/apps/web/src/components/layouts/poll-layout.tsx b/apps/web/src/components/layouts/poll-layout.tsx index afb5adb99..c3b6e5580 100644 --- a/apps/web/src/components/layouts/poll-layout.tsx +++ b/apps/web/src/components/layouts/poll-layout.tsx @@ -47,6 +47,7 @@ import { Skeleton } from "@/components/skeleton"; import { Trans } from "@/components/trans"; import { useUser } from "@/components/user-provider"; import { usePoll } from "@/contexts/poll"; +import Error404 from "@/pages/404"; import { NextPageWithLayout } from "../../types"; @@ -261,6 +262,10 @@ const Prefetch = ({ children }: React.PropsWithChildren) => { const participants = trpc.polls.participants.list.useQuery({ pollId: urlId }); const watchers = trpc.polls.getWatchers.useQuery({ pollId: urlId }); + if (poll.error?.data?.code === "NOT_FOUND") { + return ; + } + if (!poll.isFetched || !watchers.isFetched || !participants.isFetched) { return (
diff --git a/apps/web/src/pages/404.tsx b/apps/web/src/pages/404.tsx index 70727ff70..23dab11b0 100644 --- a/apps/web/src/pages/404.tsx +++ b/apps/web/src/pages/404.tsx @@ -1,12 +1,11 @@ import { FileSearchIcon } from "@rallly/icons"; -import { GetStaticProps } from "next"; import { useTranslation } from "next-i18next"; -import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import React from "react"; import ErrorPage from "@/components/error-page"; import { getStandardLayout } from "@/components/layouts/standard-layout"; import { NextPageWithLayout } from "@/types"; +import { withPageTranslations } from "@/utils/with-page-translations"; const Custom404: NextPageWithLayout = () => { const { t } = useTranslation(); @@ -21,12 +20,6 @@ const Custom404: NextPageWithLayout = () => { Custom404.getLayout = getStandardLayout; -export const getStaticProps: GetStaticProps = async ({ locale = "en" }) => { - return { - props: { - ...(await serverSideTranslations(locale)), - }, - }; -}; +export const getStaticProps = withPageTranslations(); export default Custom404; diff --git a/apps/web/src/pages/invite/[urlId].tsx b/apps/web/src/pages/invite/[urlId].tsx index dd8dbf9a3..ea303652e 100644 --- a/apps/web/src/pages/invite/[urlId].tsx +++ b/apps/web/src/pages/invite/[urlId].tsx @@ -1,10 +1,10 @@ -import { withSessionSsr } from "@rallly/backend/next"; -import { decryptToken } from "@rallly/backend/session"; +import { trpc } from "@rallly/backend"; import { ArrowUpLeftIcon } from "@rallly/icons"; import { Button } from "@rallly/ui/button"; -import { GetServerSideProps } from "next"; import Head from "next/head"; import Link from "next/link"; +import { useRouter } from "next/router"; +import React from "react"; import { Poll } from "@/components/poll"; import { LegacyPollContextProvider } from "@/components/poll/poll-context-provider"; @@ -12,7 +12,48 @@ import { Trans } from "@/components/trans"; import { useUser } from "@/components/user-provider"; import { PermissionsContext } from "@/contexts/permissions"; import { usePoll } from "@/contexts/poll"; -import { withPageTranslations } from "@/utils/with-page-translations"; +import { getStaticTranslations } from "@/utils/with-page-translations"; + +import Error404 from "../404"; + +const Prefetch = ({ children }: React.PropsWithChildren) => { + const router = useRouter(); + const [urlId] = React.useState(router.query.urlId as string); + + const { data: permission } = trpc.auth.getUserPermission.useQuery( + { token: router.query.token as string }, + { + enabled: !!router.query.token, + }, + ); + + const { data: poll, error } = trpc.polls.get.useQuery( + { urlId }, + { + retry: false, + }, + ); + + const { data: participants } = trpc.polls.participants.list.useQuery({ + pollId: urlId, + }); + + if (error?.data?.code === "NOT_FOUND") { + return ; + } + if (!poll || !participants) { + return null; + } + + return ( + + + {poll.title} + + {children} + + ); +}; const GoToApp = () => { const poll = usePoll(); @@ -37,13 +78,9 @@ const GoToApp = () => { ); }; -const Page = ({ forceUserId }: { forceUserId: string }) => { - const poll = usePoll(); +const Page = () => { return ( - - - {poll.title} - +
{
- + ); }; -export const getServerSideProps: GetServerSideProps = withSessionSsr( - [ - withPageTranslations(), - async (ctx) => { - if (ctx.query.token) { - const res = await decryptToken<{ userId: string }>( - ctx.query.token as string, - ); +export const getStaticPaths = async () => { + return { + paths: [], //indicates that no page needs be created at build time + fallback: "blocking", //indicates the type of fallback + }; +}; - if (res) { - return { - props: { - forceUserId: res.userId, - }, - }; - } - } - - return { props: {} }; - }, - ], - { - onPrefetch: async (ssg, ctx) => { - const poll = await ssg.polls.get.fetch({ - urlId: ctx.params?.urlId as string, - }); - - await ssg.polls.participants.list.prefetch({ - pollId: poll.id, - }); - }, - }, -); +export const getStaticProps = getStaticTranslations; export default Page; diff --git a/apps/web/src/pages/poll/[urlId].tsx b/apps/web/src/pages/poll/[urlId].tsx index 8920da328..517470809 100644 --- a/apps/web/src/pages/poll/[urlId].tsx +++ b/apps/web/src/pages/poll/[urlId].tsx @@ -65,8 +65,8 @@ Page.getLayout = getPollLayout; export const getStaticPaths = async () => { return { - paths: [], //indicates that no page needs be created at build time - fallback: "blocking", //indicates the type of fallback + paths: [], + fallback: "blocking", }; }; diff --git a/packages/backend/next/trpc/client.ts b/packages/backend/next/trpc/client.ts index eb2a3fe63..bb76ab925 100644 --- a/packages/backend/next/trpc/client.ts +++ b/packages/backend/next/trpc/client.ts @@ -20,6 +20,7 @@ export const trpc = createTRPCNext({ queryClientConfig: { defaultOptions: { queries: { + retry: false, networkMode: "always", cacheTime: Infinity, staleTime: 1000 * 60, diff --git a/packages/backend/trpc/routers/auth.ts b/packages/backend/trpc/routers/auth.ts index c5f078d94..3977488fc 100644 --- a/packages/backend/trpc/routers/auth.ts +++ b/packages/backend/trpc/routers/auth.ts @@ -247,4 +247,15 @@ export const auth = router({ return { user }; }), + getUserPermission: publicProcedure + .input(z.object({ token: z.string() })) + .query(async ({ input }) => { + const res = await decryptToken<{ userId: string }>(input.token); + + if (!res) { + return null; + } + + return res; + }), });