Merge pull request #107 from kitcc-org/105-show-ntf-only-once

通知が1回のみ表示されるようにした
kitcc-org · Oct 31, 2024 · b14abaf · b14abaf
2 parents c1bb2f7 + 892b134
commit b14abaf
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 101 deletions.
diff --git a/frontend/app/components/header/HeaderLoginComponent.tsx b/frontend/app/components/header/HeaderLoginComponent.tsx
@@ -20,7 +20,7 @@ const HeaderLoginComponent = () => {
 		setUser(undefined);
 		// モーダルを閉じる
 		close();
-		// home.tsx の action を呼び出す
+		// ログアウトのactionを呼び出す
 		submit({}, { method: 'DELETE', action: '/home' });
 	};
 

diff --git a/frontend/app/routes/_index.tsx b/frontend/app/routes/_index.tsx
@@ -8,5 +8,5 @@ export const meta: MetaFunction = () => {
 };
 
 export async function loader() {
-	return redirect('home');
+	return redirect('/home');
 }
diff --git a/frontend/app/routes/auth.login.tsx b/frontend/app/routes/auth.login.tsx
@@ -28,7 +28,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 
 	// 未ログインの場合
 	// エラーメッセージを取得
-	const data = { error: session.get('loginError') };
+	const data = { error: session.get('error') };
 
 	return json<LoaderData>(data, {
 		headers: {
@@ -49,9 +49,10 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 
 	// ログインに成功した場合
 	if (response.status === 200) {
-		session.flash('loginSuccess', 'ログインに成功しました');
 		session.set('userId', response.data.id.toString());
 		session.set('sessionToken', response.data.sessionToken!);
+		session.flash('success', 'ログインに成功しました');
+
 		return redirect('/home/mypage', {
 			headers: {
 				'Set-Cookie': await commitSession(session),
@@ -63,20 +64,20 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 	switch (response.status) {
 		case 400:
 			// prettier-ignore
-			session.flash('loginError', 'メールアドレスまたはパスワードが間違っています');
+			session.flash('error', 'メールアドレスまたはパスワードが間違っています');
 			break;
 		case 401:
 			// prettier-ignore
-			session.flash('loginError', 'メールアドレスまたはパスワードが間違っています');
+			session.flash('error', 'メールアドレスまたはパスワードが間違っています');
 			break;
 		case 404:
-			session.flash('loginError', 'ユーザーが見つかりません');
+			session.flash('error', 'ユーザーが見つかりません');
 			break;
 		case 500:
-			session.flash('loginError', 'サーバーエラーが発生しました');
+			session.flash('error', 'サーバーエラーが発生しました');
 			break;
 		default:
-			session.flash('loginError', 'エラーが発生しました');
+			session.flash('error', 'エラーが発生しました');
 	}
 
 	return redirect('/auth/login', {

diff --git a/frontend/app/routes/home._index.tsx b/frontend/app/routes/home._index.tsx
@@ -8,9 +8,7 @@ import { GetBooksParams } from 'client/client.schemas';
 import { useAtom } from 'jotai';
 import { useEffect } from 'react';
 import BookListComponent from '~/components/books/BookListComponent';
-import { commitSession, getSession } from '~/services/session.server';
 import { selectedBooksAtom } from '~/stores/cartAtom';
-import { errorNotification, successNotification } from '~/utils/notification';
 
 interface LoaderData {
 	booksResponse: getBooksResponse;
@@ -22,10 +20,6 @@ interface LoaderData {
 		page?: string;
 		limit?: string;
 	};
-	flash: {
-		success?: string;
-		error?: string;
-	};
 }
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
@@ -47,40 +41,22 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 		limit: limit,
 	});
 
-	const session = await getSession(request.headers.get('Cookie'));
-
-	// flashメッセージを取得する
-	const success = session.get('deleteBookSuccess');
-	const error = session.get('deleteBookError');
-
-	return json<LoaderData>(
-		{
-			booksResponse: response,
-			condition: {
-				title: title,
-				author: auther,
-				publisher: publisher,
-				isbn: isbn,
-				page: page,
-				limit: limit,
-			},
-			flash: {
-				success: success,
-				error: success ? undefined : error,
-			},
-		},
-		{
-			headers: {
-				'Set-Cookie': await commitSession(session),
-			},
+	return json<LoaderData>({
+		booksResponse: response,
+		condition: {
+			title: title,
+			author: auther,
+			publisher: publisher,
+			isbn: isbn,
+			page: page,
+			limit: limit,
 		},
-	);
+	});
 };
 
 const BooKListPage = () => {
-	const { booksResponse, condition, flash } = useLoaderData<typeof loader>();
+	const { booksResponse, condition } = useLoaderData<typeof loader>();
 	const { title, author, publisher, isbn, page, limit } = condition;
-	const { success, error } = flash;
 
 	const [opened, { open, close }] = useDisclosure();
 	const navigate = useNavigate();
@@ -96,13 +72,6 @@ const BooKListPage = () => {
 	});
 
 	useEffect(() => {
-		// flashメッセージを表示する
-		if (success) {
-			successNotification(success);
-		} else if (error) {
-			errorNotification(error);
-		}
-
 		// 選択中の書籍をリセットする
 		setSelectedBook([]);
 	}, []);

diff --git a/frontend/app/routes/home.books.$bookId.tsx b/frontend/app/routes/home.books.$bookId.tsx
@@ -58,7 +58,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 
 	// 未ログインの場合
 	if (!session.has('userId')) {
-		session.flash('loginError', 'ログインしてください');
+		session.flash('error', 'ログインしてください');
 		return redirect('/auth/login', {
 			headers: {
 				'Set-Cookie': await commitSession(session),
@@ -80,28 +80,28 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 		});
 		switch (response.status) {
 			case 204:
-				session.flash('deleteBookSuccess', '削除しました');
+				session.flash('success', '削除しました');
 				return redirect('/home', {
 					headers: {
 						'Set-Cookie': await commitSession(session),
 					},
 				});
 			case 401:
-				session.flash('loginError', 'ログインしてください');
+				session.flash('error', 'ログインしてください');
 				return redirect('/auth/login', {
 					headers: {
 						'Set-Cookie': await commitSession(session),
 					},
 				});
 			case 404:
-				session.flash('deleteBookError', '書籍が見つかりませんでした');
+				session.flash('error', '書籍が見つかりませんでした');
 				return redirect('/home', {
 					headers: {
 						'Set-Cookie': await commitSession(session),
 					},
 				});
 			case 500:
-				session.flash('deleteBookError', 'サーバーエラーが発生しました');
+				session.flash('error', 'サーバーエラーが発生しました');
 				return json<ActionResponse>(
 					{ method: 'DELETE', status: 500 },
 					{

diff --git a/frontend/app/routes/home.mypage.tsx b/frontend/app/routes/home.mypage.tsx
@@ -1,12 +1,5 @@
-import { json, LoaderFunctionArgs, redirect } from '@remix-run/cloudflare';
-import { useLoaderData } from '@remix-run/react';
-import { useEffect } from 'react';
-import { commitSession, getSession } from '~/services/session.server';
-import { successNotification } from '~/utils/notification';
-
-interface LoaderData {
-	success?: string;
-}
+import { LoaderFunctionArgs, redirect } from '@remix-run/cloudflare';
+import { getSession } from '~/services/session.server';
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
 	const session = await getSession(request.headers.get('Cookie'));
@@ -17,24 +10,10 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 		return redirect('/auth/login');
 	}
 
-	const data = { success: session.get('loginSuccess') };
-
-	return json<LoaderData>(data, {
-		headers: {
-			'Set-Cookie': await commitSession(session),
-		},
-	});
+	return null;
 };
 
 const MyPage = () => {
-	const { success } = useLoaderData<typeof loader>();
-
-	useEffect(() => {
-		if (success) {
-			successNotification(success);
-		}
-	}, []);
-
 	return <div>MyPage</div>;
 };
 

diff --git a/frontend/app/routes/home.tsx b/frontend/app/routes/home.tsx
@@ -5,7 +5,12 @@ import {
 	LoaderFunctionArgs,
 	redirect,
 } from '@remix-run/cloudflare';
-import { Outlet, useLoaderData, useNavigation } from '@remix-run/react';
+import {
+	Outlet,
+	useLoaderData,
+	useNavigation,
+	useRevalidator,
+} from '@remix-run/react';
 import { getUser, logout } from 'client/client';
 import { useAtom } from 'jotai';
 import { useEffect } from 'react';
@@ -24,14 +29,14 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 	const session = await getSession(request.headers.get('Cookie'));
 
 	const userId = session.get('userId');
-	const success = session.get('logoutSuccess');
-	const error = session.get('logoutError');
+	const success = session.get('success');
+	const error = session.get('error');
 
 	return json<LoaderData>(
 		{
 			userId: userId,
 			success: success,
-			error: success ? undefined : error,
+			error: error,
 		},
 		{
 			headers: {
@@ -54,14 +59,16 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 	if (response.status === 204) {
 		session.unset('userId');
 		session.unset('sessionToken');
-		session.flash('logoutSuccess', 'ログアウトに成功しました');
+		session.flash('success', 'ログアウトに成功しました');
+
 		return redirect('/home', {
 			headers: {
 				'Set-Cookie': await commitSession(session),
 			},
 		});
 	} else {
-		session.flash('logoutError', 'ログアウトに失敗しました');
+		session.flash('error', 'ログアウトに失敗しました');
+
 		return redirect('/home', {
 			headers: {
 				'Set-Cookie': await commitSession(session),
@@ -75,6 +82,7 @@ const Home = () => {
 
 	const [user, setUser] = useAtom(userAtom);
 	const navigation = useNavigation();
+	const revalidator = useRevalidator();
 
 	useEffect(() => {
 		if (navigation.state === 'idle') {
@@ -92,13 +100,22 @@ const Home = () => {
 			} else {
 				setUser(undefined);
 			}
-			if (success) {
-				successNotification(success);
-			} else if (error) {
-				errorNotification(error);
-			}
 		}
-	}, [navigation.state]);
+	}, [userId]);
+
+	useEffect(() => {
+		if (success) {
+			successNotification(success);
+			revalidator.revalidate();
+		}
+	}, [success]);
+
+	useEffect(() => {
+		if (error) {
+			errorNotification(error);
+			revalidator.revalidate();
+		}
+	}, [error]);
 
 	return (
 		<AppShell header={{ height: 70 }} padding={{ default: 'md', sm: 'sm' }}>

diff --git a/frontend/app/services/session.server.ts b/frontend/app/services/session.server.ts
@@ -6,15 +6,8 @@ interface SessionData {
 }
 
 interface SessionFlashData {
-	// ログイン
-	loginSuccess: string;
-	loginError: string;
-	// ログアウト
-	logoutSuccess: string;
-	logoutError: string;
-	// 書籍の削除
-	deleteBookSuccess: string;
-	deleteBookError: string;
+	success?: string;
+	error?: string;
 }
 
 const { getSession, commitSession, destroySession } =