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

Use client side fetching for user data (#211)

Browse source
This commit is contained in:
Luke Vella 2022-06-28 12:13:49 +01:00 • committed by GitHub
parent 1d768083ee
commit 368f324865
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 93 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

11
declarations/iron-session.d.ts vendored
View file

@ -2,16 +2,9 @@ import "iron-session";
declare module "iron-session" {
export interface IronSessionData {
user:
| {
user: {
id: string;
name: string;
email: string;
isGuest: false;
}
| {
id: string;
isGuest: true;
isGuest: boolean;
};
}
}

24
src/components/profile.tsx
View file

@ -1,6 +1,6 @@
import { formatRelative } from "date-fns";
import Head from "next/head";
import Link from "next/link";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import * as React from "react";
@ -10,6 +10,7 @@ import User from "@/components/icons/user.svg";
import { trpc } from "../utils/trpc";
import { EmptyState } from "./empty-state";
import LoginForm from "./login-form";
import { UserDetails } from "./profile/user-details";
import { useSession } from "./session";
@ -19,21 +20,24 @@ export const Profile: React.VoidFunctionComponent = () => {
const { t } = useTranslation("app");
const { data: userPolls } = trpc.useQuery(["user.getPolls"]);
const router = useRouter();
const createdPolls = userPolls?.polls;
React.useEffect(() => {
if (!user) {
router.replace("/new");
}
}, [user, router]);
if (!user || user.isGuest) {
return null;
if (user.isGuest) {
return (
<div className="card my-4 p-0">
<Head>
<title>Profile - Login</title>
</Head>
<LoginForm />
</div>
);
}
return (
<div className="mx-auto max-w-3xl py-4 lg:mx-0">
<Head>
<title>Profile - {user.name}</title>
</Head>
<div className="mb-4 flex items-center px-4">
<div className="mr-4 inline-flex h-14 w-14 items-center justify-center rounded-lg bg-primary-50">
<User className="h-7 text-primary-500" />

4
src/components/profile/user-details.tsx
View file

@ -11,8 +11,8 @@ import { TextInput } from "../text-input";
export interface UserDetailsProps {
userId: string;
name: string;
email: string;
name?: string;
email?: string;
}
const MotionButton = motion(Button);

32
src/components/session.tsx
View file

@ -4,6 +4,7 @@ import toast from "react-hot-toast";
import { trpc } from "@/utils/trpc";
import FullPageLoader from "./full-page-loader";
import { useRequiredContext } from "./use-required-context";
export type UserSessionData = NonNullable<IronSessionData["user"]>;
@ -16,13 +17,23 @@ type ParticipantOrComment = {
userId: string | null;
};
export type UserSessionDataExtended = UserSessionData & {
export type UserSessionDataExtended =
| {
isGuest: true;
id: string;
shortName: string;
};
}
| {
isGuest: false;
id: string;
name: string;
shortName: string;
email: string;
};
type SessionContextValue = {
logout: () => void;
user: UserSessionDataExtended | null;
user: UserSessionDataExtended;
refresh: () => void;
ownsObject: (obj: ParticipantOrComment) => boolean;
isLoading: boolean;
@ -35,14 +46,9 @@ SessionContext.displayName = "SessionContext";
export const SessionProvider: React.VoidFunctionComponent<{
children?: React.ReactNode;
defaultUser: UserSessionData;
}> = ({ children, defaultUser }) => {
}> = ({ children }) => {
const queryClient = trpc.useContext();
const {
data: user = defaultUser,
refetch,
isLoading,
} = trpc.useQuery(["session.get"]);
const { data: user, refetch, isLoading } = trpc.useQuery(["session.get"]);
const logout = trpc.useMutation(["session.destroy"], {
onSuccess: () => {
@ -50,6 +56,10 @@ export const SessionProvider: React.VoidFunctionComponent<{
},
});
if (!user) {
return <FullPageLoader>Loading user…</FullPageLoader>;
}
const sessionData: SessionContextValue = {
user: {
...user,
@ -95,7 +105,7 @@ export const withSession = <P extends SessionProps>(
const ComposedComponent: React.VoidFunctionComponent<P> = (props: P) => {
const Component = component;
return (
<SessionProvider defaultUser={props.user}>
<SessionProvider>
<Component {...props} />
</SessionProvider>
);

2
src/pages/login.tsx
View file

@ -100,8 +100,6 @@ export const getServerSideProps: GetServerSideProps = withSessionSsr(
req.session.user = {
isGuest: false,
name: user.name,
email: user.email,
id: user.id,
};

19
src/pages/profile.tsx
View file

@ -1,40 +1,29 @@
import { NextPage } from "next";
import Head from "next/head";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import { withSessionSsr } from "@/utils/auth";
import { Profile } from "../components/profile";
import { SessionProvider, UserSessionData } from "../components/session";
import { withSession } from "../components/session";
import StandardLayout from "../components/standard-layout";
const Page: NextPage<{ user: UserSessionData }> = ({ user }) => {
const name = user.isGuest ? user.id : user.name;
const Page: NextPage = () => {
return (
<SessionProvider defaultUser={user}>
<Head>
<title>Profile - {name}</title>
</Head>
<StandardLayout>
<Profile />
</StandardLayout>
</SessionProvider>
);
};
export const getServerSideProps = withSessionSsr(
async ({ locale = "en", query, req }) => {
if (!req.session.user || req.session.user.isGuest) {
return { redirect: { destination: "/new" }, props: {} };
}
async ({ locale = "en", query }) => {
return {
props: {
...(await serverSideTranslations(locale, ["app"])),
...query,
user: req.session.user,
},
};
},
);
export default Page;
export default withSession(Page);

17
src/server/routers/polls.ts
View file

@ -96,6 +96,19 @@ export const polls = createRouter()
resolve: async ({ ctx, input }): Promise<{ urlId: string }> => {
const adminUrlId = await nanoid();
let verified = false;
if (ctx.session.user.isGuest === false) {
const user = await prisma.user.findUnique({
where: { id: ctx.session.user.id },
});
// If user is logged in with the same email address
if (user?.email === input.user.email) {
verified = true;
}
}
const poll = await prisma.poll.create({
data: {
id: await nanoid(),
@ -106,9 +119,7 @@ export const polls = createRouter()
description: input.description,
authorName: input.user.name,
demo: input.demo,
verified:
ctx.session.user?.isGuest === false &&
ctx.session.user.email === input.user.email,
verified: verified,
adminUrlId,
participantUrlId: await nanoid(),
user: {

2
src/server/routers/polls/verification.ts
View file

@ -49,8 +49,6 @@ export const verification = createRouter()
ctx.session.user = {
id: poll.user.id,
isGuest: false,
name: poll.user.name,
email: poll.user.email,
};
await ctx.session.save();
},

31
src/server/routers/session.ts
View file

@ -1,9 +1,36 @@
import { prisma } from "~/prisma/db";
import { createGuestUser } from "../../utils/auth";
import { createRouter } from "../createRouter";
export const session = createRouter()
.query("get", {
async resolve({ ctx }) {
return ctx.session.user;
async resolve({
ctx,
}): Promise<
| { isGuest: true; id: string }
| { isGuest: false; id: string; name: string; email: string }
> {
if (ctx.session.user.isGuest) {
return { isGuest: true, id: ctx.session.user.id };
}
const user = await prisma.user.findUnique({
where: { id: ctx.session.user.id },
});
if (!user) {
ctx.session.user = await createGuestUser();
await ctx.session.save();
return { isGuest: true, id: ctx.session.user.id };
}
return {
isGuest: false,
id: user.id,
email: user.email,
name: user.name,
};
},
})
.mutation("destroy", {

2
src/utils/auth.ts
View file

@ -51,7 +51,7 @@ export const createToken = async <T extends Record<string, unknown>>(
});
};
const createGuestUser = async (): Promise<{
export const createGuestUser = async (): Promise<{
isGuest: true;
id: string;
}> => {