#434

frontend/src/components/counts/CountsAdditionalConditions.tsx

@@ -3,12 +3,14 @@ import { useEffect, useState } from 'react'
 import DateTimeField from '@/components/common/DateTimeField'
 import { Button } from '@/components/ui/button'
 import { countsEventTypes, countsFieldLabel, countsFilterFields,
-	 readCountsJSON, useCountsDefinition }
+	 useCountsDefinition }
     from '@/lib/countsDefinitions'
 import useDialogue from '@/lib/dialogues/useDialogue'
 import { inputClass } from '@/lib/utils'
 import { useUITranslation } from '@/lib/useUITranslation'
 
+import { readCountState, encodeCountState } from '@/lib/queryState'
+
 import type { DialogueFormControls } from '@/lib/dialogues/useDialogue'
 import type { CountsCondition, CountsDefinition } from '@/lib/countsDefinitions'
 
@@ -65,8 +67,8 @@ const CountsAdditionalConditions = ({ params, update }: {
   const { label, message } = useUITranslation ('counts')
   const definition = useCountsDefinition ()
   const dialogue = useDialogue ()
-  const conditions = readCountsJSON<CountsCondition[]> (params, 'conditions', [])
-  const write = (next: CountsCondition[]) => update ('conditions', JSON.stringify (next))
+  const conditions = readCountState<CountsCondition[]> (params, 'conditions', [])
+  const write = (next: CountsCondition[]) => update ('conditions', encodeCountState ('conditions', next))
   const edit = (index?: number) => {
     const initial = index == null ? undefined : conditions[index]
     const save = (condition: CountsCondition) => {