Add translations for SummonGrid

components/ExtraSummons/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useTranslation } from 'next-i18next'
 import SummonUnit from '~components/SummonUnit'
 import './index.scss'
 
@@ -16,9 +17,11 @@ interface Props {
 const ExtraSummons = (props: Props) => {
     const numSummons: number = 2
 
+    const { t } = useTranslation('common')
+
     return (
         <div id="ExtraSummons">
-            <span>Sub Aura Summons</span>
+            <span>{t('summons.subaura')}</span>
             <ul id="grid_summons">
                 {
                     Array.from(Array(numSummons)).map((x, i) => {

components/SummonGrid/index.tsx

@@ -2,6 +2,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useCookies } from 'react-cookie'
 import { useSnapshot } from 'valtio'
+import { useTranslation } from 'next-i18next'
 
 import { AxiosResponse } from 'axios'
 import debounce from 'lodash.debounce'
@@ -26,6 +27,8 @@ const SummonGrid = (props: Props) => {
     // Constants
     const numSummons: number = 4
 
+    const { t } = useTranslation('common')
+
     // Cookies
     const [cookies, _] = useCookies(['account'])
     const headers = (cookies.account != null) ? {
@@ -239,7 +242,7 @@ const SummonGrid = (props: Props) => {
     // Render: JSX components
     const mainSummonElement = (
         <div className="LabeledUnit">
-            <div className="Label">Main Summon</div>
+            <div className="Label">{t('summons.main')}</div>
             <SummonUnit
                 gridSummon={grid.summons.mainSummon}
                 editable={party.editable}
@@ -254,7 +257,7 @@ const SummonGrid = (props: Props) => {
 
     const friendSummonElement = (
         <div className="LabeledUnit">
-            <div className="Label">Friend Summon</div>
+            <div className="Label">{t('summons.friend')}</div>
             <SummonUnit
                 gridSummon={grid.summons.friendSummon}
                 editable={party.editable}
@@ -268,7 +271,7 @@ const SummonGrid = (props: Props) => {
     )
     const summonGridElement = (
         <div id="LabeledGrid">
-            <div className="Label">Summons</div>
+            <div className="Label">{t('summons.summons')}</div>
             <ul id="grid_summons">
                 {Array.from(Array(numSummons)).map((x, i) => {
                     return (<li key={`grid_unit_${i}`} >

public/locales/en/common.json

@@ -8,6 +8,12 @@
         "new": "New",
         "wiki": "View more on gbf.wiki"
     },
+    "summons": {
+        "main": "Main Summon",
+        "friend": "Friend Summon",
+        "summons": "Summons",
+        "subaura": "Sub Aura Summons"
+    },
     "modals": {
         "about": {
             "title": "About"

public/locales/ja/common.json

@@ -8,6 +8,12 @@
         "new": "作成",
         "wiki": "gbf.wikiで詳しく見る"
     },
+    "summons": {
+        "main": "メイン",
+        "friend": "フレンド",
+        "summons": "召喚石",
+        "subaura": "サブ加護召喚石"
+    },
     "modals": {
         "about": {
             "title": "このサイトについて"