diff --git a/workspaces/admin/src/pages/BookListPage/index.tsx b/workspaces/admin/src/pages/BookListPage/index.tsx index 1729a2deb..348f2dd5c 100644 --- a/workspaces/admin/src/pages/BookListPage/index.tsx +++ b/workspaces/admin/src/pages/BookListPage/index.tsx @@ -21,6 +21,8 @@ import { useFormik } from 'formik'; import { useId, useMemo, useState } from 'react'; import { create } from 'zustand'; +import type { GetBookResponse } from '@wsh-2024/schema/src/api/books/GetBookResponse'; + import { useBookList } from '../../features/books/hooks/useBookList'; import { isContains } from '../../lib/filter/isContains'; @@ -49,7 +51,7 @@ type BookModalState = } | { mode: typeof BookModalMode.Detail; - params: { bookId: string }; + params: { book: GetBookResponse }; } | { mode: typeof BookModalMode.Create; @@ -59,7 +61,7 @@ type BookModalState = type BookModalAction = { close: () => void; openCreate: () => void; - openDetail: (bookId: string) => void; + openDetail: (book: GetBookResponse) => void; }; export const BookListPage: React.FC = () => { @@ -119,8 +121,8 @@ export const BookListPage: React.FC = () => { openCreate() { set({ mode: BookModalMode.Create, params: {} }); }, - openDetail(bookId) { - set({ mode: BookModalMode.Detail, params: { bookId } }); + openDetail(book) { + set({ mode: BookModalMode.Detail, params: { book } }); }, }, })); @@ -218,7 +220,7 @@ export const BookListPage: React.FC = () => { {filteredBookList.map((book) => ( - @@ -243,7 +245,7 @@ export const BookListPage: React.FC = () => { {modalState.mode === BookModalMode.Detail ? ( - modalState.close()} /> + modalState.close()} /> ) : null} {modalState.mode === BookModalMode.Create ? modalState.close()} /> : null} diff --git a/workspaces/admin/src/pages/BookListPage/internal/BookDetailModal/index.tsx b/workspaces/admin/src/pages/BookListPage/internal/BookDetailModal/index.tsx index b2737a28f..7d5689765 100644 --- a/workspaces/admin/src/pages/BookListPage/internal/BookDetailModal/index.tsx +++ b/workspaces/admin/src/pages/BookListPage/internal/BookDetailModal/index.tsx @@ -19,21 +19,22 @@ import { import { Link } from '@tanstack/react-router'; import { useToggle } from '@uidotdev/usehooks'; -import { useBook } from '../../../../features/books/hooks/useBook'; +import type { GetBookResponse } from '@wsh-2024/schema/src/api/books/GetBookResponse'; + import { useEpisodeList } from '../../../../features/episodes/hooks/useEpisodeList'; import { BookDetailContent } from './BookDetailContent'; import { BookEditContent } from './BookEditContent'; type Props = { - bookId: string; + book: GetBookResponse; isOpen: boolean; onClose: () => void; }; -export const BookDetailModal: React.FC = ({ bookId, isOpen, onClose }) => { - const { data: episodeList } = useEpisodeList({ bookId }); - const { data: book } = useBook({ bookId }); +export const BookDetailModal: React.FC = ({ book, isOpen, onClose }) => { + const { data: episodeList } = useEpisodeList({ bookId: book.id }); + // const { data: book } = useBook({ bookId }); const [isEdit, toggleIEdit] = useToggle(false); @@ -75,7 +76,7 @@ export const BookDetailModal: React.FC = ({ bookId, isOpen, onClose }) => as={Link} colorScheme="teal" role="button" - to={`/admin/books/${bookId}/episodes/${episode.id}`} + to={`/admin/books/${book.id}/episodes/${episode.id}`} variant="solid" > 編集 @@ -107,7 +108,7 @@ export const BookDetailModal: React.FC = ({ bookId, isOpen, onClose }) => colorScheme="teal" mt={4} role="button" - to={`/admin/books/${bookId}/episodes/new`} + to={`/admin/books/${book.id}/episodes/new`} variant="solid" > エピソードを追加 diff --git a/workspaces/schema/src/api/books/GetBookListResponse.ts b/workspaces/schema/src/api/books/GetBookListResponse.ts index 4b52bfb21..0f4113757 100644 --- a/workspaces/schema/src/api/books/GetBookListResponse.ts +++ b/workspaces/schema/src/api/books/GetBookListResponse.ts @@ -25,7 +25,15 @@ export const GetBookListResponseSchema = createSelectSchema(book) }), episodes: createSelectSchema(episode) .pick({ + chapter: true, + description: true, id: true, + name: true, + }) + .extend({ + image: createSelectSchema(image).pick({ + id: true, + }), }) .array(), image: createSelectSchema(image).pick({