From 85cc37402807e234c933c00f6614aa2ea5123913 Mon Sep 17 00:00:00 2001 From: Kosei805 Date: Thu, 14 Nov 2024 16:39:21 +0900 Subject: [PATCH 1/8] organize common type --- .../book-detail/BookDetailControlButtons.tsx | 3 -- .../book-detail/BookDetailDeleteButton.tsx | 1 - .../components/books/BookListComponent.tsx | 29 +++++++------------ .../global-books/GlobalBookListComponent.tsx | 15 +++------- frontend/app/routes/home._index/route.tsx | 18 +++++------- .../app/routes/home.books.$bookId/route.tsx | 6 +--- .../app/routes/home.global._index/route.tsx | 2 +- .../routes/home.global.books.$isbn/route.tsx | 4 +-- frontend/app/routes/home/route.tsx | 2 +- frontend/app/types/modal.d.ts | 5 ++++ frontend/app/types/paginatiion.d.ts | 7 +++++ frontend/app/types/response.d.ts | 4 +++ 12 files changed, 44 insertions(+), 52 deletions(-) create mode 100644 frontend/app/types/modal.d.ts create mode 100644 frontend/app/types/paginatiion.d.ts create mode 100644 frontend/app/types/response.d.ts diff --git a/frontend/app/components/book-detail/BookDetailControlButtons.tsx b/frontend/app/components/book-detail/BookDetailControlButtons.tsx index b5b420f8..300e30b8 100644 --- a/frontend/app/components/book-detail/BookDetailControlButtons.tsx +++ b/frontend/app/components/book-detail/BookDetailControlButtons.tsx @@ -1,7 +1,4 @@ import BookDetailEditButton from './BookDetailEditButton'; -import { MdDeleteForever } from 'react-icons/md'; -import { Button } from '@mantine/core'; -import { useFetcher } from '@remix-run/react'; import BookDetailDeleteButton from './BookDetailDeleteButton'; interface BookDetailControlButtonsProps { diff --git a/frontend/app/components/book-detail/BookDetailDeleteButton.tsx b/frontend/app/components/book-detail/BookDetailDeleteButton.tsx index 1fd70425..ddb988d0 100644 --- a/frontend/app/components/book-detail/BookDetailDeleteButton.tsx +++ b/frontend/app/components/book-detail/BookDetailDeleteButton.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { MdDeleteForever } from 'react-icons/md'; import { Button } from '@mantine/core'; import { useFetcher } from '@remix-run/react'; diff --git a/frontend/app/components/books/BookListComponent.tsx b/frontend/app/components/books/BookListComponent.tsx index 63ae8640..b9b086ed 100644 --- a/frontend/app/components/books/BookListComponent.tsx +++ b/frontend/app/components/books/BookListComponent.tsx @@ -7,6 +7,7 @@ import ErrorComponent from '../common/error/ErrorComponent'; import ContentsHeader from '../common/pagination/ContentsHeader'; import PaginationComponent from '../common/pagination/PaginationComponent'; import BookCards from './BookCards'; +import { PaginationProps } from '~/types/paginatiion'; interface BookListComponentProps { booksResponse: getBooksResponse; @@ -18,11 +19,7 @@ interface BookListComponentProps { isOpen: boolean; open: () => void; close: () => void; - handlePaginationChange: (newPage: number) => void; - handleLimitChange: (newLimit: number) => void; - page?: number; - limit?: number; - totalBook: number; + paginationProps: PaginationProps; } const BookListComponent = ({ @@ -32,11 +29,7 @@ const BookListComponent = ({ isOpen, open, close, - handlePaginationChange, - handleLimitChange, - page, - limit, - totalBook, + paginationProps, }: BookListComponentProps) => { return ( @@ -48,10 +41,10 @@ const BookListComponent = ({ handleSubmit={handleSubmit} /> {booksResponse.status !== 200 ? ( @@ -59,10 +52,10 @@ const BookListComponent = ({ )} ); diff --git a/frontend/app/components/global-books/GlobalBookListComponent.tsx b/frontend/app/components/global-books/GlobalBookListComponent.tsx index f3b985e4..a8fe8101 100644 --- a/frontend/app/components/global-books/GlobalBookListComponent.tsx +++ b/frontend/app/components/global-books/GlobalBookListComponent.tsx @@ -9,20 +9,13 @@ import ErrorComponent from '../common/error/ErrorComponent'; import GlobalBookCards from './GlobalBookCards'; import GlobalBookSearchComponent from './GlobalBookSearchComponent'; import PaginationComponent from '../common/pagination/PaginationComponent'; +import { PaginationProps } from '~/types/paginatiion'; export interface HandleGlobalSearchFunctions { handleDetailSubmit: (props: SearchBooksParams) => void; handleKeywordSubmit: (props: SearchBooksParams) => void; } -interface HandlePaginationProps { - handlePaginationChange: (newPage: number) => void; - handleLimitChange: (newLimit: number) => void; - page?: number; - limit?: number; - totalBook: number; -} - interface GlobalBookListComponentProps { booksResponse?: searchBooksResponse; form: UseFormReturnType< @@ -30,7 +23,7 @@ interface GlobalBookListComponentProps { (values: SearchBooksParams) => SearchBooksParams >; globalSearchFunctions: HandleGlobalSearchFunctions; - paginationProps: HandlePaginationProps; + paginationProps: PaginationProps; isOpen: boolean; open: () => void; close: () => void; @@ -63,7 +56,7 @@ const GlobalBookListComponent = ({ {!booksResponse ? ( @@ -74,7 +67,7 @@ const GlobalBookListComponent = ({ )} { // 検索条件を取得する const url = new URL(request.url); @@ -263,11 +259,13 @@ const BooKListPage = () => { isOpen={opened} open={open} close={close} - handlePaginationChange={handlePaginationChange} - handleLimitChange={handleLimitChange} - page={page ? Number(page) : undefined} - limit={limit ? Number(limit) : undefined} - totalBook={booksResponse.data.totalBook} + paginationProps={{ + handlePaginationChange: handlePaginationChange, + handleLimitChange: handleLimitChange, + page: page ? Number(page) : undefined, + limit: limit ? Number(limit) : undefined, + totalNum: booksResponse.data.totalBook, + }} /> ); }; diff --git a/frontend/app/routes/home.books.$bookId/route.tsx b/frontend/app/routes/home.books.$bookId/route.tsx index 28f776f3..d80df2f6 100644 --- a/frontend/app/routes/home.books.$bookId/route.tsx +++ b/frontend/app/routes/home.books.$bookId/route.tsx @@ -12,17 +12,13 @@ import { commitSession, getSession } from '~/services/session.server'; import { Book } from 'client/client.schemas'; import BookDetailControlPanel from '~/components/book-detail/BookDetailControlPanel'; import ErrorComponent from '~/components/common/error/ErrorComponent'; +import { ActionResponse } from '~/types/response'; interface LoaderData { bookResponse: getBookResponse; loansResponse?: getLoansResponse; } -interface ActionResponse { - method: string; - status: number; -} - export interface BookDetailOutletContext { book: Book; loansResponse?: getLoansResponse; diff --git a/frontend/app/routes/home.global._index/route.tsx b/frontend/app/routes/home.global._index/route.tsx index 4c54b2c8..3e1c77fc 100644 --- a/frontend/app/routes/home.global._index/route.tsx +++ b/frontend/app/routes/home.global._index/route.tsx @@ -270,7 +270,7 @@ const GlobalBookListPage = () => { handleLimitChange: handleLimitChange, page: page ? Number(page) : undefined, limit: limit ? Number(limit) : undefined, - totalBook: booksResponse ? booksResponse.data.totalBook : 0, + totalNum: booksResponse ? booksResponse.data.totalBook : 0, }} searchMode={searchMode} setSearchMode={setSearchMode} diff --git a/frontend/app/routes/home.global.books.$isbn/route.tsx b/frontend/app/routes/home.global.books.$isbn/route.tsx index 1331d39a..ecb68550 100644 --- a/frontend/app/routes/home.global.books.$isbn/route.tsx +++ b/frontend/app/routes/home.global.books.$isbn/route.tsx @@ -16,7 +16,7 @@ import { CreateBookBody } from 'client/client.schemas'; import BookDetailControlPanel from '~/components/book-detail/BookDetailControlPanel'; import GlobalBookDetailContent from '~/components/global-book-detail/GlobalBookDetailContent'; import { commitSession, getSession } from '~/services/session.server'; -import { ActionResponse } from '../home._index/route'; +import { ActionResponse } from '~/types/response'; interface LoaderData { searchBooksResponse: searchBooksResponse; @@ -29,7 +29,7 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => { // 書籍の情報を取得する const isbn = params.isbn ?? ''; const searchBooksResponse = await searchBooks({ isbn: isbn }); - //　既に登録済みであるか確認するため + // 既に登録済みであるか確認するため if (session.has('user')) { const getBookResponse = await getBooks({ isbn: isbn }); if (getBookResponse.data.totalBook > 0) { diff --git a/frontend/app/routes/home/route.tsx b/frontend/app/routes/home/route.tsx index 467d645a..461210f6 100644 --- a/frontend/app/routes/home/route.tsx +++ b/frontend/app/routes/home/route.tsx @@ -101,7 +101,7 @@ const Home = () => { useEffect(() => { if (navigation.state === 'idle') { - if (!!userData) { + if (userData) { // Cookieにユーザ情報が保存されている if (!user) { // 状態変数にユーザ情報を保存する diff --git a/frontend/app/types/modal.d.ts b/frontend/app/types/modal.d.ts new file mode 100644 index 00000000..86774161 --- /dev/null +++ b/frontend/app/types/modal.d.ts @@ -0,0 +1,5 @@ +export interface HandleModalProps { + isOpen: boolean; + open: () => void; + close: () => void; +} diff --git a/frontend/app/types/paginatiion.d.ts b/frontend/app/types/paginatiion.d.ts new file mode 100644 index 00000000..cd6dd3b7 --- /dev/null +++ b/frontend/app/types/paginatiion.d.ts @@ -0,0 +1,7 @@ +export interface PaginationProps { + handlePaginationChange: (newPage: number) => void; + handleLimitChange: (newLimit: number) => void; + page?: number; + limit?: number; + totalNum: number; +} diff --git a/frontend/app/types/response.d.ts b/frontend/app/types/response.d.ts new file mode 100644 index 00000000..87520f16 --- /dev/null +++ b/frontend/app/types/response.d.ts @@ -0,0 +1,4 @@ +export interface ActionResponse { + method: string; + status: number; +} From d6c92787561acbce5ce0e8b5a76df1c4870ac6e8 Mon Sep 17 00:00:00 2001 From: Kosei805 Date: Thu, 14 Nov 2024 16:40:50 +0900 Subject: [PATCH 2/8] front: user list page --- .../app/components/users/UserDeleteButton.tsx | 24 +++ .../components/users/UsersListComponent.tsx | 55 +++++++ .../app/components/users/UsersListTable.tsx | 37 +++++ .../app/components/users/UsersListTitle.tsx | 15 ++ .../app/routes/home.users._index/route.tsx | 144 ++++++++++++++++++ frontend/app/routes/home.users/route.tsx | 7 + 6 files changed, 282 insertions(+) create mode 100644 frontend/app/components/users/UserDeleteButton.tsx create mode 100644 frontend/app/components/users/UsersListComponent.tsx create mode 100644 frontend/app/components/users/UsersListTable.tsx create mode 100644 frontend/app/components/users/UsersListTitle.tsx create mode 100644 frontend/app/routes/home.users._index/route.tsx create mode 100644 frontend/app/routes/home.users/route.tsx diff --git a/frontend/app/components/users/UserDeleteButton.tsx b/frontend/app/components/users/UserDeleteButton.tsx new file mode 100644 index 00000000..7a914385 --- /dev/null +++ b/frontend/app/components/users/UserDeleteButton.tsx @@ -0,0 +1,24 @@ +import { Button } from '@mantine/core'; + +interface UserDeleteButtonProps { + id: number; + handleDeleteUserButtonClick: (id: number) => void; +} + +const UserDeleteButton = ({ + id, + handleDeleteUserButtonClick, +}: UserDeleteButtonProps) => { + return ( + + ); +}; + +export default UserDeleteButton; diff --git a/frontend/app/components/users/UsersListComponent.tsx b/frontend/app/components/users/UsersListComponent.tsx new file mode 100644 index 00000000..fa1d1faf --- /dev/null +++ b/frontend/app/components/users/UsersListComponent.tsx @@ -0,0 +1,55 @@ +import { Container, Stack } from '@mantine/core'; +import UsersListTitle from './UsersListTitle'; +import ContentsHeader from '../common/pagination/ContentsHeader'; +import type { PaginationProps } from '~/types/paginatiion'; +import PaginationComponent from '../common/pagination/PaginationComponent'; +import ErrorComponent from '../common/error/ErrorComponent'; +import { getUsersResponse } from 'client/client'; +import UsersListTable from './UsersListTable'; + +interface UsersListComponentProps { + paginationProps: PaginationProps; + usersResponse: getUsersResponse; + handleDeleteUserButtonClick: (id: number) => void; +} + +const UsersListComponent = ({ + paginationProps, + usersResponse, + handleDeleteUserButtonClick, +}: UsersListComponentProps) => { + return ( + + + + + {usersResponse.status === 200 ? ( + + ) : ( + + )} + + + + ); +}; + +export default UsersListComponent; diff --git a/frontend/app/components/users/UsersListTable.tsx b/frontend/app/components/users/UsersListTable.tsx new file mode 100644 index 00000000..c858da31 --- /dev/null +++ b/frontend/app/components/users/UsersListTable.tsx @@ -0,0 +1,37 @@ +import { rem, Table } from '@mantine/core'; +import { GetUsers200UsersItem } from 'client/client.schemas'; +import UserDeleteButton from './UserDeleteButton'; + +interface UsersTableProps { + users: GetUsers200UsersItem[]; + handleDeleteUserButtonClick: (id: number) => void; +} + +const UsersListTable = ({ + users, + handleDeleteUserButtonClick, +}: UsersTableProps) => { + return ( + + + {users.map((user) => ( + + {user.id && ( + <> + {user.name} + + + + + )} + + ))} + +
+ ); +}; + +export default UsersListTable; diff --git a/frontend/app/components/users/UsersListTitle.tsx b/frontend/app/components/users/UsersListTitle.tsx new file mode 100644 index 00000000..29debb02 --- /dev/null +++ b/frontend/app/components/users/UsersListTitle.tsx @@ -0,0 +1,15 @@ +import { Center, Group, Title } from '@mantine/core'; +import { FaUsers } from 'react-icons/fa'; + +const UsersListTitle = () => { + return ( +
+ + + ユーザー一覧 + +
+ ); +}; + +export default UsersListTitle; diff --git a/frontend/app/routes/home.users._index/route.tsx b/frontend/app/routes/home.users._index/route.tsx new file mode 100644 index 00000000..48e4bdb0 --- /dev/null +++ b/frontend/app/routes/home.users._index/route.tsx @@ -0,0 +1,144 @@ +import { + ActionFunctionArgs, + json, + LoaderFunctionArgs, + redirect, +} from '@remix-run/cloudflare'; +import { useFetcher, useLoaderData, useNavigate } from '@remix-run/react'; +import { deleteUser, getUsers, getUsersResponse } from 'client/client'; +import UsersListComponent from '~/components/users/UsersListComponent'; +import { commitSession, getSession } from '~/services/session.server'; +import { ActionResponse } from '~/types/response'; + +interface LoaderData { + usersResponse: getUsersResponse; + condition: { + page?: string; + limit?: string; + }; +} + +export const loader = async ({ request }: LoaderFunctionArgs) => { + // 検索条件を取得する + const url = new URL(request.url); + const page = url.searchParams.get('page') ?? undefined; + const limit = url.searchParams.get('limit') ?? undefined; + // ユーザー情報を取得する + const response = await getUsers({ page: page, limit: limit }); + + return json({ + usersResponse: response, + condition: { + page: page, + limit: limit, + }, + }); +}; + +export const action = async ({ request }: ActionFunctionArgs) => { + const session = await getSession(request.headers.get('Cookie')); + const formData = await request.formData(); + const userId = String(formData.get('userId')); + + // 未ログインの場合 + if (!session.has('user')) { + session.flash('error', 'ログインしてください'); + return redirect('/login', { + headers: { + 'Set-Cookie': await commitSession(session), + }, + }); + } + + const cookieHeader = [ + `__Secure-user_id=${session.get('user')?.id};`, + `__Secure-session_token=${session.get('user')?.sessionToken}`, + ].join('; '); + + const response = await deleteUser(userId, { + headers: { Cookie: cookieHeader }, + }); + + switch (response.status) { + case 204: + session.flash('success', 'ユーザーを削除しました'); + if (Number(userId) === session.get('user')?.id) { + session.unset('user'); + session.flash('success', 'ログアウトしました'); + return redirect('/home', { + headers: { + 'Set-Cookie': await commitSession(session), + }, + }); + } + break; + case 401: + session.flash('error', 'ログインしてください'); + return redirect('/login', { + headers: { + 'Set-Cookie': await commitSession(session), + }, + }); + case 404: + session.flash('error', 'ユーザーが見つかりませんでした'); + break; + case 500: + session.flash('error', 'サーバーエラーが発生しました'); + break; + } + return json( + { method: 'DELETE', status: response.status }, + { + headers: { + 'Set-Cookie': await commitSession(session), + }, + }, + ); +}; + +const UsersListPage = () => { + const { usersResponse, condition } = useLoaderData(); + const { page, limit } = condition; + const navigate = useNavigate(); + const fetcher = useFetcher(); + const handlePaginationChange = (newPage: number) => { + let url = '/home/users'; + let initial = true; + if (limit) { + url = + initial === true ? `${url}?limit=${limit}` : `${url}&limit=${limit}`; + initial = false; + } + url = + initial === true ? `${url}?page=${newPage}` : `${url}&page=${newPage}`; + navigate(url); + }; + + const handleLimitChange = (newLimit: number) => + navigate(`/home/users?limit=${newLimit}`); + + const handleDeleteUserButtonClick = (id: number) => { + fetcher.submit( + { userId: id }, + { + method: 'DELETE', + }, + ); + }; + + return ( + + ); +}; + +export default UsersListPage; diff --git a/frontend/app/routes/home.users/route.tsx b/frontend/app/routes/home.users/route.tsx new file mode 100644 index 00000000..51833138 --- /dev/null +++ b/frontend/app/routes/home.users/route.tsx @@ -0,0 +1,7 @@ +import { Outlet } from '@remix-run/react'; + +const UsersLayout = () => { + return ; +}; + +export default UsersLayout; From 666ac7ce75a3644bb9c7cd91dc69a7f8f97d351f Mon Sep 17 00:00:00 2001 From: Kosei805 Date: Thu, 14 Nov 2024 17:05:46 +0900 Subject: [PATCH 3/8] add: auth check loader --- frontend/app/routes/home.users/route.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/frontend/app/routes/home.users/route.tsx b/frontend/app/routes/home.users/route.tsx index 51833138..6e404908 100644 --- a/frontend/app/routes/home.users/route.tsx +++ b/frontend/app/routes/home.users/route.tsx @@ -1,4 +1,19 @@ +import { LoaderFunctionArgs, redirect } from '@remix-run/cloudflare'; import { Outlet } from '@remix-run/react'; +import { commitSession, getSession } from '~/services/session.server'; + +export const loader = async ({ request }: LoaderFunctionArgs) => { + const session = await getSession(request.headers.get('Cookie')); + + if (!session.has('user')) { + return redirect('/login', { + headers: { + 'Set-Cookie': await commitSession(session), + }, + }); + } + return null; +}; const UsersLayout = () => { return ; From 64caf5206d7901d6ecbe6cef8f5035ec1d79f3ad Mon Sep 17 00:00:00 2001 From: Kosei805 Date: Thu, 14 Nov 2024 17:08:34 +0900 Subject: [PATCH 4/8] front: no user component --- .../app/components/users/NoUserComponent.tsx | 18 ++++++++++++++++++ .../app/components/users/UsersListTable.tsx | 2 ++ 2 files changed, 20 insertions(+) create mode 100644 frontend/app/components/users/NoUserComponent.tsx diff --git a/frontend/app/components/users/NoUserComponent.tsx b/frontend/app/components/users/NoUserComponent.tsx new file mode 100644 index 00000000..80766db2 --- /dev/null +++ b/frontend/app/components/users/NoUserComponent.tsx @@ -0,0 +1,18 @@ +import { Anchor, Blockquote, Center } from '@mantine/core'; +import { FaInfoCircle } from 'react-icons/fa'; + +interface NoUserComponentProps { + color?: string; +} + +const NoUserComponent = ({ color }: NoUserComponentProps) => { + return ( +
+
} mt="xl"> + ユーザーが存在しません。 +
+
+ ); +}; + +export default NoUserComponent; diff --git a/frontend/app/components/users/UsersListTable.tsx b/frontend/app/components/users/UsersListTable.tsx index c858da31..15d514ec 100644 --- a/frontend/app/components/users/UsersListTable.tsx +++ b/frontend/app/components/users/UsersListTable.tsx @@ -1,6 +1,7 @@ import { rem, Table } from '@mantine/core'; import { GetUsers200UsersItem } from 'client/client.schemas'; import UserDeleteButton from './UserDeleteButton'; +import NoUserComponent from './NoUserComponent'; interface UsersTableProps { users: GetUsers200UsersItem[]; @@ -11,6 +12,7 @@ const UsersListTable = ({ users, handleDeleteUserButtonClick, }: UsersTableProps) => { + if (users.length === 0) return ; return ( From 89ce5d47cedd4fa0669ecab6ee3969ac581c0674 Mon Sep 17 00:00:00 2001 From: Kosei805 Date: Thu, 14 Nov 2024 19:45:49 +0900 Subject: [PATCH 5/8] front: add page link button --- .../app/components/users/NoUserComponent.tsx | 2 +- .../app/components/users/UserAddButton.tsx | 19 +++++++++++++++++++ .../components/users/UsersListComponent.tsx | 2 ++ 3 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 frontend/app/components/users/UserAddButton.tsx diff --git a/frontend/app/components/users/NoUserComponent.tsx b/frontend/app/components/users/NoUserComponent.tsx index 80766db2..aa7a4c79 100644 --- a/frontend/app/components/users/NoUserComponent.tsx +++ b/frontend/app/components/users/NoUserComponent.tsx @@ -1,4 +1,4 @@ -import { Anchor, Blockquote, Center } from '@mantine/core'; +import { Blockquote, Center } from '@mantine/core'; import { FaInfoCircle } from 'react-icons/fa'; interface NoUserComponentProps { diff --git a/frontend/app/components/users/UserAddButton.tsx b/frontend/app/components/users/UserAddButton.tsx new file mode 100644 index 00000000..66efae5e --- /dev/null +++ b/frontend/app/components/users/UserAddButton.tsx @@ -0,0 +1,19 @@ +import { Button } from '@mantine/core'; +import { RiUserAddFill } from 'react-icons/ri'; + +const UserAddButton = () => { + return ( + + ); +}; + +export default UserAddButton; diff --git a/frontend/app/components/users/UsersListComponent.tsx b/frontend/app/components/users/UsersListComponent.tsx index fa1d1faf..953590d4 100644 --- a/frontend/app/components/users/UsersListComponent.tsx +++ b/frontend/app/components/users/UsersListComponent.tsx @@ -6,6 +6,7 @@ import PaginationComponent from '../common/pagination/PaginationComponent'; import ErrorComponent from '../common/error/ErrorComponent'; import { getUsersResponse } from 'client/client'; import UsersListTable from './UsersListTable'; +import UserAddButton from './UserAddButton'; interface UsersListComponentProps { paginationProps: PaginationProps; @@ -41,6 +42,7 @@ const UsersListComponent = ({ ) : ( )} + Date: Fri, 15 Nov 2024 19:36:57 +0900 Subject: [PATCH 6/8] fix: totalNum to total --- .../components/common/pagination/PaginationComponent.tsx | 6 +++--- .../app/components/global-books/GlobalBookListComponent.tsx | 4 ++-- frontend/app/components/users/UsersListComponent.tsx | 4 ++-- frontend/app/routes/home._index/route.tsx | 2 +- frontend/app/routes/home.global._index/route.tsx | 2 +- frontend/app/routes/home.users._index/route.tsx | 2 +- frontend/app/types/paginatiion.d.ts | 2 +- 7 files changed, 11 insertions(+), 11 deletions(-) diff --git a/frontend/app/components/common/pagination/PaginationComponent.tsx b/frontend/app/components/common/pagination/PaginationComponent.tsx index fec1b058..2c735ae8 100644 --- a/frontend/app/components/common/pagination/PaginationComponent.tsx +++ b/frontend/app/components/common/pagination/PaginationComponent.tsx @@ -1,7 +1,7 @@ import { Center, Pagination } from '@mantine/core'; interface PaginationComponentProps { - totalNum: number; + total: number; page?: number; limit?: number; handlePaginationChange: (newPage: number) => void; @@ -9,14 +9,14 @@ interface PaginationComponentProps { } const PaginationComponent = ({ - totalNum, + total, page, limit, handlePaginationChange, color, }: PaginationComponentProps) => { const limitNum = limit ?? 10; - const totalPage = totalNum / limitNum + 1; + const totalPage = total / limitNum + 1; return (
{!booksResponse ? ( @@ -67,7 +67,7 @@ const GlobalBookListComponent = ({ )} {usersResponse.status === 200 ? ( @@ -44,7 +44,7 @@ const UsersListComponent = ({ )} { handleLimitChange: handleLimitChange, page: page ? Number(page) : undefined, limit: limit ? Number(limit) : undefined, - totalNum: booksResponse.data.totalBook, + total: booksResponse.data.totalBook, }} /> ); diff --git a/frontend/app/routes/home.global._index/route.tsx b/frontend/app/routes/home.global._index/route.tsx index 3e1c77fc..eea8ba11 100644 --- a/frontend/app/routes/home.global._index/route.tsx +++ b/frontend/app/routes/home.global._index/route.tsx @@ -270,7 +270,7 @@ const GlobalBookListPage = () => { handleLimitChange: handleLimitChange, page: page ? Number(page) : undefined, limit: limit ? Number(limit) : undefined, - totalNum: booksResponse ? booksResponse.data.totalBook : 0, + total: booksResponse ? booksResponse.data.totalBook : 0, }} searchMode={searchMode} setSearchMode={setSearchMode} diff --git a/frontend/app/routes/home.users._index/route.tsx b/frontend/app/routes/home.users._index/route.tsx index 48e4bdb0..a1296439 100644 --- a/frontend/app/routes/home.users._index/route.tsx +++ b/frontend/app/routes/home.users._index/route.tsx @@ -133,7 +133,7 @@ const UsersListPage = () => { handleLimitChange: handleLimitChange, page: page ? Number(page) : undefined, limit: limit ? Number(limit) : undefined, - totalNum: usersResponse.data.totalUser, + total: usersResponse.data.totalUser, }} usersResponse={usersResponse} handleDeleteUserButtonClick={handleDeleteUserButtonClick} diff --git a/frontend/app/types/paginatiion.d.ts b/frontend/app/types/paginatiion.d.ts index cd6dd3b7..30987fd0 100644 --- a/frontend/app/types/paginatiion.d.ts +++ b/frontend/app/types/paginatiion.d.ts @@ -3,5 +3,5 @@ export interface PaginationProps { handleLimitChange: (newLimit: number) => void; page?: number; limit?: number; - totalNum: number; + total: number; } From 8f89a205e362809ff9e9fc53725253ba9f72de94 Mon Sep 17 00:00:00 2001 From: Kosei805 Date: Fri, 15 Nov 2024 19:37:58 +0900 Subject: [PATCH 7/8] function: change group write --- frontend/app/routes/home.users._index/route.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/app/routes/home.users._index/route.tsx b/frontend/app/routes/home.users._index/route.tsx index a1296439..f873551d 100644 --- a/frontend/app/routes/home.users._index/route.tsx +++ b/frontend/app/routes/home.users._index/route.tsx @@ -114,8 +114,9 @@ const UsersListPage = () => { navigate(url); }; - const handleLimitChange = (newLimit: number) => + const handleLimitChange = (newLimit: number) => { navigate(`/home/users?limit=${newLimit}`); + }; const handleDeleteUserButtonClick = (id: number) => { fetcher.submit( From 1659b8f66d550ec90260eceba357423bc5d94f17 Mon Sep 17 00:00:00 2001 From: Kosei805 Date: Fri, 15 Nov 2024 21:30:44 +0900 Subject: [PATCH 8/8] fix: pagenation and variant name --- frontend/app/components/books/BookListComponent.tsx | 4 ++-- .../app/components/common/pagination/PaginationComponent.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/app/components/books/BookListComponent.tsx b/frontend/app/components/books/BookListComponent.tsx index b9b086ed..5b154c92 100644 --- a/frontend/app/components/books/BookListComponent.tsx +++ b/frontend/app/components/books/BookListComponent.tsx @@ -43,7 +43,7 @@ const BookListComponent = ({ {booksResponse.status !== 200 ? ( @@ -52,7 +52,7 @@ const BookListComponent = ({ )} { const limitNum = limit ?? 10; - const totalPage = total / limitNum + 1; + const totalPage = total != 0 ? Math.ceil(total / limitNum) : 1; return (