3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-05-28 00:06:27 +02:00
Code Issues Projects Releases Packages Wiki Activity

⚡️ Remove getServerSideProps on invite page + handle 404

Browse source
This commit is contained in:
Luke Vella 2023-06-20 11:25:34 +01:00
parent 5bbc7248bf
commit cd05d7ab88
6 changed files with 76 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

5
apps/web/src/components/layouts/poll-layout.tsx
View file

@ -47,6 +47,7 @@ import { Skeleton } from "@/components/skeleton";
import { Trans } from "@/components/trans"; import { Trans } from "@/components/trans";
import { useUser } from "@/components/user-provider"; import { useUser } from "@/components/user-provider";
import { usePoll } from "@/contexts/poll"; import { usePoll } from "@/contexts/poll";
import Error404 from "@/pages/404";
import { NextPageWithLayout } from "../../types"; import { NextPageWithLayout } from "../../types";
@ -261,6 +262,10 @@ const Prefetch = ({ children }: React.PropsWithChildren) => {
const participants = trpc.polls.participants.list.useQuery({ pollId: urlId }); const participants = trpc.polls.participants.list.useQuery({ pollId: urlId });
const watchers = trpc.polls.getWatchers.useQuery({ pollId: urlId }); const watchers = trpc.polls.getWatchers.useQuery({ pollId: urlId });
if (poll.error?.data?.code === "NOT_FOUND") {
return <Error404 />;
}
if (!poll.isFetched || !watchers.isFetched || !participants.isFetched) { if (!poll.isFetched || !watchers.isFetched || !participants.isFetched) {
return ( return (
<div> <div>

11
apps/web/src/pages/404.tsx
View file

@ -1,12 +1,11 @@
import { FileSearchIcon } from "@rallly/icons"; import { FileSearchIcon } from "@rallly/icons";
import { GetStaticProps } from "next";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import React from "react"; import React from "react";
import ErrorPage from "@/components/error-page"; import ErrorPage from "@/components/error-page";
import { getStandardLayout } from "@/components/layouts/standard-layout"; import { getStandardLayout } from "@/components/layouts/standard-layout";
import { NextPageWithLayout } from "@/types"; import { NextPageWithLayout } from "@/types";
import { withPageTranslations } from "@/utils/with-page-translations";
const Custom404: NextPageWithLayout = () => { const Custom404: NextPageWithLayout = () => {
const { t } = useTranslation(); const { t } = useTranslation();
@ -21,12 +20,6 @@ const Custom404: NextPageWithLayout = () => {
Custom404.getLayout = getStandardLayout; Custom404.getLayout = getStandardLayout;
export const getStaticProps: GetStaticProps = async ({ locale = "en" }) => { export const getStaticProps = withPageTranslations();
return {
props: {
...(await serverSideTranslations(locale)),
},
};
};
export default Custom404; export default Custom404;

98
apps/web/src/pages/invite/[urlId].tsx
View file

@ -1,10 +1,10 @@
import { withSessionSsr } from "@rallly/backend/next"; import { trpc } from "@rallly/backend";
import { decryptToken } from "@rallly/backend/session";
import { ArrowUpLeftIcon } from "@rallly/icons"; import { ArrowUpLeftIcon } from "@rallly/icons";
import { Button } from "@rallly/ui/button"; import { Button } from "@rallly/ui/button";
import { GetServerSideProps } from "next";
import Head from "next/head"; import Head from "next/head";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router";
import React from "react";
import { Poll } from "@/components/poll"; import { Poll } from "@/components/poll";
import { LegacyPollContextProvider } from "@/components/poll/poll-context-provider"; import { LegacyPollContextProvider } from "@/components/poll/poll-context-provider";
@ -12,7 +12,48 @@ import { Trans } from "@/components/trans";
import { useUser } from "@/components/user-provider"; import { useUser } from "@/components/user-provider";
import { PermissionsContext } from "@/contexts/permissions"; import { PermissionsContext } from "@/contexts/permissions";
import { usePoll } from "@/contexts/poll"; 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 <Error404 />;
}
if (!poll || !participants) {
return null;
}
return (
<PermissionsContext.Provider value={{ userId: permission?.userId ?? null }}>
<Head>
<title>{poll.title}</title>
</Head>
{children}
</PermissionsContext.Provider>
);
};
const GoToApp = () => { const GoToApp = () => {
const poll = usePoll(); const poll = usePoll();
@ -37,13 +78,9 @@ const GoToApp = () => {
); );
}; };
const Page = ({ forceUserId }: { forceUserId: string }) => { const Page = () => {
const poll = usePoll();
return ( return (
<PermissionsContext.Provider value={{ userId: forceUserId }}> <Prefetch>
<Head>
<title>{poll.title}</title>
</Head>
<LegacyPollContextProvider> <LegacyPollContextProvider>
<div className=""> <div className="">
<svg <svg
@ -92,42 +129,17 @@ const Page = ({ forceUserId }: { forceUserId: string }) => {
</div> </div>
</div> </div>
</LegacyPollContextProvider> </LegacyPollContextProvider>
</PermissionsContext.Provider> </Prefetch>
); );
}; };
export const getServerSideProps: GetServerSideProps = withSessionSsr( export const getStaticPaths = async () => {
[ return {
withPageTranslations(), paths: [], //indicates that no page needs be created at build time
async (ctx) => { fallback: "blocking", //indicates the type of fallback
if (ctx.query.token) { };
const res = await decryptToken<{ userId: string }>( };
ctx.query.token as string,
);
if (res) { export const getStaticProps = getStaticTranslations;
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 default Page; export default Page;

4
apps/web/src/pages/poll/[urlId].tsx
View file

@ -65,8 +65,8 @@ Page.getLayout = getPollLayout;
export const getStaticPaths = async () => { export const getStaticPaths = async () => {
return { return {
paths: [], //indicates that no page needs be created at build time paths: [],
fallback: "blocking", //indicates the type of fallback fallback: "blocking",
}; };
}; };

1
packages/backend/next/trpc/client.ts
View file

@ -20,6 +20,7 @@ export const trpc = createTRPCNext<AppRouter>({
queryClientConfig: { queryClientConfig: {
defaultOptions: { defaultOptions: {
queries: { queries: {
retry: false,
networkMode: "always", networkMode: "always",
cacheTime: Infinity, cacheTime: Infinity,
staleTime: 1000 * 60, staleTime: 1000 * 60,

11
packages/backend/trpc/routers/auth.ts
View file

@ -247,4 +247,15 @@ export const auth = router({
return { user }; 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;
}),
}); });