Skip to content

Commit

Permalink
feat: prettify previous/next nav buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@ivan-aksamentov
ivan-aksamentov committed Feb 24, 2023
1 parent 1569468 commit fc84f81
Show file tree
Hide file tree
Showing 4 changed files with 100 additions and 62 deletions.
53 changes: 53 additions & 0 deletions web/src/components/Common/LinkButtonNextPrev.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import React from 'react'
import styled from 'styled-components'
import {
LinkLookingLikeButton as LinkLookingLikeButtonBase,
LinkLookingLikeButtonProps,
} from 'src/components/Link/Link'
import { BsCaretLeftFill as ArrowLeftBase, BsCaretRightFill as ArrowRightBase } from 'react-icons/bs'

const ARROW_SIZE = 10

export interface LinkButtonNextProps extends LinkLookingLikeButtonProps {
text: string
}

export function LinkButtonNext({ href, text, ...restProps }: LinkButtonNextProps) {
return (
<LinkLookingLikeButton href={href} {...restProps}>
{text}
<ArrowRight size={ARROW_SIZE} />
</LinkLookingLikeButton>
)
}

export interface LinkButtonPrevProps extends LinkLookingLikeButtonProps {
text: string
}

export function LinkButtonPrev({ href, text, ...restProps }: LinkButtonPrevProps) {
return (
<LinkLookingLikeButton href={href} {...restProps}>
<ArrowLeft size={ARROW_SIZE} />
{text}
</LinkLookingLikeButton>
)
}

const LinkLookingLikeButton = styled(LinkLookingLikeButtonBase)`
padding: 0.2rem 0.3rem;
min-width: 120px;
font-size: 0.8rem;
`

const ArrowRight = styled(ArrowRightBase)`
margin-bottom: 2px;
margin-left: 0.25rem;
fill: ${(props) => props.theme.gray650};
`

const ArrowLeft = styled(ArrowLeftBase)`
margin-bottom: 2px;
margin-right: 0.25rem;
fill: ${(props) => props.theme.gray650};
`
13 changes: 13 additions & 0 deletions web/src/components/Link/Link.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { HTMLAttributes, PropsWithChildren } from 'react'
import { isNil, noop } from 'lodash-es'
import NextLink, { LinkProps as NextLinkProps } from 'next/link'
import { StrictOmit } from 'ts-essentials'
import { Button, ButtonProps } from 'reactstrap'

export interface LinkProps
extends StrictOmit<PropsWithChildren<NextLinkProps & HTMLAttributes<HTMLAnchorElement>>, 'href'> {
Expand All @@ -25,3 +26,15 @@ export function Link({ className, children, href, onClick, ...restProps }: LinkP
</NextLink>
)
}

export interface LinkLookingLikeButtonProps extends PropsWithChildren<ButtonProps> {
href?: string
}

export function LinkLookingLikeButton({ href, children, ...restProps }: LinkLookingLikeButtonProps) {
return (
<Link href={href} passHref legacyBehavior>
<Button {...restProps}>{children}</Button>
</Link>
)
}
50 changes: 18 additions & 32 deletions web/src/components/Regions/RegionPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React, { ReactNode, useMemo } from 'react'
import React, { useMemo } from 'react'
import { Col, Row } from 'reactstrap'
import urljoin from 'url-join'
import styled from 'styled-components'
import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
import { usePathogen, useRegionsDataQuery } from 'src/io/getData'
import { RegionsPlot } from 'src/components/Regions/RegionsPlot'
import { PageContainerHorizontal } from 'src/components/Layout/PageContainer'
import { RegionsSidebar } from 'src/components/Regions/RegionsSidebar'
import { Link } from 'src/components/Link/Link'
import urljoin from 'url-join'
import styled from 'styled-components'
import { LinkButtonNext, LinkButtonPrev } from 'src/components/Common/LinkButtonNextPrev'

export interface RegionsPageProps {
pathogenName: string
Expand All @@ -22,26 +22,12 @@ export function RegionPage({ pathogenName, location }: RegionsPageProps) {

const { prev, next } = useMemo(() => {
const i = locations.indexOf(location)
let prev: ReactNode = null
if (i > 0) {
const prevName = locations[i - 1]
prev = (
<Link href={urljoin('pathogen', pathogenName, 'regions', prevName)}>
{t('Previous: {{name}}', { name: t(prevName) })}
</Link>
)
}
let next: ReactNode = null
if (i < locations.length - 1) {
const nextName = locations[i + 1]
next = (
<Link href={urljoin('pathogen', pathogenName, 'regions', nextName)}>
{t('Next: {{name}}', { name: t(nextName) })}
</Link>
)
}
const prevName = locations[i - 1] ?? locations[locations.length - 1]
const prev = <LinkButtonPrev text={t(prevName)} href={urljoin('pathogen', pathogenName, 'regions', prevName)} />
const nextName = locations[i + 1] ?? locations[0]
const next = <LinkButtonNext text={t(nextName)} href={urljoin('pathogen', pathogenName, 'regions', nextName)} />
return { prev, next }
}, [pathogenName, t, location, locations])
}, [locations, location, t, pathogenName])

return (
<PageContainerHorizontal>
Expand All @@ -51,16 +37,16 @@ export function RegionPage({ pathogenName, location }: RegionsPageProps) {
<MainContentInner>
<Row noGutters>
<Col>
<span className="d-flex w-100">
<span className="mr-auto">{prev}</span>
<span className="ml-auto">{next}</span>
<span className="d-flex w-100 mt-2">
<span className="ml-2 mr-auto">{prev}</span>
<h4 className="text-center">
{t('{{pathogen}} in {{region}}', {
pathogen: t(pathogen.nameFriendly),
region: t(location),
})}
</h4>
<span className="mr-2 ml-auto">{next}</span>
</span>
<h4 className="text-center">
{t('{{name}} in {{region}}', {
name: t(pathogen.nameFriendly),
region: t(location),
})}
</h4>
</Col>
</Row>

Expand Down
46 changes: 16 additions & 30 deletions web/src/components/Variants/VariantPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { ReactNode, useMemo } from 'react'
import React, { useMemo } from 'react'
import styled from 'styled-components'
import { VariantsPlot } from 'src/components/Variants/VariantsPlot'
import { VariantsSidebar } from 'src/components/Variants/VariantsSidebar'
Expand All @@ -7,7 +7,7 @@ import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
import { usePathogen, useVariantDataQuery, useVariantsDataQuery } from 'src/io/getData'
import { Col, Row } from 'reactstrap'
import urljoin from 'url-join'
import { Link } from 'src/components/Link/Link'
import { LinkButtonNext, LinkButtonPrev } from 'src/components/Common/LinkButtonNextPrev'

export interface VariantsPageProps {
pathogenName: string
Expand All @@ -24,26 +24,12 @@ export function VariantPage({ pathogenName, variantName }: VariantsPageProps) {

const { prev, next } = useMemo(() => {
const i = variants.indexOf(variant)
let prev: ReactNode = null
if (i > 0) {
const prevName = variants[i - 1]
prev = (
<Link href={urljoin('pathogen', pathogenName, 'variants', prevName)}>
{t('Previous: {{name}}', { name: prevName })}
</Link>
)
}
let next: ReactNode = null
if (i < variants.length - 1) {
const nextName = variants[i + 1]
next = (
<Link href={urljoin('pathogen', pathogenName, 'variants', nextName)}>
{t('Next: {{name}}', { name: nextName })}
</Link>
)
}
const prevName = variants[i - 1] ?? variants[variants.length - 1]
const prev = <LinkButtonPrev text={t(prevName)} href={urljoin('pathogen', pathogenName, 'variants', prevName)} />
const nextName = variants[i + 1] ?? variants[0]
const next = <LinkButtonNext text={t(nextName)} href={urljoin('pathogen', pathogenName, 'variants', nextName)} />
return { prev, next }
}, [pathogenName, t, variant, variants])
}, [variants, variant, t, pathogenName])

return (
<PageContainerHorizontal>
Expand All @@ -53,16 +39,16 @@ export function VariantPage({ pathogenName, variantName }: VariantsPageProps) {
<MainContentInner>
<Row noGutters>
<Col>
<span className="d-flex w-100">
<span className="mr-auto">{prev}</span>
<span className="ml-auto">{next}</span>
<span className="d-flex w-100 mt-2">
<span className="ml-2 mr-auto">{prev}</span>
<h4 className="text-center">
{t('{{name}}, variant {{variant}}', {
name: t(pathogen.nameFriendly),
variant: variantName,
})}
</h4>
<span className="mr-2 ml-auto">{next}</span>
</span>
<h4 className="text-center">
{t('{{name}}, variant {{variant}}', {
name: t(pathogen.nameFriendly),
variant: variantName,
})}
</h4>
</Col>
</Row>

Expand Down

1 comment on commit fc84f81

@vercel
Copy link

@vercel vercel bot commented on fc84f81 Feb 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

flu-frequencies – ./

flu-frequencies-git-web-neherlab.vercel.app
flu-frequencies.vercel.app
flu-frequencies-neherlab.vercel.app

Please sign in to comment.