From 33784326e8eaca8d34b1eb07da20a303455cde38 Mon Sep 17 00:00:00 2001 From: Kosei805 Date: Fri, 22 Nov 2024 23:36:59 +0900 Subject: [PATCH 01/15] front: define breadcrumbs component --- .../breadcrumbs/BreadCrumbsComponent.tsx | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 frontend/app/components/common/breadcrumbs/BreadCrumbsComponent.tsx diff --git a/frontend/app/components/common/breadcrumbs/BreadCrumbsComponent.tsx b/frontend/app/components/common/breadcrumbs/BreadCrumbsComponent.tsx new file mode 100644 index 00000000..18cc1144 --- /dev/null +++ b/frontend/app/components/common/breadcrumbs/BreadCrumbsComponent.tsx @@ -0,0 +1,25 @@ +import { Anchor, Breadcrumbs } from '@mantine/core'; +import React from 'react'; + +interface AnchorProps { + title: string; + href: string; +} + +interface BreadCrumbsComponentProps { + anchors: AnchorProps[]; +} + +const BreadCrumbsComponent = ({ anchors }: BreadCrumbsComponentProps) => { + return ( + + {anchors.map((item, index) => ( + + {item.title} + + ))} + + ); +}; + +export default BreadCrumbsComponent; From a3be78f336bdc69dc3f11773d61744c91163b70c Mon Sep 17 00:00:00 2001 From: Kosei805 Date: Sat, 23 Nov 2024 13:36:17 +0900 Subject: [PATCH 02/15] front: breadcrumbs list --- .../components/books/BookListComponent.tsx | 2 + .../app/components/cart/CartListComponent.tsx | 8 ++++ .../global-books/GlobalBookListComponent.tsx | 4 ++ .../me-edit/MyPageEditComponent.tsx | 7 +++ .../app/components/me/MyPageComponent.tsx | 4 ++ .../user-create/UserCreateComponent.tsx | 7 +++ .../components/users/UsersListComponent.tsx | 44 +++++++++++-------- .../app/routes/home.books.$bookId/route.tsx | 10 +++++ .../routes/home.global.$volumeId/route.tsx | 36 ++++++++++----- 9 files changed, 93 insertions(+), 29 deletions(-) diff --git a/frontend/app/components/books/BookListComponent.tsx b/frontend/app/components/books/BookListComponent.tsx index fa8daeac..e702b763 100644 --- a/frontend/app/components/books/BookListComponent.tsx +++ b/frontend/app/components/books/BookListComponent.tsx @@ -5,6 +5,7 @@ import { getBooksResponse } from 'client/client'; import type { GetBooksParams } from 'client/client.schemas'; import { PaginationProps } from '~/types/pagination'; import BookSearchComponent from '../book-search/BookSearchComponent'; +import BreadCrumbsComponent from '../common/breadcrumbs/BreadCrumbsComponent'; import ErrorComponent from '../common/error/ErrorComponent'; import ContentsHeader from '../common/pagination/ContentsHeader'; import PaginationComponent from '../common/pagination/PaginationComponent'; @@ -34,6 +35,7 @@ const BookListComponent = ({ }: BookListComponentProps) => { return ( + { const [cart] = useAtom(cartAtom); return ( + {cart.length == 0 ? ( diff --git a/frontend/app/components/global-books/GlobalBookListComponent.tsx b/frontend/app/components/global-books/GlobalBookListComponent.tsx index 9322d0f4..6308fee9 100644 --- a/frontend/app/components/global-books/GlobalBookListComponent.tsx +++ b/frontend/app/components/global-books/GlobalBookListComponent.tsx @@ -5,6 +5,7 @@ import type { searchGoogleBooksResponse } from 'client/client'; import type { SearchGoogleBooksParams } from 'client/client.schemas'; import React from 'react'; import { PaginationProps } from '~/types/pagination'; +import BreadCrumbsComponent from '../common/breadcrumbs/BreadCrumbsComponent'; import ErrorComponent from '../common/error/ErrorComponent'; import ContentsHeader from '../common/pagination/ContentsHeader'; import PaginationComponent from '../common/pagination/PaginationComponent'; @@ -45,6 +46,9 @@ const GlobalBookListComponent = ({ }: GlobalBookListComponentProps) => { return ( + { return ( + form={form} handleSubmit={handleSubmit}> diff --git a/frontend/app/components/me/MyPageComponent.tsx b/frontend/app/components/me/MyPageComponent.tsx index af0a4388..8f435b7b 100644 --- a/frontend/app/components/me/MyPageComponent.tsx +++ b/frontend/app/components/me/MyPageComponent.tsx @@ -5,6 +5,7 @@ import { User } from 'client/client.schemas'; import { PaginationProps } from '~/types/pagination'; import MyLoansListComponent from './MyLoansListComponent'; import MyProfileDataComponent from './MyProfileComponent'; +import BreadCrumbsComponent from '../common/breadcrumbs/BreadCrumbsComponent'; interface MyPageComponentProps { user: User; @@ -19,6 +20,9 @@ const MyPageComponent = ({ }: MyPageComponentProps) => { return ( + form={form} handleSubmit={handleSubmit}> + diff --git a/frontend/app/components/users/UsersListComponent.tsx b/frontend/app/components/users/UsersListComponent.tsx index 09c53e93..fdbd4405 100644 --- a/frontend/app/components/users/UsersListComponent.tsx +++ b/frontend/app/components/users/UsersListComponent.tsx @@ -2,6 +2,7 @@ import { Stack } from '@mantine/core'; import { SerializeFrom } from '@remix-run/cloudflare'; import { getUsersResponse } from 'client/client'; import type { PaginationProps } from '~/types/pagination'; +import BreadCrumbsComponent from '../common/breadcrumbs/BreadCrumbsComponent'; import ErrorComponent from '../common/error/ErrorComponent'; import ContentsHeader from '../common/pagination/ContentsHeader'; import PaginationComponent from '../common/pagination/PaginationComponent'; @@ -19,29 +20,34 @@ const UsersListComponent = ({ usersResponse, }: UsersListComponentProps) => { return ( - - - - + + + + + + {usersResponse.status === 200 ? ( + + ) : ( + + )} + + + - {usersResponse.status === 200 ? ( - - ) : ( - - )} - - - + ); }; diff --git a/frontend/app/routes/home.books.$bookId/route.tsx b/frontend/app/routes/home.books.$bookId/route.tsx index 85b81e3e..b026678c 100644 --- a/frontend/app/routes/home.books.$bookId/route.tsx +++ b/frontend/app/routes/home.books.$bookId/route.tsx @@ -11,6 +11,7 @@ import { commitSession, getSession } from '~/services/session.server'; import { Book } from 'client/client.schemas'; import BookDetailActionPanel from '~/components/book-detail/BookDetailActionPanel'; +import BreadCrumbsComponent from '~/components/common/breadcrumbs/BreadCrumbsComponent'; import ErrorComponent from '~/components/common/error/ErrorComponent'; import { ActionResponse } from '~/types/response'; import { makeCookieHeader } from '~/utils/session'; @@ -127,6 +128,15 @@ const BookDetail = () => { } return ( + diff --git a/frontend/app/routes/home.global.$volumeId/route.tsx b/frontend/app/routes/home.global.$volumeId/route.tsx index c020728a..bbe755d4 100644 --- a/frontend/app/routes/home.global.$volumeId/route.tsx +++ b/frontend/app/routes/home.global.$volumeId/route.tsx @@ -9,6 +9,7 @@ import { useLoaderData } from '@remix-run/react'; import { createBook, getBooks, getGoogleBook } from 'client/client'; import { CreateBookBody, GoogleBook } from 'client/client.schemas'; import BookDetailActionPanel from '~/components/book-detail/BookDetailActionPanel'; +import BreadCrumbsComponent from '~/components/common/breadcrumbs/BreadCrumbsComponent'; import GlobalBookDetailContent from '~/components/global-book-detail/GlobalBookDetailContent'; import { commitSession, getSession } from '~/services/session.server'; import { ActionResponse } from '~/types/response'; @@ -101,16 +102,31 @@ export const action = async ({ request }: ActionFunctionArgs) => { const GlobalBookDetailPage = () => { const { googleBook, totalBook, bookId } = useLoaderData(); return ( - - - - - - - - - - + <> + + + + + + + + + + + + ); }; From 585b93d8818e51ad68d51047a5e8f8f399afadb6 Mon Sep 17 00:00:00 2001 From: Kosei805 Date: Sat, 23 Nov 2024 13:42:46 +0900 Subject: [PATCH 03/15] add: book edit page breadcrumbs list --- .../app/routes/home.books.$bookId/route.tsx | 31 ++++++++++++++----- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/frontend/app/routes/home.books.$bookId/route.tsx b/frontend/app/routes/home.books.$bookId/route.tsx index b026678c..607bb993 100644 --- a/frontend/app/routes/home.books.$bookId/route.tsx +++ b/frontend/app/routes/home.books.$bookId/route.tsx @@ -4,7 +4,7 @@ import type { LoaderFunctionArgs, } from '@remix-run/cloudflare'; import { json, redirect } from '@remix-run/cloudflare'; -import { Outlet, useLoaderData } from '@remix-run/react'; +import { Outlet, useLoaderData, useLocation } from '@remix-run/react'; import type { getBookResponse, getLoansResponse } from 'client/client'; import { deleteBook, getBook, getLoans } from 'client/client'; import { commitSession, getSession } from '~/services/session.server'; @@ -118,6 +118,7 @@ export const action = async ({ request }: ActionFunctionArgs) => { const BookDetail = () => { const { bookResponse, loansResponse } = useLoaderData(); + const location = useLocation(); switch (bookResponse.status) { case 400: return ; @@ -129,13 +130,27 @@ const BookDetail = () => { return ( From 06980d87b692b123895fb7d8f93c41a7e92c5931 Mon Sep 17 00:00:00 2001 From: Kosei805 Date: Sat, 23 Nov 2024 18:23:58 +0900 Subject: [PATCH 04/15] test: breadcrumbs test in book list page --- frontend/test/routes/home._index/route.test.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/frontend/test/routes/home._index/route.test.tsx b/frontend/test/routes/home._index/route.test.tsx index f60b9985..3dd5695c 100644 --- a/frontend/test/routes/home._index/route.test.tsx +++ b/frontend/test/routes/home._index/route.test.tsx @@ -182,4 +182,18 @@ describe('Book List Page', () => { } }); }); + + describe('BreadCrumbs', () => { + it('should navigate to home page when clicked', async () => { + const { user } = customRender( + , + ); + + const homeLink = await screen.findByRole('link', { name: '蔵書一覧' }); + await user.click(homeLink); + + // ホームページに遷移する + expect(window.location.pathname).toBe('/home'); + }); + }); }); From 45f12a01f0dc4c2424b5a9fb6129967c2b0490f4 Mon Sep 17 00:00:00 2001 From: Kosei805 Date: Sat, 23 Nov 2024 18:24:15 +0900 Subject: [PATCH 05/15] test: breadcrumbs test in book detail page --- .../routes/home.books.bookId/route.test.tsx | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/frontend/test/routes/home.books.bookId/route.test.tsx b/frontend/test/routes/home.books.bookId/route.test.tsx index 89cc2ae8..933be7bb 100644 --- a/frontend/test/routes/home.books.bookId/route.test.tsx +++ b/frontend/test/routes/home.books.bookId/route.test.tsx @@ -13,6 +13,7 @@ import BookDetail, { loader as rootLoader, } from '~/routes/home.books.$bookId/route'; import { redirect } from '../../mocks/@remix-run/cloudflare'; +import type * as remixrunReact from '@remix-run/react'; vi.mock('@remix-run/cloudflare', async (importOriginal) => { const actual = await importOriginal(); @@ -24,6 +25,20 @@ vi.mock('@remix-run/cloudflare', async (importOriginal) => { }; }); +const { navigateMock } = vi.hoisted(() => { + return { + navigateMock: vi.fn(), + }; +}); + +vi.mock('@remix-run/react', async (importOriginal) => { + const actual = await importOriginal(); + return { + ...actual, + useNavigate: () => navigateMock, + }; +}); + const BookDetailStub = createRemixStub([ { path: '/home/books/:bookId', @@ -149,4 +164,18 @@ describe('Book Detail Page', () => { // TODO: ログイン状態で借りている人がいる場合 }); + + describe('BreadCrumbs', () => { + it('should navigate to home page when clicked', async () => { + const { user } = customRender( + , + ); + + const homeLink = await screen.findByRole('link', { name: '蔵書一覧' }); + await user.click(homeLink); + + // ホームページに遷移する + expect(window.location.pathname).toBe('/home'); + }); + }); }); From 3eee93258f6b774725765150e23652c24c122032 Mon Sep 17 00:00:00 2001 From: Kosei805 Date: Sat, 23 Nov 2024 19:28:58 +0900 Subject: [PATCH 06/15] fix: add icon in breadcrumbs --- frontend/app/components/books/BookListComponent.tsx | 5 ++++- frontend/app/components/cart/CartListComponent.tsx | 6 ++++-- .../common/breadcrumbs/BreadCrumbsComponent.tsx | 8 ++++++-- .../global-books/GlobalBookListComponent.tsx | 9 ++++++++- .../app/components/me-edit/MyPageEditComponent.tsx | 10 ++++++++-- frontend/app/components/me/MyPageComponent.tsx | 3 ++- .../components/user-create/UserCreateComponent.tsx | 10 ++++++++-- frontend/app/components/users/UsersListComponent.tsx | 5 ++++- frontend/app/routes/home.books.$bookId/route.tsx | 12 +++++++++--- frontend/app/routes/home.global.$volumeId/route.tsx | 9 ++++++++- 10 files changed, 61 insertions(+), 16 deletions(-) diff --git a/frontend/app/components/books/BookListComponent.tsx b/frontend/app/components/books/BookListComponent.tsx index e702b763..87853bed 100644 --- a/frontend/app/components/books/BookListComponent.tsx +++ b/frontend/app/components/books/BookListComponent.tsx @@ -3,6 +3,7 @@ import type { UseFormReturnType } from '@mantine/form'; import { SerializeFrom } from '@remix-run/cloudflare'; import { getBooksResponse } from 'client/client'; import type { GetBooksParams } from 'client/client.schemas'; +import { LuBookCopy } from 'react-icons/lu'; import { PaginationProps } from '~/types/pagination'; import BookSearchComponent from '../book-search/BookSearchComponent'; import BreadCrumbsComponent from '../common/breadcrumbs/BreadCrumbsComponent'; @@ -35,7 +36,9 @@ const BookListComponent = ({ }: BookListComponentProps) => { return ( - + , title: '蔵書一覧', href: '/home' }]} + /> { const [cart] = useAtom(cartAtom); @@ -14,8 +16,8 @@ const CartListComponent = () => { , title: 'マイページ', href: '/home/me' }, + { icon: , title: '貸出カート', href: '/home/cart' }, ]} /> diff --git a/frontend/app/components/common/breadcrumbs/BreadCrumbsComponent.tsx b/frontend/app/components/common/breadcrumbs/BreadCrumbsComponent.tsx index 18cc1144..beb8eab8 100644 --- a/frontend/app/components/common/breadcrumbs/BreadCrumbsComponent.tsx +++ b/frontend/app/components/common/breadcrumbs/BreadCrumbsComponent.tsx @@ -1,7 +1,8 @@ -import { Anchor, Breadcrumbs } from '@mantine/core'; +import { Anchor, Breadcrumbs, Group, Text } from '@mantine/core'; import React from 'react'; interface AnchorProps { + icon: React.ReactNode; title: string; href: string; } @@ -15,7 +16,10 @@ const BreadCrumbsComponent = ({ anchors }: BreadCrumbsComponentProps) => { {anchors.map((item, index) => ( - {item.title} + + {item.icon} + {item.title} + ))} diff --git a/frontend/app/components/global-books/GlobalBookListComponent.tsx b/frontend/app/components/global-books/GlobalBookListComponent.tsx index 6308fee9..9373c346 100644 --- a/frontend/app/components/global-books/GlobalBookListComponent.tsx +++ b/frontend/app/components/global-books/GlobalBookListComponent.tsx @@ -4,6 +4,7 @@ import { SerializeFrom } from '@remix-run/cloudflare'; import type { searchGoogleBooksResponse } from 'client/client'; import type { SearchGoogleBooksParams } from 'client/client.schemas'; import React from 'react'; +import { AiOutlineGlobal } from 'react-icons/ai'; import { PaginationProps } from '~/types/pagination'; import BreadCrumbsComponent from '../common/breadcrumbs/BreadCrumbsComponent'; import ErrorComponent from '../common/error/ErrorComponent'; @@ -47,7 +48,13 @@ const GlobalBookListComponent = ({ return ( , + title: 'グローバル検索', + href: '/home/global', + }, + ]} /> , title: 'マイページ', href: '/home/me' }, + { + icon: , + title: 'プロフィール更新', + href: '/home/me/edit', + }, ]} /> form={form} handleSubmit={handleSubmit}> diff --git a/frontend/app/components/me/MyPageComponent.tsx b/frontend/app/components/me/MyPageComponent.tsx index 8f435b7b..422efa29 100644 --- a/frontend/app/components/me/MyPageComponent.tsx +++ b/frontend/app/components/me/MyPageComponent.tsx @@ -6,6 +6,7 @@ import { PaginationProps } from '~/types/pagination'; import MyLoansListComponent from './MyLoansListComponent'; import MyProfileDataComponent from './MyProfileComponent'; import BreadCrumbsComponent from '../common/breadcrumbs/BreadCrumbsComponent'; +import { FaUser } from 'react-icons/fa'; interface MyPageComponentProps { user: User; @@ -21,7 +22,7 @@ const MyPageComponent = ({ return ( , title: 'マイページ', href: '/home/me' }]} /> form={form} handleSubmit={handleSubmit}> , title: 'ユーザー一覧', href: '/home/users' }, + { + icon: , + title: 'ユーザー作成', + href: '/home/users/create', + }, ]} /> diff --git a/frontend/app/components/users/UsersListComponent.tsx b/frontend/app/components/users/UsersListComponent.tsx index fdbd4405..057302f7 100644 --- a/frontend/app/components/users/UsersListComponent.tsx +++ b/frontend/app/components/users/UsersListComponent.tsx @@ -1,6 +1,7 @@ import { Stack } from '@mantine/core'; import { SerializeFrom } from '@remix-run/cloudflare'; import { getUsersResponse } from 'client/client'; +import { FaUsers } from 'react-icons/fa'; import type { PaginationProps } from '~/types/pagination'; import BreadCrumbsComponent from '../common/breadcrumbs/BreadCrumbsComponent'; import ErrorComponent from '../common/error/ErrorComponent'; @@ -22,7 +23,9 @@ const UsersListComponent = ({ return ( <> , title: 'ユーザー一覧', href: '/home/users' }, + ]} /> diff --git a/frontend/app/routes/home.books.$bookId/route.tsx b/frontend/app/routes/home.books.$bookId/route.tsx index 607bb993..bbff86d6 100644 --- a/frontend/app/routes/home.books.$bookId/route.tsx +++ b/frontend/app/routes/home.books.$bookId/route.tsx @@ -10,6 +10,9 @@ import { deleteBook, getBook, getLoans } from 'client/client'; import { commitSession, getSession } from '~/services/session.server'; import { Book } from 'client/client.schemas'; +import { FaBook } from 'react-icons/fa6'; +import { GiNotebook } from 'react-icons/gi'; +import { LuBookCopy } from 'react-icons/lu'; import BookDetailActionPanel from '~/components/book-detail/BookDetailActionPanel'; import BreadCrumbsComponent from '~/components/common/breadcrumbs/BreadCrumbsComponent'; import ErrorComponent from '~/components/common/error/ErrorComponent'; @@ -133,19 +136,22 @@ const BookDetail = () => { anchors={ location.pathname.includes('/edit') ? [ - { title: '蔵書一覧', href: '/home' }, + { icon: , title: '蔵書一覧', href: '/home' }, { + icon: , title: bookResponse.data.title, href: `/home/books/${bookResponse.data.id}`, }, { - title: '書籍情報編集', + icon: , + title: '書籍編集', href: `/home/books/${bookResponse.data.id}/edit`, }, ] : [ - { title: '蔵書一覧', href: '/home' }, + { icon: , title: '蔵書一覧', href: '/home' }, { + icon: , title: bookResponse.data.title, href: `/home/books/${bookResponse.data.id}`, }, diff --git a/frontend/app/routes/home.global.$volumeId/route.tsx b/frontend/app/routes/home.global.$volumeId/route.tsx index bbe755d4..1cf805aa 100644 --- a/frontend/app/routes/home.global.$volumeId/route.tsx +++ b/frontend/app/routes/home.global.$volumeId/route.tsx @@ -8,6 +8,8 @@ import { import { useLoaderData } from '@remix-run/react'; import { createBook, getBooks, getGoogleBook } from 'client/client'; import { CreateBookBody, GoogleBook } from 'client/client.schemas'; +import { AiOutlineGlobal } from 'react-icons/ai'; +import { FaBookAtlas } from 'react-icons/fa6'; import BookDetailActionPanel from '~/components/book-detail/BookDetailActionPanel'; import BreadCrumbsComponent from '~/components/common/breadcrumbs/BreadCrumbsComponent'; import GlobalBookDetailContent from '~/components/global-book-detail/GlobalBookDetailContent'; @@ -105,8 +107,13 @@ const GlobalBookDetailPage = () => { <> , + title: 'グローバル検索', + href: '/home/global', + }, + { + icon: , title: googleBook.title, href: `/home/global/${googleBook.id}`, }, From de51b3b029f73b94be6c5d518b507ed7063a74b2 Mon Sep 17 00:00:00 2001 From: Kosei805 Date: Sat, 23 Nov 2024 20:50:04 +0900 Subject: [PATCH 07/15] fix: breadcrumbs title --- frontend/app/routes/home.books.$bookId/route.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/app/routes/home.books.$bookId/route.tsx b/frontend/app/routes/home.books.$bookId/route.tsx index bbff86d6..9f7226be 100644 --- a/frontend/app/routes/home.books.$bookId/route.tsx +++ b/frontend/app/routes/home.books.$bookId/route.tsx @@ -144,7 +144,7 @@ const BookDetail = () => { }, { icon: , - title: '書籍編集', + title: '書籍更新', href: `/home/books/${bookResponse.data.id}/edit`, }, ] From dc0101a9cfb340c92d11453c8ceac477e63b98a6 Mon Sep 17 00:00:00 2001 From: Kosei805 Date: Sat, 23 Nov 2024 20:54:35 +0900 Subject: [PATCH 08/15] fix: book edit page breadcrumbs icon --- frontend/app/routes/home.books.$bookId/route.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/frontend/app/routes/home.books.$bookId/route.tsx b/frontend/app/routes/home.books.$bookId/route.tsx index 9f7226be..67c50af4 100644 --- a/frontend/app/routes/home.books.$bookId/route.tsx +++ b/frontend/app/routes/home.books.$bookId/route.tsx @@ -7,15 +7,14 @@ import { json, redirect } from '@remix-run/cloudflare'; import { Outlet, useLoaderData, useLocation } from '@remix-run/react'; import type { getBookResponse, getLoansResponse } from 'client/client'; import { deleteBook, getBook, getLoans } from 'client/client'; -import { commitSession, getSession } from '~/services/session.server'; - import { Book } from 'client/client.schemas'; import { FaBook } from 'react-icons/fa6'; -import { GiNotebook } from 'react-icons/gi'; import { LuBookCopy } from 'react-icons/lu'; +import { TbBookUpload } from 'react-icons/tb'; import BookDetailActionPanel from '~/components/book-detail/BookDetailActionPanel'; import BreadCrumbsComponent from '~/components/common/breadcrumbs/BreadCrumbsComponent'; import ErrorComponent from '~/components/common/error/ErrorComponent'; +import { commitSession, getSession } from '~/services/session.server'; import { ActionResponse } from '~/types/response'; import { makeCookieHeader } from '~/utils/session'; @@ -143,7 +142,7 @@ const BookDetail = () => { href: `/home/books/${bookResponse.data.id}`, }, { - icon: , + icon: , title: '書籍更新', href: `/home/books/${bookResponse.data.id}/edit`, }, From 5fa667d3b5fecc5b279456d8c8757c30ef7a5540 Mon Sep 17 00:00:00 2001 From: Kosei805 Date: Sat, 23 Nov 2024 20:56:46 +0900 Subject: [PATCH 09/15] fix: lint run --- frontend/app/components/cart/CartListComponent.tsx | 1 - .../app/components/common/breadcrumbs/BreadCrumbsComponent.tsx | 2 +- frontend/app/components/me-edit/MyPageEditComponent.tsx | 1 - 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/frontend/app/components/cart/CartListComponent.tsx b/frontend/app/components/cart/CartListComponent.tsx index baa37c52..d79b261a 100644 --- a/frontend/app/components/cart/CartListComponent.tsx +++ b/frontend/app/components/cart/CartListComponent.tsx @@ -6,7 +6,6 @@ import CartSelectedDialog from './CartSelectedDialog'; import CartTitle from './CartTitle'; import NoCartComponent from './NoCartComponent'; import BreadCrumbsComponent from '../common/breadcrumbs/BreadCrumbsComponent'; -import { userAtom } from '~/stores/userAtom'; import { FaUser } from 'react-icons/fa'; import { LuShoppingCart } from 'react-icons/lu'; diff --git a/frontend/app/components/common/breadcrumbs/BreadCrumbsComponent.tsx b/frontend/app/components/common/breadcrumbs/BreadCrumbsComponent.tsx index beb8eab8..f996c16f 100644 --- a/frontend/app/components/common/breadcrumbs/BreadCrumbsComponent.tsx +++ b/frontend/app/components/common/breadcrumbs/BreadCrumbsComponent.tsx @@ -1,4 +1,4 @@ -import { Anchor, Breadcrumbs, Group, Text } from '@mantine/core'; +import { Anchor, Breadcrumbs, Group } from '@mantine/core'; import React from 'react'; interface AnchorProps { diff --git a/frontend/app/components/me-edit/MyPageEditComponent.tsx b/frontend/app/components/me-edit/MyPageEditComponent.tsx index 52ac05df..f49d90ff 100644 --- a/frontend/app/components/me-edit/MyPageEditComponent.tsx +++ b/frontend/app/components/me-edit/MyPageEditComponent.tsx @@ -7,7 +7,6 @@ import MyPageEditPasswordFieldSet from './MyPageEditPasswordFieldSet'; import FormLayout from '../layouts/FormLayout'; import MyPageEditSubmitButton from './MyPageEditSubmitButton'; import BreadCrumbsComponent from '../common/breadcrumbs/BreadCrumbsComponent'; -import { GiNotebook } from 'react-icons/gi'; import { FaUser, FaUserEdit } from 'react-icons/fa'; interface MyPageEditComponentProps { From a3866b8a089d24d800292f422ae50a916125d10b Mon Sep 17 00:00:00 2001 From: shunsei Date: Mon, 2 Dec 2024 13:25:32 +0900 Subject: [PATCH 10/15] Fix breadcrumbs test name spell (#67) --- frontend/test/routes/home._index/route.test.tsx | 2 +- frontend/test/routes/home.books.bookId/route.test.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/test/routes/home._index/route.test.tsx b/frontend/test/routes/home._index/route.test.tsx index 3dd5695c..6e5a0236 100644 --- a/frontend/test/routes/home._index/route.test.tsx +++ b/frontend/test/routes/home._index/route.test.tsx @@ -183,7 +183,7 @@ describe('Book List Page', () => { }); }); - describe('BreadCrumbs', () => { + describe('Breadcrumbs', () => { it('should navigate to home page when clicked', async () => { const { user } = customRender( , diff --git a/frontend/test/routes/home.books.bookId/route.test.tsx b/frontend/test/routes/home.books.bookId/route.test.tsx index 933be7bb..41921c07 100644 --- a/frontend/test/routes/home.books.bookId/route.test.tsx +++ b/frontend/test/routes/home.books.bookId/route.test.tsx @@ -1,5 +1,6 @@ import type * as remixrunCloudflare from '@remix-run/cloudflare'; import { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/cloudflare'; +import type * as remixrunReact from '@remix-run/react'; import { createRemixStub } from '@remix-run/testing'; import { screen, waitFor } from '@testing-library/react'; import { customRender } from 'test/helpers/wrapper'; @@ -13,7 +14,6 @@ import BookDetail, { loader as rootLoader, } from '~/routes/home.books.$bookId/route'; import { redirect } from '../../mocks/@remix-run/cloudflare'; -import type * as remixrunReact from '@remix-run/react'; vi.mock('@remix-run/cloudflare', async (importOriginal) => { const actual = await importOriginal(); @@ -165,7 +165,7 @@ describe('Book Detail Page', () => { // TODO: ログイン状態で借りている人がいる場合 }); - describe('BreadCrumbs', () => { + describe('Breadcrumbs', () => { it('should navigate to home page when clicked', async () => { const { user } = customRender( , From c2151cb5125f5c9a803394650fe9be87d6d4ac91 Mon Sep 17 00:00:00 2001 From: shunsei Date: Tue, 3 Dec 2024 06:04:51 +0900 Subject: [PATCH 11/15] Remove unused navigate Mock (#67) --- .../test/routes/home.books.bookId/route.test.tsx | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/frontend/test/routes/home.books.bookId/route.test.tsx b/frontend/test/routes/home.books.bookId/route.test.tsx index 41921c07..5901e714 100644 --- a/frontend/test/routes/home.books.bookId/route.test.tsx +++ b/frontend/test/routes/home.books.bookId/route.test.tsx @@ -1,6 +1,5 @@ import type * as remixrunCloudflare from '@remix-run/cloudflare'; import { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/cloudflare'; -import type * as remixrunReact from '@remix-run/react'; import { createRemixStub } from '@remix-run/testing'; import { screen, waitFor } from '@testing-library/react'; import { customRender } from 'test/helpers/wrapper'; @@ -25,20 +24,6 @@ vi.mock('@remix-run/cloudflare', async (importOriginal) => { }; }); -const { navigateMock } = vi.hoisted(() => { - return { - navigateMock: vi.fn(), - }; -}); - -vi.mock('@remix-run/react', async (importOriginal) => { - const actual = await importOriginal(); - return { - ...actual, - useNavigate: () => navigateMock, - }; -}); - const BookDetailStub = createRemixStub([ { path: '/home/books/:bookId', From 0780810c2f9ab6dd9368828d1de20fdd07f1c5a3 Mon Sep 17 00:00:00 2001 From: shunsei Date: Sun, 8 Dec 2024 15:10:54 +0900 Subject: [PATCH 12/15] Remove mypage from cart list breadcrumbs (#67) --- frontend/app/components/cart/CartListComponent.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/frontend/app/components/cart/CartListComponent.tsx b/frontend/app/components/cart/CartListComponent.tsx index d79b261a..a62217fd 100644 --- a/frontend/app/components/cart/CartListComponent.tsx +++ b/frontend/app/components/cart/CartListComponent.tsx @@ -1,13 +1,12 @@ import { Stack } from '@mantine/core'; import { useAtom } from 'jotai'; +import { LuShoppingCart } from 'react-icons/lu'; import { cartAtom } from '~/stores/cartAtom'; +import BreadCrumbsComponent from '../common/breadcrumbs/BreadCrumbsComponent'; import CartCards from './CartCards'; import CartSelectedDialog from './CartSelectedDialog'; import CartTitle from './CartTitle'; import NoCartComponent from './NoCartComponent'; -import BreadCrumbsComponent from '../common/breadcrumbs/BreadCrumbsComponent'; -import { FaUser } from 'react-icons/fa'; -import { LuShoppingCart } from 'react-icons/lu'; const CartListComponent = () => { const [cart] = useAtom(cartAtom); @@ -15,7 +14,6 @@ const CartListComponent = () => { , title: 'マイページ', href: '/home/me' }, { icon: , title: '貸出カート', href: '/home/cart' }, ]} /> From 3c9ade64abec42e2c089af5398565a0537480d6a Mon Sep 17 00:00:00 2001 From: shunsei Date: Sun, 8 Dec 2024 15:18:37 +0900 Subject: [PATCH 13/15] Add y-margin to breadcrumbs component (#67) --- .../app/components/common/breadcrumbs/BreadCrumbsComponent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/app/components/common/breadcrumbs/BreadCrumbsComponent.tsx b/frontend/app/components/common/breadcrumbs/BreadCrumbsComponent.tsx index f996c16f..e32c9e69 100644 --- a/frontend/app/components/common/breadcrumbs/BreadCrumbsComponent.tsx +++ b/frontend/app/components/common/breadcrumbs/BreadCrumbsComponent.tsx @@ -13,7 +13,7 @@ interface BreadCrumbsComponentProps { const BreadCrumbsComponent = ({ anchors }: BreadCrumbsComponentProps) => { return ( - + {anchors.map((item, index) => ( From 2f86ad66353638b60859407ac33c12906c2c3302 Mon Sep 17 00:00:00 2001 From: shunsei Date: Mon, 16 Dec 2024 20:55:47 +0900 Subject: [PATCH 14/15] Adjust space between avator & email (#67) --- frontend/app/components/me/MyPageComponent.tsx | 8 ++++---- frontend/app/components/me/MyProfileComponent.tsx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/app/components/me/MyPageComponent.tsx b/frontend/app/components/me/MyPageComponent.tsx index 422efa29..a8def4b1 100644 --- a/frontend/app/components/me/MyPageComponent.tsx +++ b/frontend/app/components/me/MyPageComponent.tsx @@ -2,11 +2,11 @@ import { Stack } from '@mantine/core'; import { SerializeFrom } from '@remix-run/cloudflare'; import { getLoansResponse } from 'client/client'; import { User } from 'client/client.schemas'; +import { FaUser } from 'react-icons/fa'; import { PaginationProps } from '~/types/pagination'; -import MyLoansListComponent from './MyLoansListComponent'; -import MyProfileDataComponent from './MyProfileComponent'; import BreadCrumbsComponent from '../common/breadcrumbs/BreadCrumbsComponent'; -import { FaUser } from 'react-icons/fa'; +import MyLoansListComponent from './MyLoansListComponent'; +import MyProfileComponent from './MyProfileComponent'; interface MyPageComponentProps { user: User; @@ -24,7 +24,7 @@ const MyPageComponent = ({ , title: 'マイページ', href: '/home/me' }]} /> - + { return (
- + {name} From 483bdbe7028f6abe0af208bf4bf25cbe4d85cb3b Mon Sep 17 00:00:00 2001 From: shunsei Date: Mon, 16 Dec 2024 20:56:25 +0900 Subject: [PATCH 15/15] Truncate book title in breadcrumbs (#67) --- .../components/common/breadcrumbs/BreadCrumbsComponent.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/app/components/common/breadcrumbs/BreadCrumbsComponent.tsx b/frontend/app/components/common/breadcrumbs/BreadCrumbsComponent.tsx index e32c9e69..cdec91d5 100644 --- a/frontend/app/components/common/breadcrumbs/BreadCrumbsComponent.tsx +++ b/frontend/app/components/common/breadcrumbs/BreadCrumbsComponent.tsx @@ -1,4 +1,4 @@ -import { Anchor, Breadcrumbs, Group } from '@mantine/core'; +import { Anchor, Breadcrumbs, Group, Text } from '@mantine/core'; import React from 'react'; interface AnchorProps { @@ -18,7 +18,9 @@ const BreadCrumbsComponent = ({ anchors }: BreadCrumbsComponentProps) => { {item.icon} - {item.title} + + {item.title} + ))}