Remove useUser hook

src/layout/NavBar.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { useRouter } from "next/router";
-import { useUser } from "../hooks/useUser";
 import { Flex, Spacer, Box, Menu, MenuButton, MenuList, MenuItem, MenuGroup, IconButton, Link, useBreakpointValue } from "@chakra-ui/react";
 import DropdownButton from "../components/DropdownButton";
 import TextInput from "../components/TextInput";
 import { RxHamburgerMenu } from "react-icons/rx";
+import { trpc } from "@util/trpc";
+import { User } from "@lib/session";
 
 const navigationItems = [
 	{ text: "Home", href: "/" },
@@ -30,7 +31,7 @@ const navigationItems = [
 ];
 
 interface MobileNavigationProps {
-	user: any;
+	user?: User;
 }
 
 const MobileNavigation = ({ user }: MobileNavigationProps) => {
@@ -135,7 +136,7 @@ const DesktopNavigation = ({ user }: DesktopNavigationProps) => {
 };
 
 const NavBar = () => {
-	const { user } = useUser();
+	const user = trpc.me.me.useQuery().data;
 
 	const NavComponent = useBreakpointValue(
 		{
@@ -149,7 +150,7 @@ const NavBar = () => {
 
 	if (!NavComponent) return null;
 
-	return <NavComponent user={user} />;
+	return <NavComponent user={user?.account} />;
 };
 
 export default NavBar;

src/lib/session.ts

@@ -1,15 +1,10 @@
 import { IronSessionOptions } from "iron-session";
 import { withIronSessionApiRoute, withIronSessionSsr } from "iron-session/next";
-import {
-	GetServerSidePropsContext,
-	GetServerSidePropsResult,
-	NextApiHandler,
-} from "next";
+import { GetServerSidePropsContext, GetServerSidePropsResult, NextApiHandler } from "next";
 import { dev } from "./config";
+import type { accounts } from "@prisma/client";
 
-export type User = {
-	id: number;
-};
+export interface User extends accounts {}
 
 declare module "iron-session" {
 	interface IronSessionData {
@@ -31,12 +26,8 @@ export const withSessionRoute = (handler: NextApiHandler) => {
 	return withIronSessionApiRoute(handler, sessionOptions);
 };
 
-export function withSessionSsr<
-	P extends { [key: string]: unknown } = { [key: string]: unknown },
->(
-	handler: (
-		context: GetServerSidePropsContext
-	) => GetServerSidePropsResult<P> | Promise<GetServerSidePropsResult<P>>
+export function withSessionSsr<P extends { [key: string]: unknown } = { [key: string]: unknown }>(
+	handler: (context: GetServerSidePropsContext) => GetServerSidePropsResult<P> | Promise<GetServerSidePropsResult<P>>,
 ) {
 	return withIronSessionSsr(handler, sessionOptions);
 }

src/pages/_app.tsx

@@ -1,5 +1,4 @@
 import Layout from "../layout";
-import { UserContextWrapper } from "../hooks/useUser";
 import { ChakraProvider } from "@chakra-ui/react";
 import { Theme, Fonts } from "../layout/theme";
 import React from "react";
@@ -13,14 +12,12 @@ BigInt.prototype.toJSON = function () {
 
 const MyApp = ({ Component, pageProps }: any) => {
 	return (
-		<UserContextWrapper>
-			<ChakraProvider theme={Theme}>
-				<Fonts />
-				<Layout>
-					<Component {...pageProps} />
-				</Layout>
-			</ChakraProvider>
-		</UserContextWrapper>
+		<ChakraProvider theme={Theme}>
+			<Fonts />
+			<Layout>
+				<Component {...pageProps} />
+			</Layout>
+		</ChakraProvider>
 	);
 };
 

src/pages/account/index.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useState, useCallback } from "react";
-import Panel from "../../components/Panel";
+import React, { useEffect, useState } from "react";
+import Panel from "@component/Panel";
 import Head from "../../layout/Head";
-import { fetchApi } from "../../lib/request";
-import { User, withSessionSsr } from "../../lib/session";
-import Button from "../../components/Button";
-import StripedTable from "../../components/StrippedTable";
+import { fetchApi } from "@lib/request";
+import { User, withSessionSsr } from "@lib/session";
+import Button from "@component/Button";
+import StripedTable from "@component/StrippedTable";
 import {
 	Alert,
 	AlertIcon,

src/pages/account/login.tsx

@@ -4,7 +4,6 @@ import Head from "../../layout/Head";
 import Link from "@component/Link";
 import { useRouter } from "next/router";
 import { withSessionSsr } from "@lib/session";
-import { useUser } from "@hook/useUser";
 import { Text, Container, VStack, Wrap } from "@chakra-ui/react";
 import { trpc } from "@util/trpc";
 import { useFormFeedback } from "@hook/useFormFeedback";
@@ -42,7 +41,6 @@ export default function Login() {
 	} = useForm<z.infer<typeof schema>>({
 		resolver: zodResolver(schema),
 	});
-	const { setUser } = useUser();
 	const router = useRouter();
 	const login = trpc.account.login.useMutation();
 	const { handleResponse, showResponse } = useFormFeedback();
@@ -51,8 +49,6 @@ export default function Login() {
 		handleResponse(async () => {
 			const account = await login.mutateAsync({ name, password });
 			if (account) {
-				setUser(account);
-
 				const redirectUrl = (router.query.redirect as string) || "/account";
 				router.push(redirectUrl);
 			}

src/pages/account/logout.tsx

@@ -1,20 +1,19 @@
 import { useRouter } from "next/router";
 import { useEffect } from "react";
-import { useUser } from "@hook/useUser";
 import { trpc } from "@util/trpc";
 
 export default function Logout() {
 	const router = useRouter();
-	const { setUser, user } = useUser();
+	const user = trpc.me.me.useQuery().data;
 	const logout = trpc.account.logout.useMutation();
 
 	useEffect(() => {
-		if (!user) {
+		if (!user?.isLoggedIn) {
 			router.push("/");
+			return;
 		}
 
 		logout.mutate();
-		setUser(null);
 		router.push("/");
 	}, []);
 

src/server/routers/_app.ts

@@ -5,6 +5,7 @@ import { townRouter } from "./town";
 import { communityRouter } from "./community";
 import { statusRouter } from "./status";
 import { accountRouter } from "./account";
+import { meRouter } from "./me";
 
 export const appRouter = router({
 	news: newsRouter,
@@ -13,6 +14,7 @@ export const appRouter = router({
 	community: communityRouter,
 	status: statusRouter,
 	account: accountRouter,
+	me: meRouter,
 });
 
 // export type definition of API

src/server/routers/account.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { procedure, protectedProcedure, router } from "../trpc";
+import { procedure, authProcedure, router } from "../trpc";
 import prisma from "../../prisma";
 import { sha1Encrypt } from "@lib/crypt";
 import { TRPCError } from "@trpc/server";
@@ -94,7 +94,7 @@ export const accountRouter = router({
 	logout: procedure.mutation(async ({ ctx }) => {
 		ctx.session.destroy();
 	}),
-	deleteCharacter: protectedProcedure.input(z.object({ name: z.string(), password: z.string() })).mutation(async ({ input, ctx }) => {
+	deleteCharacter: authProcedure.input(z.object({ name: z.string(), password: z.string() })).mutation(async ({ input, ctx }) => {
 		const { name, password } = input;
 		const { session } = ctx;
 
@@ -125,7 +125,7 @@ export const accountRouter = router({
 
 		return character;
 	}),
-	createCharacter: protectedProcedure
+	createCharacter: authProcedure
 		.input(
 			z.object({
 				name: z.string(),

src/server/routers/me.ts

@@ -0,0 +1,12 @@
+import { authProcedure, router } from "../trpc";
+
+export const meRouter = router({
+	me: authProcedure.query(async ({ ctx }) => {
+		const { session } = ctx;
+
+		return {
+			isLoggedIn: !!session.user,
+			account: session.user,
+		};
+	}),
+});

src/server/trpc.ts

@@ -10,7 +10,7 @@ export const router = t.router;
 export const procedure = t.procedure;
 export const middleware = t.middleware;
 
-export const protectedProcedure = t.procedure.use(
+export const authProcedure = t.procedure.use(
 	middleware(async ({ ctx, next }) => {
 		if (!ctx.session.user) {
 			throw new TRPCError({ code: "UNAUTHORIZED", message: "Unauthorized" });