#428

frontend/src/pages/materials/MaterialNewPage.tsx

@@ -18,6 +18,7 @@ import { unlocalisedPath } from '@/lib/locales'
 import { materialsKeys } from '@/lib/queryKeys'
 import { inputClass } from '@/lib/utils'
 import { useValidationErrors } from '@/lib/useValidationErrors'
+import { useUITranslation } from '@/lib/useUITranslation'
 
 import type { FC } from 'react'
 
@@ -26,6 +27,7 @@ type MaterialFormField = 'tag' | 'file' | 'url' | 'exportPaths'
 
 const MaterialNewPage: FC = () => {
   const locale = useLocale ()
+  const { message, label } = useUITranslation ('materials')
   const qc = useQueryClient ()
   const location = useLocation ()
   const query = new URLSearchParams (location.search)
@@ -59,12 +61,12 @@ const MaterialNewPage: FC = () => {
       },
       onSuccess: async () => {
 	await qc.invalidateQueries ({ queryKey: materialsKeys.root })
-	toast ({ title: '送信成功!' })
+	toast ({ title: label ('sent') })
 	navigate (safeReturnTo || '/materials')
       },
       onError: error => {
 	applyValidationError (error)
-	toast ({ title: '送信失敗……', description: '入力を見直してください．' })
+	toast ({ title: label ('sendFailed'), description: label ('shared:messages.reviewInput') })
       }})
 
   const handleSubmit = () => {
@@ -75,15 +77,15 @@ const MaterialNewPage: FC = () => {
   return (
       <MainArea>
 	<Helmet>
-	  <title>{`素材追加 | ${ SITE_TITLE }`}</title>
+	  <title>{message ('newTitle').text} | {SITE_TITLE}</title>
 	</Helmet>
 
 	<Form>
-	  <PageTitle>素材追加</PageTitle>
+	  <PageTitle>{label ('newTitle')}</PageTitle>
 	  <FieldError messages={baseErrors}/>
 
 	  {/* タグ */}
-	   <FormField label="タグ" messages={fieldErrors.tag}>
+	   <FormField label={label ('navigation:tags')} messages={fieldErrors.tag}>
 	    {({ describedBy, invalid }) => (
 		<TagInput
 		    describedBy={describedBy}
@@ -93,7 +95,7 @@ const MaterialNewPage: FC = () => {
 	  </FormField>
 
 	  {/* ファイル */}
-	  <FormField label="ファイル" messages={fieldErrors.file}>
+	  <FormField label={label ('file')} messages={fieldErrors.file}>
 	    {({ describedBy, invalid }) => (
 		<>
 		  <input
@@ -110,7 +112,8 @@ const MaterialNewPage: FC = () => {
 		      (/image\/.*/.test (file.type) && (
 			  <img
 			      src={filePreview}
-			      alt="preview"
+			      alt={message ('preview').text}
+			      lang={message ('preview').language}
 			      className="mt-2 max-h-48 rounded border"/>))
 		      || (/video\/.*/.test (file.type) && (
 			  <video
@@ -124,13 +127,13 @@ const MaterialNewPage: FC = () => {
 			      className="mt-2 max-h-48"/>))
 		      || (
 			  <p className="text-red-600 dark:text-red-400">
-			    その形式のファイルには対応していません．
+			    {label ('unsupportedFile')}
 			  </p>))}
 		</>)}
 	  </FormField>
 
 	  {/* 参考 URL */}
-	  <FormField label="参考 URL" messages={fieldErrors.url}>
+	  <FormField label={label ('referenceUrl')} messages={fieldErrors.url}>
 	    {({ describedBy, invalid }) => (
 		<input
 		    type="url"
@@ -142,14 +145,15 @@ const MaterialNewPage: FC = () => {
 	  </FormField>
 
 	  <FormField
-	      label="ZIP 出力パス"
+	      label={label ('exportPath')}
 	      messages={fieldErrors.exportPaths}>
 	    {({ describedBy, invalid }) => (
 		<input
 		    type="text"
 		    value={exportPath}
 		    onChange={e => setExportPath (e.target.value)}
-		    placeholder="伊地知ニジカ/表情/泣き.png"
+		    placeholder={message ('exportPlaceholder').text}
+		    lang={message ('exportPlaceholder').language}
 		    aria-describedby={describedBy}
 		    aria-invalid={invalid}
 		    className={inputClass (invalid)}/>)}
@@ -160,7 +164,7 @@ const MaterialNewPage: FC = () => {
 	      onClick={handleSubmit}
 	      className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400"
 	      disabled={createMutation.isPending}>
-	    追加
+	    {label ('shared:actions.add')}
 	  </Button>
 	</Form>
       </MainArea>)