+
+
+
- {navbarSticky ?
+ {navbarSticky ? (
:
+
+ ) : (
- }
-
- { children }
-
+ )}
+
+ {children}
+
+
+
-
-
+
)
}
Layout.propTypes = {
- children: PropTypes.object.isRequired
+ children: PropTypes.object.isRequired,
}
export default Layout
diff --git a/components/MATChart.js b/components/MATChart.js
index e2e25269d..1482c5af7 100644
--- a/components/MATChart.js
+++ b/components/MATChart.js
@@ -1,15 +1,14 @@
-import { Box, Text } from 'ooni-components'
-import { StackedBarChart } from 'components/aggregation/mat/StackedBarChart'
+import axios from 'axios'
import { FunnelChart } from 'components/aggregation/mat/FunnelChart'
+import { MATContextProvider } from 'components/aggregation/mat/MATContext'
import { NoCharts } from 'components/aggregation/mat/NoCharts'
+import { StackedBarChart } from 'components/aggregation/mat/StackedBarChart'
import TableView from 'components/aggregation/mat/TableView'
-import { useMemo } from 'react'
-import useSWR from 'swr'
-import dayjs from 'services/dayjs'
import { axiosResponseTime } from 'components/axios-plugins'
-import axios from 'axios'
-import { MATContextProvider } from 'components/aggregation/mat/MATContext'
+import { useMemo } from 'react'
import { useIntl } from 'react-intl'
+import dayjs from 'services/dayjs'
+import useSWR from 'swr'
import { FormattedMarkdownBase } from './FormattedMarkdown'
axiosResponseTime(axios)
@@ -65,47 +64,62 @@ export const MATChartWrapper = ({ link, caption }) => {
...searchParams,
}
- return !!searchParams &&
-
-
- {captionText}
-
- )}
-
+ return (
+ !!searchParams && (
+
+
+ {caption && (
+
+ {captionText}
+
+ )}
+
+ )
+ )
}
const MATChart = ({ query, showFilters = true }) => {
const intl = useIntl()
- const { data, error, isValidating } = useSWR(query ? query : null, fetcher, swrOptions)
+ const { data, error, isValidating } = useSWR(
+ query ? query : null,
+ fetcher,
+ swrOptions,
+ )
const showLoadingIndicator = useMemo(() => isValidating, [isValidating])
return (
-
+ <>
{error &&
+ <>
{showLoadingIndicator ? (
-
- {intl.formatMessage({ id: 'General.Loading' })}
-
+ {intl.formatMessage({ id: 'General.Loading' })}
) : (
<>
- {data?.data?.result?.length > 0 ?
-
- {data && data.data.dimension_count == 0 && :
+
-
+
)
}
diff --git a/components/NavBar.js b/components/NavBar.js
index d3e4e20b5..ea40a0da1 100644
--- a/components/NavBar.js
+++ b/components/NavBar.js
@@ -1,129 +1,63 @@
import useUser from 'hooks/useUser'
-import NLink from 'next/link'
+import Link from 'next/link'
import { useRouter } from 'next/router'
-import { Box, Container, Flex } from 'ooni-components'
import ExplorerLogo from 'ooni-components/svgs/logos/Explorer-HorizontalMonochromeInverted.svg'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
import { MdClose, MdMenu } from 'react-icons/md'
import { FormattedMessage, useIntl } from 'react-intl'
-import styled from 'styled-components'
import { getLocalisedLanguageName } from 'utils/i18nCountries'
import { getDirection } from './withIntl'
-const StyledNavItem = styled(NLink)`
- position: relative;
- color: ${(props) => props.theme.colors.white};
- cursor: pointer;
- padding-bottom: ${(props) => (props.$active ? '4px' : '6px')};
- opacity: ${(props) => (props.$active ? '1' : '0.6')};
- border-bottom: ${(props) => (props.$active ? `2px solid ${props.theme.colors.white}` : 'none')};
-
- &:hover {
- padding-bottom: 4px;
- color: ${(props) => props.theme.colors.white};
- opacity: 1;
- border-bottom: 2px solid ${(props) => props.theme.colors.white};
- }
-`
-
-const LanguageSelect = styled.select`
-color: ${(props) => props.theme.colors.white};
-background: none;
-opacity: 0.6;
-border: none;
-text-transform: capitalize;
-cursor: pointer;
-font-family: inherit;
-font-size: inherit;
-padding: 0;
-padding-bottom: 6px;
-outline: none;
-appearance: none;
--webkit-appearance: none;
--moz-appearance: none;
--ms-appearance: none;
--o-appearance: none;
-&:hover {
- opacity: 1;
-}
-// reset option styling for browsers that apply it to its native styling (Brave)
-> option {
- color: initial;
- opacity: initial;
-}
-`
-
-const NavItem = ({ label, href, ...rest }) => {
+const LanguageSelect = (props) => (
+
+)
+
+const StyledNavItem = ({ isActive, ...props }) => (
+
+)
+
+const NavItem = ({ label, href, ...props }) => {
const { pathname } = useRouter()
const [isActive, setIsActive] = useState(false)
-
+
useEffect(() => {
setIsActive(pathname === href)
}, [pathname, href])
return (
-
{label}
+
+ {label}
+
)
}
-const StyledNavBar = styled.div`
- background-color: ${(props) => props.$bgColor || props.theme.colors.blue5};
- padding-top: 16px;
- padding-bottom: 20px;
- z-index: 9999;
-`
-
-const StyledResponsiveMenu = styled(Box)`
-.menuIcon,
-.closeIcon {
- display: none;
-}
-
-@media screen and (max-width: 948px) {
- .menuIcon,
- .closeIcon {
- display: block;
- cursor: pointer;
- }
-
- .closeIcon {
- color: ${(props) => props.theme.colors.black};
- }
-
- .menuItemsWrapper {
- display: none;
-
- &.visible {
- z-index: 999999;
- display: block;
- overflow-y: scroll;
- max-height: 100%;
- padding: ${(props) => props.theme.space[4]}px;
- font-Size: 16px;
- position: fixed;
- top: 0;
- right: 0;
- background: ${(props) => props.theme.colors.gray0};
-
- .menuItems {
- padding-top: ${(props) => props.theme.space[2]}px;
- flex-direction: column;
- align-items: start;
-
- a {
- border-color: ${(props) => props.theme.colors.black};
- }
-
- a, select {
- opacity: 1;
- color: ${(props) => props.theme.colors.black};
- }
- }
- }
- }
-}
-`
-
const languages = process.env.LOCALES
export const NavBar = ({ color }) => {
@@ -146,51 +80,98 @@ export const NavBar = ({ color }) => {
logout()
}
+ // biome-ignore lint/correctness/useExhaustiveDependencies:
useEffect(() => {
setShowMenu(false)
}, [pathname])
return (
-
-
-
-
-
-
-
-
- setShowMenu(!showMenu)} />
-
+
+
+
+
+
+
+
setShowMenu(!showMenu)}
+ />
+
{showMenu && (
-
- setShowMenu(!showMenu)} />
-
+
+ setShowMenu(!showMenu)}
+ />
+
)}
-
- a]:border-black [&>a]:hover:border-black [&>*]:opacity-100 [&>*]:text-black [&>*]:hover:text-black'}`}
+ >
+
+
)}
{languages.map((c) => (
-
+
{getLocalisedLanguageName(c, c)}
))}
-
-
-
-
-
-
+
+
+
+
+
-
+
+
-
- {title}
- {`${process.env.NEXT_PUBLIC_EXPLORER_URL}${asPath}`}
-
-
-
+
+
{title}
+
{`${process.env.NEXT_PUBLIC_EXPLORER_URL}${asPath}`}
+
+
+
+)
-export const StyledSticky = styled.div`
-position: sticky;
-top: 0;
-background: white;
-z-index: 99;
-border-bottom: 1px solid ${props => props.theme.colors.gray3};
-`
+export const StyledStickyNavBar = ({ ...props }) => (
+
+)
-export const StyledStickyNavBar = styled.div`
-position: sticky;
-top: 0;
-z-index: 100;
-`
-
-export const StyledStickySubMenu = styled(Box)`
-position: sticky;
-top: 65.5px;
-background: white;
-z-index: 99;
-border-bottom: 1px solid ${props => props.theme.colors.gray3};
-`
+export const StyledStickySubMenu = ({ ...props }) => (
+
+)
export const StickySubMenu = ({ title, children }) => {
return (
-
-
-
- {title}
-
-
- {children}
-
-
+
+
+
{title}
+ {children}
+
)
}
-
-// port the design to ooni-components
-export const StyledHollowButton = styled(Button)`
-&:hover {
- border-color: ${props => props.theme.colors.blue9};
- color: ${props => props.theme.colors.blue9};
- &:hover:enabled {
- border-color: ${props => props.theme.colors.blue9};
- }
-}
-`
-StyledHollowButton.defaultProps = {
- hollow: true
-}
\ No newline at end of file
diff --git a/components/SocialButtons.js b/components/SocialButtons.js
index 359434c71..d33063736 100644
--- a/components/SocialButtons.js
+++ b/components/SocialButtons.js
@@ -1,30 +1,46 @@
-import React from 'react'
import PropTypes from 'prop-types'
-import { Link, Flex, Text } from 'ooni-components'
import { MdShare } from 'react-icons/md'
import { useIntl } from 'react-intl'
const SocialButtons = ({ url }) => {
const intl = useIntl()
- return(
-
-
+ return (
+
+
+
{intl.formatMessage(
- {id: 'SocialButtons.CTA'},
+ { id: 'SocialButtons.CTA' },
{
- 'facebook-link': (string) => (
{string}),
- 'twitter-link': (string) => (
{string})
- }
+ 'facebook-link': (string) => (
+
+ {string}
+
+ ),
+ 'twitter-link': (string) => (
+
+ {string}
+
+ ),
+ },
)}
-
-
+
+
{intl.formatMessage({id: 'Search.Sidebar.TestName.AllTests'})} ,
+ includeAllOption && (
+
+ {intl.formatMessage({ id: 'Search.Sidebar.TestName.AllTests' })}
+
+ ),
[...sortedGroupedTestNameOptions].map(([group, tests]) => {
- const groupName = group in testGroups ? intl.formatMessage({id: testGroups[group].id}) : group
- const testOptions = tests.map(({id, name, intlKey}) => {
- return {intlKey ? intl.formatMessage({id: intlKey}) : name}
- })
+ const groupName =
+ group in testGroups
+ ? intl.formatMessage({ id: testGroups[group].id })
+ : group
+ const testOptions = tests.map(({ id, name, intlKey }) => {
+ return (
+
+ {intlKey ? intl.formatMessage({ id: intlKey }) : name}
+
+ )
+ })
return [ (`[${string}](https://ioda.inetintel.cc.gatech.edu/${country ? 'country' : 'asn'}/${location}${dateParams}`),
- 'cloudflare-link': (string) => (`[${string}](https://radar.cloudflare.com/${asn ? 'as' : ''}${location}?range=28d)`)
+ 'ioda-link': (string) =>
+ `[${string}](https://ioda.inetintel.cc.gatech.edu/${country ? 'country' : 'asn'}/${location}${dateParams}`,
+ 'cloudflare-link': (string) =>
+ `[${string}](https://radar.cloudflare.com/${asn ? 'as' : ''}${location}?range=28d)`,
}}
/>
)
}
-
-const ThirdPartyDataChart = ({since, until, country, asn, ...props}) => {
+const ThirdPartyDataChart = ({ since, until, country, asn, ...props }) => {
const intl = useIntl()
const location = country || asn
const [graphData, setGraphData] = useState([])
@@ -46,44 +47,60 @@ const ThirdPartyDataChart = ({since, until, country, asn, ...props}) => {
const [from, to] = useMemo(() => {
if (!since || !until) return []
// make sure the date is not in the future to avoid receiving error from CloudFlare
- const to = dayjs(until).isBefore(dayjs(), 'day') ?
- dayjs.utc(until).toISOString() :
- dayjs().subtract(30, 'minute').utc().toISOString()
+ const to = dayjs(until).isBefore(dayjs(), 'day')
+ ? dayjs.utc(until).toISOString()
+ : dayjs().subtract(30, 'minute').utc().toISOString()
const from = dayjs.utc(since).toISOString()
return [from, to]
}, [since, until])
const cloudflareData = useEffect(() => {
- if (!since && !until) return
-
+ if (!since && !until) return
+
setGraphData([])
setError(null)
Promise.allSettled([
- axios.get(`/api/cloudflare?from=${from}&to=${to}&${asn ? `asn=${asn}` : `country=${country}`}`),
- axios.get(`/api/ioda?from=${from}&to=${to}&${asn ? `asn=${asn}` : `country=${country}`}`)
- ]).then((results) => {
- const cloudflareData = results[0]
- const iodaData = results[1]
+ axios.get(
+ `/api/cloudflare?from=${from}&to=${to}&${asn ? `asn=${asn}` : `country=${country}`}`,
+ ),
+ axios.get(
+ `/api/ioda?from=${from}&to=${to}&${asn ? `asn=${asn}` : `country=${country}`}`,
+ ),
+ ])
+ .then((results) => {
+ const cloudflareData = results[0]
+ const iodaData = results[1]
- const cloudflareChartData = cloudflareData.status === 'fulfilled' ?
- [{
- 'id': intl.formatMessage({id:'ThirdPartyChart.Label.cloudflare'}),
- 'color': theme.colors.yellow5,
- 'data': cloudflareData.value.data,
- }] : []
+ const cloudflareChartData =
+ cloudflareData.status === 'fulfilled'
+ ? [
+ {
+ id: intl.formatMessage({
+ id: 'ThirdPartyChart.Label.cloudflare',
+ }),
+ color: colors.yellow['500'],
+ data: cloudflareData.value.data,
+ },
+ ]
+ : []
- const iodaChartData = iodaData.status === 'fulfilled' ?
- iodaData.value.data.map((item) => {
- return {
- 'id': intl.formatMessage({id: `ThirdPartyChart.Label.${item.datasource}`}),
- 'color': iodaLineColors[item.datasource],
- 'data': item.values
- }
- }) : []
+ const iodaChartData =
+ iodaData.status === 'fulfilled'
+ ? iodaData.value.data.map((item) => {
+ return {
+ id: intl.formatMessage({
+ id: `ThirdPartyChart.Label.${item.datasource}`,
+ }),
+ color: iodaLineColors[item.datasource],
+ data: item.values,
+ }
+ })
+ : []
- setGraphData([...iodaChartData, ...cloudflareChartData])
- }).catch((err) => {})
+ setGraphData([...iodaChartData, ...cloudflareChartData])
+ })
+ .catch((err) => {})
}, [since, until])
return (
@@ -92,25 +109,37 @@ const ThirdPartyDataChart = ({since, until, country, asn, ...props}) => {
{country ? (
<>
-
- {intl.formatMessage({id: 'Country.Outages'})}
+
+ {intl.formatMessage({ id: 'Country.Outages' })}
-
-
+
+
) : (
<>
- {intl.formatMessage({id: 'Country.Outages'})}
- {intl.formatMessage({ id: 'Country.Outages' })}
+
- {!!graphData.length && !error &&
+
+ {!!graphData.length && !error && (
{
type: 'linear',
stacked: false,
min: 0,
- max: 1
+ max: 1,
}}
axisBottom={{
format: '%Y-%m-%d',
}}
- enableSlices='x'
- colors={d => d.color}
- layers={[
- 'grid',
- 'axes',
- 'lines',
- 'legends',
- 'crosshair',
- Slices,
- ]}
+ enableSlices="x"
+ colors={(d) => d.color}
+ layers={['grid', 'axes', 'lines', 'legends', 'crosshair', Slices]}
sliceTooltip={(props) => {
if (props?.slice?.points?.length) {
const points = props.slice.points
@@ -152,10 +174,16 @@ const ThirdPartyDataChart = ({since, until, country, asn, ...props}) => {
border: '1px solid #ccc',
}}
>
- {new Intl.DateTimeFormat(intl.locale, { dateStyle: 'long', timeStyle: 'long', timeZone: 'UTC' }).format(new Date(points[0].data.x))}
+
+ {new Intl.DateTimeFormat(intl.locale, {
+ dateStyle: 'long',
+ timeStyle: 'long',
+ timeZone: 'UTC',
+ }).format(new Date(points[0].data.x))}
+
{points.map((point) => (
-
-
+ {
height: '10px',
}}
/>
-
{point.serieId} [{Number(point.data.yFormatted).toFixed(4)}]
-
+
+ {point.serieId} [
+ {Number(point.data.yFormatted).toFixed(4)}]
+
+
Unable to retrieve the data
- }
-
+ )}
+ {error && (
+ Unable to retrieve the data
+ )}
+