fix(census): fix queries and add rhf to participants form

src/components/Census/Create.tsx

@@ -20,13 +20,13 @@ const CreateCensus = () => {
   if (!organization) return null
 
   const onSubmit = async (values: CensusCreatePayload) => {
-    const censusId = await createCensus.mutateAsync({
+    const { censusID } = await createCensus.mutateAsync({
       ...values,
       orgAddress: organization.address,
     })
 
     // Navigate to participants page
-    navigate(Routes.dashboard.census.participants.replace(':id', censusId))
+    navigate(Routes.dashboard.census.participants.replace(':id', censusID))
   }
 
   return (

src/components/Census/List.tsx

@@ -1,5 +1,20 @@
 import { ViewIcon } from '@chakra-ui/icons'
-import { Box, Button, Flex, Heading, IconButton, Table, Tbody, Td, Text, Th, Thead, Tr } from '@chakra-ui/react'
+import {
+  Alert,
+  AlertDescription,
+  Box,
+  Button,
+  Flex,
+  Heading,
+  IconButton,
+  Table,
+  Tbody,
+  Td,
+  Text,
+  Th,
+  Thead,
+  Tr,
+} from '@chakra-ui/react'
 import { useOrganization } from '@vocdoni/react-providers'
 import { Trans } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
@@ -12,7 +27,7 @@ const CensusList = () => {
 
   if (!organization) return null
 
-  const { data: censuses } = useCensusList(organization.address)
+  const { data: censuses, error, isError } = useCensusList(organization.address)
 
   const handleViewCensus = (census: Census) => {
     navigate(Routes.dashboard.census.view.replace(':id', census.id))
@@ -74,6 +89,11 @@ const CensusList = () => {
           )}
         </Tbody>
       </Table>
+      {isError && (
+        <Alert status='error'>
+          <AlertDescription>{error.message}</AlertDescription>
+        </Alert>
+      )}
     </Box>
   )
 }

src/components/Census/Participants.tsx

@@ -17,60 +17,50 @@ import {
 } from '@chakra-ui/react'
 import { useOrganization } from '@vocdoni/react-providers'
 import { useState } from 'react'
+import { useForm } from 'react-hook-form'
 import { Trans } from 'react-i18next'
 import { useNavigate, useParams } from 'react-router-dom'
 import { Routes } from '~routes'
-import { useAddParticipants, useCensusInfo, usePublishCensus } from '~src/queries/census'
-
-interface ParticipantInput {
-  id: string
-  email?: string
-  phone?: string
-}
+import {
+  Participant,
+  ParticipantPayload,
+  useAddParticipants,
+  useCensusInfo,
+  usePublishCensus,
+} from '~src/queries/census'
 
 const CensusParticipants = () => {
   const navigate = useNavigate()
   const { organization } = useOrganization()
   const { id } = useParams<{ id: string }>()
-  const [participants, setParticipants] = useState<ParticipantInput[]>([])
-  const [participantId, setParticipantId] = useState('')
-  const [participantEmail, setParticipantEmail] = useState('')
-  const [participantPhone, setParticipantPhone] = useState('')
-
   const { data: census } = useCensusInfo(id!)
   const addParticipants = useAddParticipants(id!)
   const publishCensus = usePublishCensus(id!)
 
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting },
+  } = useForm<ParticipantPayload>()
+
+  const [participants, setParticipants] = useState<Participant[]>([])
+
   if (!organization || !census) return null
 
-  const handleAddParticipant = (e: React.FormEvent) => {
-    e.preventDefault()
-
-    if (!participantId) return
-    if (!participantEmail && !participantPhone) return
-
-    setParticipants([
-      ...participants,
-      {
-        id: participantId,
-        email: participantEmail || undefined,
-        phone: participantPhone || undefined,
-      },
-    ])
-
-    // Clear form
-    setParticipantId('')
-    setParticipantEmail('')
-    setParticipantPhone('')
+  const handleAddParticipant = (data: ParticipantPayload) => {
+    if (!data.email && !data.phone) return
+
+    setParticipants((prev) => [...prev, { ...data, id: crypto.randomUUID() }])
+    reset()
   }
 
-  const handleSubmit = async () => {
+  const handleSaveAndPublish = async () => {
     if (!participants.length) return
 
     await addParticipants.mutateAsync({ participants })
     await publishCensus.mutateAsync()
 
-    // Navigate back to census list
     navigate(Routes.dashboard.census.list)
   }
 
@@ -80,44 +70,23 @@ const CensusParticipants = () => {
         <Trans>Add Participants</Trans>
       </Heading>
 
-      <form onSubmit={handleAddParticipant}>
+      <form onSubmit={handleSubmit(handleAddParticipant)}>
         <VStack spacing={4} align='stretch' maxW='md' mb={8}>
-          <FormControl isRequired>
-            <FormLabel>
-              <Trans>Participant ID</Trans>
-            </FormLabel>
-            <Input
-              value={participantId}
-              onChange={(e) => setParticipantId(e.target.value)}
-              placeholder='Enter participant ID'
-            />
-          </FormControl>
-
           <FormControl>
             <FormLabel>
               <Trans>Email</Trans>
             </FormLabel>
-            <Input
-              type='email'
-              value={participantEmail}
-              onChange={(e) => setParticipantEmail(e.target.value)}
-              placeholder='Enter email'
-            />
+            <Input type='email' placeholder='Enter email' {...register('email')} />
           </FormControl>
 
           <FormControl>
             <FormLabel>
               <Trans>Phone</Trans>
             </FormLabel>
-            <Input
-              type='tel'
-              value={participantPhone}
-              onChange={(e) => setParticipantPhone(e.target.value)}
-              placeholder='Enter phone number'
-            />
+            <Input type='tel' placeholder='Enter phone number' {...register('phone')} />
           </FormControl>
 
-          <Button type='submit' colorScheme='primary'>
+          <Button type='submit' colorScheme='primary' isLoading={isSubmitting}>
             <Trans>Add Participant</Trans>
           </Button>
         </VStack>
@@ -170,7 +139,7 @@ const CensusParticipants = () => {
         </Button>
         <Button
           colorScheme='primary'
-          onClick={handleSubmit}
+          onClick={handleSaveAndPublish}
           isLoading={addParticipants.isPending || publishCensus.isPending}
           isDisabled={participants.length === 0}
         >

src/queries/census.ts

@@ -1,4 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { ensure0x } from '@vocdoni/sdk'
 import { useAuth } from '~components/Auth/useAuth'
 import { QueryKeys } from './keys'
 
@@ -11,20 +12,22 @@ export interface Census {
 
 export type CensusCreatePayload = Pick<Census, 'type' | 'orgAddress'>
 
-interface PublishedCensus {
+export interface PublishedCensus {
   census: Census
   uri: string
   root: string
 }
 
-interface Participant {
+export interface Participant {
   id: string
   email?: string
   phone?: string
 }
 
+export type ParticipantPayload = Omit<Participant, 'id'>
+
 interface AddParticipantsPayload {
-  participants: Participant[]
+  participants: ParticipantPayload[]
 }
 
 // Get census list
@@ -33,7 +36,7 @@ export const useCensusList = (orgAddress: string) => {
 
   return useQuery({
     queryKey: QueryKeys.census.list(orgAddress),
-    queryFn: () => bearedFetch<Census[]>(`census?orgAddress=${orgAddress}`),
+    queryFn: () => bearedFetch<Census[]>(`census?orgAddress=${ensure0x(orgAddress)}`),
   })
 }
 
@@ -54,7 +57,7 @@ export const useCreateCensus = () => {
 
   return useMutation({
     mutationFn: (payload: CensusCreatePayload) =>
-      bearedFetch<string>('census', {
+      bearedFetch<{ censusID: string }>('census', {
         method: 'POST',
         body: payload,
       }),