#90

backend/Gemfile

@@ -69,3 +69,5 @@ gem 'discard'
 gem "rspec-rails", "~> 8.0", :groups => [:development, :test]
 
 gem 'aws-sdk-s3', require: false
+
+gem 'rails-i18n', '~> 8.0.0'

backend/Gemfile.lock

@@ -306,6 +306,9 @@ GEM
     rails-html-sanitizer (1.6.2)
       loofah (~> 2.21)
       nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
+    rails-i18n (8.0.2)
+      i18n (>= 0.7, < 2)
+      railties (>= 8.0.0, < 9)
     railties (8.0.2)
       actionpack (= 8.0.2)
       activesupport (= 8.0.2)
@@ -477,6 +480,7 @@ DEPENDENCIES
   puma (>= 5.0)
   rack-cors
   rails (~> 8.0.2)
+  rails-i18n (~> 8.0.0)
   rspec-rails (~> 8.0)
   rubocop-rails-omakase
   sprockets-rails

backend/app/controllers/posts_controller.rb

@@ -453,7 +453,7 @@ class PostsController < ApplicationController
 
     if missing_ids.present?
       post.errors.add :parent_post_ids,
-                      "存在しない親投稿 ID があります: #{ missing_ids.join(' ') }"
+                      "存在しない親投稿 Id. があります: #{ missing_ids.join(' ') }"
       raise ActiveRecord::RecordInvalid, post
     end
 

frontend/src/lib/apiErrors.test.ts

@@ -46,7 +46,7 @@ describe ('extractValidationError', () => {
     })
 
     expect (validationError?.fieldErrors).toEqual ({
-      'deerjikists.0.platform': ['プラットフォームを入力してください．'],
+      'deerjikists0Platform': ['プラットフォームを入力してください．'],
     })
   })
 

frontend/src/lib/apiErrors.ts

@@ -1,3 +1,5 @@
+import toCamel from 'camelcase-keys'
+
 import { isApiError } from '@/lib/api'
 
 export type FieldErrors<T extends string = string> = Partial<Record<T, string[]>>
@@ -17,13 +19,13 @@ export const extractValidationError = <T extends string = string> (err: unknown)
   if (!(isApiError (err)) || err.response?.status !== 422)
     return null
 
-  const rawData = (err.response.data ?? { }) as Record<string, unknown>
+  const rawData = toCamel ((err.response.data ?? { }) as Record<string, unknown>,
+			   { deep: true }) as RawValidationError
   const data: RawValidationError = {
-    type:       rawData.type as string | undefined,
-    message:    rawData.message as string | undefined,
-    errors:     rawData.errors as Record<string, string[]> | undefined,
-    baseErrors: rawData.base_errors as string[] | undefined,
-  }
+      type:       rawData.type as string | undefined,
+      message:    rawData.message as string | undefined,
+      errors:     rawData.errors as Record<string, string[]> | undefined,
+      baseErrors: rawData.baseErrors as string[] | undefined }
 
   if (data.type !== 'validation_error' && !(data.errors))
     return null

frontend/src/pages/deerjikists/DeerjikistDetailPage.tsx

@@ -20,7 +20,7 @@ import type { FC, FormEvent } from 'react'
 import type { Deerjikist, Platform } from '@/types'
 
 type DeerjikistFormField =
-    'deerjikists' | `deerjikists.${ number }.platform` | `deerjikists.${ number }.code`
+    'deerjikists' | `deerjikists${ number }Platform` | `deerjikists${ number }Code`
 
 
 const DeerjikistDetailPage: FC = () => {
@@ -105,45 +105,45 @@ const DeerjikistDetailPage: FC = () => {
 		      {/* プラットフォーム */}
 		      <FormField
 			  label="プラットフォーム"
-			  messages={fieldErrors[`deerjikists.${ i }.platform`]}>
+			  messages={fieldErrors[`deerjikists${ i }Platform`]}>
 			{({ describedBy, invalid }) => (
-			<select
-			    disabled={disabled}
-			    value={datum.platform ?? ''}
-			    aria-describedby={describedBy}
-			    aria-invalid={invalid}
-			    className={inputClass (invalid)}
-			    onChange={e => setData (prev => {
-			      const rtn = [...prev]
-			      rtn[i] = { ...rtn[i],
-					 platform: (e.target.value || null) as Platform | null }
-			      return rtn
-			    })}>
-			  <option value="">&nbsp;</option>
-			  {PLATFORMS.map (p => (
-			      <option key={p} value={p}>
-				{PLATFORM_NAMES[p]}
-			      </option>))}
-			</select>)}
+			    <select
+				disabled={disabled}
+				value={datum.platform ?? ''}
+				aria-describedby={describedBy}
+				aria-invalid={invalid}
+				className={inputClass (invalid)}
+				onChange={e => setData (prev => {
+				  const rtn = [...prev]
+				  rtn[i] = { ...rtn[i],
+					     platform: (e.target.value || null) as Platform | null }
+				  return rtn
+				})}>
+			      <option value="">&nbsp;</option>
+			      {PLATFORMS.map (p => (
+				  <option key={p} value={p}>
+				    {PLATFORM_NAMES[p]}
+				  </option>))}
+			    </select>)}
 		      </FormField>
 
 		      {/* コード */}
 		      <FormField
 			  label="コード"
-			  messages={fieldErrors[`deerjikists.${ i }.code`]}>
+			  messages={fieldErrors[`deerjikists${ i }Code`]}>
 			{({ describedBy, invalid }) => (
-			<input
-			    type="text"
-			    disabled={disabled}
-			    value={datum.code}
-			    aria-describedby={describedBy}
-			    aria-invalid={invalid}
-			    className={inputClass (invalid)}
-			    onChange={e => setData (prev => {
-			      const rtn = [...prev]
-			      rtn[i] = { ...rtn[i], code: e.target.value }
-			      return rtn
-			    })}/>)}
+			    <input
+				type="text"
+				disabled={disabled}
+				value={datum.code}
+				aria-describedby={describedBy}
+				aria-invalid={invalid}
+				className={inputClass (invalid)}
+				onChange={e => setData (prev => {
+				  const rtn = [...prev]
+				  rtn[i] = { ...rtn[i], code: e.target.value }
+				  return rtn
+				})}/>)}
 		      </FormField>
 		    </fieldset>
 		))}