Skip to content

Commit

Permalink
Use RouterLink
Browse files Browse the repository at this point in the history
  • Loading branch information
@selankon
selankon committed Jun 17, 2024
1 parent ce9a651 commit fbf94a5
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 38 deletions.
13 changes: 7 additions & 6 deletions src/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { Box, Flex, Img, Link } from '@chakra-ui/react'

This comment has been minimized.

Sign in to view

Copy link
@elboletaire

elboletaire Jun 17, 2024

Member

You're removing spaces but the prettier action actually adds them. I suggest you run a prettier --fix at some point (and also to define it on save of your IDE...)
import {Box, Flex, Img, Link} from '@chakra-ui/react'
import React from 'react'
import { useTranslation } from 'react-i18next'
import {useTranslation} from 'react-i18next'
import {Link as RouterLink} from 'react-router-dom'

import logo from '/images/logo-classic.svg'

export const Footer = () => {
const { i18n } = useTranslation()
const {i18n} = useTranslation()

const links = [
{
Expand Down Expand Up @@ -38,9 +39,9 @@ export const Footer = () => {

return (
<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={logo} alt='Vocdoni' />
<Box m={{base: '20px auto', md: '0 40px'}}>
<Link as={RouterLink} to={'/'}>
<Img maxH={'35px'} src={logo} alt='Vocdoni'/>
</Link>
</Box>
<Flex gap={4} wrap={'wrap'} mr={6}>
Expand Down
30 changes: 15 additions & 15 deletions src/components/Organizations/Card.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { Box, Card, CardBody, CardProps, Link, Text } from '@chakra-ui/react'
import { Trans, useTranslation } from 'react-i18next'
import { ReducedTextAndCopy } from '~components/CopyBtn'
import { OrganizationProvider, useOrganization } from '@vocdoni/react-providers'
import { OrganizationImage as Avatar, OrganizationName } from '@vocdoni/chakra-components'
import { generatePath } from 'react-router-dom'
import { organizationPath } from '~src/router'
import { FallbackAccountImg } from '~constants'
import {Box, Card, CardBody, CardProps, Link, Text} from '@chakra-ui/react'
import {Trans, useTranslation} from 'react-i18next'
import {ReducedTextAndCopy} from '~components/CopyBtn'
import {OrganizationProvider, useOrganization} from '@vocdoni/react-providers'
import {OrganizationImage as Avatar, OrganizationName} from '@vocdoni/chakra-components'
import {generatePath, Link as RouterLink} from 'react-router-dom'
import {organizationPath} from '~src/router'
import {FallbackAccountImg} from '~constants'

type IOrganizationCardProps = {
id?: string
Expand All @@ -19,7 +19,7 @@ type IOrganizationCardProps = {
* @param rest chakra CardProps
* @constructor
*/
export const OrganizationCard = ({ id, ...rest }: IOrganizationCardProps) => {
export const OrganizationCard = ({id, ...rest}: IOrganizationCardProps) => {
if (!id) return <OrganizationCardSkeleton {...rest} />

return (
Expand All @@ -29,17 +29,17 @@ export const OrganizationCard = ({ id, ...rest }: IOrganizationCardProps) => {
)
}

const OrganizationCardSkeleton = ({ electionCount: ec, ...rest }: IOrganizationCardProps) => {
const { organization, loading } = useOrganization()
const { t } = useTranslation()
const OrganizationCardSkeleton = ({electionCount: ec, ...rest}: IOrganizationCardProps) => {
const {organization, loading} = useOrganization()
const {t} = useTranslation()

const electionCount = ec ?? organization?.electionIndex
const pid = organization?.address

if (!pid) return null

return (
<Link href={generatePath(organizationPath, { pid })}>
<Link as={RouterLink} to={generatePath(organizationPath, {pid})}>
<Card direction={'row'} alignItems='center' overflow={'scroll'} pl={4} {...rest}>
<Box w={'50px'}>
<Avatar
Expand All @@ -56,15 +56,15 @@ const OrganizationCardSkeleton = ({ electionCount: ec, ...rest }: IOrganizationC
{pid}
</Text>
) : (
<OrganizationName fontWeight={'bold'} wordBreak='break-all' size='sm' />
<OrganizationName fontWeight={'bold'} wordBreak='break-all' size='sm'/>
)}
<ReducedTextAndCopy color={'textAccent1'} toCopy={pid}>
{pid}
</ReducedTextAndCopy>
{electionCount && (
<Text fontSize={'sm'}>
<Trans i18nKey={'organization.process_count'} count={electionCount}>
<strong>Process:</strong> {{ count: electionCount }}
<strong>Process:</strong> {{count: electionCount}}
</Trans>
</Text>
)}
Expand Down
35 changes: 18 additions & 17 deletions src/components/TopBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,12 @@ import {
MenuList,
useBreakpointValue,
} from '@chakra-ui/react'
import { useTranslation } from 'react-i18next'
import { RxHamburgerMenu } from 'react-icons/rx'
import { generatePath } from 'react-router-dom'
import { VocdoniEnvironment } from '~constants'
import { organizationsListPath, processListPath } from '~src/router'
import {useTranslation} from 'react-i18next'
import {RxHamburgerMenu} from 'react-icons/rx'
import {generatePath, Link as RouterLink} from 'react-router-dom'
import {VocdoniEnvironment} from '~constants'
import {organizationsListPath, processListPath} from '~src/router'


import logoUrl from '/images/logo-header.png'
import logoStgUrl from '/images/logo-header-stg.png'
Expand All @@ -28,8 +29,8 @@ interface HeaderLink {
}

export const TopBar = () => {
const isSmallScreen = useBreakpointValue({ base: true, md: false })
const { t } = useTranslation()
const isSmallScreen = useBreakpointValue({base: true, md: false})
const {t} = useTranslation()
const env = VocdoniEnvironment

let headerUrl
Expand All @@ -48,11 +49,11 @@ export const TopBar = () => {
const links: HeaderLink[] = [
{
name: t('links.organizations'),
url: generatePath(organizationsListPath, { page: null, query: null }),
url: generatePath(organizationsListPath, {page: null, query: null}),
},
{
name: t('links.processes'),
url: generatePath(processListPath, { page: null }),
url: generatePath(processListPath, {page: null}),
},
{
name: t('links.blocks'),
Expand Down Expand Up @@ -94,15 +95,15 @@ export const TopBar = () => {
backdropFilter='blur(10px)'
bg='white'
>
<Flex justifyContent='space-between' alignItems='start' flexWrap='wrap' px={{ base: 4, md: 8 }}>
<Flex justifyContent='space-between' alignItems='start' flexWrap='wrap' px={{base: 4, md: 8}}>
<Flex alignItems='center'>
<Link href={'/'}>
<Image src={headerUrl} alt='Vocdoni' marginTop='6px' maxHeight='45px' maxWidth='200px' />
<Link as={RouterLink} to={'/'}>
<Image src={headerUrl} alt='Vocdoni' marginTop='6px' maxHeight='45px' maxWidth='200px'/>
</Link>

<Flex display={{ base: 'none', md: 'flex' }} gap={4} marginLeft='20px' wrap={'wrap'}>
<Flex display={{base: 'none', md: 'flex'}} gap={4} marginLeft='20px' wrap={'wrap'}>
{links.map((link) => (
<Link key={link.name} href={link.url}>
<Link as={RouterLink} to={link.url} key={link.name}>
{link.name}
</Link>
))}
Expand All @@ -112,11 +113,11 @@ export const TopBar = () => {
{isSmallScreen ? (
<Box pr={2}>
<Menu>
<MenuButton as={IconButton} aria-label='Options' icon={<RxHamburgerMenu />} variant='outline' />
<MenuButton as={IconButton} aria-label='Options' icon={<RxHamburgerMenu/>} variant='outline'/>
<MenuList>
{[...links, ...rightLinks].map((link) => (
<MenuItem key={link.name}>
<Link {...link}>{link.name}</Link>
<Link as={RouterLink} to={link.url}>{link.name}</Link>
</MenuItem>
))}
</MenuList>
Expand All @@ -125,7 +126,7 @@ export const TopBar = () => {
) : (
<Flex alignItems='center'>
{rightLinks.map((link, i) => (
<Button as={'a'} key={i} href={link.url}>
<Button as={RouterLink} key={i} to={link.url}>
{link.name}
</Button>
))}
Expand Down

0 comments on commit fbf94a5

Please sign in to comment.