Move return button click handler

(#147)
kitcc-org · Nov 23, 2024 · f6598f4 · f6598f4
1 parent dd23225
commit f6598f4
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 36 deletions.
diff --git a/frontend/app/components/me/LoanCards.tsx b/frontend/app/components/me/LoanCards.tsx
@@ -1,17 +1,15 @@
 import { ScrollArea, SimpleGrid } from '@mantine/core';
 import { useAtom } from 'jotai';
-import NoLoanComponent from './NoLoansComponent';
-import LoanCard from './LoanCard';
 import { displayLoanAtom } from '~/stores/loanAtom';
+import LoanCard from './LoanCard';
 import LoanSelectedDialog from './LoanSelectedDialog';
+import NoLoanComponent from './NoLoansComponent';
 
-interface LoanCardsProps {
-	handleReturnButtonClick: () => void;
-}
-
-const LoanCards = ({ handleReturnButtonClick }: LoanCardsProps) => {
+const LoanCards = () => {
 	const [loans] = useAtom(displayLoanAtom);
-	if (loans.length === 0) return <NoLoanComponent />;
+	if (loans.length === 0) {
+		return <NoLoanComponent />;
+	}
 
 	return (
 		<>
@@ -34,7 +32,7 @@ const LoanCards = ({ handleReturnButtonClick }: LoanCardsProps) => {
 					))}
 				</SimpleGrid>
 			</ScrollArea>
-			<LoanSelectedDialog handleReturnButtonClick={handleReturnButtonClick} />
+			<LoanSelectedDialog />
 		</>
 	);
 };

diff --git a/frontend/app/components/me/LoanSelectedDialog.tsx b/frontend/app/components/me/LoanSelectedDialog.tsx
@@ -1,16 +1,22 @@
 import { Button, Dialog, Stack } from '@mantine/core';
+import { useSubmit } from '@remix-run/react';
 import { useAtom } from 'jotai';
 import { selectedLoanAtom } from '~/stores/loanAtom';
 
-interface LoanSelectedDialogProps {
-	handleReturnButtonClick: () => void;
-}
-
-const LoanSelectedDialog = ({
-	handleReturnButtonClick,
-}: LoanSelectedDialogProps) => {
+const LoanSelectedDialog = () => {
 	const [selectedLoan, setSelectedLoan] = useAtom(selectedLoanAtom);
 
+	const submit = useSubmit();
+
+	const handleReturnButtonClick = () => {
+		submit(JSON.stringify({ selectedLoan: selectedLoan }), {
+			action: '/home/me?index',
+			method: 'PATCH',
+			encType: 'application/json',
+		});
+		setSelectedLoan([]);
+	};
+
 	return (
 		<Dialog
 			opened={selectedLoan.length > 0}

diff --git a/frontend/app/components/me/MyLoansListComponent.tsx b/frontend/app/components/me/MyLoansListComponent.tsx
@@ -1,21 +1,19 @@
 import { Stack } from '@mantine/core';
 import { getLoansResponse } from 'client/client';
 import { PaginationProps } from '~/types/paginatiion';
-import ContentsHeader from '../common/pagination/ContentsHeader';
 import ErrorComponent from '../common/error/ErrorComponent';
+import ContentsHeader from '../common/pagination/ContentsHeader';
 import PaginationComponent from '../common/pagination/PaginationComponent';
 import LoanCards from './LoanCards';
 
 interface MyLoansListComponentProps {
 	loansResponse: getLoansResponse;
 	paginationProps: PaginationProps;
-	handleReturnButtonClick: () => void;
 }
 
 const MyLoansListComponent = ({
 	loansResponse,
 	paginationProps,
-	handleReturnButtonClick,
 }: MyLoansListComponentProps) => {
 	return (
 		<Stack bg="var(--mantine-color-body)" align="stretch" justify="center">
@@ -28,7 +26,7 @@ const MyLoansListComponent = ({
 			{loansResponse.status !== 200 ? (
 				<ErrorComponent message={'貸出情報を取得できませんでした。'} />
 			) : (
-				<LoanCards handleReturnButtonClick={handleReturnButtonClick} />
+				<LoanCards />
 			)}
 			<PaginationComponent
 				total={paginationProps.total}

diff --git a/frontend/app/components/me/MyPageComponent.tsx b/frontend/app/components/me/MyPageComponent.tsx
@@ -9,22 +9,19 @@ interface MyPageComponentProps {
 	user: User;
 	loansResponse: getLoansResponse;
 	paginationProps: PaginationProps;
-	handleReturnButtonClick: () => void;
 }
 
 const MyPageComponent = ({
 	user,
 	loansResponse,
 	paginationProps,
-	handleReturnButtonClick,
 }: MyPageComponentProps) => {
 	return (
 		<Stack align="stretch" justify="center">
 			<MyProfileDataComponent name={user.name} email={user.email} />
 			<MyLoansListComponent
 				loansResponse={loansResponse}
 				paginationProps={paginationProps}
-				handleReturnButtonClick={handleReturnButtonClick}
 			/>
 		</Stack>
 	);

diff --git a/frontend/app/routes/home.me._index/route.tsx b/frontend/app/routes/home.me._index/route.tsx
@@ -4,7 +4,7 @@ import {
 	LoaderFunctionArgs,
 	redirect,
 } from '@remix-run/cloudflare';
-import { useLoaderData, useNavigate, useSubmit } from '@remix-run/react';
+import { useLoaderData, useNavigate } from '@remix-run/react';
 import { getLoans, getLoansResponse, upsertLoans } from 'client/client';
 import { UpsertLoansBodyItem, User } from 'client/client.schemas';
 import { useAtom } from 'jotai';
@@ -120,8 +120,8 @@ export const MyPage = () => {
 	const { page, limit } = condition;
 	const navigate = useNavigate();
 	const [, setDisplayLoan] = useAtom(displayLoanAtom);
-	const [selectedLoan, setSelectedLoan] = useAtom(selectedLoanAtom);
-	const submit = useSubmit();
+	const [, setSelectedLoan] = useAtom(selectedLoanAtom);
+
 	let bookArray: CartProps[] = [];
 
 	useEffect(() => {
@@ -164,15 +164,6 @@ export const MyPage = () => {
 		navigate(`/home/me?${params.toString()}`);
 	};
 
-	const handleReturnButtonClick = () => {
-		submit(JSON.stringify({ selectedLoan: selectedLoan }), {
-			action: '/home/me',
-			method: 'PATCH',
-			encType: 'application/json',
-		});
-		setSelectedLoan([]);
-	};
-
 	return (
 		<MyPageComponent
 			user={userData}
@@ -184,7 +175,6 @@ export const MyPage = () => {
 				limit: limit ? Number(limit) : 10,
 				total: loansResponse.data.totalLoan,
 			}}
-			handleReturnButtonClick={handleReturnButtonClick}
 		/>
 	);
 };