#434

frontend/src/components/counts/CountsAxes.tsx

@@ -1,13 +1,15 @@
 import LocalisedText from '@/components/LocalisedText'
 import SortableList from '@/components/common/SortableList'
 import { countsAxisFields, countsAxisLabel, countsFilterFields,
-	 readCountsJSON, useCountsDefinition }
+	 useCountsDefinition }
     from '@/lib/countsDefinitions'
 import { useClientMotion } from '@/lib/useClientMotion'
 import { cn, inputClass } from '@/lib/utils'
 import { useLocale } from '@/lib/useLocale'
 import { useUITranslation } from '@/lib/useUITranslation'
 
+import { readCountState, encodeCountState } from '@/lib/queryState'
+
 import type { CountsAxis } from '@/lib/countsDefinitions'
 
 
@@ -19,8 +21,8 @@ const CountsAxes = ({ params, update }: {
   const locale = useLocale ()
   const motion = useClientMotion ()
   const available = countsAxisFields (definition, params.get ('definition') === 'history')
-  const rows = readCountsJSON<CountsAxis[]> (params, 'rows', [])
-  const cols = readCountsJSON<CountsAxis[]> (params, 'cols', [])
+  const rows = readCountState<CountsAxis[]> (params, 'rows', [])
+  const cols = readCountState<CountsAxis[]> (params, 'cols', [])
   const axes = [...rows, ...cols]
   const groups = {
       available: available.map (field => field.key).filter (id => !axes.some (
@@ -33,7 +35,7 @@ const CountsAxes = ({ params, update }: {
   }
   const commit = (next: Record<string, string[]>) => {
     for (const group of ['rows', 'cols'] as const)
-      update (group, JSON.stringify (next[group].map (field => axes.find (
+      update (group, encodeCountState (group, next[group].map (field => axes.find (
           axis => axis.field === field) ?? { field,
           ...(countsFilterFields (definition)[field] === 'datetime' ? { grain: 'month' } : { }) })))
   }
@@ -73,7 +75,7 @@ const CountsAxes = ({ params, update }: {
             {countsFilterFields (definition)[id] === 'datetime' && <select
                 className={inputClass (false, 'w-auto py-0')}
                 value={axis?.grain ?? 'month'} aria-label={message ('grain').text}
-                onChange={event => update (group, JSON.stringify (
+                onChange={event => update (group, encodeCountState (group,
                     (group === 'rows' ? rows : cols).map (item => item.field === id
                         ? { ...item, grain: event.target.value } : item)))}>
               {definition.grains.map (grain => <option key={grain} value={grain}