Refactor session account, fix incorrect full account response to api

nekiro · Dec 8, 2024 · 449d676 · 449d676
1 parent c0cef62
commit 449d676
Show file tree

Hide file tree

Showing 30 changed files with 191 additions and 320 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
 		"net": "^1.0.2",
 		"next": "^15.0.3",
 		"next-seo": "^6.6.0",
+		"nextjs-toploader": "^3.7.15",
 		"node-cron": "^3.0.3",
 		"nodemailer": "^6.9.16",
 		"promise-socket": "^8.0.0",

diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx
@@ -1,19 +1,16 @@
 import React, { ReactNode } from "react";
 import Loader from "./Loader";
-import { Flex, Box, Text, Grid, FlexProps, useColorModeValue } from "@chakra-ui/react";
-import { IoMdTime } from "react-icons/io";
-import { formatDate } from "@lib/.";
+import { Flex, Box, Text, Grid, FlexProps } from "@chakra-ui/react";
 import { useColors } from "@hook/useColors";
 
 export interface PanelProps extends FlexProps {
 	header?: string;
-	date?: string | null;
 	identifier?: string | null;
 	children?: ReactNode;
 	isLoading?: boolean;
 }
 
-const Panel = ({ header, date, identifier, children, isLoading = false, borderRadius = "none", padding = "10px", ...props }: PanelProps) => {
+const Panel = ({ header, identifier, children, isLoading = false, borderRadius = "none", padding = "10px", ...props }: PanelProps) => {
 	const { bgColor, textColor } = useColors();
 
 	return (
@@ -31,16 +28,9 @@ const Panel = ({ header, date, identifier, children, isLoading = false, borderRa
 			{...props}
 		>
 			{header && (
-				<Flex border="1px" borderColor="#ddd" color="black" borderRadius={borderRadius}>
-					<Grid margin="10px" width="100%" templateColumns="1fr auto">
+				<Flex color="black" borderRadius={borderRadius}>
+					<Grid marginBottom="10px" width="100%" templateColumns="1fr auto">
 						<Text color={textColor}>{header}</Text>
-						{date && (
-							<Box display="flex" justifyContent="flex-end">
-								<Text display="flex" alignItems="center">
-									<IoMdTime /> {formatDate(date)}
-								</Text>
-							</Box>
-						)}
 					</Grid>
 				</Flex>
 			)}

diff --git a/src/layout/TopBar/index.tsx b/src/layout/TopBar/index.tsx
@@ -40,7 +40,7 @@ export const navigationItems: NavigationItems[] = [
 ];
 
 export const TopBar = () => {
-	const user = trpc.me.me.useQuery().data;
+	const account = trpc.me.me.useQuery().data;
 	const status = trpc.status.status.useQuery().data;
 	const router = useRouter();
 
@@ -79,9 +79,9 @@ export const TopBar = () => {
 					</TopBarItem>
 				))}
 				<TopBarItem padding={0}>
-					{user ? (
+					{account ? (
 						<DropdownButton
-							text={user.account?.name ?? "unknown"}
+							text={account.account?.name ?? "unknown"}
 							hasMenu={true}
 							list={[
 								{ text: "Account Management", url: "/account" },

diff --git a/src/layout/index.tsx b/src/layout/index.tsx
@@ -4,6 +4,7 @@ import { Flex, Text, useBreakpointValue } from "@chakra-ui/react";
 import { TopBar } from "./TopBar";
 import { useColors } from "@hook/useColors";
 import { MobileTopBar } from "./TopBar/Mobile";
+import NextTopLoader from "nextjs-toploader";
 
 const Layout = ({ children }: PropsWithChildren) => {
 	const { bgColor } = useColors();
@@ -12,6 +13,7 @@ const Layout = ({ children }: PropsWithChildren) => {
 	return (
 		<>
 			<Head title="News" />
+			<NextTopLoader color="#c3a6d9" />
 			{TopBarComponent && <TopBarComponent />}
 			<Flex as="main" w={{ lg: "1050px", base: "100%" }} bgColor={bgColor} mt="2em" marginX={"auto"} padding="1em" rounded="md">
 				{children}

diff --git a/src/lib/session.ts b/src/lib/session.ts
@@ -2,13 +2,11 @@ import { IronSessionOptions } from "iron-session";
 import { withIronSessionApiRoute, withIronSessionSsr } from "iron-session/next";
 import { GetServerSidePropsContext, GetServerSidePropsResult, NextApiHandler } from "next";
 import { dev } from "./config";
-import type { accounts } from "@prisma/client";
-
-export interface User extends accounts {}
+import { AccountWithPlayers } from "@shared/types/PrismaAccount";
 
 declare module "iron-session" {
 	interface IronSessionData {
-		user?: User;
+		account?: AccountWithPlayers;
 	}
 }
 

diff --git a/src/pages/account/changeemail.tsx b/src/pages/account/changeemail.tsx
@@ -72,8 +72,8 @@ export default function ChangeEmail() {
 }
 
 export const getServerSideProps = withSessionSsr(async function ({ req }) {
-	const { user } = req.session;
-	if (!user) {
+	const { account } = req.session;
+	if (!account) {
 		return {
 			redirect: {
 				destination: `/account/login?redirect=${encodeURIComponent(req.url!)}`,

diff --git a/src/pages/account/changepassword.tsx b/src/pages/account/changepassword.tsx
@@ -92,8 +92,8 @@ export default function ChangePassword() {
 }
 
 export const getServerSideProps = withSessionSsr(function ({ req }) {
-	const { user } = req.session;
-	if (!user) {
+	const { account } = req.session;
+	if (!account) {
 		return {
 			redirect: {
 				destination: `/account/login?redirect=${encodeURIComponent(req.url!)}`,

diff --git a/src/pages/account/createcharacter.tsx b/src/pages/account/createcharacter.tsx
@@ -116,8 +116,8 @@ export default function CreateCharacter() {
 }
 
 export const getServerSideProps = withSessionSsr(async function ({ req }) {
-	const { user } = req.session;
-	if (!user) {
+	const { account } = req.session;
+	if (!account) {
 		return {
 			redirect: {
 				destination: `/account/login?redirect=${encodeURIComponent(req.url!)}`,

diff --git a/src/pages/account/deletecharacter.tsx b/src/pages/account/deletecharacter.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import Panel from "@component/Panel";
-import { User, withSessionSsr } from "@lib/session";
+import { withSessionSsr } from "@lib/session";
 import { Select, Text, Container, VStack, Wrap } from "@chakra-ui/react";
 import { trpc } from "@util/trpc";
 import { useFormFeedback } from "@hook/useFormFeedback";
@@ -10,17 +10,18 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import TextInput from "@component/TextInput";
 import Button from "@component/Button";
 import { FormField } from "@component/FormField";
+import type { AccountWithPlayers } from "@shared/types/PrismaAccount";
 
 const schema = z.object({
 	name: z.string(),
 	password: z.string().min(6, { message: "Password must be at least 6 characters long" }),
 });
 
 export interface DeleteCharacterProps {
-	user: User;
+	account: AccountWithPlayers;
 }
 
-export default function DeleteCharacter({ user }: DeleteCharacterProps) {
+export default function DeleteCharacter({ account }: DeleteCharacterProps) {
 	const {
 		register,
 		handleSubmit,
@@ -29,14 +30,10 @@ export default function DeleteCharacter({ user }: DeleteCharacterProps) {
 	} = useForm<z.infer<typeof schema>>({
 		resolver: zodResolver(schema),
 	});
-	const account = trpc.account.singleById.useQuery({ id: user.id });
+
 	const deleteCharacter = trpc.account.deleteCharacter.useMutation();
 	const { showResponse, handleResponse } = useFormFeedback();
 
-	if (account.isLoading) {
-		return <Panel isLoading={true} />;
-	}
-
 	const onSubmit: SubmitHandler<z.infer<typeof schema>> = async ({ name, password }) => {
 		handleResponse(async () => {
 			await deleteCharacter.mutateAsync({ name, password });
@@ -57,7 +54,7 @@ export default function DeleteCharacter({ user }: DeleteCharacterProps) {
 					<VStack spacing={5}>
 						<FormField key={"name"} error={errors.name?.message} name={"name"} label="Character Name">
 							<Select {...register("name")}>
-								{account.data?.players.map((character) => (
+								{account.players.map((character) => (
 									<option key={character.name} value={character.name}>
 										{character.name}
 									</option>
@@ -79,8 +76,8 @@ export default function DeleteCharacter({ user }: DeleteCharacterProps) {
 }
 
 export const getServerSideProps = withSessionSsr(async function ({ req }) {
-	const { user } = req.session;
-	if (!user) {
+	const { account } = req.session;
+	if (!account) {
 		return {
 			redirect: {
 				destination: `/account/login?redirect=${encodeURIComponent(req.url!)}`,
@@ -90,6 +87,6 @@ export const getServerSideProps = withSessionSsr(async function ({ req }) {
 	}
 
 	return {
-		props: { user },
+		props: { account },
 	};
 });