ユーザー一覧の実装

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 {

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';

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 (
 		<Stack bg="var(--mantine-color-body)" align="stretch" justify="flex-start">
@@ -48,21 +41,21 @@ const BookListComponent = ({
 				handleSubmit={handleSubmit}
 			/>
 			<ContentsHeader
-				page={page}
-				limit={limit}
-				total={totalBook}
-				handleLimitChange={handleLimitChange}
+				page={paginationProps.page}
+				limit={paginationProps.limit}
+				total={paginationProps.total}
+				handleLimitChange={paginationProps.handleLimitChange}
 			/>
 			{booksResponse.status !== 200 ? (
 				<ErrorComponent message={'書籍情報を取得できませんでした。'} />
 			) : (
 				<BookCards books={booksResponse.data.books} />
 			)}
 			<PaginationComponent
-				totalNum={totalBook}
-				page={page}
-				limit={limit}
-				handlePaginationChange={handlePaginationChange}
+				total={paginationProps.total}
+				page={paginationProps.page}
+				limit={paginationProps.limit}
+				handlePaginationChange={paginationProps.handlePaginationChange}
 			/>
 		</Stack>
 	);

frontend/app/components/common/pagination/PaginationComponent.tsx

@@ -1,22 +1,22 @@
 import { Center, Pagination } from '@mantine/core';
 
 interface PaginationComponentProps {
-	totalNum: number;
+	total: number;
 	page?: number;
 	limit?: number;
 	handlePaginationChange: (newPage: number) => void;
 	color?: string;
 }
 
 const PaginationComponent = ({
-	totalNum,
+	total,
 	page,
 	limit,
 	handlePaginationChange,
 	color,
 }: PaginationComponentProps) => {
 	const limitNum = limit ?? 10;
-	const totalPage = totalNum / limitNum + 1;
+	const totalPage = total != 0 ? Math.ceil(total / limitNum) : 1;
 	return (
 		<Center>
 			<Pagination

frontend/app/components/global-books/GlobalBookListComponent.tsx

@@ -9,28 +9,21 @@ 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<
 		SearchBooksParams,
 		(values: SearchBooksParams) => SearchBooksParams
 	>;
 	globalSearchFunctions: HandleGlobalSearchFunctions;
-	paginationProps: HandlePaginationProps;
+	paginationProps: PaginationProps;
 	isOpen: boolean;
 	open: () => void;
 	close: () => void;
@@ -63,7 +56,7 @@ const GlobalBookListComponent = ({
 			<ContentsHeader
 				page={paginationProps.page}
 				limit={paginationProps.limit}
-				total={paginationProps.totalBook}
+				total={paginationProps.total}
 				handleLimitChange={paginationProps.handleLimitChange}
 			/>
 			{!booksResponse ? (
@@ -74,7 +67,7 @@ const GlobalBookListComponent = ({
 				<GlobalBookCards books={booksResponse.data.books} />
 			)}
 			<PaginationComponent
-				totalNum={paginationProps.totalBook}
+				total={paginationProps.total}
 				page={paginationProps.page}
 				limit={paginationProps.limit}
 				handlePaginationChange={paginationProps.handlePaginationChange}

frontend/app/components/users/NoUserComponent.tsx

@@ -0,0 +1,18 @@
+import { Blockquote, Center } from '@mantine/core';
+import { FaInfoCircle } from 'react-icons/fa';
+
+interface NoUserComponentProps {
+	color?: string;
+}
+
+const NoUserComponent = ({ color }: NoUserComponentProps) => {
+	return (
+		<Center h="70dh" w="100%">
+			<Blockquote color={color ?? 'blue'} icon={<FaInfoCircle />} mt="xl">
+				ユーザーが存在しません。
+			</Blockquote>
+		</Center>
+	);
+};
+
+export default NoUserComponent;

frontend/app/components/users/UserAddButton.tsx

@@ -0,0 +1,19 @@
+import { Button } from '@mantine/core';
+import { RiUserAddFill } from 'react-icons/ri';
+
+const UserAddButton = () => {
+	return (
+		<Button
+			color="blue"
+			variant="filled"
+			radius="xl"
+			leftSection={<RiUserAddFill />}
+			component="a"
+			href="users/add"
+		>
+			ユーザー追加
+		</Button>
+	);
+};
+
+export default UserAddButton;

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 (
+		<Button
+			color="red"
+			variant="light"
+			bd="solid 2px"
+			onClick={() => handleDeleteUserButtonClick(id)}
+		>
+			削除
+		</Button>
+	);
+};
+
+export default UserDeleteButton;

frontend/app/components/users/UsersListComponent.tsx

@@ -0,0 +1,57 @@
+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';
+import UserAddButton from './UserAddButton';
+
+interface UsersListComponentProps {
+	paginationProps: PaginationProps;
+	usersResponse: getUsersResponse;
+	handleDeleteUserButtonClick: (id: number) => void;
+}
+
+const UsersListComponent = ({
+	paginationProps,
+	usersResponse,
+	handleDeleteUserButtonClick,
+}: UsersListComponentProps) => {
+	return (
+		<Container>
+			<Stack
+				bg="var(--mantine-color-body)"
+				align="center"
+				justify="center"
+				maw="100%"
+			>
+				<UsersListTitle />
+				<ContentsHeader
+					page={paginationProps.page}
+					limit={paginationProps.limit}
+					total={paginationProps.total}
+					handleLimitChange={paginationProps.handleLimitChange}
+				/>
+				{usersResponse.status === 200 ? (
+					<UsersListTable
+						users={usersResponse.data.users}
+						handleDeleteUserButtonClick={handleDeleteUserButtonClick}
+					/>
+				) : (
+					<ErrorComponent message={'ユーザー情報を取得できませんでした。'} />
+				)}
+				<UserAddButton />
+				<PaginationComponent
+					total={paginationProps.total}
+					page={paginationProps.page}
+					limit={paginationProps.limit}
+					handlePaginationChange={paginationProps.handlePaginationChange}
+				/>
+			</Stack>
+		</Container>
+	);
+};
+
+export default UsersListComponent;

frontend/app/components/users/UsersListTable.tsx

@@ -0,0 +1,39 @@
+import { rem, Table } from '@mantine/core';
+import { GetUsers200UsersItem } from 'client/client.schemas';
+import UserDeleteButton from './UserDeleteButton';
+import NoUserComponent from './NoUserComponent';
+
+interface UsersTableProps {
+	users: GetUsers200UsersItem[];
+	handleDeleteUserButtonClick: (id: number) => void;
+}
+
+const UsersListTable = ({
+	users,
+	handleDeleteUserButtonClick,
+}: UsersTableProps) => {
+	if (users.length === 0) return <NoUserComponent />;
+	return (
+		<Table striped maw="50%">
+			<Table.Tbody>
+				{users.map((user) => (
+					<Table.Tr key={user.id}>
+						{user.id && (
+							<>
+								<Table.Td>{user.name}</Table.Td>
+								<Table.Td maw={rem(5)}>
+									<UserDeleteButton
+										id={user.id}
+										handleDeleteUserButtonClick={handleDeleteUserButtonClick}
+									/>
+								</Table.Td>
+							</>
+						)}
+					</Table.Tr>
+				))}
+			</Table.Tbody>
+		</Table>
+	);
+};
+
+export default UsersListTable;

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 (
+		<Center>
+			<Group justify="center" align="center">
+				<FaUsers size="3.5ch" />
+				<Title order={1}>ユーザー一覧</Title>
+			</Group>
+		</Center>
+	);
+};
+
+export default UsersListTitle;

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

@@ -13,6 +13,7 @@ import { useEffect } from 'react';
 import BookListComponent from '~/components/books/BookListComponent';
 import { commitSession, getSession } from '~/services/session.server';
 import { SelectedBookProps, selectedBooksAtom } from '~/stores/bookAtom';
+import { ActionResponse } from '~/types/response';
 
 interface LoaderData {
 	booksResponse: getBooksResponse;
@@ -26,11 +27,6 @@ interface LoaderData {
 	};
 }
 
-export interface ActionResponse {
-	method: string;
-	status: number;
-}
-
 export const loader = async ({ request }: LoaderFunctionArgs) => {
 	// 検索条件を取得する
 	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,
+				total: booksResponse.data.totalBook,
+			}}
 		/>
 	);
 };

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;

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,
+				total: booksResponse ? booksResponse.data.totalBook : 0,
 			}}
 			searchMode={searchMode}
 			setSearchMode={setSearchMode}