Merge pull request #135 from kitcc-org/66-cart-page-redirect

カートページに自動的にリダイレクトする

README.md

@@ -27,10 +27,10 @@ KITCC が所有する書籍を管理する Web アプリ
   - [x] ログアウト
 - カート機能
   - [x] カートに追加
-  - [ ] カートから削除
-  - [ ] カートの中身を確認
+  - [x] カートから削除
+  - [x] カートの中身を確認
 - 貸出履歴管理
-  - [ ] 貸出
+  - [x] 貸出
   - [ ] 返却
 
 ## 使用技術

frontend/app/components/books/BookCardCartButton.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@mantine/core';
+import { useNavigate } from '@remix-run/react';
 import { useAtom } from 'jotai';
 import { BiSolidCartAdd } from 'react-icons/bi';
 import { cartAtom } from '~/stores/cartAtom';
@@ -16,8 +17,10 @@ const BookCardCartButton = ({
 	thumbnail,
 }: BookCardCartButtonProps) => {
 	const [cart, setCart] = useAtom(cartAtom);
+	const navigate = useNavigate();
 	const addCart = () => {
 		setCart(addBooksToCart(cart, [{ id, stock, thumbnail }]));
+		navigate('/home/cart');
 	};
 	return (
 		<Button

frontend/app/components/books/BookSelectedDialog.tsx

@@ -1,5 +1,5 @@
 import { Button, Center, Dialog, Stack, Text } from '@mantine/core';
-import { useSubmit } from '@remix-run/react';
+import { useNavigate, useSubmit } from '@remix-run/react';
 import { useAtom } from 'jotai';
 import { selectedBooksAtom } from '~/stores/bookAtom';
 import { cartAtom } from '~/stores/cartAtom';
@@ -9,6 +9,7 @@ import { successNotification } from '~/utils/notification';
 const BookSelectedDialog = () => {
 	const [selectedBook, setSelectedBook] = useAtom(selectedBooksAtom);
 	const [cart, setCart] = useAtom(cartAtom);
+	const navigate = useNavigate();
 
 	const submit = useSubmit();
 
@@ -32,8 +33,8 @@ const BookSelectedDialog = () => {
 					onClick={() => {
 						setCart(addBooksToCart(cart, selectedBook));
 						setSelectedBook([]);
-
 						successNotification('カートに追加しました');
+						navigate('/home/cart');
 					}}
 				>
 					選択中の本をカートに入れる

frontend/app/routes/home._index/route.tsx

@@ -67,7 +67,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 	const session = await getSession(request.headers.get('Cookie'));
 
 	// 未ログインの場合
-	if (!session.has('userId')) {
+	if (!session.has('user')) {
 		session.flash('error', 'ログインしてください');
 		return redirect('/login', {
 			headers: {
@@ -77,8 +77,8 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 	}
 
 	const cookieHeader = [
-		`__Secure-user_id=${session.get('userId')};`,
-		`__Secure-session_token=${session.get('sessionToken')}`,
+		`__Secure-user_id=${session.get('user')?.id};`,
+		`__Secure-session_token=${session.get('user')?.sessionToken}`,
 	].join('; ');
 
 	// prettier-ignore

frontend/app/routes/home.books.$bookId.edit/route.tsx

@@ -21,7 +21,7 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
 
 	const bookId = params.bookId ?? '';
 
-	if (!session.has('userId')) {
+	if (!session.has('user')) {
 		session.flash('error', 'ログインしてください');
 		return redirect(`/home/books/${bookId}`, {
 			headers: {
@@ -36,7 +36,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 	const session = await getSession(request.headers.get('Cookie'));
 
 	// 未ログインの場合
-	if (!session.has('userId')) {
+	if (!session.has('user')) {
 		session.flash('error', 'ログインしてください');
 		return redirect('/login', {
 			headers: {
@@ -46,8 +46,8 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 	}
 
 	const cookieHeader = [
-		`__Secure-user_id=${session.get('userId')};`,
-		`__Secure-session_token=${session.get('sessionToken')}`,
+		`__Secure-user_id=${session.get('user')?.id};`,
+		`__Secure-session_token=${session.get('user')?.sessionToken}`,
 	].join('; ');
 	const formData = await request.formData();
 

frontend/app/routes/home.books.$bookId/route.tsx

@@ -37,14 +37,14 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
 
 	let loansResponse = undefined;
 	// ログイン済みの場合は貸出履歴を取得する
-	if (session.has('userId')) {
+	if (session.has('user')) {
 		loansResponse = await getLoans(
 			{ bookId: bookId },
 			{
 				headers: {
 					Cookie: [
-						`__Secure-user_id=${session.get('userId')}`,
-						`__Secure-session_token=${session.get('sessionToken')}`,
+						`__Secure-user_id=${session.get('user')?.id}`,
+						`__Secure-session_token=${session.get('user')?.sessionToken}`,
 					].join('; '),
 				},
 			},
@@ -61,7 +61,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 	const session = await getSession(request.headers.get('Cookie'));
 
 	// 未ログインの場合
-	if (!session.has('userId')) {
+	if (!session.has('user')) {
 		session.flash('error', 'ログインしてください');
 		return redirect('/login', {
 			headers: {
@@ -71,8 +71,8 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 	}
 
 	const cookieHeader = [
-		`__Secure-user_id=${session.get('userId')};`,
-		`__Secure-session_token=${session.get('sessionToken')}`,
+		`__Secure-user_id=${session.get('user')?.id};`,
+		`__Secure-session_token=${session.get('user')?.sessionToken}`,
 	].join('; ');
 	const formData = await request.formData();
 

frontend/app/routes/home.cart/route.tsx

@@ -31,8 +31,8 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 	const session = await getSession(request.headers.get('Cookie'));
 
 	// 未ログインの場合
-	const userId = session.get('userId');
-	if (!userId) {
+	const userData = session.get('user');
+	if (!userData) {
 		return redirect('/login', {
 			headers: {
 				'Set-Cookie': await commitSession(session),
@@ -41,8 +41,8 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 	}
 
 	const cookieHeader = [
-		`__Secure-user_id=${session.get('userId')};`,
-		`__Secure-session_token=${session.get('sessionToken')}`,
+		`__Secure-user_id=${session.get('user')?.id};`,
+		`__Secure-session_token=${session.get('user')?.sessionToken}`,
 	].join('; ');
 
 	// prettier-ignore
@@ -51,7 +51,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 	const upsertBody: UpsertLoansBodyItem[] = selectedCartBook.map((book) => {
 		return {
 			bookId: book.id,
-			userId: Number(userId),
+			userId: userData.id,
 			volume: book.volume,
 		};
 	});

frontend/app/routes/home.global.books.$isbn/route.tsx

@@ -30,7 +30,7 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
 	const isbn = params.isbn ?? '';
 	const searchBooksResponse = await searchBooks({ isbn: isbn });
 	//　既に登録済みであるか確認するため
-	if (session.has('userId')) {
+	if (session.has('user')) {
 		const getBookResponse = await getBooks({ isbn: isbn });
 		if (getBookResponse.data.totalBook > 0) {
 			return json<LoaderData>({
@@ -59,7 +59,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 	const session = await getSession(request.headers.get('Cookie'));
 
 	// 未ログインの場合
-	if (!session.has('userId')) {
+	if (!session.has('user')) {
 		session.flash('error', 'ログインしてください');
 		return redirect('/login', {
 			headers: {
@@ -69,8 +69,8 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 	}
 
 	const cookieHeader = [
-		`__Secure-user_id=${session.get('userId')};`,
-		`__Secure-session_token=${session.get('sessionToken')}`,
+		`__Secure-user_id=${session.get('user')?.id};`,
+		`__Secure-session_token=${session.get('user')?.sessionToken}`,
 	].join('; ');
 
 	const requestBody = await request.json<CreateBookBody>();

frontend/app/routes/home.mypage/route.tsx

@@ -5,7 +5,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 	const session = await getSession(request.headers.get('Cookie'));
 
 	// 未ログインの場合
-	if (!session.has('userId')) {
+	if (!session.has('user')) {
 		// ログインページへリダイレクト
 		return redirect('/login');
 	}

frontend/app/routes/home/route.tsx

@@ -11,7 +11,8 @@ import {
 	useNavigation,
 	useRevalidator,
 } from '@remix-run/react';
-import { getUser, logout } from 'client/client';
+import { logout } from 'client/client';
+import type { User } from 'client/client.schemas';
 import { useAtom } from 'jotai';
 import { useEffect } from 'react';
 import HeaderComponent from '~/components/header/HeaderComponent';
@@ -20,35 +21,50 @@ import { userAtom } from '~/stores/userAtom';
 import { errorNotification, successNotification } from '~/utils/notification';
 
 interface LoaderData {
-	userId?: string;
+	userData?: User;
 	success?: string;
 	error?: string;
 }
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
 	const session = await getSession(request.headers.get('Cookie'));
 
-	const userId = session.get('userId');
+	const userData = session.get('user');
 	const success = session.get('success');
 	const error = session.get('error');
 
-	return json<LoaderData>(
-		{
-			userId: userId,
-			success: success,
-			error: error,
-		},
-		{
-			headers: {
-				'Set-Cookie': await commitSession(session),
+	if (!userData) {
+		return json<LoaderData>(
+			{
+				userData: undefined,
+				success: success,
+				error: error,
 			},
-		},
-	);
+			{
+				headers: {
+					'Set-Cookie': await commitSession(session),
+				},
+			},
+		);
+	} else {
+		return json<LoaderData>(
+			{
+				userData: userData,
+				success: success,
+				error: error,
+			},
+			{
+				headers: {
+					'Set-Cookie': await commitSession(session),
+				},
+			},
+		);
+	}
 };
 
 export const action = async ({ request }: ActionFunctionArgs) => {
 	const session = await getSession(request.headers.get('Cookie'));
-	const userId = session.get('userId');
+	const userId = session.get('user');
 
 	const response = await logout({
 		headers: {
@@ -57,8 +73,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 	});
 
 	if (response.status === 204) {
-		session.unset('userId');
-		session.unset('sessionToken');
+		session.unset('user');
 		session.flash('success', 'ログアウトに成功しました');
 
 		return redirect('/home', {
@@ -78,30 +93,25 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 };
 
 const Home = () => {
-	const { userId, success, error } = useLoaderData<typeof loader>();
+	const { userData, success, error } = useLoaderData<typeof loader>();
 
 	const [user, setUser] = useAtom(userAtom);
 	const navigation = useNavigation();
 	const revalidator = useRevalidator();
 
 	useEffect(() => {
 		if (navigation.state === 'idle') {
-			if (userId) {
-				// CookieにユーザIDが存在する
+			if (!!userData) {
+				// Cookieにユーザ情報が保存されている
 				if (!user) {
-					// 状態変数にユーザ情報が保存されていない
-					// ユーザ情報を取得するAPIを呼び出す
-					getUser(userId).then((response) => {
-						if (response.status === 200) {
-							setUser(response.data);
-						}
-					});
+					// 状態変数にユーザ情報を保存する
+					setUser(userData);
 				}
 			} else {
 				setUser(undefined);
 			}
 		}
-	}, [userId]);
+	}, [userData]);
 
 	useEffect(() => {
 		if (success) {

frontend/app/routes/login/route.tsx

@@ -21,7 +21,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 	const session = await getSession(request.headers.get('Cookie'));
 
 	// ログイン済みの場合
-	if (session.has('userId')) {
+	if (session.has('user')) {
 		// マイページへリダイレクト
 		return redirect('/home/mypage');
 	}
@@ -49,8 +49,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 
 	// ログインに成功した場合
 	if (response.status === 200) {
-		session.set('userId', response.data.id.toString());
-		session.set('sessionToken', response.data.sessionToken!);
+		session.set('user', response.data);
 		session.flash('success', 'ログインに成功しました');
 
 		return redirect('/home/mypage', {

frontend/app/services/session.server.ts

@@ -1,8 +1,8 @@
 import { createCookieSessionStorage } from '@remix-run/cloudflare';
+import { User } from 'client/client.schemas';
 
 interface SessionData {
-	userId: string;
-	sessionToken: string;
+	user: User;
 }
 
 interface SessionFlashData {