Search improvements (#43)

* Delete organizationId filter

See #41 (comment)

* Search only valid partialId string

* Hotfix debounced input search

It has an error because it was setting the value after debounce, so is wrong behaviour on user side.

Now is using internal state to store the value

* Improve organization search

* Prettierify

src/components/Layout/Inputs.tsx

@@ -12,10 +12,10 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@chakra-ui/react'
-import React, { ChangeEvent } from 'react'
+import React, { ChangeEvent, useState } from 'react'
+import { Trans } from 'react-i18next'
 import { BiSearchAlt } from 'react-icons/bi'
 import { debounce } from '~utils/debounce'
-import { Trans } from 'react-i18next'
 
 export const PopoverInputSearch = ({ input, button }: { input?: InputSearchProps; button?: ButtonProps }) => {
   return (
@@ -48,11 +48,15 @@ export const PopoverInputSearch = ({ input, button }: { input?: InputSearchProps
 }
 
 type InputSearchProps = {
+  initialValue?: string
   debounceTime?: number
   onChange?: (event: string) => void
-} & Omit<InputProps, 'onChange'>
+} & Omit<InputProps, 'onChange' | 'value'>
+
+export const InputSearch = ({ initialValue, debounceTime = 0, onChange, ...props }: InputSearchProps) => {
+  // Inner state to enable initial value
+  const [value, setValue] = useState(initialValue ?? '')
 
-export const InputSearch = ({ debounceTime = 0, onChange, ...props }: InputSearchProps) => {
   const debouncedSearch = debounce((value: string) => {
     if (onChange) onChange(value)
   }, debounceTime)
@@ -64,7 +68,9 @@ export const InputSearch = ({ debounceTime = 0, onChange, ...props }: InputSearc
       </InputLeftElement>
       <Input
         {...props}
+        value={value}
         onChange={(event: ChangeEvent<HTMLInputElement>) => {
+          setValue(event.target.value)
           debouncedSearch(event.target.value)
         }}
       />

src/components/Organizations/List.tsx

@@ -14,6 +14,7 @@ import { retryUnlessNotFound } from '~utils/queries'
 export const OrganizationsFilter = () => {
   const { t } = useTranslation()
   const navigate = useNavigate()
+  const { query } = useParams<{ query?: string }>()
 
   return (
     <InputSearch
@@ -23,6 +24,7 @@ export const OrganizationsFilter = () => {
         navigate(generatePath(RoutePath.OrganizationsList, { page: '0', query: value as string }))
       }}
       debounceTime={500}
+      initialValue={query}
     />
   )
 }

src/components/Process/ProcessList.tsx

@@ -12,8 +12,8 @@ import { PaginationItemsPerPage, RoutePath } from '~constants'
 import { useProcessesCount, useProcessList } from '~queries/processes'
 import useQueryParams from '~src/router/use-query-params'
 import { isEmpty } from '~utils/objects'
-import { ElectionCard } from './Card'
 import { retryUnlessNotFound } from '~utils/queries'
+import { ElectionCard } from './Card'
 
 type FilterQueryParams = {
   [K in keyof Omit<IElectionListFilter, 'organizationId'>]: string
@@ -38,7 +38,7 @@ export const ProcessSearchBox = () => {
           onChange={(value: string) => {
             setQueryParams({ ...queryParams, electionId: value })
           }}
-          value={queryParams.electionId}
+          initialValue={queryParams.electionId}
           debounceTime={500}
         />
       </Flex>
@@ -108,8 +108,7 @@ export const PaginatedProcessList = () => {
   } = useProcessList({
     page: Number(page || 0),
     filters: {
-      electionId: processFilters.electionId,
-      // organizationId: processFilters.electionId,
+      electionId: processFilters.electionId, // electionId contains also the organizationId, so this is enough to find by partial orgId or electionId
       status: processFilters.status as IElectionListFilter['status'],
       withResults: processFilters.withResults ? processFilters.withResults === 'true' : undefined,
     },

src/components/Verify/index.tsx

@@ -1,10 +1,10 @@
+import addVote from '/images/add-vote.svg'
 import { Box, Button, Flex, Image, Text } from '@chakra-ui/react'
 import { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { generatePath, useNavigate, useParams } from 'react-router-dom'
 import { InputSearch } from '~components/Layout/Inputs'
 import { RoutePath } from '~constants'
-import addVote from '/images/add-vote.svg'
 
 const SearchVote = ({ compact }: { compact?: boolean }) => {
   const { verifier: urlVerifier }: { verifier?: string } = useParams()
@@ -21,7 +21,7 @@ const SearchVote = ({ compact }: { compact?: boolean }) => {
         onChange={(value: string) => {
           setVerifier(value)
         }}
-        value={verifier}
+        initialValue={urlVerifier}
       />
       <Box>
         <Button

src/queries/processes.ts

@@ -1,6 +1,6 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
-import { useClient } from '@vocdoni/react-providers'
 import { ExtendedSDKClient } from '@vocdoni/extended-sdk'
+import { useClient } from '@vocdoni/react-providers'
 import {
   Census,
   IElectionKeysResponse,
@@ -10,6 +10,7 @@ import {
   PublishedElection,
 } from '@vocdoni/sdk'
 import { useChainInfo, useChainInfoOptions } from '~queries/stats'
+import { isValidPartialProcessId } from '~utils/strings'
 
 export const useProcessList = ({
   page,
@@ -20,6 +21,7 @@ export const useProcessList = ({
   filters?: IElectionListFilter
 } & Omit<UseQueryOptions<IElectionListResponse, Error, { elections: PublishedElection[] }>, 'queryKey'>) => {
   const { client } = useClient<ExtendedSDKClient>()
+
   return useQuery({
     queryKey: ['process', 'list', page, filters],
     queryFn: () => client.electionList(page, { ...filters }),
@@ -37,6 +39,7 @@ export const useProcessList = ({
       })
       return { elections }
     },
+    enabled: !filters?.electionId || (!!filters?.electionId && isValidPartialProcessId(filters?.electionId)),
     ...options,
   })
 }

src/utils/queries.ts

@@ -1,12 +1,13 @@
 import { QueryOptions } from '@tanstack/react-query'
-import { ErrAccountNotFound, ErrElectionNotFound, ErrTransactionNotFound } from '@vocdoni/sdk'
+import { ErrAccountNotFound, ErrAPI, ErrElectionNotFound, ErrTransactionNotFound } from '@vocdoni/sdk'
 
 // Retry up to 3 times for errors other than 404
 export const retryUnlessNotFound: QueryOptions['retry'] = (failureCount: number, error: any) => {
   if (
     error instanceof ErrElectionNotFound ||
     error instanceof ErrAccountNotFound ||
-    error instanceof ErrTransactionNotFound
+    error instanceof ErrTransactionNotFound ||
+    (error instanceof ErrAPI && error.raw?.response?.status === 404)
   ) {
     return false // Do not retry if the error is a 404
   }

src/utils/strings.ts

@@ -4,3 +4,11 @@ export const shortHex = (hex: string) => hex.substring(0, 6) + '...' + hex.subst
  * ucfirst makes the first letter of a string uppercase
  */
 export const ucfirst = (str: string, lng?: string | undefined) => str.charAt(0).toLocaleUpperCase(lng) + str.slice(1)
+
+/**
+ * Checks if a string is a valid hexadecimal with the correct length. Useful to check if processIds or orgsId are valid.
+ */
+export const isValidPartialProcessId = (str: string) => {
+  const hexRegex = /^[0-9A-Fa-f]+$/
+  return hexRegex.test(str) && str.length % 2 === 0
+}