diff --git a/components/CallToActionBox.js b/components/CallToActionBox.js index 6e6c8e78..b51f5ec1 100644 --- a/components/CallToActionBox.js +++ b/components/CallToActionBox.js @@ -1,6 +1,6 @@ -import { Flex, Heading, Box, Text, Button } from 'ooni-components' -import { FormattedMessage } from 'react-intl' import NLink from 'next/link' +import { Box, Button, Flex, Heading, Text } from 'ooni-components' +import { FormattedMessage } from 'react-intl' const CallToActionBox = ({title, text}) => { return ( @@ -16,11 +16,9 @@ const CallToActionBox = ({title, text}) => { - - - + diff --git a/components/Chart.js b/components/Chart.js index 9d799870..1e3bd7ea 100644 --- a/components/Chart.js +++ b/components/Chart.js @@ -2,7 +2,7 @@ import GridChart, { prepareDataForGridChart } from 'components/aggregation/mat/G import { MATContextProvider } from 'components/aggregation/mat/MATContext' import { DetailsBox } from 'components/measurement/DetailsBox' import NLink from 'next/link' -import { Box, Flex, Heading, Link } from 'ooni-components' +import { Box, Flex } from 'ooni-components' import React, { useEffect, useMemo } from 'react' import { MdBarChart, MdOutlineFileDownload } from 'react-icons/md' import { FormattedMessage, useIntl } from 'react-intl' @@ -34,9 +34,11 @@ export const MATLink = ({ query }) => { } - - {intl.formatMessage({id: 'MAT.Charts.DownloadJSONData'})} - + + + {intl.formatMessage({id: 'MAT.Charts.DownloadJSONData'})} + + {intl.formatMessage({id: 'MAT.Charts.DownloadCSVData'})} diff --git a/components/VirtualizedGrid.js b/components/VirtualizedGrid.js index daffdd1f..49118c6d 100644 --- a/components/VirtualizedGrid.js +++ b/components/VirtualizedGrid.js @@ -1,13 +1,11 @@ -import React from 'react' -import debounce from 'lodash.debounce' -import styled from 'styled-components' import NLink from 'next/link' -import { Container, Text, Box, Flex, Link, Heading } from 'ooni-components' -import Head from 'next/head' +import { Box, Flex, Text } from 'ooni-components' +import React from 'react' import { FormattedMessage } from 'react-intl' -import { List, WindowScroller, AutoSizer, Table, Column } from 'react-virtualized' +import { AutoSizer, List, WindowScroller } from 'react-virtualized' +import styled from 'styled-components' -const StyledLink = styled(Link)` +const StyledLink = styled(NLink)` &:hover { filter: none; } @@ -34,38 +32,36 @@ export const GridBox = ({ title, count = null, href, tag, multiCount = null }) = const hasCount = Number.isInteger(count) return ( - - - - - {title} - - {(hasCount || tag) && - - {tag && - {tag} - } - {hasCount && - {count}}} - /> - } - - } - {multiCount && - - {Object.entries(multiCount).map(([key, value]) => ( - - {value} - - - ))} - - } - - - + + + + {title} + + {(hasCount || tag) && + + {tag && + {tag} + } + {hasCount && + {count}}} + /> + } + + } + {multiCount && + + {Object.entries(multiCount).map(([key, value]) => ( + + {value} + + + ))} + + } + + ) } diff --git a/components/aggregation/mat/CustomTooltip.js b/components/aggregation/mat/CustomTooltip.js index c38a78fb..591ff38a 100644 --- a/components/aggregation/mat/CustomTooltip.js +++ b/components/aggregation/mat/CustomTooltip.js @@ -1,13 +1,13 @@ -import React, { useMemo } from 'react' -import { Chip } from '@nivo/tooltip' import { useTheme } from '@nivo/core' -import { Box, Flex, Text, Link, theme } from 'ooni-components' +import { Chip } from '@nivo/tooltip' import NLink from 'next/link' +import { Box, Flex, Text, theme } from 'ooni-components' +import React, { useMemo } from 'react' -import { colorMap } from './colorMap' import { MdClear } from 'react-icons/md' import { useIntl } from 'react-intl' import { useMATContext } from './MATContext' +import { colorMap } from './colorMap' export const themeForInvisibleTooltip = { tooltip: { @@ -126,9 +126,11 @@ const CustomToolTip = React.memo(({ data, onClose, title, link = true }) => { ))} {link && - - {intl.formatMessage({id: 'MAT.CustomTooltip.ViewMeasurements'})} > - + + + {intl.formatMessage({id: 'MAT.CustomTooltip.ViewMeasurements'})} > + + } ) diff --git a/components/measurement/CommonSummary.js b/components/measurement/CommonSummary.js index 27a5c290..ef873d97 100644 --- a/components/measurement/CommonSummary.js +++ b/components/measurement/CommonSummary.js @@ -1,18 +1,15 @@ -import React from 'react' -import PropTypes from 'prop-types' -import styled from 'styled-components' import NLink from 'next/link' import { - Flex, - Container, Box, - Text, - Link, + Container, + Flex, + Text } from 'ooni-components' -import { useIntl } from 'react-intl' -import dayjs from 'services/dayjs' +import PropTypes from 'prop-types' +import React from 'react' import { MdOutlineFactCheck } from 'react-icons/md' -import { BiShareAlt } from 'react-icons/bi' +import { useIntl } from 'react-intl' +import styled from 'styled-components' import Flag from '../Flag' @@ -65,7 +62,7 @@ const CommonSummary = ({ {hero} - + @@ -74,12 +71,10 @@ const CommonSummary = ({ {country} - + - - - {network} {networkName} - + + {network} {networkName} diff --git a/components/measurement/nettests/WebConnectivity.js b/components/measurement/nettests/WebConnectivity.js index 80f874f7..16eef8d6 100644 --- a/components/measurement/nettests/WebConnectivity.js +++ b/components/measurement/nettests/WebConnectivity.js @@ -1,18 +1,17 @@ -import React from 'react' -import PropTypes from 'prop-types' import bufferFrom from 'buffer-from' -import url from 'url' import NLink from 'next/link' import { - Heading, - Flex, Box, - Text, - Link, + Flex, + Heading, + Text } from 'ooni-components' +import PropTypes from 'prop-types' +import React from 'react' +import url from 'url' -import { Tick, Cross } from 'ooni-components/icons' import deepmerge from 'deepmerge' +import { Cross, Tick } from 'ooni-components/icons' import styled from 'styled-components' import { FormattedMessage, defineMessages, useIntl } from 'react-intl' @@ -350,7 +349,7 @@ const WebConnectivityDetails = ({ id='Measurement.SummaryText.Websites.Failed' values={{ date, - WebsiteURL: {input}, + WebsiteURL: {input}, network: probe_asn, country }} @@ -361,7 +360,7 @@ const WebConnectivityDetails = ({ id='Measurement.SummaryText.Websites.ConfirmedBlocked' values={{ date, - WebsiteURL: {input}, + WebsiteURL: {input}, network: probe_asn, country }} @@ -385,7 +384,7 @@ const WebConnectivityDetails = ({ id='Measurement.SummaryText.Websites.Anomaly' values={{ date, - WebsiteURL: {input}, + WebsiteURL: {input}, 'link-to-docs': (string) => ({string}), network: probe_asn, country, @@ -410,7 +409,7 @@ const WebConnectivityDetails = ({ id='Measurement.SummaryText.Websites.Accessible' values={{ date, - WebsiteURL: {input}, + WebsiteURL: {input}, network: probe_asn, country }} @@ -433,7 +432,7 @@ const WebConnectivityDetails = ({ id='Measurement.SummaryText.Websites.Down' values={{ date, - WebsiteURL: {input}, + WebsiteURL: {input}, network: probe_asn, country }} @@ -457,7 +456,7 @@ const WebConnectivityDetails = ({ id='Measurement.SummaryText.Websites.Failed' values={{ date, - WebsiteURL: {input}, + WebsiteURL: {input}, network: probe_asn, country }} @@ -490,8 +489,8 @@ const WebConnectivityDetails = ({ status: status, statusInfo: - {input} + + {input} } message={reason} diff --git a/components/search/Loader.js b/components/search/Loader.js index 4ae57e86..d18e5f12 100644 --- a/components/search/Loader.js +++ b/components/search/Loader.js @@ -1,25 +1,24 @@ -import React from 'react' +import { theme } from 'ooni-components' import PropTypes from 'prop-types' import ContentLoader from 'react-content-loader' -import { theme } from 'ooni-components' export const LoaderRow = (props) => { const isWide = (Math.random() * 100) > 70 const random = Math.random() * (1 - 0.7) + 0.7 return ( - - - - {} - {isWide && } - + + + + + {isWide && } + ) } @@ -38,3 +37,5 @@ export const Loader = ({ rows = 10 }) => ( Loader.propTypes = { rows: PropTypes.number } + +export default Loader diff --git a/components/search/ResultsList.js b/components/search/ResultsList.js index 1a1ca99b..b59866a6 100644 --- a/components/search/ResultsList.js +++ b/components/search/ResultsList.js @@ -1,24 +1,24 @@ -import React from 'react' -import PropTypes from 'prop-types' -import url from 'url' -import dayjs from 'services/dayjs' import NLink from 'next/link' -import styled from 'styled-components' -import { useIntl, defineMessages } from 'react-intl' import { - Flex, Box, - Link, + Box, + Flex, Text } from 'ooni-components' +import PropTypes from 'prop-types' +import React from 'react' +import { defineMessages, useIntl } from 'react-intl' +import dayjs from 'services/dayjs' +import styled from 'styled-components' +import url from 'url' -import { testNames } from '/components/test-info' +import Flag from '../Flag' import { - colorNormal, - colorError, + colorAnomaly, colorConfirmed, - colorAnomaly + colorError, + colorNormal } from '../colors' -import Flag from '../Flag' +import { testNames } from '/components/test-info' const StyledResultTag = styled.div` border-radius: 16px; @@ -221,7 +221,7 @@ ASNBox.propTypes = { } // XXX add this to the design system -const StyledViewDetailsLink = styled(Link)` +const StyledViewDetailsLink = styled.span` cursor: pointer; text-decoration: none; color: ${props => props.theme.colors.blue5}; @@ -235,7 +235,7 @@ const ViewDetailsLink = ({measurementUid, children}) => { return ( - {children} + {children} ) } diff --git a/pages/404.js b/pages/404.js index 3b27f36d..0b45a875 100644 --- a/pages/404.js +++ b/pages/404.js @@ -1,14 +1,14 @@ -import React from 'react' import Head from 'next/head' import Link from 'next/link' import { useRouter } from 'next/router' import { - Container, Box, + Container, Flex, - Text, - Heading + Heading, + Text } from 'ooni-components' +import React from 'react' import { FormattedMessage, useIntl } from 'react-intl' import NavBar from '../components/NavBar' @@ -35,10 +35,10 @@ const Custom404 = () => { defaultMessage='We could not find the content you were looking for. Maybe try {measurmentLink} or look at {homePageLink}.' values={{ measurmentLink: - {message => {message}} + {message => {message}} , homePageLink: - {message => {message}} + {message => {message}} }} /> diff --git a/pages/as/[probe_asn].js b/pages/as/[probe_asn].js index 95ed398f..25ea8579 100644 --- a/pages/as/[probe_asn].js +++ b/pages/as/[probe_asn].js @@ -1,14 +1,14 @@ import axios from 'axios' -import Calendar from 'components/as/Calendar' -import Loader from 'components/as/Loader' import CallToActionBox from 'components/CallToActionBox' import Chart from 'components/Chart' import CountryList from 'components/CountryBox' -import Form from 'components/domain/Form' import NavBar from 'components/NavBar' -import ResultsList from 'components/search/ResultsList' import { StyledHollowButton, StyledSticky } from 'components/SharedStyledComponents' import ThirdPartyDataChart from 'components/ThirdPartyDataChart' +import Calendar from 'components/as/Calendar' +import Loader from 'components/as/Loader' +import Form from 'components/domain/Form' +import ResultsList from 'components/search/ResultsList' import Head from 'next/head' import NLink from 'next/link' import { useRouter } from 'next/router' @@ -120,13 +120,11 @@ export const RecentMeasurements = ({ recentMeasurements, query }) => { {intl.formatMessage({ id: 'Domain.RecentMeasurements.Title' })} - - - - {intl.formatMessage({ id: 'Domain.Button.SearchResults' })}{' '} - - - + + + {intl.formatMessage({ id: 'Domain.Button.SearchResults' })}{' '} + + ) diff --git a/pages/domain/[domain].js b/pages/domain/[domain].js index 10e3e331..f04fc174 100644 --- a/pages/domain/[domain].js +++ b/pages/domain/[domain].js @@ -6,11 +6,11 @@ import { useMemo, useState } from 'react' import { useIntl } from 'react-intl' import TestGroupBadge, { CategoryBadge } from 'components/Badge' -import Form from 'components/domain/Form' import Chart from 'components/DomainChart' import NavBar from 'components/NavBar' import { StyledSticky } from 'components/SharedStyledComponents' import { GridBox } from 'components/VirtualizedGrid' +import Form from 'components/domain/Form' import Head from 'next/head' import NLink from 'next/link' import { RecentMeasurements } from 'pages/as/[probe_asn]' @@ -126,7 +126,7 @@ const Canonical = ({ canonicalDomain }) => { { id: 'Domain.Canonical' }, { canonicalDomain: ( - + {canonicalDomain} ), diff --git a/pages/search.js b/pages/search.js index 4c627dc8..682d6ae4 100644 --- a/pages/search.js +++ b/pages/search.js @@ -1,26 +1,30 @@ -import React, { useState, useEffect } from 'react' -import PropTypes from 'prop-types' +import axios from 'axios' import Head from 'next/head' import { useRouter } from 'next/router' -import axios from 'axios' -import styled from 'styled-components' import { - Flex, Box, - Container, + Box, Button, + Container, + Flex, Heading, Text } from 'ooni-components' +import PropTypes from 'prop-types' +import React, { useEffect, useState } from 'react' import { FormattedMessage, useIntl } from 'react-intl' import dayjs from 'services/dayjs' +import styled from 'styled-components' import NavBar from '/components/NavBar' -import ResultsList from '/components/search/ResultsList' -import FilterSidebar, { queryToFilterMap } from '/components/search/FilterSidebar' -import { Loader } from '/components/search/Loader' import FormattedMarkdown from '/components/FormattedMarkdown' +import FilterSidebar, { queryToFilterMap } from '/components/search/FilterSidebar' +// import { Loader } from '/components/search/Loader' +import ResultsList from '/components/search/ResultsList' + +const Loader = dynamic(() => import('/components/search/Loader'), { ssr: false }) +import dynamic from 'next/dynamic' import { sortByKey } from '../utils' export const getServerSideProps = async ({query}) => { @@ -165,18 +169,17 @@ const Search = ({ countries, query: queryProp }) => { const [nextURL, setNextURL] = useState(null) const [loading, setLoading] = useState(true) const [results, setResults] = useState([]) - const [filters, setFilters] = useState({}) const [error, setError] = useState(null) useEffect(() => { - const query = query || queryProp + const q = query || queryProp const href = { pathname: '/search', - query: query + query: q } replace(href, href, { shallow: true }) - getMeasurements(query) + getMeasurements(q) .then(({ data: { results, metadata: { next_url } } }) => { setLoading(false) setResults(results)