From 48adbd90302cc63d46bd39eebe3b7e43f4924815 Mon Sep 17 00:00:00 2001 From: majakomel Date: Tue, 19 Mar 2024 13:39:07 +0100 Subject: [PATCH] Biome formatting --- .editorconfig | 30 - .eslintrc.json | 15 - .prettierrc | 5 - Todo.md | 37 - biome.json | 25 + components/Badge.js | 11 +- components/BlockText.js | 8 +- components/CallToActionBox.js | 20 +- components/Chart.js | 83 +- components/CollapseTrigger.js | 6 +- components/CountryBox.js | 34 +- components/DateRangePicker.js | 73 +- components/DomainChart.js | 70 +- components/Flag.js | 294 +- components/Footer.js | 80 +- components/FormattedMarkdown.js | 16 +- components/GridLoader.js | 80 +- components/Header.js | 57 +- components/Layout.js | 37 +- components/MATChart.js | 65 +- components/NavBar.js | 80 +- components/NotFound.js | 6 +- components/SharedStyledComponents.js | 24 +- components/SocialButtons.js | 40 +- components/TestNameOptions.js | 41 +- components/ThirdPartyDataChart.js | 181 +- components/VictoryTheme.js | 224 +- components/VirtualizedGrid.js | 72 +- components/aggregation/Debug.js | 195 +- components/aggregation/DebugContext.js | 61 +- components/aggregation/mat/ChartHeader.js | 84 +- .../aggregation/mat/ConfirmationModal.js | 36 +- .../aggregation/mat/CountryNameLabel.js | 12 +- components/aggregation/mat/CustomBarItem.js | 27 +- components/aggregation/mat/CustomTooltip.js | 94 +- components/aggregation/mat/Filters.js | 316 +- components/aggregation/mat/Form.js | 163 +- components/aggregation/mat/FunnelChart.js | 28 +- components/aggregation/mat/GridChart.js | 66 +- components/aggregation/mat/HeatMapChart.js | 96 +- components/aggregation/mat/Help.js | 46 +- components/aggregation/mat/MATContext.js | 28 +- components/aggregation/mat/NoCharts.js | 18 +- components/aggregation/mat/RowChart.js | 130 +- components/aggregation/mat/StackedBarChart.js | 18 +- components/aggregation/mat/TableView.js | 29 +- components/aggregation/mat/VirtualRows.js | 33 +- components/aggregation/mat/XAxis.js | 15 +- components/aggregation/mat/colorMap.js | 10 +- components/aggregation/mat/computations.js | 36 +- components/aggregation/mat/labels.js | 29 +- components/aggregation/mat/timeScaleXAxis.js | 50 +- components/as/Calendar.js | 59 +- components/as/Form.js | 10 +- components/as/Loader.js | 230 +- components/axios-plugins.js | 1 - components/chart/Slices.js | 46 +- components/country/Apps.js | 73 +- .../country/ConfirmedBlockedCategory.js | 101 +- components/country/CountryContext.js | 16 +- components/country/CountryDetails.js | 101 +- components/country/CountryHead.js | 60 +- components/country/Overview.js | 87 +- components/country/OverviewCharts.js | 252 +- components/country/PageNavMenu.js | 60 +- components/country/SectionHeader.js | 6 +- components/country/Tooltip.js | 9 +- components/country/Websites.js | 50 +- components/country/boxes.js | 19 +- components/dashboard/Charts.js | 147 +- components/dashboard/Form.js | 43 +- components/dashboard/MetaTags.js | 21 +- components/domain/Form.js | 8 +- components/findings/FindingDisplay.js | 56 +- components/findings/Form.js | 285 +- components/findings/LoginRequiredModal.js | 10 +- components/flags/ad.js | 4 +- components/flags/ae.js | 4 +- components/flags/af.js | 4 +- components/flags/ag.js | 4 +- components/flags/ai.js | 4 +- components/flags/al.js | 4 +- components/flags/am.js | 4 +- components/flags/ao.js | 4 +- components/flags/aq.js | 4 +- components/flags/ar.js | 4 +- components/flags/as.js | 4 +- components/flags/at.js | 4 +- components/flags/au.js | 4 +- components/flags/aw.js | 4 +- components/flags/ax.js | 4 +- components/flags/az.js | 4 +- components/flags/ba.js | 4 +- components/flags/bb.js | 4 +- components/flags/bd.js | 4 +- components/flags/be.js | 4 +- components/flags/bf.js | 4 +- components/flags/bg.js | 4 +- components/flags/bh.js | 4 +- components/flags/bi.js | 4 +- components/flags/bj.js | 4 +- components/flags/bl.js | 4 +- components/flags/bm.js | 4 +- components/flags/bn.js | 4 +- components/flags/bo.js | 4 +- components/flags/bq.js | 4 +- components/flags/br.js | 4 +- components/flags/bs.js | 4 +- components/flags/bt.js | 4 +- components/flags/bv.js | 4 +- components/flags/bw.js | 4 +- components/flags/by.js | 4 +- components/flags/bz.js | 4 +- components/flags/ca.js | 4 +- components/flags/cc.js | 4 +- components/flags/cd.js | 4 +- components/flags/cf.js | 4 +- components/flags/cg.js | 4 +- components/flags/ch.js | 4 +- components/flags/ci.js | 4 +- components/flags/ck.js | 4 +- components/flags/cl.js | 4 +- components/flags/cm.js | 4 +- components/flags/cn.js | 4 +- components/flags/co.js | 4 +- components/flags/cr.js | 4 +- components/flags/cu.js | 4 +- components/flags/cv.js | 4 +- components/flags/cw.js | 4 +- components/flags/cx.js | 4 +- components/flags/cy.js | 4 +- components/flags/cz.js | 4 +- components/flags/de.js | 4 +- components/flags/dj.js | 4 +- components/flags/dk.js | 4 +- components/flags/dm.js | 4 +- components/flags/do.js | 4 +- components/flags/dz.js | 4 +- components/flags/ec.js | 4 +- components/flags/ee.js | 4 +- components/flags/eg.js | 4 +- components/flags/eh.js | 4 +- components/flags/er.js | 4 +- components/flags/es.js | 4 +- components/flags/et.js | 4 +- components/flags/eu.js | 4 +- components/flags/fi.js | 4 +- components/flags/fj.js | 4 +- components/flags/fk.js | 4 +- components/flags/fm.js | 4 +- components/flags/fo.js | 4 +- components/flags/fr.js | 4 +- components/flags/ga.js | 4 +- components/flags/gb.js | 4 +- components/flags/gd.js | 4 +- components/flags/ge.js | 4 +- components/flags/gf.js | 4 +- components/flags/gg.js | 4 +- components/flags/gh.js | 4 +- components/flags/gi.js | 4 +- components/flags/gl.js | 4 +- components/flags/gm.js | 4 +- components/flags/gn.js | 4 +- components/flags/gp.js | 4 +- components/flags/gq.js | 4 +- components/flags/gr.js | 4 +- components/flags/gs.js | 4 +- components/flags/gt.js | 4 +- components/flags/gu.js | 4 +- components/flags/gw.js | 4 +- components/flags/gy.js | 4 +- components/flags/hk.js | 4 +- components/flags/hm.js | 4 +- components/flags/hn.js | 4 +- components/flags/hr.js | 4 +- components/flags/ht.js | 4 +- components/flags/hu.js | 4 +- components/flags/id.js | 4 +- components/flags/ie.js | 4 +- components/flags/il.js | 4 +- components/flags/im.js | 4 +- components/flags/in.js | 4 +- components/flags/io.js | 4 +- components/flags/iq.js | 4 +- components/flags/ir.js | 4 +- components/flags/is.js | 4 +- components/flags/it.js | 4 +- components/flags/je.js | 4 +- components/flags/jm.js | 4 +- components/flags/jo.js | 4 +- components/flags/jp.js | 4 +- components/flags/ke.js | 4 +- components/flags/kg.js | 4 +- components/flags/kh.js | 4 +- components/flags/ki.js | 4 +- components/flags/km.js | 4 +- components/flags/kn.js | 4 +- components/flags/kp.js | 4 +- components/flags/kr.js | 4 +- components/flags/kw.js | 4 +- components/flags/ky.js | 4 +- components/flags/kz.js | 4 +- components/flags/la.js | 4 +- components/flags/lb.js | 4 +- components/flags/lc.js | 4 +- components/flags/li.js | 4 +- components/flags/lk.js | 4 +- components/flags/lr.js | 4 +- components/flags/ls.js | 4 +- components/flags/lt.js | 4 +- components/flags/lu.js | 4 +- components/flags/lv.js | 4 +- components/flags/ly.js | 4 +- components/flags/ma.js | 4 +- components/flags/mc.js | 4 +- components/flags/md.js | 4 +- components/flags/me.js | 4 +- components/flags/mf.js | 4 +- components/flags/mg.js | 4 +- components/flags/mh.js | 4 +- components/flags/mk.js | 4 +- components/flags/ml.js | 4 +- components/flags/mm.js | 4 +- components/flags/mn.js | 4 +- components/flags/mo.js | 4 +- components/flags/mp.js | 4 +- components/flags/mq.js | 4 +- components/flags/mr.js | 4 +- components/flags/ms.js | 4 +- components/flags/mt.js | 4 +- components/flags/mu.js | 4 +- components/flags/mv.js | 4 +- components/flags/mw.js | 4 +- components/flags/mx.js | 4 +- components/flags/my.js | 4 +- components/flags/mz.js | 4 +- components/flags/na.js | 4 +- components/flags/nc.js | 4 +- components/flags/ne.js | 4 +- components/flags/nf.js | 4 +- components/flags/ng.js | 4 +- components/flags/ni.js | 4 +- components/flags/nl.js | 4 +- components/flags/no.js | 4 +- components/flags/np.js | 4 +- components/flags/nr.js | 4 +- components/flags/nu.js | 4 +- components/flags/nz.js | 4 +- components/flags/om.js | 4 +- components/flags/pa.js | 4 +- components/flags/pe.js | 4 +- components/flags/pf.js | 4 +- components/flags/pg.js | 4 +- components/flags/ph.js | 4 +- components/flags/pk.js | 4 +- components/flags/pl.js | 4 +- components/flags/pm.js | 4 +- components/flags/pn.js | 4 +- components/flags/pr.js | 4 +- components/flags/ps.js | 4 +- components/flags/pt.js | 4 +- components/flags/pw.js | 4 +- components/flags/py.js | 4 +- components/flags/qa.js | 4 +- components/flags/re.js | 4 +- components/flags/ro.js | 4 +- components/flags/rs.js | 4 +- components/flags/ru.js | 4 +- components/flags/rw.js | 4 +- components/flags/sa.js | 4 +- components/flags/sb.js | 4 +- components/flags/sc.js | 4 +- components/flags/sd.js | 4 +- components/flags/se.js | 4 +- components/flags/sg.js | 4 +- components/flags/sh.js | 4 +- components/flags/si.js | 4 +- components/flags/sj.js | 4 +- components/flags/sk.js | 4 +- components/flags/sl.js | 4 +- components/flags/sm.js | 4 +- components/flags/sn.js | 4 +- components/flags/so.js | 4 +- components/flags/sr.js | 4 +- components/flags/ss.js | 4 +- components/flags/st.js | 4 +- components/flags/sv.js | 4 +- components/flags/sx.js | 4 +- components/flags/sy.js | 4 +- components/flags/sz.js | 4 +- components/flags/tc.js | 4 +- components/flags/td.js | 4 +- components/flags/tf.js | 4 +- components/flags/tg.js | 4 +- components/flags/th.js | 4 +- components/flags/tj.js | 4 +- components/flags/tk.js | 4 +- components/flags/tl.js | 4 +- components/flags/tm.js | 4 +- components/flags/tn.js | 4 +- components/flags/to.js | 4 +- components/flags/tr.js | 4 +- components/flags/tt.js | 4 +- components/flags/tv.js | 4 +- components/flags/tw.js | 4 +- components/flags/tz.js | 4 +- components/flags/ua.js | 4 +- components/flags/ug.js | 4 +- components/flags/um.js | 4 +- components/flags/un.js | 4 +- components/flags/us.js | 4 +- components/flags/uy.js | 4 +- components/flags/uz.js | 4 +- components/flags/va.js | 4 +- components/flags/vc.js | 4 +- components/flags/ve.js | 4 +- components/flags/vg.js | 4 +- components/flags/vi.js | 4 +- components/flags/vn.js | 4 +- components/flags/vu.js | 4 +- components/flags/wf.js | 4 +- components/flags/ws.js | 4 +- components/flags/ye.js | 4 +- components/flags/yt.js | 4 +- components/flags/za.js | 4 +- components/flags/zm.js | 4 +- components/flags/zw.js | 4 +- components/landing/ChartLoader.js | 3 +- components/landing/HighlightBox.js | 38 +- components/landing/HighlightsSection.js | 104 +- components/landing/Stats.js | 148 +- components/login/LoginForm.js | 77 +- components/measurement/AccessPointStatus.js | 37 +- components/measurement/CommonDetails.js | 152 +- components/measurement/CommonSummary.js | 66 +- components/measurement/DetailsBox.js | 78 +- components/measurement/DetailsHeader.js | 42 +- components/measurement/FeedbackBox.js | 226 +- components/measurement/HeadMetadata.js | 52 +- components/measurement/Hero.js | 68 +- components/measurement/InfoBoxItem.js | 20 +- .../measurement/MeasurementContainer.js | 22 +- components/measurement/PerformanceDetails.js | 88 +- components/measurement/StatusInfo.js | 29 +- components/measurement/SummaryText.js | 38 +- components/measurement/nettests/Dash.js | 141 +- components/measurement/nettests/Default.js | 6 +- .../measurement/nettests/FacebookMessenger.js | 178 +- .../nettests/HTTPHeaderFieldManipulation.js | 44 +- .../nettests/HTTPInvalidRequestLine.js | 55 +- components/measurement/nettests/Ndt.js | 142 +- components/measurement/nettests/Psiphon.js | 55 +- components/measurement/nettests/Signal.js | 41 +- components/measurement/nettests/Telegram.js | 161 +- components/measurement/nettests/Tor.js | 209 +- .../measurement/nettests/TorSnowflake.js | 74 +- components/measurement/nettests/VanillaTor.js | 75 +- .../measurement/nettests/WebConnectivity.js | 497 ++- components/measurement/nettests/WhatsApp.js | 99 +- .../measurement/nettests/mlab_servers.json | 3220 ++++++-------- components/measurement/nettests/mlab_utils.js | 4 +- .../measurement/useTestKeyController.js | 70 +- components/search/FilterSidebar.js | 123 +- components/search/FilterTabs.js | 46 +- components/search/Loader.js | 10 +- components/search/ResultsList.js | 225 +- components/test-info.js | 259 +- components/useMobileDetection.js | 2 +- components/utils.js | 12 +- components/utils/categoryCodes.js | 96 +- components/utils/profiler.js | 17 +- components/vendor/SpinLoader.js | 23 +- components/withIntl.js | 14 +- cypress.config.js | 2 +- cypress/e2e/countries.e2e.cy.js | 9 +- cypress/e2e/country.e2e.cy.js | 10 +- cypress/e2e/findings.e2e.cy.js | 54 +- cypress/e2e/home.e2e.cy.js | 1 - cypress/e2e/legacy.e2e.cy.js | 16 +- cypress/e2e/mat.e2e.cy.js | 14 +- cypress/e2e/measurement.e2e.cy.js | 266 +- cypress/e2e/search.e2e.cy.js | 33 +- cypress/mocks/handlers.js | 40 +- cypress/support/commands.js | 7 +- cypress/support/msw.js | 1 - hooks/useFilterWithSort.js | 10 +- hooks/useScrollPosition.js | 4 +- hooks/useUser.js | 21 +- jsconfig.json | 7 +- lib/api.js | 42 +- next.config.js | 257 +- package.json | 10 +- pages/404.js | 52 +- pages/_app.js | 7 +- pages/_document.js | 15 +- pages/_error.js | 2 +- pages/api/cloudflare.js | 71 +- pages/api/ioda.js | 61 +- pages/as/[probe_asn].js | 411 +- pages/chart/circumvention.js | 83 +- pages/chart/mat.js | 18 +- pages/countries.js | 163 +- pages/country/[countryCode].js | 51 +- pages/domain/[domain].js | 84 +- pages/domains.js | 161 +- pages/findings/[id].js | 44 +- pages/findings/create.js | 30 +- pages/findings/dashboard.js | 180 +- pages/findings/edit/[id].js | 119 +- pages/findings/index.js | 156 +- pages/index.js | 172 +- pages/login.js | 51 +- pages/m/[measurement_uid].js | 118 +- pages/measurement/[[...report_id]].js | 28 +- pages/networks.js | 126 +- pages/search.js | 196 +- public/mockServiceWorker.js | 19 +- sentry.client.config.js | 2 +- services/dayjs.js | 8 +- services/fetchers.js | 49 +- utils/i18nCountries.js | 8 +- utils/index.js | 38 +- yarn.lock | 3941 +++++++---------- 423 files changed, 10252 insertions(+), 10290 deletions(-) delete mode 100644 .editorconfig delete mode 100644 .eslintrc.json delete mode 100644 .prettierrc delete mode 100644 Todo.md create mode 100644 biome.json diff --git a/.editorconfig b/.editorconfig deleted file mode 100644 index 90913b4b9..000000000 --- a/.editorconfig +++ /dev/null @@ -1,30 +0,0 @@ -# http://editorconfig.org - -# A special property that should be specified at the top of the file outside of -# any sections. Set to true to stop .editor config file search on current file -root = true - -[*] -# Indentation style -# Possible values - tab, space -indent_style = space - -# Indentation size in single-spaced characters -# Possible values - an integer, tab -indent_size = 2 - -# Line ending file format -# Possible values - lf, crlf, cr -end_of_line = lf - -# File character encoding -# Possible values - latin1, utf-8, utf-16be, utf-16le -charset = utf-8 - -# Denotes whether to trim whitespace at the end of lines -# Possible values - true, false -trim_trailing_whitespace = true - -# Denotes whether file should end with a newline -# Possible values - true, false -insert_final_newline = true diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index 96ba9dcc1..000000000 --- a/.eslintrc.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "root": true, - "plugins": ["cypress"], - "extends": ["next/core-web-vitals", "plugin:cypress/recommended", "prettier"], - "rules": { - "linebreak-style": ["error", "unix"], - "quotes": ["error", "single"], - "semi": ["error", "never"] - }, - "parserOptions": { - "ecmaVersion": "latest", - "sourceType": "module" - }, - "ignorePatterns": ["node_modules", "components/vendor", "static"] -} diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index b52a92b10..000000000 --- a/.prettierrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "singleQuote": true, - "semi": false, - "printWidth": 100 -} diff --git a/Todo.md b/Todo.md deleted file mode 100644 index 0749200ca..000000000 --- a/Todo.md +++ /dev/null @@ -1,37 +0,0 @@ -# Frontend TODO - -## Major - -Charts: - -- Download speed by time chart component - -# Backend TODO - -## Country page - -* Number of networks that showed the presence of a middlebox - -* If Instant messagging apps might be blocked - -* If Circumvention tools are working - -* Types of blocked websites (as in the number of sites per category found to be blocked) - -* Time series of number measurements per test class (websites, im, middleboxes, etc.) - -* Time series of number of measurements per ASN by test class - -* Total number of measurements for the given country - -* Total number of network tested for a given country - -* Median upload and download speed - -* Dash measurements that show testers can stream more than a certain type of video quality - -* IM app blocking status grouped by ASN - -* Middlebox presence status grouped by ASN - -* Anomaly, measurements, and blocked counts per website. (Perhaps break this down per ASN too) diff --git a/biome.json b/biome.json new file mode 100644 index 000000000..d360f8c12 --- /dev/null +++ b/biome.json @@ -0,0 +1,25 @@ +{ + "$schema": "https://biomejs.dev/schemas/1.6.1/schema.json", + "organizeImports": { + "enabled": true + }, + "linter": { + "enabled": true, + "rules": { + "recommended": true + } + }, + "formatter": { + "indentStyle": "space", + "indentWidth": 2 + }, + "javascript": { + "formatter": { + "semicolons": "asNeeded", + "quoteStyle": "single" + } + }, + "files": { + "ignore": [".next/", "scripts/", "public/"] + } +} diff --git a/components/Badge.js b/components/Badge.js index 0c01893cf..9e2b89d9a 100644 --- a/components/Badge.js +++ b/components/Badge.js @@ -1,10 +1,10 @@ import { Box, Flex, Text, theme } from 'ooni-components' +import * as icons from 'ooni-components/icons' import PropTypes from 'prop-types' import { cloneElement } from 'react' import { FormattedMessage } from 'react-intl' import styled from 'styled-components' import { getTestMetadata } from './utils' -import * as icons from 'ooni-components/icons' // XXX replace what is inside of search/results-list.StyledResultTag export const Badge = styled(Box)` @@ -15,7 +15,8 @@ export const Badge = styled(Box)` font-size: 12px; text-transform: uppercase; background-color: ${(props) => props.bg || props.theme.colors.gray8}; - border: ${(props) => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')}; + border: ${(props) => + props.borderColor ? `1px solid ${props.borderColor}` : 'none'}; color: ${(props) => props.color || props.theme.colors.white}; letter-spacing: 1.25px; font-weight: 600; @@ -43,7 +44,11 @@ export const CategoryBadge = ({ categoryCode }) => { } return ( - + diff --git a/components/BlockText.js b/components/BlockText.js index a38426390..349a06907 100644 --- a/components/BlockText.js +++ b/components/BlockText.js @@ -1,9 +1,9 @@ -import styled from 'styled-components' import { Box } from 'ooni-components' +import styled from 'styled-components' const BlockText = styled(Box)` - background-color: ${props => props.theme.colors.gray0}; - border-left: 10px solid ${props => props.theme.colors.blue5}; + background-color: ${(props) => props.theme.colors.gray0}; + border-left: 10px solid ${(props) => props.theme.colors.blue5}; ` BlockText.defaultProps = { @@ -11,4 +11,4 @@ BlockText.defaultProps = { fontSize: 1, } -export default BlockText \ No newline at end of file +export default BlockText diff --git a/components/CallToActionBox.js b/components/CallToActionBox.js index b51f5ec13..2de39d0c5 100644 --- a/components/CallToActionBox.js +++ b/components/CallToActionBox.js @@ -2,22 +2,18 @@ import NLink from 'next/link' import { Box, Button, Flex, Heading, Text } from 'ooni-components' import { FormattedMessage } from 'react-intl' -const CallToActionBox = ({title, text}) => { +const CallToActionBox = ({ title, text }) => { return ( - + - - {title} - - - {text} - + {title} + {text} - + - + @@ -26,4 +22,4 @@ const CallToActionBox = ({title, text}) => { ) } -export default CallToActionBox \ No newline at end of file +export default CallToActionBox diff --git a/components/Chart.js b/components/Chart.js index 9be643ec3..b3cc1fb3d 100644 --- a/components/Chart.js +++ b/components/Chart.js @@ -1,4 +1,6 @@ -import GridChart, { prepareDataForGridChart } from 'components/aggregation/mat/GridChart' +import GridChart, { + prepareDataForGridChart, +} from 'components/aggregation/mat/GridChart' import { MATContextProvider } from 'components/aggregation/mat/MATContext' import { DetailsBox } from 'components/measurement/DetailsBox' import NLink from 'next/link' @@ -23,51 +25,69 @@ export const MATLink = ({ query }) => { const showMATButton = !Array.isArray(query.test_name) return ( - + - {showMATButton && + {showMATButton && ( - {intl.formatMessage({id: 'MAT.Charts.SeeOnMAT'})} + {intl.formatMessage({ id: 'MAT.Charts.SeeOnMAT' })}{' '} + - } + )} - + - {intl.formatMessage({id: 'MAT.Charts.DownloadJSONData'})} + {intl.formatMessage({ id: 'MAT.Charts.DownloadJSONData' })}{' '} + - {intl.formatMessage({id: 'MAT.Charts.DownloadCSVData'})} + {intl.formatMessage({ id: 'MAT.Charts.DownloadCSVData' })}{' '} + ) } -const Chart = React.memo(function Chart({testGroup = null, queryParams = {}, setState}) { +const Chart = React.memo(function Chart({ + testGroup = null, + queryParams = {}, + setState, +}) { const apiQuery = useMemo(() => { const qs = new URLSearchParams(queryParams).toString() return qs }, [queryParams]) - const { data, error } = useSWR( - apiQuery, - MATFetcher, - swrOptions - ) + const { data, error } = useSWR(apiQuery, MATFetcher, swrOptions) const [chartData, rowKeys, rowLabels] = useMemo(() => { if (!data) { return [null, 0] } - let chartData = data.data + const chartData = data.data const graphQuery = queryParams - const [reshapedData, rowKeys, rowLabels] = prepareDataForGridChart(chartData, graphQuery) + const [reshapedData, rowKeys, rowLabels] = prepareDataForGridChart( + chartData, + graphQuery, + ) return [reshapedData, rowKeys, rowLabels] }, [data, queryParams]) - useEffect(()=> { + useEffect(() => { if (setState && data?.data) setState(data.data) }, [data, setState]) @@ -76,9 +96,9 @@ const Chart = React.memo(function Chart({testGroup = null, queryParams = {}, set return ( // - + - {(!chartData && !error) ? ( + {!chartData && !error ? ( ) : ( <> @@ -91,16 +111,21 @@ const Chart = React.memo(function Chart({testGroup = null, queryParams = {}, set )} - {error && - -
- Error: {error.message} - - {JSON.stringify(error, null, 2)} - -
- }/> - } + {error && ( + +
+ + Error: {error.message} + + {JSON.stringify(error, null, 2)} +
+ + } + /> + )} ) diff --git a/components/CollapseTrigger.js b/components/CollapseTrigger.js index bf63d31f8..b2efed647 100644 --- a/components/CollapseTrigger.js +++ b/components/CollapseTrigger.js @@ -1,11 +1,11 @@ import React from 'react' -import styled from 'styled-components' import { MdExpandLess } from 'react-icons/md' +import styled from 'styled-components' export const CollapseTrigger = styled(MdExpandLess)` cursor: pointer; - background-color: ${props => props.$bg || '#ffffff'}; + background-color: ${(props) => props.$bg || '#ffffff'}; border-radius: 50%; - transform: ${props => props.$open ? 'rotate(0deg)': 'rotate(180deg)'}; + transform: ${(props) => (props.$open ? 'rotate(0deg)' : 'rotate(180deg)')}; transition: transform 0.1s linear; ` diff --git a/components/CountryBox.js b/components/CountryBox.js index d4f16fafa..327deac7c 100644 --- a/components/CountryBox.js +++ b/components/CountryBox.js @@ -3,30 +3,40 @@ import { GridBox } from 'components/VirtualizedGrid' import { Box, Flex, Text } from 'ooni-components' const CountryList = ({ countries, itemsPerRow = 6, gridGap = 3 }) => { - const gridTemplateColumns = ['1fr 1fr', '1fr 1fr', '1fr 1fr 1fr 1fr', [...Array(itemsPerRow)].map((i) => ('1fr')).join(' ')] + const gridTemplateColumns = [ + '1fr 1fr', + '1fr 1fr', + '1fr 1fr 1fr 1fr', + [...Array(itemsPerRow)].map((i) => '1fr').join(' '), + ] return ( - + {countries.map((c) => ( - - {c.localisedName} + + + + + + {c.localisedName} + } count={c.count} /> - )) - } + ))} ) } -export default CountryList \ No newline at end of file +export default CountryList diff --git a/components/DateRangePicker.js b/components/DateRangePicker.js index 45dba90dd..9bcb35df7 100644 --- a/components/DateRangePicker.js +++ b/components/DateRangePicker.js @@ -29,7 +29,7 @@ z-index: 99999; position: absolute; max-width: 300px; background-color: #ffffff; -border: 1px solid ${props => props.theme.colors.gray2}; +border: 1px solid ${(props) => props.theme.colors.gray2}; .rdp-cell { padding: 2px 0; @@ -39,7 +39,7 @@ border: 1px solid ${props => props.theme.colors.gray2}; .rdp-day_selected:focus:not([disabled]), .rdp-day_selected:active:not([disabled]), .rdp-day_selected:hover:not([disabled]) { - background-color: ${props => props.theme.colors.blue5}; + background-color: ${(props) => props.theme.colors.blue5}; } ` @@ -61,21 +61,34 @@ const Footer = ({ handleRangeSelect, range, close }) => { return ( - + + close() + }} + > + {intl.formatMessage({ id: 'DateRange.Cancel' })} + ) } -const DateRangePicker = ({handleRangeSelect, initialRange, close, ...props}) => { +const DateRangePicker = ({ + handleRangeSelect, + initialRange, + close, + ...props +}) => { const intl = useIntl() const tomorrow = addDays(new Date(), 1) const ranges = ['Today', 'LastWeek', 'LastMonth', 'LastYear'] @@ -112,25 +125,28 @@ const DateRangePicker = ({handleRangeSelect, initialRange, close, ...props}) => return en } }, [intl.locale]) - + const selectRange = (range) => { switch (range) { case 'Today': - handleRangeSelect({from: new Date(), to: tomorrow}) + handleRangeSelect({ from: new Date(), to: tomorrow }) break case 'LastWeek': - handleRangeSelect({from: sub(new Date(), {weeks: 1}) , to: tomorrow}) + handleRangeSelect({ from: sub(new Date(), { weeks: 1 }), to: tomorrow }) break case 'LastMonth': - handleRangeSelect({from: sub(new Date(), {months: 1}) , to: tomorrow}) + handleRangeSelect({ + from: sub(new Date(), { months: 1 }), + to: tomorrow, + }) break case 'LastYear': - handleRangeSelect({from: sub(new Date(), {years: 1}) , to: tomorrow}) + handleRangeSelect({ from: sub(new Date(), { years: 1 }), to: tomorrow }) break } } - const rangesList = ranges.map((range) => + const rangesList = ranges.map((range) => ( - ) - const [range, setRange] = useState({from: parse(initialRange.from, 'yyyy-MM-dd', new Date()), to: parse(initialRange.to, 'yyyy-MM-dd', new Date())}) - + }} + > + {intl.formatMessage({ id: `DateRange.${range}` })} + + )) + const [range, setRange] = useState({ + from: parse(initialRange.from, 'yyyy-MM-dd', new Date()), + to: parse(initialRange.to, 'yyyy-MM-dd', new Date()), + }) + const onSelect = (range) => { setRange(range) } @@ -151,7 +173,7 @@ const DateRangePicker = ({handleRangeSelect, initialRange, close, ...props}) => close()}> {rangesList} - toDate={tomorrow} selected={range} onSelect={onSelect} - footer={