Release to Production

src/app/stories/[storyId]/edit/_components/EditStorySwitchMode.tsx

@@ -0,0 +1,39 @@
+"use client";
+import { Device } from "@/common/util/device";
+import { EditStory } from "@/components/editStory";
+import { EditStoryYaml } from "@/components/editStoryYaml";
+import { Story, StoryInit } from "@/server/model/story";
+import { useSearchParams } from "next/navigation";
+
+export const EditStorySwitchMode = ({
+	story,
+	device,
+	onSubmit,
+}: {
+	story: Story;
+	device: Device;
+	onSubmit: (data: StoryInit) => Promise<void>;
+}) => {
+	const searchParams = useSearchParams();
+	const mode = searchParams?.get("mode");
+	if (mode === "yaml") {
+		return (
+			<EditStoryYaml
+				story={{
+					title: story.title,
+					id: story.id,
+				}}
+				onSubmit={onSubmit}
+			/>
+		);
+	} else {
+		return (
+			<EditStory
+				storyId={story.id}
+				story={story}
+				device={device}
+				onSubmit={onSubmit}
+			/>
+		);
+	}
+};

src/app/stories/[storyId]/edit/page.tsx

@@ -1,25 +1,22 @@
 import { getDevice } from "@/common/util/device";
-import { EditStory } from "@/components/editStory";
 import { getUserSession } from "@/server/serverComponent/getUserSession";
 import { getStory } from "@/server/services/story";
 import { updateStory } from "@/server/services/story/updateStory";
+import { Metadata } from "next";
 import { revalidateTag } from "next/cache";
 import { headers } from "next/headers";
 import { notFound } from "next/navigation";
+import { cache } from "react";
 import { z } from "zod";
+import { EditStorySwitchMode } from "./_components/EditStorySwitchMode";
 
-const paramsSchema = z.object({
-	storyId: z.string(),
-});
-
-export default async function StoryEditPage({ params }: { params: unknown }) {
-	const { storyId } = paramsSchema.parse(params);
+const getDataByRequest = cache(async (storyId: string) => {
 	const user = await getUserSession();
 	if (!user) {
 		notFound();
 	}
 	const story = await getStory({
-		storyId,
+		storyId: storyId,
 		filter: {
 			type: "withAuthorId",
 			authorId: user.userId,
@@ -28,11 +25,37 @@ export default async function StoryEditPage({ params }: { params: unknown }) {
 	if (!story) {
 		notFound();
 	}
+	return {
+		story,
+		user,
+	};
+});
+
+const paramsSchema = z.object({
+	storyId: z.string(),
+});
+
+export const generateMetadata = async ({
+	params,
+}: { params: unknown }): Promise<Metadata> => {
+	const parsed = paramsSchema.safeParse(params);
+	if (!parsed.success) {
+		notFound();
+	}
+	const { storyId } = parsed.data;
+	const { story } = await getDataByRequest(storyId);
+	return {
+		title: `編集 - ${story.title}`,
+	};
+};
+
+export default async function StoryEditPage({ params }: { params: unknown }) {
+	const { storyId } = paramsSchema.parse(params);
+	const { story, user } = await getDataByRequest(storyId);
 	const device = getDevice(headers().get("user-agent") || undefined);
 	return (
-		<EditStory
+		<EditStorySwitchMode
 			story={story}
-			storyId={storyId}
 			device={device}
 			onSubmit={async (input) => {
 				"use server";

src/app/stories/new/_components/NewStorySwitchMode.tsx

@@ -0,0 +1,22 @@
+"use client";
+import { type Device } from "@/common/util/device";
+import { NewStory } from "@/components/newStory";
+import { NewStoryYaml } from "@/components/newStoryYaml";
+import { StoryInit } from "@/server/model/story";
+import { useSearchParams } from "next/navigation";
+
+export const NewStorySwitchMode = ({
+	device,
+	createStory,
+}: {
+	device: Device;
+	createStory: (data: StoryInit) => Promise<string>;
+}) => {
+	const searchParams = useSearchParams();
+	const mode = searchParams?.get("mode");
+	if (mode === "yaml") {
+		return <NewStoryYaml createStory={createStory} />;
+	} else {
+		return <NewStory device={device} createStory={createStory} />;
+	}
+};

src/app/stories/new/page.tsx

@@ -1,9 +1,14 @@
-import { type Device, getDevice } from "@/common/util/device";
-import { NewStory } from "@/components/newStory";
+import { getDevice } from "@/common/util/device";
 import { getUserSession } from "@/server/serverComponent/getUserSession";
 import { createStory } from "@/server/services/story/createStory";
+import { Metadata } from "next";
 import { headers } from "next/headers";
 import { RedirectType, notFound, redirect } from "next/navigation";
+import { NewStorySwitchMode } from "./_components/NewStorySwitchMode";
+
+export const metadata: Metadata = {
+	title: "新しいストーリー",
+};
 
 export default async function NewStoryPage() {
 	const session = await getUserSession();
@@ -15,7 +20,7 @@ export default async function NewStoryPage() {
 	}
 	const device = getDevice(headers().get("user-agent") || undefined);
 	return (
-		<NewStory
+		<NewStorySwitchMode
 			device={device}
 			createStory={async (data) => {
 				"use server";

src/components/editStory/index.tsx

@@ -34,7 +34,7 @@ export const EditStory: React.FC<Props> = ({
 			<Heading level={1}>{story.title}</Heading>
 			{device === "desktop" && (
 				<div className={styles.navigation}>
-					<Link href={`/stories/${storyId}/edit/yaml`}>
+					<Link href={`/stories/${storyId}/edit?mode=yaml`}>
 						<GenericButton color={"zero"} size={"small"}>
 							<ButtonIconWrapper>
 								<AiOutlineUpload />

src/components/editStoryYaml/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { AnchorButton, GenericButton } from "@/designSystem/components/button";
 import { Heading } from "@/designSystem/components/heading";
-import type { StoryHead, StoryInit } from "@/server/model/story";
+import type { StoryInit } from "@/server/model/story";
 import { useMutation } from "@tanstack/react-query";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -11,26 +11,30 @@ import { YamlFileDrop } from "../storyYamlFileDrop";
 import styles from "./styles.module.scss";
 
 export const EditStoryYaml: React.FC<{
-	initialStory: StoryHead;
+	story: {
+		title: string;
+		id: string;
+	};
 	onSubmit: (data: StoryInit) => Promise<void>;
-}> = ({ initialStory, onSubmit }) => {
+}> = ({ story, onSubmit }) => {
 	const router = useRouter();
 	const { mutate, isIdle } = useMutation(onSubmit);
+	const storyId = story.id;
 
 	const handleFileRead = useCallback(
 		(story: StoryInit) => {
 			mutate(story, {
 				onSuccess: () => {
-					router.push(`/stories/${initialStory.id}`);
+					router.push(`/stories/${storyId}`);
 				},
 			});
 		},
-		[initialStory.id, mutate, router],
+		[storyId, mutate, router],
 	);
 
 	return (
 		<div className={styles.container}>
-			<Heading level={1}>{initialStory.title}</Heading>
+			<Heading level={1}>{story.title}</Heading>
 			<p>ストーリーをYAML形式で記述して編集できます。</p>
 			{isIdle ? (
 				<>
@@ -48,7 +52,7 @@ export const EditStoryYaml: React.FC<{
 						>
 							ストーリーの書き方
 						</AnchorButton>
-						<Link href={`/stories/${initialStory.id}`}>
+						<Link href={`/stories/${story.id}`}>
 							<GenericButton color="none" size="medium">
 								ストーリーに戻る
 							</GenericButton>

src/components/newStory/index.tsx

@@ -28,7 +28,7 @@ export const NewStory: React.FC<Props> = ({ device, createStory }) => {
 			<Heading level={1}>新しいストーリーを投稿</Heading>
 			{device === "desktop" && (
 				<div className={styles.navigation}>
-					<Link href={`/stories/new/yaml`}>
+					<Link href={`/stories/new?mode=yaml`}>
 						<GenericButton color={"zero"} size={"small"}>
 							<ButtonIconWrapper>
 								<AiOutlineUpload />