Implement organizations list

src/components/Footer.tsx

@@ -38,7 +38,7 @@ export const Footer = () => {
     <Flex h={'90px'} mt={'auto'} bottom={0} w={'full'} align={'center'} justify={'space-between'}>
       <Box m={{ base: '20px auto', md: '0 40px' }}>
         <Link href={'/'}>
-          <Img maxH={'35px'} src='images/logo-classic.svg' alt='Vocdoni' />
+          <Img maxH={'35px'} src='/images/logo-classic.svg' alt='Vocdoni' />
         </Link>
       </Box>
       <Flex gap={4} wrap={'wrap'} mr={6}>

src/components/Organizations/Card.tsx

@@ -0,0 +1,56 @@
+import { Box, Card, CardBody, Text } from '@chakra-ui/react'
+import { Trans, useTranslation } from 'react-i18next'
+import { ReducedTextAndCopy } from '~components/CopyBtn'
+import { OrganizationProvider, useOrganization } from '@vocdoni/react-providers'
+import { OrganizationAvatar as Avatar, OrganizationName } from '@vocdoni/chakra-components'
+
+interface IOrganizationCardProps {
+  id: string
+  electionCount?: number
+}
+
+const OrganizationCard = ({ id, ...rest }: IOrganizationCardProps) => {
+  return (
+    <OrganizationProvider id={id}>
+      <OrganizationCardContent id={id} {...rest} />
+    </OrganizationProvider>
+  )
+}
+
+const OrganizationCardContent = ({ id, electionCount }: IOrganizationCardProps) => {
+  const { organization, loading } = useOrganization()
+  const { t } = useTranslation()
+
+  return (
+    <Card direction={'row'} alignItems='center' overflow={'scroll'} pl={4}>
+      <Box w={'50px'}>
+        <Avatar
+          mx='auto'
+          fallbackSrc={'/images/fallback-account-dark.png'}
+          alt={t('organization.avatar_alt', {
+            name: organization?.account.name.default || organization?.address,
+          }).toString()}
+        />
+      </Box>
+      <CardBody>
+        {loading ? (
+          <Text fontWeight={'bold'} wordBreak='break-all' size='sm'>
+            {id}
+          </Text>
+        ) : (
+          <OrganizationName fontWeight={'bold'} wordBreak='break-all' size='sm' />
+        )}
+        <ReducedTextAndCopy color={'textAccent1'} toCopy={id}>
+          {id}
+        </ReducedTextAndCopy>
+        <Text fontSize={'sm'}>
+          <Trans i18nKey={'organization.process_count'} count={electionCount}>
+            <strong>Process:</strong> {{ count: electionCount }}
+          </Trans>
+        </Text>
+      </CardBody>
+    </Card>
+  )
+}
+
+export default OrganizationCard

src/components/Organizations/OrganizationsList.tsx

@@ -0,0 +1,70 @@
+import { InputSearch } from '~src/layout/Inputs'
+import { useOrganizationCount, useOrganizationList } from '~queries/organizations'
+import { debounce } from '~utils/debounce'
+import { generatePath, useNavigate, useParams } from 'react-router-dom'
+import { RoutedPaginationProvider } from '~components/Pagination/PaginationProvider'
+import { Loading } from '~src/router/SuspenseLoader'
+import OrganizationCard from '~components/Organizations/Card'
+import { RoutedPagination } from '~components/Pagination/Pagination'
+import LoadingError from '~src/layout/LoadingError'
+import { useTranslation } from 'react-i18next'
+
+export const OrganizationsFilter = () => {
+  const { t } = useTranslation()
+  const { page, orgId }: { page?: number; orgId?: string } = useParams()
+  const navigate = useNavigate()
+
+  const debouncedSearch = debounce((value) => {
+    const getPath = () => {
+      // If previous state has not org id, ensure to look at the first page
+      if (!orgId || orgId.length === 0) {
+        return generatePath('/organizations/:page?/:orgId?', { page: '0', orgId: value as string })
+      }
+      return generatePath('/organizations/:page?/:orgId?', { page: page?.toString() || '0', orgId: value as string })
+    }
+    navigate(getPath())
+  }, 1000)
+
+  const searchOnChange = (event: any) => {
+    debouncedSearch(event.target.value)
+  }
+
+  return <InputSearch maxW={'300px'} placeholder={t('organizations.search_by_org_id')} onChange={searchOnChange} />
+}
+
+export const OrganizationsList = () => {
+  const { page, orgId }: { page?: number; orgId?: string } = useParams()
+  const { data: orgsCount, isLoading: isLoadingCount, error: countError } = useOrganizationCount()
+  const count = orgsCount?.count || 0
+
+  const {
+    data: orgs,
+    isLoading: isLoadingOrgs,
+    isError,
+    error,
+  } = useOrganizationList({
+    page: Number(page || 0),
+    organizationId: orgId,
+  })
+
+  const isLoading = isLoadingCount || isLoadingOrgs
+
+  if (isLoading) {
+    return <Loading />
+  }
+
+  if (!orgs || orgs?.organizations.length === 0 || isError) {
+    return <LoadingError error={error} />
+  }
+
+  return (
+    <>
+      <RoutedPaginationProvider totalPages={Math.ceil(count / 10)} path='/organizations/:page?/:orgId?'>
+        {orgs?.organizations.map((org) => (
+          <OrganizationCard key={org.organizationID} id={org.organizationID} electionCount={org.electionCount} />
+        ))}
+        <RoutedPagination />
+      </RoutedPaginationProvider>
+    </>
+  )
+}

src/components/Pagination/Pagination.tsx

@@ -0,0 +1,45 @@
+import { Button, ButtonGroup } from '@chakra-ui/react'
+import { ReactElement, useMemo } from 'react'
+import { generatePath, Link as RouterLink, useParams } from 'react-router-dom'
+import { usePagination, useRoutedPagination } from './PaginationProvider'
+
+export const Pagination = () => {
+  const { page, setPage, totalPages } = usePagination()
+
+  const pages: ReactElement[] = useMemo(() => {
+    const pages: ReactElement[] = []
+    for (let i = 0; i < totalPages; i++) {
+      pages.push(
+        <Button key={i} onClick={() => setPage(i)} isActive={page === i}>
+          {i + 1}
+        </Button>
+      )
+    }
+    return pages
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page, totalPages])
+
+  return <ButtonGroup isAttached>{pages.map((page) => page)}</ButtonGroup>
+}
+
+export const RoutedPagination = () => {
+  const { path, totalPages } = useRoutedPagination()
+  const { page }: { page?: number } = useParams()
+
+  const p = Number(page) || 0
+
+  const pages: ReactElement[] = useMemo(() => {
+    const pages: ReactElement[] = []
+    for (let i = 0; i < totalPages; i++) {
+      pages.push(
+        <Button as={RouterLink} key={i} to={generatePath(path, { page: i })} isActive={p === i}>
+          {i + 1}
+        </Button>
+      )
+    }
+    return pages
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [p, totalPages])
+
+  return <ButtonGroup isAttached>{pages.map((page) => page)}</ButtonGroup>
+}

src/components/Pagination/PaginationProvider.tsx

@@ -0,0 +1,50 @@
+import { createContext, PropsWithChildren, useContext, useState } from 'react'
+
+export type PaginationContextProps = {
+  page: number
+  setPage: (page: number) => void
+  totalPages: number
+}
+
+export type RoutedPaginationContextProps = Omit<PaginationContextProps, 'setPage' | 'page'> & {
+  path: string
+}
+
+const PaginationContext = createContext<PaginationContextProps | undefined>(undefined)
+const RoutedPaginationContext = createContext<RoutedPaginationContextProps | undefined>(undefined)
+
+export const usePagination = (): PaginationContextProps => {
+  const context = useContext(PaginationContext)
+  if (!context) {
+    throw new Error('usePagination must be used within a PaginationProvider')
+  }
+  return context
+}
+
+export const useRoutedPagination = (): RoutedPaginationContextProps => {
+  const context = useContext(RoutedPaginationContext)
+  if (!context) {
+    throw new Error('useRoutedPagination must be used within a RoutedPaginationProvider')
+  }
+  return context
+}
+
+export type PaginationProviderProps = Pick<PaginationContextProps, 'totalPages'>
+
+export type RoutedPaginationProviderProps = PaginationProviderProps & {
+  path: string
+}
+
+export const RoutedPaginationProvider = ({
+  totalPages,
+  path,
+  ...rest
+}: PropsWithChildren<RoutedPaginationProviderProps>) => {
+  return <RoutedPaginationContext.Provider value={{ totalPages, path }} {...rest} />
+}
+
+export const PaginationProvider = ({ totalPages, ...rest }: PropsWithChildren<PaginationProviderProps>) => {
+  const [page, setPage] = useState<number>(0)
+
+  return <PaginationContext.Provider value={{ page, setPage, totalPages }} {...rest} />
+}

src/i18n/locales/ca.json

@@ -1,22 +1,76 @@
 {
+  "blocks": {
+    "proposer": "Proposer:"
+  },
+  "copy": {
+    "copied_to_the_clipboard": "",
+    "copy_to_clipboard": ""
+  },
+  "featured": {
+    "a_cutting_edge_voting_protocol": "A cutting edge voting protocol",
+    "anonymous_image_alt": "",
+    "edge_protocol_image_alt": "",
+    "inexpensive_image_alt": "",
+    "know_more": "Know more",
+    "leveraging": "A fully anonymous voting system ensuring data availability<1></1>Leveraging on decentralized technologies",
+    "open_source_image_alt": "",
+    "scalable_image_alt": "",
+    "verifiable_image_alt": ""
+  },
   "home": {
     "subtitle": "The most flexible and secure voting protocol to organize any kind of voting process: single-choice, multiple-choice, weighted, quadratic voting and much more.",
     "title": ""
   },
+  "links": {
+    "about": "",
+    "blocks": "",
+    "blog": "",
+    "docs": "",
+    "help": "",
+    "organizations": "",
+    "processes": "",
+    "stats": "",
+    "support": "",
+    "tools": "",
+    "transactions": "",
+    "validators": "",
+    "verify_vote": ""
+  },
+  "organization": {
+    "process_count_one": "<0>Process:</0> {{count}}",
+    "process_count_many": "<0>Process:</0> {{count}}",
+    "process_count_other": "<0>Process:</0> {{count}}"
+  },
+  "organizations": {
+    "organizations_count_one": "",
+    "organizations_count_many": "",
+    "organizations_count_other": "",
+    "organizations_list": ""
+  },
   "stats": {
     "average_block_time": "",
+    "block_height": "",
+    "blockchain_info": "",
     "electionCount_one": "",
     "electionCount_many": "",
     "electionCount_other": "",
+    "genesis_block_date": "",
+    "in_sync": "",
+    "latest_blocks": "",
+    "network_id": "",
+    "nr_of_validators": "",
     "organizations_one": "",
     "organizations_many": "",
     "organizations_other": "",
     "seconds_one": "",
     "seconds_many": "",
     "seconds_other": "",
+    "sync_status": "",
+    "syncing": "",
     "total_elections": "",
     "total_organizations": "",
     "total_votes": "",
+    "view_all_blocks": "View all blocks",
     "votes_one": "",
     "votes_many": "",
     "votes_other": ""

src/i18n/locales/en.json

@@ -1,19 +1,71 @@
 {
+  "blocks": {
+    "proposer": "Proposer:"
+  },
+  "copy": {
+    "copied_to_the_clipboard": "",
+    "copy_to_clipboard": ""
+  },
+  "featured": {
+    "a_cutting_edge_voting_protocol": "A cutting edge voting protocol",
+    "anonymous_image_alt": "",
+    "edge_protocol_image_alt": "",
+    "inexpensive_image_alt": "",
+    "know_more": "Know more",
+    "leveraging": "A fully anonymous voting system ensuring data availability<1></1>Leveraging on decentralized technologies",
+    "open_source_image_alt": "",
+    "scalable_image_alt": "",
+    "verifiable_image_alt": ""
+  },
   "home": {
     "subtitle": "The most flexible and secure voting protocol to organize any kind of voting process: single-choice, multiple-choice, weighted, quadratic voting and much more.",
     "title": "Vocdoni explorer"
   },
+  "links": {
+    "about": "",
+    "blocks": "",
+    "blog": "",
+    "docs": "",
+    "help": "",
+    "organizations": "",
+    "processes": "",
+    "stats": "",
+    "support": "",
+    "tools": "",
+    "transactions": "",
+    "validators": "",
+    "verify_vote": ""
+  },
+  "organization": {
+    "process_count_one": "<0>Process:</0> {{count}}",
+    "process_count_other": "<0>Process:</0> {{count}}"
+  },
+  "organizations": {
+    "organizations_count_one": "",
+    "organizations_count_other": "",
+    "organizations_list": "Organizations"
+  },
   "stats": {
     "average_block_time": "Average block time",
+    "block_height": "",
+    "blockchain_info": "",
     "electionCount_one": "{{ count }} election",
     "electionCount_other": "{{ count }} elections",
+    "genesis_block_date": "",
+    "in_sync": "",
+    "latest_blocks": "",
+    "network_id": "",
+    "nr_of_validators": "",
     "organizations_one": "{{ count }} organization",
     "organizations_other": "{{ count }} organizations",
     "seconds_one": "{{ count }} second",
     "seconds_other": "{{ count }} seconds",
+    "sync_status": "",
+    "syncing": "",
     "total_elections": "Total processes",
     "total_organizations": "Total organizations",
     "total_votes": "Total votes",
+    "view_all_blocks": "View all blocks",
     "votes_one": "{{ count }} vote",
     "votes_other": "{{ count }} votes"
   }