フォームデータの解析を改善し、ページIDのエラーメッセージを追加しました。また、ローディングインジケーターを更新しました。

ttizze · Feb 23, 2025 · 3a864fd · 3a864fd
1 parent e33d3f1
commit 3a864fd
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 15 deletions.
diff --git a/...src/app/[locale]/(edit-layout)/user/[handle]/page/[slug]/edit/components/header/action.ts b/...src/app/[locale]/(edit-layout)/user/[handle]/page/[slug]/edit/components/header/action.ts
@@ -8,7 +8,7 @@ import { redirect } from "next/navigation";
 import { z } from "zod";
 import { updatePageStatus } from "./db/mutations.server";
 import { handlePageTranslation } from "./lib/handle-page-translation";
-
+import { parseFormData } from "@/lib/parse-formdata";
 const editPageStatusSchema = z.object({
 	pageId: z.coerce.number().min(1),
 	status: z.enum(["DRAFT", "PUBLIC", "ARCHIVE"]),
@@ -26,10 +26,7 @@ export async function editPageStatusAction(
 	previousState: EditPageStatusActionState,
 	formData: FormData,
 ): Promise<EditPageStatusActionState> {
-	const parsedFormData = editPageStatusSchema.safeParse({
-		pageId: formData.get("pageId"),
-		status: formData.get("status"),
-	});
+	const parsedFormData = await parseFormData(editPageStatusSchema, formData);
 	if (!parsedFormData.success) {
 		return {
 			success: false,
@@ -54,7 +51,7 @@ export async function editPageStatusAction(
 				message: "Gemini API key is not set. Page will not be translated.",
 			};
 		}
-		await handlePageTranslation({
+		handlePageTranslation({
 			currentUserId: currentUser.id,
 			pageId: page.id,
 			sourceLocale: page.sourceLocale,

diff --git a/...src/app/[locale]/(edit-layout)/user/[handle]/page/[slug]/edit/components/header/index.tsx b/...src/app/[locale]/(edit-layout)/user/[handle]/page/[slug]/edit/components/header/index.tsx
@@ -63,7 +63,7 @@ export function EditHeader({
 					variant={initialStatus === "PUBLIC" ? "default" : "secondary"}
 					size="sm"
 					className="rounded-full flex items-center gap-2 px-4 py-2 transition-colors duration-400"
-					disabled={isPending}
+					disabled={isPending || !pageId}
 				>
 					{initialStatus === "PUBLIC" ? (
 						<Globe className="w-4 h-4" />
@@ -103,6 +103,9 @@ export function EditHeader({
 					{state.zodErrors?.status && (
 						<p className="text-sm text-red-500">{state.zodErrors.status}</p>
 					)}
+					{state.zodErrors?.pageId && (
+						<p className="text-sm text-red-500">{state.zodErrors.pageId}</p>
+					)}
 					{pageId && (
 						<>
 							<Separator />

diff --git a/...out)/user/[handle]/page/[slug]/edit/components/header/lib/handle-page-translation.test.ts b/...out)/user/[handle]/page/[slug]/edit/components/header/lib/handle-page-translation.test.ts
@@ -6,17 +6,13 @@ import {
 import { prisma } from "@/lib/prisma";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { hasExistingTranslation } from "../db/queries.server";
-
 import { handlePageTranslation } from "./handle-page-translation";
 // Mock all dependencies
-vi.mock("../db/queries.server");
-vi.mock(
-	"@/app/[locale]/(common-layout)/user/[handle]/page/[slug]/db/mutations.server",
-);
 vi.mock(
 	"@/app/[locale]/(common-layout)/user/[handle]/page/[slug]/db/queries.server",
 );
 vi.mock("@/app/[locale]/db/mutations.server");
+vi.mock("../db/queries.server");
 describe("handlePageTranslation", () => {
 	const mockParams = {
 		currentUserId: "user123",

diff --git a/next/src/app/[locale]/components/header/index.tsx b/next/src/app/[locale]/components/header/index.tsx
@@ -5,11 +5,12 @@ import dynamic from "next/dynamic";
 import { StartButton } from "../start-button";
 import { BaseHeaderLayout } from "./base-header-layout";
 import { NewPageButton } from "./new-page-button";
+import { Loader2 } from "lucide-react";
 
 const NotificationsDropdown = dynamic(
 	() => import("./notifications-dropdown").then((mod) => mod.default),
 	{
-		loading: () => <div>Loading...</div>,
+		loading: () => <Loader2 className="w-6 h-6 animate-spin" />,
 	},
 );
 export async function Header() {

diff --git a/next/src/lib/prisma.ts b/next/src/lib/prisma.ts
@@ -12,9 +12,12 @@ if (!connectionString) {
 	throw new Error("DATABASE_URL is not defined");
 }
 
-neonConfig.webSocketConstructor = WebSocket;
-neonConfig.poolQueryViaFetch = true;
+if (process.env.NODE_ENV !== "test") {
+	neonConfig.webSocketConstructor = WebSocket;
+	neonConfig.poolQueryViaFetch = true;
+}
 
+// ローカル開発環境用の設定
 const isDevelopment = process.env.NODE_ENV === "development";
 const isTest = process.env.NODE_ENV === "test";