Format all frontend files

(#97)
kitcc-org · Oct 27, 2024 · 7c11143 · 7c11143
1 parent de831e7
commit 7c11143
Show file tree

Hide file tree

Showing 68 changed files with 1,609 additions and 1,599 deletions.
diff --git a/frontend/app/components/book-detail/BookDetailAuthorBadge.tsx b/frontend/app/components/book-detail/BookDetailAuthorBadge.tsx
@@ -1,21 +1,21 @@
-import { Badge } from '@mantine/core'
+import { Badge } from '@mantine/core';
 
 interface BookDetailAuthorBadgeProps {
-  name: string
+	name: string;
 }
 
 const BookDetailAuthorBadge = ({ name }: BookDetailAuthorBadgeProps) => {
-  return (
-    <Badge
-      component='a'
-      href={`/home?author=${name}`}
-      style={{ cursor: 'pointer' }}
-      variant='outline'
-      size='lg'
-    >
-      {name}
-    </Badge >
-  )
-}
+	return (
+		<Badge
+			component="a"
+			href={`/home?author=${name}`}
+			style={{ cursor: 'pointer' }}
+			variant="outline"
+			size="lg"
+		>
+			{name}
+		</Badge>
+	);
+};
 
-export default BookDetailAuthorBadge
+export default BookDetailAuthorBadge;
diff --git a/frontend/app/components/book-detail/BookDetailBorrower.tsx b/frontend/app/components/book-detail/BookDetailBorrower.tsx
@@ -1,49 +1,49 @@
 import {
-  Badge,
-  Blockquote,
-  Group,
-  Loader,
-  rem,
-  Stack,
-  Text,
-} from "@mantine/core";
-import { useGetLoans } from "client/client";
-import { MdError } from "react-icons/md";
+	Badge,
+	Blockquote,
+	Group,
+	Loader,
+	rem,
+	Stack,
+	Text,
+} from '@mantine/core';
+import { useGetLoans } from 'client/client';
+import { MdError } from 'react-icons/md';
 
 const BookDetailBorrower = () => {
-  const loans = useGetLoans();
+	const loans = useGetLoans();
 
-  if (loans.isError) {
-    return (
-      <Blockquote color="red" icon={<MdError />} mt="xl">
-        データの取得に失敗しました
-      </Blockquote>
-    );
-  }
-  return (
-    <Stack gap="sm" align="stretch" justify="flex-start">
-      <Text fz={rem(18)}>借りている人</Text>
-      {loans.isPending ? (
-        <Loader color="blue" type="dots" />
-      ) : (
-        <Group gap={rem(7)}>
-          {loans.data.data.loans.map(
-            (loan) =>
-              loan.users && (
-                <Badge
-                  key={`${loan.loans?.userId}-${loan.loans?.bookId}`}
-                  variant="light"
-                  color="rgba(0, 0, 0, 1)"
-                  size="lg"
-                >
-                  {loan.users.name}
-                </Badge>
-              )
-          )}
-        </Group>
-      )}
-    </Stack>
-  );
+	if (loans.isError) {
+		return (
+			<Blockquote color="red" icon={<MdError />} mt="xl">
+				データの取得に失敗しました
+			</Blockquote>
+		);
+	}
+	return (
+		<Stack gap="sm" align="stretch" justify="flex-start">
+			<Text fz={rem(18)}>借りている人</Text>
+			{loans.isPending ? (
+				<Loader color="blue" type="dots" />
+			) : (
+				<Group gap={rem(7)}>
+					{loans.data.data.loans.map(
+						(loan) =>
+							loan.users && (
+								<Badge
+									key={`${loan.loans?.userId}-${loan.loans?.bookId}`}
+									variant="light"
+									color="rgba(0, 0, 0, 1)"
+									size="lg"
+								>
+									{loan.users.name}
+								</Badge>
+							),
+					)}
+				</Group>
+			)}
+		</Stack>
+	);
 };
 
 export default BookDetailBorrower;
diff --git a/frontend/app/components/book-detail/BookDetailComponent.tsx b/frontend/app/components/book-detail/BookDetailComponent.tsx
@@ -1,39 +1,39 @@
-import { Grid, rem, Stack } from "@mantine/core";
-import ErrorComponent from "~/components/common/ErrorComponent";
+import { Grid, rem, Stack } from '@mantine/core';
+import ErrorComponent from '~/components/common/ErrorComponent';
 
-import { getBookResponse } from "client/client";
-import BookDetailContent from "./BookDetailContent";
-import BookDetailControlPanel from "./BookDetailControlPanel";
+import { getBookResponse } from 'client/client';
+import BookDetailContent from './BookDetailContent';
+import BookDetailControlPanel from './BookDetailControlPanel';
 
 interface BookDetailComponentProps {
-  bookResponse: getBookResponse;
+	bookResponse: getBookResponse;
 }
 
 const BookDetailComponent = ({ bookResponse }: BookDetailComponentProps) => {
-  switch (bookResponse.status) {
-    case 400:
-      return <ErrorComponent message="リクエストが不正です" />;
-    case 404:
-      return <ErrorComponent message="書籍が見つかりませんでした" />;
-    case 500:
-      return <ErrorComponent message="サーバーエラーが発生しました" />;
-  }
+	switch (bookResponse.status) {
+		case 400:
+			return <ErrorComponent message="リクエストが不正です" />;
+		case 404:
+			return <ErrorComponent message="書籍が見つかりませんでした" />;
+		case 500:
+			return <ErrorComponent message="サーバーエラーが発生しました" />;
+	}
 
-  return (
-    <Stack bg="var(--mantine-color-body)" align="stretch" justify="flex-start">
-      <Grid gutter={rem(50)}>
-        <Grid.Col span={3}>
-          <BookDetailControlPanel
-            id={bookResponse.data.id}
-            thumbnail={bookResponse.data.thumbnail}
-          />
-        </Grid.Col>
-        <Grid.Col span={9}>
-          <BookDetailContent book={bookResponse.data} />
-        </Grid.Col>
-      </Grid>
-    </Stack>
-  );
+	return (
+		<Stack bg="var(--mantine-color-body)" align="stretch" justify="flex-start">
+			<Grid gutter={rem(50)}>
+				<Grid.Col span={3}>
+					<BookDetailControlPanel
+						id={bookResponse.data.id}
+						thumbnail={bookResponse.data.thumbnail}
+					/>
+				</Grid.Col>
+				<Grid.Col span={9}>
+					<BookDetailContent book={bookResponse.data} />
+				</Grid.Col>
+			</Grid>
+		</Stack>
+	);
 };
 
 export default BookDetailComponent;
diff --git a/frontend/app/components/book-detail/BookDetailContent.tsx b/frontend/app/components/book-detail/BookDetailContent.tsx
@@ -1,31 +1,31 @@
-import { Stack } from "@mantine/core";
-import { Book } from "client/client.schemas";
-import { useAtom } from "jotai";
-import { userAtom } from "~/stores/userAtom";
-import BookDetailBorrower from "./BookDetailBorrower";
-import BookDetailContentTable from "./BookDetailContentTable";
-import BookDetailDescription from "./BookDetailDescription";
-import BookDetailTitle from "./BookDetailTitle";
+import { Stack } from '@mantine/core';
+import { Book } from 'client/client.schemas';
+import { useAtom } from 'jotai';
+import { userAtom } from '~/stores/userAtom';
+import BookDetailBorrower from './BookDetailBorrower';
+import BookDetailContentTable from './BookDetailContentTable';
+import BookDetailDescription from './BookDetailDescription';
+import BookDetailTitle from './BookDetailTitle';
 
 interface BookDetailComponentProps {
-  book: Book;
+	book: Book;
 }
 
 const BookDetailContent = ({ book }: BookDetailComponentProps) => {
-  const [user] = useAtom(userAtom);
-  return (
-    <Stack
-      bg="var(--mantine-color-body)"
-      align="stretch"
-      justify="flex-start"
-      gap="xl"
-    >
-      <BookDetailTitle title={book.title} />
-      <BookDetailContentTable book={book} />
-      <BookDetailDescription description={book.description} />
-      {!!user && <BookDetailBorrower />}
-    </Stack>
-  );
+	const [user] = useAtom(userAtom);
+	return (
+		<Stack
+			bg="var(--mantine-color-body)"
+			align="stretch"
+			justify="flex-start"
+			gap="xl"
+		>
+			<BookDetailTitle title={book.title} />
+			<BookDetailContentTable book={book} />
+			<BookDetailDescription description={book.description} />
+			{!!user && <BookDetailBorrower />}
+		</Stack>
+	);
 };
 
 export default BookDetailContent;
diff --git a/frontend/app/components/book-detail/BookDetailContentTable.tsx b/frontend/app/components/book-detail/BookDetailContentTable.tsx
@@ -1,45 +1,45 @@
-import { Group, rem, Stack, Table, Text } from "@mantine/core";
-import { Book } from "client/client.schemas";
-import BookDetailAuthorBadge from "./BookDetailAuthorBadge";
+import { Group, rem, Stack, Table, Text } from '@mantine/core';
+import { Book } from 'client/client.schemas';
+import BookDetailAuthorBadge from './BookDetailAuthorBadge';
 
 interface BookDetailContentTableProps {
-  book: Book;
+	book: Book;
 }
 
 const BookDetailContentTable = ({ book }: BookDetailContentTableProps) => {
-  return (
-    <Stack gap="sm" align="stretch" justify="flex-start">
-      <Text fz={rem(22)}>書籍情報</Text>
-      <Table fz={rem(17)}>
-        <Table.Tr key={"author"}>
-          <Table.Th>著者</Table.Th>
-          <Table.Td>
-            <Group gap={rem(7)}>
-              {book.authors.map((author, id) => (
-                <BookDetailAuthorBadge key={id} name={author} />
-              ))}
-            </Group>
-          </Table.Td>
-        </Table.Tr>
-        <Table.Tr key={"publisher"}>
-          <Table.Th>出版社</Table.Th>
-          <Table.Td>{book.publisher}</Table.Td>
-        </Table.Tr>
-        <Table.Tr key={"publishedDate"}>
-          <Table.Th>出版日</Table.Th>
-          <Table.Td>{book.publishedDate}</Table.Td>
-        </Table.Tr>
-        <Table.Tr key={"isbn"}>
-          <Table.Th>ISBN</Table.Th>
-          <Table.Td>{book.isbn}</Table.Td>
-        </Table.Tr>
-        <Table.Tr key={"stock"}>
-          <Table.Th>在庫数</Table.Th>
-          <Table.Td>{book.stock}</Table.Td>
-        </Table.Tr>
-      </Table>
-    </Stack>
-  );
+	return (
+		<Stack gap="sm" align="stretch" justify="flex-start">
+			<Text fz={rem(22)}>書籍情報</Text>
+			<Table fz={rem(17)}>
+				<Table.Tr key={'author'}>
+					<Table.Th>著者</Table.Th>
+					<Table.Td>
+						<Group gap={rem(7)}>
+							{book.authors.map((author, id) => (
+								<BookDetailAuthorBadge key={id} name={author} />
+							))}
+						</Group>
+					</Table.Td>
+				</Table.Tr>
+				<Table.Tr key={'publisher'}>
+					<Table.Th>出版社</Table.Th>
+					<Table.Td>{book.publisher}</Table.Td>
+				</Table.Tr>
+				<Table.Tr key={'publishedDate'}>
+					<Table.Th>出版日</Table.Th>
+					<Table.Td>{book.publishedDate}</Table.Td>
+				</Table.Tr>
+				<Table.Tr key={'isbn'}>
+					<Table.Th>ISBN</Table.Th>
+					<Table.Td>{book.isbn}</Table.Td>
+				</Table.Tr>
+				<Table.Tr key={'stock'}>
+					<Table.Th>在庫数</Table.Th>
+					<Table.Td>{book.stock}</Table.Td>
+				</Table.Tr>
+			</Table>
+		</Stack>
+	);
 };
 
 export default BookDetailContentTable;