Add locale to object unit components

components/CharacterUnit/index.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
 import classnames from 'classnames'
 
 import SearchModal from '~components/SearchModal'
@@ -18,6 +19,9 @@ interface Props {
 }
 
 const CharacterUnit = (props: Props) => {
+    const router = useRouter()
+    const locale = (router.locale && ['en', 'ja'].includes(router.locale)) ? router.locale : 'en'
+
     const [imageUrl, setImageUrl] = useState('')
 
     const classes = classnames({
@@ -88,7 +92,7 @@ const CharacterUnit = (props: Props) => {
                     updateUncap={passUncapData}
                     special={character.special}
                 /> : '' }
-            <h3 className="CharacterName">{character?.name.en}</h3>
+            <h3 className="CharacterName">{character?.name[locale]}</h3>
         </div>
     )
 

components/SummonUnit/index.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
 import classnames from 'classnames'
 
 import SearchModal from '~components/SearchModal'
@@ -20,6 +21,9 @@ interface Props {
 const SummonUnit = (props: Props) => {
     const [imageUrl, setImageUrl] = useState('')
 
+    const router = useRouter()
+    const locale = (router.locale && ['en', 'ja'].includes(router.locale)) ? router.locale : 'en'
+
     const classes = classnames({
         SummonUnit: true,
         'main': props.unitType == 0,
@@ -97,7 +101,7 @@ const SummonUnit = (props: Props) => {
                     special={false}               
                 /> : '' 
             }
-            <h3 className="SummonName">{summon?.name.en}</h3>
+            <h3 className="SummonName">{summon?.name[locale]}</h3>
         </div>
     )
 

components/WeaponUnit/index.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import Router, { useRouter } from 'next/router'
 import classnames from 'classnames'
 
 import SearchModal from '~components/SearchModal'
@@ -24,6 +25,9 @@ interface Props {
 const WeaponUnit = (props: Props) => {
     const [imageUrl, setImageUrl] = useState('')
 
+    const router = useRouter()
+    const locale = (router.locale && ['en', 'ja'].includes(router.locale)) ? router.locale : 'en'
+
     const classes = classnames({
         WeaponUnit: true,
         'mainhand': props.unitType == 0,
@@ -108,7 +112,7 @@ const WeaponUnit = (props: Props) => {
                     special={false}
                 /> : ''
             }
-            <h3 className="WeaponName">{weapon?.name.en}</h3>
+            <h3 className="WeaponName">{weapon?.name[locale]}</h3>
         </div>
     )