NavLocaleLinkコンポーネントをforwardRefでラップし、localeをヘッダーと新しいページボタンに追加 (#486)

web/app/components/NavLocaleLink.tsx

@@ -1,24 +1,21 @@
 import { NavLink, type NavLinkProps, useParams } from "@remix-run/react";
+import { forwardRef } from "react";
 
-// NavLinkProps を継承
+// NavLinkProps を継承しつつ、to を上書き
 type NavLocaleLinkProps = Omit<NavLinkProps, "to"> & {
 	to: string;
 };
 
-export function NavLocaleLink({
-	to,
-	className,
-	children,
-	...rest
-}: NavLocaleLinkProps) {
-	const { locale } = useParams();
+export const NavLocaleLink = forwardRef<HTMLAnchorElement, NavLocaleLinkProps>(
+	function NavLocaleLink({ to, className, children, ...rest }, ref) {
+		const { locale } = useParams();
+		const normalized = to.startsWith("/") ? to.slice(1) : to;
+		const path = `/${locale}/${normalized}`;
 
-	const normalized = to.startsWith("/") ? to.slice(1) : to;
-	const path = `/${locale}/${normalized}`;
-
-	return (
-		<NavLink to={path} className={className} {...rest}>
-			{children}
-		</NavLink>
-	);
-}
+		return (
+			<NavLink ref={ref} to={path} className={className} {...rest}>
+				{children}
+			</NavLink>
+		);
+	},
+);

web/app/root.tsx

@@ -162,15 +162,15 @@ function CommonLayout({
 	children,
 	isSpecialLayout = true,
 }: { children: React.ReactNode; isSpecialLayout: boolean }) {
-	const { currentUser } = useLoaderData<typeof loader>();
+	const { currentUser, locale } = useLoaderData<typeof loader>();
 
 	if (isSpecialLayout) {
 		return <>{children}</>;
 	}
 
 	return (
 		<>
-			<Header currentUser={currentUser} />
+			<Header currentUser={currentUser} locale={locale} />
 			<main className="mb-5 mt-3 md:mt-5 flex-grow tracking-wider">
 				<div className="mx-auto px-2 max-w-4xl">{children}</div>
 			</main>

web/app/routes/$locale+/user.$userName+/page+/$slug+/edit/_edit.tsx

@@ -15,7 +15,10 @@ import { useCallback, useEffect } from "react";
 import TextareaAutosize from "react-textarea-autosize";
 import { useDebouncedCallback } from "use-debounce";
 import { z } from "zod";
+import { getTranslateUserQueue } from "~/features/translate/translate-user-queue";
 import { authenticator } from "~/utils/auth.server";
+import { createUserAITranslationInfo } from "../functions/mutations.server";
+import { fetchPageWithSourceTexts } from "../functions/queries.server";
 import { EditHeader } from "./components/EditHeader";
 import { TagInput } from "./components/TagInput";
 import { Editor } from "./components/editor/Editor";
@@ -105,6 +108,45 @@ export async function action({ request, params }: ActionFunctionArgs) {
 	if (tags) {
 		await upsertTags(tags, page.id);
 	}
+
+	if (isPublishedBool) {
+		const geminiApiKey = process.env.GEMINI_API_KEY;
+		if (!geminiApiKey) {
+			throw new Error("GEMINI_API_KEY is not set");
+		}
+		let locale = params.locale;
+		if (locale === "en") {
+			locale = "ja";
+		} else {
+			locale = "en";
+		}
+		const userAITranslationInfo = await createUserAITranslationInfo(
+			currentUser.id,
+			page.id,
+			"gemini-1.5-flash-latest",
+			locale,
+		);
+
+		const pageWithSourceTexts = await fetchPageWithSourceTexts(page.id);
+		if (!pageWithSourceTexts) {
+			throw new Error("Page not found");
+		}
+		const numberedElements = pageWithSourceTexts.sourceTexts.map((item) => ({
+			number: item.number,
+			text: item.text,
+		}));
+		const queue = getTranslateUserQueue(currentUser.id);
+		await queue.add(`translate-${currentUser.id}`, {
+			userAITranslationInfoId: userAITranslationInfo.id,
+			geminiApiKey: geminiApiKey,
+			aiModel: "gemini-1.5-flash-latest",
+			userId: currentUser.id,
+			pageId: page.id,
+			locale: locale,
+			title: title,
+			numberedElements: numberedElements,
+		});
+	}
 	return null;
 }
 

web/app/routes/$locale+/user.$userName+/page+/$slug+/index.tsx

@@ -22,6 +22,7 @@ import {
 import { actionSchema } from "./types";
 import { getBestTranslation } from "./utils/getBestTranslation";
 import { stripHtmlTags } from "./utils/stripHtmlTags";
+
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
 	if (!data) {
 		return [{ title: "Page Not Found" }];

web/app/routes/resources+/components/NewPageButton.tsx

@@ -16,9 +16,10 @@ const generateSlug = (length = 8): string => {
 };
 interface NewPageButtonProps {
 	userName: string;
+	locale: string;
 }
 
-export const NewPageButton = ({ userName }: NewPageButtonProps) => {
+export const NewPageButton = ({ userName, locale }: NewPageButtonProps) => {
 	const navigate = useNavigate();
 	const [isLoading, setIsLoading] = useState(false);
 
@@ -29,7 +30,7 @@ export const NewPageButton = ({ userName }: NewPageButtonProps) => {
 	const handleNewPage = () => {
 		setIsLoading(true);
 		const newSlug = generateSlug();
-		navigate(`/user/${userName}/page/${newSlug}/edit`);
+		navigate(`/${locale}/user/${userName}/page/${newSlug}/edit`);
 	};
 
 	return (

web/app/routes/resources+/header.tsx

@@ -11,6 +11,7 @@ import { NewPageButton } from "./components/NewPageButton";
 
 interface HeaderProps {
 	currentUser: SanitizedUser | null;
+	locale: string;
 }
 
 export async function action({ request }: ActionFunctionArgs) {
@@ -34,7 +35,7 @@ export async function action({ request }: ActionFunctionArgs) {
 	return data({ error: "Invalid intent" }, { status: 400 });
 }
 
-export function Header({ currentUser }: HeaderProps) {
+export function Header({ currentUser, locale }: HeaderProps) {
 	const rightExtra = (
 		<>
 			<NavLocaleLink
@@ -48,7 +49,7 @@ export function Header({ currentUser }: HeaderProps) {
 				<Search className="w-6 h-6 " />
 			</NavLocaleLink>
 			{currentUser ? (
-				<NewPageButton userName={currentUser.userName} />
+				<NewPageButton userName={currentUser.userName} locale={locale} />
 			) : (
 				<StartButton />
 			)}