Refactor stigmata data

2022-07-04 12:14:32 +09:00
parent f91d61dd93
commit 91b45512ee
13 changed files with 187 additions and 460 deletions
@@ -1,25 +1,16 @@
 /** @jsxImportSource theme-ui */
 import { Box, Card, Text, Flex } from '@theme-ui/components'
-import { useRouter } from 'next/router'
 import { assetsBucketBaseUrl } from '../../lib/consts'
 import { StigmataData } from '../../lib/honkai3rd/stigmata'
-import { translate } from '../../lib/i18n'
 import PageLink from '../atoms/PageLink'
 import SquareImageBox from '../atoms/SquareImageBox'

 interface StigmataCardProps {
-  stigmata: Pick<StigmataData, 'id' | 'name' | 'rarity' | 'krName'>
+  stigmata: Pick<StigmataData, 'id' | 'name' | 'rarity'>
  size?: 'sm' | 'default'
 }

 const StigmataCard = ({ stigmata, size }: StigmataCardProps) => {
-  const { locale } = useRouter()
-  const stigmataName = translate(
-    locale,
-    { 'ko-KR': stigmata.krName },
-    stigmata.name
-  )
-
  if (size === 'sm') {
    return (
      <Card
@@ -36,7 +27,7 @@ const StigmataCard = ({ stigmata, size }: StigmataCardProps) => {
          <Flex>
            <SquareImageBox
              mr={2}
-              alt={stigmataName}
+              alt={stigmata.name}
              src={`${assetsBucketBaseUrl}/honkai3rd/stigmata/icon-${stigmata.id}.png`}
              size={30}
            />
@@ -49,7 +40,7 @@ const StigmataCard = ({ stigmata, size }: StigmataCardProps) => {
                textAlign: 'center',
              }}
            >
-              <Text sx={{ lineHeight: '30px' }}>{stigmataName}</Text>
+              <Text sx={{ lineHeight: '30px' }}>{stigmata.name}</Text>
            </Box>
          </Flex>
        </PageLink>
@@ -68,7 +59,7 @@ const StigmataCard = ({ stigmata, size }: StigmataCardProps) => {
      <PageLink href={`/honkai3rd/stigmata/${stigmata.id}`}>
        <SquareImageBox
          size={[75, 100]}
-          alt={stigmataName}
+          alt={stigmata.name}
          src={`${assetsBucketBaseUrl}/honkai3rd/stigmata/icon-${stigmata.id}.png`}
        />
        <Box
@@ -80,7 +71,7 @@ const StigmataCard = ({ stigmata, size }: StigmataCardProps) => {
            textAlign: 'center',
          }}
        >
-          <Text>{stigmataName}</Text>
+          <Text>{stigmata.name}</Text>
        </Box>
        <Box sx={{ fontSize: 1, textAlign: 'center' }}>
          {'⭐'.repeat(stigmata.rarity)}
@@ -1,24 +1,15 @@
 /** @jsxImportSource theme-ui */
 import { Box, Card, Flex, Text } from '@theme-ui/components'
-import { useRouter } from 'next/router'
 import { assetsBucketBaseUrl } from '../../lib/consts'
 import { StigmataSet } from '../../lib/honkai3rd/stigmata'
-import { translate } from '../../lib/i18n'
 import PageLink from '../atoms/PageLink'
 import SquareImageBox from '../atoms/SquareImageBox'

 interface StigmataSetCardProps {
-  stigmataSet: Pick<StigmataSet, 'id' | 'name' | 'krName' | 'rarity'>
+  stigmataSet: Pick<StigmataSet, 'id' | 'name' | 'rarity'>
 }

 const StigmataSetCard = ({ stigmataSet }: StigmataSetCardProps) => {
-  const { locale } = useRouter()
-  const stigmataSetName = translate(
-    locale,
-    { 'ko-KR': stigmataSet.krName },
-    stigmataSet.name
-  )
-
  return (
    <Card
      sx={{
@@ -31,17 +22,17 @@ const StigmataSetCard = ({ stigmataSet }: StigmataSetCardProps) => {
        <Flex sx={{ justifyContent: 'space-around' }}>
          <SquareImageBox
            size={[80, 100]}
-            alt={`${stigmataSet.id} Top`}
+            alt={`${stigmataSet.name} Top`}
            src={`${assetsBucketBaseUrl}/honkai3rd/stigmata/icon-${stigmataSet.id}-top.png`}
          />
          <SquareImageBox
            size={[80, 100]}
-            alt={`${stigmataSet.id} Mid`}
+            alt={`${stigmataSet.name} Mid`}
            src={`${assetsBucketBaseUrl}/honkai3rd/stigmata/icon-${stigmataSet.id}-mid.png`}
          />
          <SquareImageBox
            size={[80, 100]}
-            alt={`${stigmataSet.id} Bottom`}
+            alt={`${stigmataSet.name} Bottom`}
            src={`${assetsBucketBaseUrl}/honkai3rd/stigmata/icon-${stigmataSet.id}-bot.png`}
          />
        </Flex>
@@ -54,7 +45,7 @@ const StigmataSetCard = ({ stigmataSet }: StigmataSetCardProps) => {
            textAlign: 'center',
          }}
        >
-          <Text>{stigmataSetName}</Text>
+          <Text>{stigmataSet.name}</Text>
        </Box>
        <Box sx={{ fontSize: 1, textAlign: 'center' }}>
          {'⭐'.repeat(stigmataSet.rarity)}
@@ -12,8 +12,7 @@ import PageLink from '../../components/atoms/PageLink'
 import StigmataCard from '../../components/molecules/StigmataCard'
 import Breadcrumb from '../../components/organisms/Breadcrumb'
 import SecondaryLabel from '../atoms/SecondaryLabel'
-import { useRouter } from 'next/router'
-import { translate, useTranslation } from '../../lib/i18n'
+import { useTranslation } from '../../lib/i18n'
 import Head from '../atoms/Head'
 import { assetsBucketBaseUrl } from '../../lib/consts'
 import Honkai3rdLayout from '../layouts/Honkai3rdLayout'
@@ -30,27 +29,12 @@ const SingleStigmataPage = ({
  stigmataSet,
  stigmataSetList,
 }: SingleStigmataPageProps) => {
-  const { locale } = useRouter()
  const { t } = useTranslation()

-  const stigmataName = translate(
-    locale,
-    { 'ko-KR': stigmataData.krName },
-    stigmataData.name
-  )
-
-  const stigmataSkillDescription = translate(
-    locale,
-    {
-      'ko-KR': stigmataData.skill.krDescription,
-    },
-    stigmataData.skill.description
-  )
-
  return (
    <Honkai3rdLayout>
      <Head
-        title={`${stigmataName} - ${t('common.honkai-3rd')} - ${t(
+        title={`${stigmataData.name} - ${t('common.honkai-3rd')} - ${t(
          'common.abyss-lab'
        )}`}
        description={`${t('common.honkai-3rd')} ${t('stigmata-show.stigmata')} /
@@ -67,12 +51,12 @@ const SingleStigmataPage = ({
            { href: '/honkai3rd/stigmata', label: t('common.stigmata') },
            {
              href: `/honkai3rd/stigmata/${stigmataData.id}`,
-              label: stigmataName,
+              label: stigmataData.name,
            },
          ]}
        />

-        <Heading as='h1'>{stigmataName}</Heading>
+        <Heading as='h1'>{stigmataData.name}</Heading>

        <Box
          mb={3}
@@ -85,7 +69,7 @@ const SingleStigmataPage = ({
          }}
        >
          <Image
-            alt={stigmataName}
+            alt={stigmataData.name}
            src={`${assetsBucketBaseUrl}/honkai3rd/stigmata/${stigmataData.id}.png`}
            width={400}
            height={400}
@@ -103,7 +87,7 @@ const SingleStigmataPage = ({
            HP : {stigmataData.hp} / ATK : {stigmataData.atk} / DEF :{' '}
            {stigmataData.def} / CRT : {stigmataData.crt}
          </Box>
-          <Paragraph p={2}>{stigmataSkillDescription}</Paragraph>
+          <Paragraph p={2}>{stigmataData.skill.description}</Paragraph>
        </Card>

        {stigmataSet != null && (
@@ -111,20 +95,10 @@ const SingleStigmataPage = ({
            <Box sx={{ p: 2, borderBottom: 'default' }}>
              <Heading as='h2' mb={1}>
                <PageLink href={`/honkai3rd/stigmata/${stigmataSet.id}-set`}>
-                  {translate(
-                    locale,
-                    { 'ko-KR': stigmataSet.krName },
-                    stigmataSet.name
-                  )}
+                  {stigmataSet.name}
                </PageLink>
              </Heading>
-              <SecondaryLabel>
-                {translate(
-                  locale,
-                  { 'ko-KR': stigmataSet.krAltName },
-                  stigmataSet.altName
-                )}
-              </SecondaryLabel>
+              <SecondaryLabel>{stigmataSet.altName}</SecondaryLabel>
            </Box>

            <Flex
@@ -146,32 +120,16 @@ const SingleStigmataPage = ({
            </Flex>

            <Heading as='h3' m={0} p={2} sx={{ borderBottom: 'default' }}>
-              {translate(
-                locale,
-                { 'ko-KR': stigmataSet.twoSetSkill.krName },
-                stigmataSet.twoSetSkill.name
-              )}
+              {stigmataSet.twoSetSkill.name}
            </Heading>
            <Paragraph m={0} p={2} sx={{ borderBottom: 'default' }}>
-              {translate(
-                locale,
-                { 'ko-KR': stigmataSet.twoSetSkill.krDescription },
-                stigmataSet.twoSetSkill.description
-              )}
+              {stigmataSet.twoSetSkill.description}
            </Paragraph>
            <Heading as='h3' m={0} p={2} sx={{ borderBottom: 'default' }}>
-              {translate(
-                locale,
-                { 'ko-KR': stigmataSet.threeSetSkill.krName },
-                stigmataSet.threeSetSkill.name
-              )}
+              {stigmataSet.threeSetSkill.name}
            </Heading>
            <Paragraph m={0} p={2}>
-              {translate(
-                locale,
-                { 'ko-KR': stigmataSet.threeSetSkill.krDescription },
-                stigmataSet.threeSetSkill.description
-              )}
+              {stigmataSet.threeSetSkill.description}
            </Paragraph>
          </Card>
        )}
@@ -6,8 +6,7 @@ import StigmataCard from '../../components/molecules/StigmataCard'
 import Breadcrumb from '../../components/organisms/Breadcrumb'
 import { StigmataData, StigmataSet } from '../../lib/honkai3rd/stigmata'
 import SecondaryLabel from '../atoms/SecondaryLabel'
-import { translate, useTranslation } from '../../lib/i18n'
-import { useRouter } from 'next/router'
+import { useTranslation } from '../../lib/i18n'
 import Head from '../atoms/Head'
 import Honkai3rdLayout from '../layouts/Honkai3rdLayout'

@@ -22,28 +21,16 @@ const StigmataSetPage = ({
  stigmataSetList,
 }: StigmataSetProps) => {
  const { t } = useTranslation()
-  const { locale } = useRouter()
-
-  const stigmataSetName = translate(
-    locale,
-    { 'ko-KR': stigmataSet.krName },
-    stigmataSet.name
-  )
-  const stigmataSetAltName = translate(
-    locale,
-    { 'ko-KR': stigmataSet.krAltName },
-    stigmataSet.altName
-  )

  return (
    <Honkai3rdLayout>
      <Head
-        title={`${stigmataSetName} ${t('stigmata-show.stigmata-set')} - ${t(
+        title={`${stigmataSet.name} ${t('stigmata-show.stigmata-set')} - ${t(
          'common.honkai-3rd'
        )} - ${t('common.abyss-lab')}`}
        description={`${t('common.honkai-3rd')} ${t(
          'stigmata-show.stigmata-set'
-        )} / ${'⭐'.repeat(stigmataSet.rarity)} / ${stigmataSetAltName}`}
+        )} / ${'⭐'.repeat(stigmataSet.rarity)} / ${stigmataSet.altName}`}
      />

      <Box p={3}>
@@ -59,16 +46,16 @@ const StigmataSetPage = ({
            },
            {
              href: `/honkai3rd/stigmata/${stigmataSet.id}-set`,
-              label: stigmataSetName,
+              label: stigmataSet.name,
            },
          ]}
        />

        <Box mb={3}>
          <Heading as='h1' mb={0}>
-            {stigmataSetName}
+            {stigmataSet.name}
          </Heading>
-          <SecondaryLabel>{stigmataSetAltName}</SecondaryLabel>
+          <SecondaryLabel>{stigmataSet.altName}</SecondaryLabel>
        </Box>

        <Card mb={3}>
@@ -90,16 +77,6 @@ const StigmataSetPage = ({
            })}
          </Flex>
          {stigmataSetList.map((stigmataSetItem) => {
-            const stigmataName = translate(
-              locale,
-              { 'ko-KR': stigmataSetItem.krName },
-              stigmataSetItem.name
-            )
-            const stigmataSkillDescrpition = translate(
-              locale,
-              { 'ko-KR': stigmataSetItem.skill.krDescription },
-              stigmataSetItem.skill.description
-            )
            return (
              <React.Fragment key={stigmataSetItem.id}>
                <Box sx={{ p: 2, borderBottom: 'default' }}>
@@ -107,7 +84,7 @@ const StigmataSetPage = ({
                    <PageLink
                      href={`/honkai3rd/stigmata/${stigmataSetItem.id}`}
                    >
-                      {stigmataName}
+                      {stigmataSetItem.name}
                    </PageLink>
                  </Heading>
                  <SecondaryLabel>
@@ -126,7 +103,7 @@ const StigmataSetPage = ({
                    '&:last-child': { borderBottom: 'none' },
                  }}
                >
-                  {stigmataSkillDescrpition}
+                  {stigmataSetItem.skill.description}
                </Paragraph>
              </React.Fragment>
            )
@@ -135,34 +112,16 @@ const StigmataSetPage = ({

        <Card>
          <Heading as='h2' m={0} p={2} sx={{ borderBottom: 'default' }}>
-            {translate(
-              locale,
-              { 'ko-KR': stigmataSet.twoSetSkill.krName },
-              stigmataSet.twoSetSkill.name
-            )}
+            {stigmataSet.twoSetSkill.name}
          </Heading>
          <Paragraph m={0} p={2} sx={{ borderBottom: 'default' }}>
-            {translate(
-              locale,
-              { 'ko-KR': stigmataSet.twoSetSkill.krDescription },
-              stigmataSet.twoSetSkill.description
-            )}
+            {stigmataSet.twoSetSkill.description}
          </Paragraph>
          <Heading as='h2' m={0} p={2} sx={{ borderBottom: 'default' }}>
-            {translate(
-              locale,
-              {
-                'ko-KR': stigmataSet.threeSetSkill.krName,
-              },
-              stigmataSet.threeSetSkill.name
-            )}
+            {stigmataSet.threeSetSkill.name}
          </Heading>
          <Paragraph m={0} p={2}>
-            {translate(
-              locale,
-              { 'ko-KR': stigmataSet.threeSetSkill.krDescription },
-              stigmataSet.threeSetSkill.description
-            )}
+            {stigmataSet.threeSetSkill.description}
          </Paragraph>
        </Card>
      </Box>