Use query instead of stae for filter

src/components/atoms/FilterButton.tsx

@@ -1,35 +1,32 @@
-import { Button } from '@theme-ui/components'
-import React, { useCallback } from 'react'
+import React from 'react'
+import PageLink from './PageLink'
 import SquareImageBox from './SquareImageBox'
 
 interface FilterButtonProps {
   active?: boolean
   icon?: string
   label: string
-  setFilter: (filter: string) => void
   value: string
   m?: string | number
 }
 
 const FilterButton = ({
   active = false,
-  setFilter,
   icon,
   label,
   value,
   m,
 }: FilterButtonProps) => {
-  const selectFilter = useCallback(() => {
-    setFilter(value)
-  }, [setFilter, value])
   return (
-    <Button
+    <PageLink
+      href={{ query: { filter: value } }}
+      shallow={true}
       m={m}
       py={1}
       px={2}
-      onClick={selectFilter}
       className={active ? 'active' : ''}
       sx={{ display: 'flex' }}
+      variant='buttons.primary'
     >
       {icon != null && (
         <SquareImageBox
@@ -40,7 +37,7 @@ const FilterButton = ({
         />
       )}
       {label}
-    </Button>
+    </PageLink>
   )
 }
 

src/components/atoms/PageLink.tsx

@@ -2,11 +2,12 @@
 import NextLink, { LinkProps as NextLinkProps } from 'next/link'
 import { Link, LinkProps } from '@theme-ui/components'
 
-type PageLinkProps = LinkProps & NextLinkProps
+type PageLinkProps = Omit<LinkProps, 'href'> &
+  Pick<NextLinkProps, 'href' | 'shallow'>
 
-const PageLink = ({ href, ...otherProps }: PageLinkProps) => {
+const PageLink = ({ href, shallow, ...otherProps }: PageLinkProps) => {
   return (
-    <NextLink href={href} passHref={true}>
+    <NextLink href={href} shallow={shallow} passHref={true}>
       <Link {...otherProps} />
     </NextLink>
   )

src/lib/theme.ts

@@ -97,6 +97,8 @@ export const theme: Theme = {
       borderWidth: 1,
       bg: 'background',
       cursor: 'pointer',
+      textDecoration: 'none',
+      borderRadius: 'default',
       '&:hover, &.active': {
         color: 'background',
         bg: 'primary',

src/pages/honkai3rd/battlesuits/index.tsx

@@ -1,6 +1,6 @@
 import { Box, Heading, Flex } from '@theme-ui/components'
 import { pick } from 'ramda'
-import { useMemo, useState } from 'react'
+import { useMemo } from 'react'
 import FilterButton from '../../../components/atoms/FilterButton'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
 import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
@@ -10,6 +10,7 @@ import {
 } from '../../../server/data/honkai3rd/battlesuits'
 import { battlesuitStrengths } from '../../../lib/safeData'
 import BattlesuitCard from '../../../components/molecules/BattlesuitCard'
+import { useRouter } from 'next/router'
 
 type BattlesuitListItemData = Pick<
   BattlesuitData,
@@ -50,7 +51,15 @@ const valkyrieFilterOptions = [
 ]
 
 const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
-  const [filter, setFilter] = useState('all')
+  const { query } = useRouter()
+
+  const filter = useMemo(() => {
+    if (query.filter == null) {
+      return 'all'
+    }
+
+    return typeof query.filter === 'string' ? query.filter : query.filter[0]
+  }, [query])
 
   const battlesuitList = useMemo(() => {
     return battlesuits.map((battlesuit) => {
@@ -87,7 +96,6 @@ const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
                 <FilterButton
                   key={value}
                   active={value === filter}
-                  setFilter={setFilter}
                   value={value}
                   label={label}
                   icon={icon}
@@ -104,7 +112,6 @@ const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
                 <FilterButton
                   key={value}
                   active={value === filter}
-                  setFilter={setFilter}
                   value={value}
                   label={label}
                   icon={icon}