Skip to content

Commit

Permalink
Show notification only once
Browse files Browse the repository at this point in the history
 (#105)
  • Loading branch information
kimurash committed Oct 29, 2024
1 parent cf74382 commit c05bc76
Show file tree
Hide file tree
Showing 6 changed files with 58 additions and 80 deletions.
2 changes: 1 addition & 1 deletion frontend/app/routes/_index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,5 @@ export const meta: MetaFunction = () => {
};

export async function loader() {
return redirect('home');
return redirect('/home');
}
19 changes: 9 additions & 10 deletions frontend/app/routes/auth.login.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -51,8 +51,8 @@ export const action = async ({ request }: ActionFunctionArgs) => {
if (response.status === 200) {
session.set('userId', response.data.id.toString());
session.set('sessionToken', response.data.sessionToken!);
// FIXME: ログアウト時に表示できないのでログイン時も表示しない
// session.flash('loginSuccess', 'ログインに成功しました');
// FIXME: homeのloaderで読み出してもCookieが削除されない
session.flash('success', 'ログインに成功しました');

return redirect('/home/mypage', {
headers: {
Expand All @@ -65,26 +65,25 @@ 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', 'エラーが発生しました');
}

const setCookie = await commitSession(session);
return redirect('/auth/login', {
headers: {
'Set-Cookie': setCookie,
'Set-Cookie': await commitSession(session),
},
});
};
Expand Down
53 changes: 11 additions & 42 deletions frontend/app/routes/home._index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -22,10 +20,6 @@ interface LoaderData {
page?: string;
limit?: string;
};
flash: {
success?: string;
error?: string;
};
}

export const loader = async ({ request }: LoaderFunctionArgs) => {
Expand All @@ -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: 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();
Expand All @@ -96,13 +72,6 @@ const BooKListPage = () => {
});

useEffect(() => {
// flashメッセージを表示する
if (success) {
successNotification(success);
} else if (error) {
errorNotification(error);
}

// 選択中の書籍をリセットする
setSelectedBook([]);
}, []);
Expand Down
10 changes: 5 additions & 5 deletions frontend/app/routes/home.books.$bookId.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand All @@ -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 },
{
Expand Down
43 changes: 30 additions & 13 deletions frontend/app/routes/home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,25 +10,28 @@ import { getUser, logout } from 'client/client';
import { useAtom } from 'jotai';
import { useEffect } from 'react';
import HeaderComponent from '~/components/header/HeaderComponent';
import {
commitSession,
destroySession,
getSession,
} from '~/services/session.server';
import { commitSession, getSession } from '~/services/session.server';
import { userAtom } from '~/stores/userAtom';
import { errorNotification, successNotification } from '~/utils/notification';

interface LoaderData {
userId?: string;
success?: string;
error?: string;
}

export const loader = async ({ request }: LoaderFunctionArgs) => {
const session = await getSession(request.headers.get('Cookie'));

const userId = session.get('userId');
const success = session.get('success');
const error = session.get('error');

return json<LoaderData>(
{
userId: userId,
success: success,
error: error,
},
{
headers: {
Expand All @@ -51,24 +54,26 @@ export const action = async ({ request }: ActionFunctionArgs) => {
if (response.status === 204) {
session.unset('userId');
session.unset('sessionToken');
// FIXME: loaderで読み出しても削除されない
// session.flash('logoutSuccess', 'ログアウトに成功しました');
session.flash('success', 'ログアウトに成功しました');

return redirect('/home', {
headers: {
'Set-Cookie': await destroySession(session),
'Set-Cookie': await commitSession(session),
},
});
} else {
// FIXME: loaderで読み出しても削除されない
// session.flash('logoutError', 'ログアウトに失敗しました');
session.flash('error', 'ログアウトに失敗しました');

return redirect('/home');
return redirect('/home', {
headers: {
'Set-Cookie': await commitSession(session),
},
});
}
};

const Home = () => {
const { userId } = useLoaderData<typeof loader>();
const { userId, success, error } = useLoaderData<typeof loader>();

const [user, setUser] = useAtom(userAtom);
const navigation = useNavigation();
Expand All @@ -90,7 +95,19 @@ const Home = () => {
setUser(undefined);
}
}
}, [navigation.state]);
}, [userId]);

useEffect(() => {
if (success) {
successNotification(success);
}
}, [success]);

useEffect(() => {
if (error) {
errorNotification(error);
}
}, [error]);

return (
<AppShell header={{ height: 70 }} padding={{ default: 'md', sm: 'sm' }}>
Expand Down
11 changes: 2 additions & 9 deletions frontend/app/services/session.server.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 } =
Expand Down

0 comments on commit c05bc76

Please sign in to comment.