Fix weapon states filter in search

components/WeaponSearchFilterBar/index.tsx

@@ -15,12 +15,8 @@ import {
   emptyRarityState,
   emptyWeaponSeriesState,
 } from '~utils/emptyStates'
-import {
+import { elements, proficiencies, rarities } from '~utils/stateValues'
-  elements,
+import { weaponSeries } from '~utils/weaponSeries'
-  proficiencies,
-  rarities,
-  weaponSeries,
-} from '~utils/stateValues'
 
 interface Props {
   sendFilters: (filters: { [key: string]: number[] }) => void
@@ -128,6 +124,45 @@ const WeaponSearchFilterBar = (props: Props) => {
     props.sendFilters(filters)
   }
 
+  const renderWeaponSeries = () => {
+    const numColumns = 3
+    return (
+      <React.Fragment>
+        {Array.from({ length: numColumns }, () => 0).map((x, i) => {
+          return renderWeaponSeriesGroup(i)
+        })}
+      </React.Fragment>
+    )
+  }
+
+  const renderWeaponSeriesGroup = (index: number) => {
+    return (
+      <DropdownMenu.Group className="Group">
+        {weaponSeries
+          .slice(
+            index * Math.ceil(weaponSeries.length / 3),
+            (index + 1) * Math.ceil(weaponSeries.length / 3)
+          )
+          .map((x, i) => {
+            return renderSingleWeaponSeries(x.id, x.slug)
+          })}
+      </DropdownMenu.Group>
+    )
+  }
+
+  const renderSingleWeaponSeries = (id: number, slug: string) => {
+    return (
+      <SearchFilterCheckboxItem
+        key={id}
+        onCheckedChange={handleSeriesChange}
+        checked={seriesState[slug].checked}
+        valueKey={slug}
+      >
+        {t(`series.${slug}`)}
+      </SearchFilterCheckboxItem>
+    )
+  }
+
   useEffect(() => {
     sendFilters()
   }, [rarityState, elementState, proficiencyState, seriesState])
@@ -254,58 +289,7 @@ const WeaponSearchFilterBar = (props: Props) => {
         <DropdownMenu.Label className="Label">
           {t('filters.labels.series')}
         </DropdownMenu.Label>
-        <section>
+        <section>{renderWeaponSeries()}</section>
-          <DropdownMenu.Group className="Group">
-            {Array.from(Array(weaponSeries.length / 3)).map((x, i) => {
-              return (
-                <SearchFilterCheckboxItem
-                  key={weaponSeries[i]}
-                  onCheckedChange={handleSeriesChange}
-                  checked={seriesState[weaponSeries[i]].checked}
-                  valueKey={weaponSeries[i]}
-                >
-                  {t(`series.${weaponSeries[i]}`)}
-                </SearchFilterCheckboxItem>
-              )
-            })}
-          </DropdownMenu.Group>
-          <DropdownMenu.Group className="Group">
-            {Array.from(Array(weaponSeries.length / 3)).map((x, i) => {
-              return (
-                <SearchFilterCheckboxItem
-                  key={weaponSeries[i + weaponSeries.length / 3]}
-                  onCheckedChange={handleSeriesChange}
-                  checked={
-                    seriesState[weaponSeries[i + weaponSeries.length / 3]]
-                      .checked
-                  }
-                  valueKey={weaponSeries[i + weaponSeries.length / 3]}
-                >
-                  {t(`series.${weaponSeries[i + weaponSeries.length / 3]}`)}
-                </SearchFilterCheckboxItem>
-              )
-            })}
-          </DropdownMenu.Group>
-          <DropdownMenu.Group className="Group">
-            {Array.from(Array(weaponSeries.length / 3)).map((x, i) => {
-              return (
-                <SearchFilterCheckboxItem
-                  key={weaponSeries[i + 2 * (weaponSeries.length / 3)]}
-                  onCheckedChange={handleSeriesChange}
-                  checked={
-                    seriesState[weaponSeries[i + 2 * (weaponSeries.length / 3)]]
-                      .checked
-                  }
-                  valueKey={weaponSeries[i + 2 * (weaponSeries.length / 3)]}
-                >
-                  {t(
-                    `series.${weaponSeries[i + 2 * (weaponSeries.length / 3)]}`
-                  )}
-                </SearchFilterCheckboxItem>
-              )
-            })}
-          </DropdownMenu.Group>
-        </section>
       </SearchFilter>
     </div>
   )

public/locales/en/common.json

@@ -100,7 +100,7 @@
     "bahamut": "Bahamut",
     "epic": "Epic",
     "ennead": "Ennead",
-    "cosmos": "Cosmos",
+    "cosmic": "Cosmic",
     "ancestral": "Ancestral",
     "superlative": "Superlative",
     "vintage": "Vintage",
@@ -109,7 +109,8 @@
     "new_world": "New World Foundation",
     "revenant": "Revenant",
     "proving": "Proving Grounds",
-    "disaster": "Disaster"
+    "disaster": "Disaster",
+    "illustrious": "Illustrious"
   },
   "recency": {
     "all_time": "All time",

public/locales/ja/common.json

@@ -100,7 +100,7 @@
     "bahamut": "バハムートウェポン",
     "epic": "エピックウェポン",
     "ennead": "エニアドシリーズ",
-    "cosmos": "コスモスシリーズ",
+    "cosmic": "コスモスシリーズ",
     "ancestral": "アンセスタルシリーズ",
     "superlative": "スペリオシリーズ",
     "vintage": "ヴィンテージシリーズ",
@@ -109,7 +109,8 @@
     "new_world": "新世界の礎",
     "revenant": "天星器",
     "proving": "ブレイブグラウンド",
-    "disaster": "災害シリーズ"
+    "disaster": "災害シリーズ",
+    "luminous": "ルミナス"
   },
   "recency": {
     "all_time": "全ての期間",

utils/emptyStates.tsx

@@ -100,12 +100,16 @@ export const emptyWeaponSeriesState: WeaponSeriesState = {
     id: 3,
     checked: false,
   },
-  ultima: {
+  revenant: {
-    id: 17,
+    id: 4,
     checked: false,
   },
-  bahamut: {
+  primal: {
-    id: 16,
+    id: 6,
+    checked: false,
+  },
+  beast: {
+    id: 7,
     checked: false,
   },
   regalia: {
@@ -116,10 +120,6 @@ export const emptyWeaponSeriesState: WeaponSeriesState = {
     id: 9,
     checked: false,
   },
-  primal: {
-    id: 6,
-    checked: false,
-  },
   olden_primal: {
     id: 10,
     checked: false,
@@ -128,26 +128,30 @@ export const emptyWeaponSeriesState: WeaponSeriesState = {
     id: 11,
     checked: false,
   },
-  beast: {
+  hollowsky: {
-    id: 7,
+    id: 12,
-    checked: false,
-  },
-  rose: {
-    id: 15,
     checked: false,
   },
   xeno: {
     id: 13,
     checked: false,
   },
-  hollowsky: {
-    id: 12,
-    checked: false,
-  },
   astral: {
     id: 14,
     checked: false,
   },
+  rose: {
+    id: 15,
+    checked: false,
+  },
+  bahamut: {
+    id: 16,
+    checked: false,
+  },
+  ultima: {
+    id: 17,
+    checked: false,
+  },
   epic: {
     id: 18,
     checked: false,
@@ -156,7 +160,7 @@ export const emptyWeaponSeriesState: WeaponSeriesState = {
     id: 19,
     checked: false,
   },
-  cosmos: {
+  cosmic: {
     id: 20,
     checked: false,
   },
@@ -176,6 +180,10 @@ export const emptyWeaponSeriesState: WeaponSeriesState = {
     id: 24,
     checked: false,
   },
+  proving: {
+    id: 25,
+    checked: false,
+  },
   sephira: {
     id: 28,
     checked: false,
@@ -184,6 +192,14 @@ export const emptyWeaponSeriesState: WeaponSeriesState = {
     id: 29,
     checked: false,
   },
+  disaster: {
+    id: 30,
+    checked: false,
+  },
+  illustrious: {
+    id: 31,
+    checked: false,
+  },
 }
 
 export const emptyPaginationObject = {

utils/weaponSeries.tsx

@@ -116,4 +116,8 @@ export const weaponSeries: WeaponSeries[] = [
     id: 30,
     slug: 'disaster',
   },
+  {
+    id: 31,
+    slug: 'illustrious',
+  },
 ]