Merge pull request #449 from npocccties/feat-option-submit-with-link

feat: ブック作成編集時に提供もおこなうオプション
npocccties · Jun 28, 2021 · 88e2a3b · 88e2a3b · vercel · Jun 28, 2021
2 parents e982054 + fa041bc
commit 88e2a3b
Show file tree

Hide file tree

Showing 12 changed files with 140 additions and 49 deletions.
diff --git a/components/organisms/BookForm.stories.tsx b/components/organisms/BookForm.stories.tsx
@@ -6,3 +6,5 @@ export default { title: "organisms/BookForm" };
 const defaultProps = { book, onSubmit: console.log };
 
 export const Default = () => <BookForm {...defaultProps} />;
+
+export const Update = () => <BookForm variant="update" {...defaultProps} />;
diff --git a/components/organisms/BookForm.tsx b/components/organisms/BookForm.tsx
@@ -1,5 +1,6 @@
 import Card from "@material-ui/core/Card";
 import Checkbox from "@material-ui/core/Checkbox";
+import Divider from "@material-ui/core/Divider";
 import Button from "@material-ui/core/Button";
 import InputLabel from "@material-ui/core/InputLabel";
 import MenuItem from "@material-ui/core/MenuItem";
@@ -12,7 +13,8 @@ import TextField from "$atoms/TextField";
 import useCardStyles from "styles/card";
 import useInputLabelStyles from "styles/inputLabel";
 import gray from "theme/colors/gray";
-import { BookProps, BookSchema } from "$server/models/book";
+import type { BookSchema } from "$server/models/book";
+import type { BookPropsWithSubmitOptions } from "$types/bookPropsWithSubmitOptions";
 import languages from "$utils/languages";
 
 const useStyles = makeStyles((theme) => ({
@@ -25,35 +27,58 @@ const useStyles = makeStyles((theme) => ({
     marginLeft: theme.spacing(0.75),
     color: gray[600],
   },
+  divider: {
+    margin: theme.spacing(0, -3, 0),
+  },
+  submitOption: {
+    display: "flex",
+    alignItems: "center",
+  },
 }));
 
+const label = {
+  create: {
+    submit: "作成",
+    submitWithLink: "作成したブックを提供",
+  },
+  update: {
+    submit: "更新",
+    submitWithLink: "更新したブックを提供",
+  },
+} as const;
+
 type Props = {
   book?: BookSchema;
   id?: string;
   className?: string;
-  submitLabel?: string;
-  onSubmit?: (book: BookProps) => void;
+  variant?: "create" | "update";
+  onSubmit?: (book: BookPropsWithSubmitOptions) => void;
 };
 
 export default function BookForm(props: Props) {
   const {
     book,
     className,
     id,
-    submitLabel = "更新",
+    variant = "create",
     onSubmit = () => undefined,
   } = props;
   const cardClasses = useCardStyles();
   const inputLabelClasses = useInputLabelStyles();
   const classes = useStyles();
-  const defaultValues: BookProps = {
+  const defaultValues: BookPropsWithSubmitOptions = {
     name: book?.name ?? "",
     description: book?.description ?? "",
     shared: Boolean(book?.shared),
     language: book?.language ?? Object.getOwnPropertyNames(languages)[0],
     sections: book?.sections,
+    submitWithLink: false,
   };
-  const { handleSubmit, register, control } = useForm<BookProps>({
+  const {
+    handleSubmit,
+    register,
+    control,
+  } = useForm<BookPropsWithSubmitOptions>({
     defaultValues,
   });
 
@@ -63,7 +88,7 @@ export default function BookForm(props: Props) {
       className={clsx(classes.margin, className)}
       id={id}
       component="form"
-      onSubmit={handleSubmit((values: BookProps) => {
+      onSubmit={handleSubmit((values: BookPropsWithSubmitOptions) => {
         onSubmit({ ...defaultValues, ...values });
       })}
     >
@@ -136,8 +161,21 @@ export default function BookForm(props: Props) {
         name="description"
         inputRef={register}
       />
+      <Divider className={classes.divider} />
+      <div className={classes.submitOption}>
+        <Checkbox
+          id="submit-with-link"
+          name="submitWithLink"
+          inputRef={register}
+          defaultChecked={defaultValues.submitWithLink}
+          color="primary"
+        />
+        <InputLabel classes={inputLabelClasses} htmlFor="submit-with-link">
+          {label[variant].submitWithLink}
+        </InputLabel>
+      </div>
       <Button variant="contained" color="primary" type="submit">
-        {submitLabel}
+        {label[variant].submit}
       </Button>
     </Card>
   );

diff --git a/components/organisms/TopicForm.stories.tsx b/components/organisms/TopicForm.stories.tsx
@@ -35,3 +35,16 @@ export const Default = () => {
     />
   );
 };
+
+export const Update = () => {
+  const { addVideoTrack, deleteVideoTrack } = useVideoTrackAtom();
+  return (
+    <TopicForm
+      topic={topic}
+      variant="update"
+      onSubtitleDelete={({ id }) => deleteVideoTrack(id)}
+      onSubtitleSubmit={handleSubtitleSubmit(addVideoTrack)}
+      {...handlers}
+    />
+  );
+};
diff --git a/components/organisms/TopicForm.tsx b/components/organisms/TopicForm.tsx
@@ -1,6 +1,7 @@
 import { ChangeEvent, useCallback, useState } from "react";
 import Card from "@material-ui/core/Card";
 import Checkbox from "@material-ui/core/Checkbox";
+import Divider from "@material-ui/core/Divider";
 import Button from "@material-ui/core/Button";
 import InputLabel from "@material-ui/core/InputLabel";
 import MenuItem from "@material-ui/core/MenuItem";
@@ -38,6 +39,9 @@ const useStyles = makeStyles((theme) => ({
     marginLeft: theme.spacing(0.75),
     color: gray[600],
   },
+  divider: {
+    margin: theme.spacing(0, -3, 0),
+  },
   subtitles: {
     marginTop: theme.spacing(2),
     marginBottom: theme.spacing(1),
@@ -48,10 +52,15 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
+const label = {
+  create: "作成",
+  update: "更新",
+} as const;
+
 type Props = {
   topic?: TopicSchema;
   className?: string;
-  submitLabel?: string;
+  variant?: "create" | "update";
   onSubmit?(topic: TopicProps): void;
   onSubtitleSubmit(videoTrack: VideoTrackProps): void;
   onSubtitleDelete(videoTrack: VideoTrackSchema): void;
@@ -61,7 +70,7 @@ export default function TopicForm(props: Props) {
   const {
     topic,
     className,
-    submitLabel = "更新",
+    variant = "create",
     onSubmit = () => undefined,
     onSubtitleSubmit,
     onSubtitleDelete,
@@ -260,8 +269,9 @@ export default function TopicForm(props: Props) {
           name="description"
           inputRef={register}
         />
+        <Divider className={classes.divider} />
         <Button variant="contained" color="primary" type="submit">
-          {submitLabel}
+          {label[variant]}
         </Button>
       </Card>
 

diff --git a/components/templates/BookEdit.tsx b/components/templates/BookEdit.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import Typography from "@material-ui/core/Typography";
 import Container from "@material-ui/core/Container";
 import Button from "@material-ui/core/Button";
@@ -9,9 +8,9 @@ import BookForm from "$organisms/BookForm";
 import TopicPreviewDialog from "$organisms/TopicPreviewDialog";
 import RequiredDot from "$atoms/RequiredDot";
 import BackButton from "$atoms/BackButton";
-import CollapsibleContent from "$organisms/CollapsibleContent";
 import useContainerStyles from "styles/container";
-import { BookProps, BookSchema } from "$server/models/book";
+import type { BookSchema } from "$server/models/book";
+import type { BookPropsWithSubmitOptions } from "$types/bookPropsWithSubmitOptions";
 import { SectionProps } from "$server/models/book/section";
 import { TopicSchema } from "$server/models/topic";
 import { useConfirm } from "material-ui-confirm";
@@ -20,14 +19,14 @@ import useDialogProps from "$utils/useDialogProps";
 const useStyles = makeStyles((theme) => ({
   container: {
     marginTop: theme.spacing(1),
-    "& > :not($title):not($form)": {
+    "& > :not($title):not($content)": {
       marginBottom: theme.spacing(2),
     },
   },
   title: {
     marginBottom: theme.spacing(4),
   },
-  form: {
+  content: {
     marginBottom: theme.spacing(4),
   },
   subtitle: {
@@ -44,7 +43,7 @@ const useStyles = makeStyles((theme) => ({
 
 type Props = {
   book: BookSchema;
-  onSubmit(book: BookProps): void;
+  onSubmit(book: BookPropsWithSubmitOptions): void;
   onDelete(book: BookSchema): void;
   onCancel(): void;
   onSectionsUpdate(sections: SectionProps[]): void;
@@ -71,8 +70,6 @@ export default function BookEdit(props: Props) {
   const classes = useStyles();
   const containerClasses = useContainerStyles();
   const confirm = useConfirm();
-  const [expanded, setExpanded] = useState(false);
-  const handleCollapsibleContentClick = () => setExpanded(!expanded);
   const {
     data: previewTopic,
     dispatch: setPreviewTopic,
@@ -99,31 +96,11 @@ export default function BookEdit(props: Props) {
       <Typography className={classes.title} variant="h4">
         ブック「{book.name}」の編集
       </Typography>
-      <CollapsibleContent
-        expanded={expanded}
-        aria-controls="book-form"
-        onCollapsibleContentClick={handleCollapsibleContentClick}
-        label={
-          <Typography className={classes.subtitle} variant="h5">
-            基本情報
-            <Typography variant="caption" component="span" aria-hidden="true">
-              <RequiredDot />
-              は必須項目です
-            </Typography>
-          </Typography>
-        }
-      >
-        <BookForm
-          id="book-form"
-          className={classes.form}
-          book={book}
-          onSubmit={onSubmit}
-        />
-      </CollapsibleContent>
       <Typography className={classes.subtitle} variant="h5">
         トピック
       </Typography>
       <BookEditChildren
+        className={classes.content}
         sections={book.sections}
         onTopicPreviewClick={handleTopicPreviewClick}
         onTopicEditClick={onTopicEditClick}
@@ -133,6 +110,19 @@ export default function BookEdit(props: Props) {
         onSectionsUpdate={onSectionsUpdate}
         isTopicEditable={isTopicEditable}
       />
+      <Typography className={classes.subtitle} variant="h5">
+        基本情報
+        <Typography variant="caption" component="span" aria-hidden="true">
+          <RequiredDot />
+          は必須項目です
+        </Typography>
+      </Typography>
+      <BookForm
+        className={classes.content}
+        book={book}
+        variant="update"
+        onSubmit={onSubmit}
+      />
       <Button size="small" color="primary" onClick={handleDeleteButtonClick}>
         <DeleteOutlinedIcon />
         ブックを削除

diff --git a/components/templates/BookNew.tsx b/components/templates/BookNew.tsx
@@ -6,7 +6,8 @@ import BookForm from "$organisms/BookForm";
 import RequiredDot from "$atoms/RequiredDot";
 import BackButton from "$atoms/BackButton";
 import useContainerStyles from "styles/container";
-import { BookProps, BookSchema } from "$server/models/book";
+import type { BookSchema } from "$server/models/book";
+import type { BookPropsWithSubmitOptions } from "$types/bookPropsWithSubmitOptions";
 import { useSessionAtom } from "$store/session";
 
 const useStyles = makeStyles((theme) => ({
@@ -32,7 +33,7 @@ const useStyles = makeStyles((theme) => ({
 
 type Props = {
   book?: BookSchema;
-  onSubmit: (book: BookProps) => void;
+  onSubmit: (book: BookPropsWithSubmitOptions) => void;
   onCancel(): void;
 };
 
@@ -66,7 +67,7 @@ export default function BookNew(props: Props) {
           {forkFrom.name} さんが作成したブックをフォークしようとしています
         </Alert>
       )}
-      <BookForm book={defaultBook} submitLabel="作成" onSubmit={onSubmit} />
+      <BookForm book={defaultBook} variant="create" onSubmit={onSubmit} />
     </Container>
   );
 }
diff --git a/components/templates/TopicEdit.tsx b/components/templates/TopicEdit.tsx
@@ -81,6 +81,7 @@ export default function TopicEdit(props: Props) {
       <TopicForm
         className={classes.form}
         topic={topic}
+        variant="update"
         onSubmit={onSubmit}
         onSubtitleDelete={onSubtitleDelete}
         onSubtitleSubmit={onSubtitleSubmit}

diff --git a/components/templates/TopicNew.tsx b/components/templates/TopicNew.tsx
@@ -80,7 +80,7 @@ export default function TopicNew(props: Props) {
       )}
       <TopicForm
         topic={defaultTopic}
-        submitLabel="作成"
+        variant="create"
         onSubmit={onSubmit}
         onSubtitleDelete={onSubtitleDelete}
         onSubtitleSubmit={onSubtitleSubmit}

diff --git a/pages/book/edit/index.tsx b/pages/book/edit/index.tsx
@@ -1,5 +1,6 @@
 import { useRouter } from "next/router";
-import type { BookProps, BookSchema } from "$server/models/book";
+import type { BookSchema } from "$server/models/book";
+import type { BookPropsWithSubmitOptions } from "$types/bookPropsWithSubmitOptions";
 import type { SectionProps } from "$server/models/book/section";
 import type { TopicSchema } from "$server/models/topic";
 import { useSessionAtom } from "$store/session";
@@ -8,6 +9,7 @@ import Placeholder from "$templates/Placeholder";
 import BookNotFoundProblem from "$organisms/TopicNotFoundProblem";
 import { destroyBook, updateBook, useBook } from "$utils/book";
 import { pagesPath } from "$utils/$path";
+import useBookLinkHandler from "$utils/useBookLinkHandler";
 
 export type Query = { bookId: BookSchema["id"]; context?: "books" };
 
@@ -16,6 +18,7 @@ function Edit({ bookId, context }: Query) {
   const { isBookEditable, isTopicEditable } = useSessionAtom();
   const { book, error } = useBook(bookId, isBookEditable, isTopicEditable);
   const router = useRouter();
+  const handleBookLink = useBookLinkHandler();
   const back = () => {
     switch (context) {
       case "books":
@@ -24,12 +27,16 @@ function Edit({ bookId, context }: Query) {
         return router.push(pagesPath.book.$url({ query }));
     }
   };
-  async function handleSubmit(props: BookProps) {
+  async function handleSubmit({
+    submitWithLink,
+    ...props
+  }: BookPropsWithSubmitOptions) {
     await updateBook({
       id: bookId,
       ...props,
       sections: props.sections?.filter((section) => section.topics.length > 0),
     });
+    if (submitWithLink) await handleBookLink({ id: bookId });
     return back();
   }
   async function handleDelete({ id }: Pick<BookSchema, "id">) {

diff --git a/types/bookPropsWithSubmitOptions.ts b/types/bookPropsWithSubmitOptions.ts
@@ -0,0 +1,5 @@
+import type { BookProps } from "$server/models/book";
+
+export type BookPropsWithSubmitOptions = BookProps & {
+  submitWithLink: boolean;
+};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,3 +6,5 @@ export default { title: "organisms/BookForm" };
		const defaultProps = { book, onSubmit: console.log };

		export const Default = () => <BookForm {...defaultProps} />;

		export const Update = () => <BookForm variant="update" {...defaultProps} />;