Fix all locales

src/pages/honkai3rd/battlesuits/index.tsx

@@ -1,7 +1,7 @@
 /** @jsxImportSource theme-ui */
 import { Box, Heading } from '@theme-ui/components'
 import { NextPageContext } from 'next'
-import { Flex, Link, Text } from 'theme-ui'
+import { Flex, Text } from 'theme-ui'
 import { loadBattlesuitCatalog } from '../../../lib/v2/server/loadData'
 import { BattlesuitCatalogItem, TagType } from '../../../lib/v2/data/types'
 import BattlesuitCatalogItemCard from '../../../components/v2/BattlesuitCatalogItemCard'
@@ -11,13 +11,15 @@ import { useTranslation } from 'next-i18next'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
 import { getI18NProps } from '../../../server/i18n'
 import FilterButton from '../../../components/atoms/FilterButton'
-import { translate } from '../../../lib/i18n'
-import { characterFilterTypes } from '../../../lib/v2/data/utils'
+import { useLocale } from '../../../lib/i18n'
+import { attributeTypes, characterFilterTypes, tagFilterTypes } from '../../../lib/v2/data/utils'
 import { useRouter } from 'next/router'
 import { useMemo } from 'react'
-import { getCharacterTypeLabel, getTagTypeLabel } from '../../../lib/v2/data/text'
+import { getAttributeLabel, getCharacterTypeLabel, getTagTypeLabel } from '../../../lib/v2/data/text'
 import ChibiIcon from '../../../components/v2/ChibiIcon'
 import TagIcon from '../../../components/v2/TagIcon'
+import AttributeIcon from '../../../components/v2/AttributeIcon'
+import PageLink from '../../../components/atoms/PageLink'
 
 interface BattlesuitListPageProps {
   battlesuitCatalog: BattlesuitCatalogItem[]
@@ -25,7 +27,8 @@ interface BattlesuitListPageProps {
 
 const BattlesuitListPage = ({ battlesuitCatalog }: BattlesuitListPageProps) => {
   const { t } = useTranslation()
-  const { locale, query } = useRouter()
+  const { query } = useRouter()
+  const locale = useLocale()
 
   const valkyrieFilter = useMemo(() => {
     if (query.valkyrie == null) {
@@ -49,16 +52,28 @@ const BattlesuitListPage = ({ battlesuitCatalog }: BattlesuitListPageProps) => {
         return true
       }
 
-      return valkyrieFilter === battlesuit.character
+      switch (valkyrieFilter) {
+        case 'bio':
+        case 'psy':
+        case 'mech':
+        case 'qua':
+        case 'img':
+          return battlesuit.attributeType === valkyrieFilter
+      }
+
+      return battlesuit.character === valkyrieFilter
     })
   }, [battlesuitCatalog, valkyrieFilter])
 
-  const tagFilterTypes = useMemo(() => {
+  const tagFilterTypeOptions = useMemo(() => {
     const tagSet = battlesuitsFilteredByValkyrie.reduce<Set<TagType>>((set, battlesuit) => {
       battlesuit.tags.forEach(tag => set.add(tag))
       return set
     }, new Set())
-    return [...tagSet]
+
+    return [...tagSet].sort((a, b) => {
+      return tagFilterTypes.indexOf(a) - tagFilterTypes.indexOf(b)
+    })
   }, [battlesuitsFilteredByValkyrie])
 
   return (
@@ -83,26 +98,36 @@ const BattlesuitListPage = ({ battlesuitCatalog }: BattlesuitListPageProps) => {
 
         <Heading as="h3">{t('battlesuits-list.filter-by-valkyries')}</Heading>
         <Flex mb={2} sx={{ flexWrap: 'wrap' }}>
+          {attributeTypes.map(type => {
+            const active = type === valkyrieFilter
+
+            return (
+              <FilterButton key={type} active={active} href={active ? `` : `?valkyrie=${type}`} m={1}>
+                <Flex sx={{ alignItems: 'center' }}>
+                  <AttributeIcon attributeType={type} size={30} />
+                  <Text ml={1}>{getAttributeLabel(type, locale)}</Text>
+                </Flex>
+              </FilterButton>
+            )
+          })}
           {characterFilterTypes.map(type => {
             const active = type === valkyrieFilter
             return (
               <FilterButton key={type} active={active} href={active ? `` : `?valkyrie=${type}`} m={1}>
                 <Flex sx={{ alignItems: 'center' }}>
                   <ChibiIcon id={type} />
-                  <Text ml={1}>
-                    {translate(locale, { 'ko-KR': getCharacterTypeLabel(type, 'ko-KR') }, getCharacterTypeLabel(type))}
-                  </Text>
+                  <Text ml={1}>{getCharacterTypeLabel(type, locale)}</Text>
                 </Flex>
               </FilterButton>
             )
           })}
         </Flex>
 
-        {tagFilterTypes.length > 0 && (
+        {tagFilterTypeOptions.length > 0 && (
           <>
             <Heading as="h3">{t('battlesuits-list.filter-by-features')}</Heading>
             <Flex mb={2} sx={{ flexWrap: 'wrap' }}>
-              {tagFilterTypes.map(type => {
+              {tagFilterTypeOptions.map(type => {
                 const active = type === tagFilter
                 return (
                   <FilterButton
@@ -115,9 +140,7 @@ const BattlesuitListPage = ({ battlesuitCatalog }: BattlesuitListPageProps) => {
                   >
                     <Flex sx={{ alignItems: 'center' }}>
                       <TagIcon type={type} />
-                      <Text ml={1}>
-                        {translate(locale, { 'ko-KR': getTagTypeLabel(type, 'ko-KR') }, getTagTypeLabel(type))}
-                      </Text>
+                      <Text ml={1}>{getTagTypeLabel(type, locale)}</Text>
                     </Flex>
                   </FilterButton>
                 )
@@ -134,12 +157,13 @@ const BattlesuitListPage = ({ battlesuitCatalog }: BattlesuitListPageProps) => {
               }
               return battlesuit.tags.findIndex(tag => tag === tagFilter) > -1
             })
+            .sort(sortBattlesuits)
             .map(battlesuit => {
               return (
                 <Box key={battlesuit.id}>
-                  <Link href={`/honkai3rd/battlesuits/${battlesuit.id}`}>
+                  <PageLink href={`/honkai3rd/battlesuits/${battlesuit.id}`}>
                     <BattlesuitCatalogItemCard battlesuit={battlesuit} />
-                  </Link>
+                  </PageLink>
                 </Box>
               )
             })}
@@ -152,9 +176,35 @@ const BattlesuitListPage = ({ battlesuitCatalog }: BattlesuitListPageProps) => {
 export default BattlesuitListPage
 
 export async function getStaticProps({ locale }: NextPageContext) {
-  const battlesuitCatalog = loadBattlesuitCatalog()
+  const battlesuitCatalog = loadBattlesuitCatalog(locale).filter(item => {
+    // APHO 2
+    if (item.id.match(/90[0-9]{2}/)) {
+      return false
+    }
+    switch (item.id) {
+      // Durandal Story Only
+      case '805':
+      // Bronya Story Only?
+      case '316':
+      // APHO 1
+      case '1411':
+      case '1304':
+      case '1203':
+        return false
+    }
+
+    return true
+  })
 
   return {
     props: { battlesuitCatalog, ...(await getI18NProps(locale)) }
   }
 }
+
+function sortBattlesuits(a: BattlesuitCatalogItem, b: BattlesuitCatalogItem) {
+  return getOrderIndex(b) - getOrderIndex(a)
+
+  function getOrderIndex(battlesuit: BattlesuitCatalogItem) {
+    return parseInt(battlesuit.id)
+  }
+}