Merge pull request #916 from npocccties/feat-release-page

feat: リリース画面の実装

components/organisms/BookForm.tsx

@@ -115,6 +115,7 @@ type Props = {
   onSubmit?: (book: BookPropsWithSubmitOptions) => void;
   onAuthorsUpdate(authors: AuthorSchema[]): void;
   onAuthorSubmit(author: Pick<AuthorSchema, "email">): void;
+  onReleaseButtonClick?: () => void;
 };
 
 export default function BookForm({
@@ -127,6 +128,7 @@ export default function BookForm({
   onSubmit = () => undefined,
   onAuthorsUpdate,
   onAuthorSubmit,
+  onReleaseButtonClick,
 }: Props) {
   const cardClasses = useCardStyles();
   const classes = useStyles();
@@ -346,6 +348,15 @@ export default function BookForm({
           }
         />
       )}
+      {variant !== "create" && typeof onReleaseButtonClick !== "undefined" && (
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={onReleaseButtonClick}
+        >
+          リリース
+        </Button>
+      )}
     </Card>
   );
 }

components/templates/BookEdit.tsx

@@ -54,6 +54,7 @@ type Props = {
   onBookImportClick(): void;
   onAuthorsUpdate(authors: AuthorSchema[]): void;
   onAuthorSubmit(author: Pick<AuthorSchema, "email">): void;
+  onReleaseButtonClick(): void;
   isContentEditable?: IsContentEditable;
   linked?: boolean;
 };
@@ -70,6 +71,7 @@ export default function BookEdit({
   onBookImportClick,
   onAuthorsUpdate,
   onAuthorSubmit,
+  onReleaseButtonClick,
   isContentEditable,
   linked = false,
 }: Props) {
@@ -126,6 +128,7 @@ export default function BookEdit({
         onSubmit={onSubmit}
         onAuthorsUpdate={onAuthorsUpdate}
         onAuthorSubmit={onAuthorSubmit}
+        onReleaseButtonClick={onReleaseButtonClick}
       />
       <Button size="small" color="primary" onClick={handleDeleteButtonClick}>
         <DeleteOutlinedIcon />

components/templates/ReleaseEdit.tsx

@@ -1,15 +1,16 @@
 import Typography from "@mui/material/Typography";
 import Container from "$atoms/Container";
 import type { BookSchema } from "$server/models/book";
-import ReleaseForm, { type ReleaseFormProps } from "$organisms/ReleaseForm";
+import ReleaseForm from "$organisms/ReleaseForm";
 import Card from "$atoms/Card";
 import DescriptionList from "$atoms/DescriptionList";
 import getLocaleDateString from "$utils/getLocaleDateString";
+import type { ReleaseProps } from "$server/models/book/release";
 
-type Props = ReleaseFormProps & {
-  book: Pick<BookSchema, "name" | "release">;
+type Props = {
+  book: BookSchema;
   parentBook?: Pick<BookSchema, "id" | "name" | "release">;
-  onDeleteButtonClick(book: Pick<BookSchema, "id">): void;
+  onSubmit(release: ReleaseProps): void;
 };
 
 type ParentBookProps = Partial<Props["parentBook"]>;

pages/book/edit/index.tsx

@@ -12,6 +12,9 @@ import { destroyBook, updateBook, useBook } from "$utils/book";
 import { pagesPath } from "$utils/$path";
 import useBookLinkHandler from "$utils/useBookLinkHandler";
 import useAuthorsHandler from "$utils/useAuthorsHandler";
+import ReleasedBook from "$templates/ReleasedBook";
+import useDialogProps from "$utils/useDialogProps";
+import TopicPreviewDialog from "$organisms/TopicPreviewDialog";
 
 export type Query = {
   bookId: BookSchema["id"];
@@ -84,6 +87,16 @@ function Edit({ bookId, context }: Query) {
   function handleTopicImportClick() {
     return router.push(pagesPath.book.topic.import.$url({ query }));
   }
+  async function handleReleaseButtonClick() {
+    return router.push(pagesPath.book.release.$url({ query }));
+  }
+  const {
+    data: previewTopic,
+    dispatch: setPreviewTopic,
+    ...dialogProps
+  } = useDialogProps<TopicSchema>();
+  const handleTopicPreviewClick = (topic: TopicSchema) =>
+    setPreviewTopic(topic);
   const handlers = {
     linked: bookId === session?.ltiResourceLink?.bookId,
     onSubmit: handleSubmit,
@@ -96,12 +109,32 @@ function Edit({ bookId, context }: Query) {
     onTopicEditClick: handleTopicEditClick,
     onAuthorsUpdate: handleAuthorsUpdate,
     onAuthorSubmit: handleAuthorSubmit,
+    onReleaseButtonClick: handleReleaseButtonClick,
     isContentEditable: () => true,
   };
 
   if (error) return <BookNotFoundProblem />;
   if (!book) return <Placeholder />;
 
+  if (book.release) {
+    const handlers_for_releasedbook = {
+      onTopicPreview: handleTopicPreviewClick,
+      onForkButtonClick: () => {
+        console.log("fork button");
+      },
+      onReleaseEditButtonClick: handleReleaseButtonClick,
+      onDeleteButtonClick: handleDelete,
+    };
+    return (
+      <>
+        <ReleasedBook book={book} {...handlers_for_releasedbook} />;
+        {previewTopic && (
+          <TopicPreviewDialog {...dialogProps} topic={previewTopic} />
+        )}
+      </>
+    );
+  }
+
   return <BookEdit book={book} {...handlers} />;
 }
 

pages/book/release/index.tsx

@@ -0,0 +1,45 @@
+import { useRouter } from "next/router";
+import Placeholder from "$templates/Placeholder";
+import BookNotFoundProblem from "$templates/TopicNotFoundProblem";
+import { useSessionAtom } from "$store/session";
+import { releaseBook, useBook } from "$utils/book";
+import type { Query as BookEditQuery } from "../edit";
+import { pagesPath } from "$utils/$path";
+import ReleaseEdit from "$templates/ReleaseEdit";
+import type { ReleaseProps } from "$server/models/book/release";
+
+export type Query = BookEditQuery;
+
+function Release({ bookId, context }: Query) {
+  const { isContentEditable } = useSessionAtom();
+  const { book, error } = useBook(bookId, isContentEditable);
+  const router = useRouter();
+  const bookEditQuery = { bookId, ...(context && { context }) };
+  const back = () =>
+    router.push(pagesPath.book.edit.$url({ query: bookEditQuery }));
+  async function handleSubmit(release: ReleaseProps) {
+    if (!book) return;
+    await releaseBook({ id: bookId, ...release });
+    return back();
+  }
+  const handlers = {
+    onSubmit: handleSubmit,
+  };
+
+  if (error) return <BookNotFoundProblem />;
+  if (!book) return <Placeholder />;
+
+  return <ReleaseEdit book={book} {...handlers} />;
+}
+
+function Router() {
+  const router = useRouter();
+  const bookId = Number(router.query.bookId);
+  const { context }: Pick<Query, "context"> = router.query;
+
+  if (!Number.isFinite(bookId)) return <BookNotFoundProblem />;
+
+  return <Release bookId={bookId} context={context} />;
+}
+
+export default Router;

utils/book.ts

@@ -8,6 +8,7 @@ import type { IsContentEditable } from "$server/models/content";
 import { revalidateSession } from "./session";
 import type { LtiResourceLinkSchema } from "$server/models/ltiResourceLink";
 import { getDisplayableBook } from "./displayableBook";
+import type { ReleaseProps, ReleaseSchema } from "$server/models/book/release";
 
 const key = "/api/v2/book/{book_id}";
 
@@ -79,6 +80,14 @@ export async function updateBook({
   return res as BookSchema;
 }
 
+export async function releaseBook({
+  id,
+  ...body
+}: ReleaseProps & { id: BookSchema["id"] }): Promise<ReleaseSchema> {
+  const res = await api.apiV2BookBookIdReleasePut({ bookId: id, body });
+  return res as ReleaseSchema;
+}
+
 export async function addTopicToBook(
   book: BookSchema,
   topic: Pick<TopicSchema, "id">