Skip to content

Commit

Permalink
Improve form performance on MAT and search pages (#923)
Browse files Browse the repository at this point in the history
  • Loading branch information
@majakomel
majakomel authored Mar 19, 2024
1 parent edb33e2 commit a437373
Show file tree
Hide file tree
Showing 5 changed files with 107 additions and 97 deletions.
119 changes: 63 additions & 56 deletions components/DateRangePicker.js
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,29 @@
import React, { useState } from 'react'
import { format, parse, sub, addDays } from 'date-fns'
import { DayPicker, useInput } from 'react-day-picker'
import { addDays, parse, sub } from 'date-fns'
import { Button } from 'ooni-components'
import React, { useMemo, useState } from 'react'
import { DayPicker } from 'react-day-picker'
import 'react-day-picker/dist/style.css'
import OutsideClickHandler from 'react-outside-click-handler'
import { useIntl } from 'react-intl'
import OutsideClickHandler from 'react-outside-click-handler'
import styled from 'styled-components'
import { Button } from 'ooni-components'
import { getDirection } from 'components/withIntl'

import ar from 'date-fns/locale/ar'
import de from 'date-fns/locale/de'
import en from 'date-fns/locale/en-US'
import es from 'date-fns/locale/es'
import fa from 'date-fns/locale/fa-IR'
import fr from 'date-fns/locale/fr'
import is from 'date-fns/locale/is'
import ru from 'date-fns/locale/ru'
import tr from 'date-fns/locale/tr'
import ar from 'date-fns/locale/ar'
import pt from 'date-fns/locale/pt'
import ru from 'date-fns/locale/ru'
import th from 'date-fns/locale/th'
import tr from 'date-fns/locale/tr'
import vi from 'date-fns/locale/vi'
import zh from 'date-fns/locale/zh-CN'
import zhHant from 'date-fns/locale/zh-HK'

import { getDirection } from 'components/withIntl'

const StyledDatetime = styled.div`
z-index: 99999;
position: absolute;
Expand Down Expand Up @@ -55,43 +56,62 @@ justify-content: right;
gap: 6px;
`

const getDateFnsLocale = locale => {
switch (locale) {
case 'de':
return de
case 'es':
return es
case 'fa':
return fa
case 'ar':
return ar
case 'fr':
return fr
case 'is':
return is
case 'pt-BR':
return pt
case 'ru':
return ru
case 'tr':
return tr
case 'th':
return th
case 'vi':
return vi
case 'zh-CN':
return zh
case 'zh-Hant':
return zhHant
default:
return en
}
const Footer = ({ handleRangeSelect, range, close }) => {
const intl = useIntl()

return (
<StyledFooter>
<Button id='apply-range' onClick={(e) => {
e.preventDefault()
handleRangeSelect(range)}
}>{intl.formatMessage({id: 'DateRange.Apply'})}</Button>
<Button
hollow
onClick={(e) => {
e.preventDefault()
close()}
}>{intl.formatMessage({id: 'DateRange.Cancel'})}</Button>
</StyledFooter>
)
}

const DateRangePicker = ({handleRangeSelect, initialRange, close, ...props}) => {
const intl = useIntl()
const tomorrow = addDays(new Date(), 1)
const ranges = ['Today', 'LastWeek', 'LastMonth', 'LastYear']

const dateFnsLocale = useMemo(() => {
switch (intl.locale) {
case 'de':
return de
case 'es':
return es
case 'fa':
return fa
case 'ar':
return ar
case 'fr':
return fr
case 'is':
return is
case 'pt-BR':
return pt
case 'ru':
return ru
case 'tr':
return tr
case 'th':
return th
case 'vi':
return vi
case 'zh-CN':
return zh
case 'zh-Hant':
return zhHant
default:
return en
}
}, [intl.locale])

const selectRange = (range) => {
switch (range) {
Expand Down Expand Up @@ -122,20 +142,7 @@ const DateRangePicker = ({handleRangeSelect, initialRange, close, ...props}) =>
}}>{intl.formatMessage({id: `DateRange.${range}`})}</Button>
)
const [range, setRange] = useState({from: parse(initialRange.from, 'yyyy-MM-dd', new Date()), to: parse(initialRange.to, 'yyyy-MM-dd', new Date())})
const Footer = () => (
<StyledFooter>
<Button id='apply-range' onClick={(e) => {
e.preventDefault()
handleRangeSelect(range)}
}>{intl.formatMessage({id: 'DateRange.Apply'})}</Button>
<Button
hollow
onClick={(e) => {
e.preventDefault()
close()}
}>{intl.formatMessage({id: 'DateRange.Cancel'})}</Button>
</StyledFooter>
)

const onSelect = (range) => {
setRange(range)
}
Expand All @@ -147,12 +154,12 @@ const DateRangePicker = ({handleRangeSelect, initialRange, close, ...props}) =>
<DayPicker
{...props}
dir={getDirection(intl.locale)}
locale={getDateFnsLocale(intl.locale)}
locale={dateFnsLocale}
mode="range"
toDate={tomorrow}
selected={range}
onSelect={onSelect}
footer={<Footer/>} />
footer={<Footer handleRangeSelect={handleRangeSelect} close={close} range={range} />} />
</OutsideClickHandler>
</StyledDatetime>
)
Expand Down
23 changes: 13 additions & 10 deletions components/aggregation/mat/Form.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import { useCallback, useEffect, useState, useMemo } from 'react'
import { format } from 'date-fns'
import { Box, Button, Flex, Input, Select } from 'ooni-components'
import PropTypes from 'prop-types'
import { useForm, Controller } from 'react-hook-form'
import { Flex, Box, Input, Button, Select } from 'ooni-components'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { Controller, useForm } from 'react-hook-form'
import { FormattedMessage, defineMessages, useIntl } from 'react-intl'
import dayjs from 'services/dayjs'
import { format } from 'date-fns'
import { defineMessages, useIntl, FormattedMessage } from 'react-intl'
import { localisedCountries } from 'utils/i18nCountries'

import { categoryCodes } from '../../utils/categoryCodes'
import { useRouter } from 'next/router'
import DateRangePicker from '../../DateRangePicker'
import { ConfirmationModal } from './ConfirmationModal'
import { TestNameOptions } from '../../TestNameOptions'
import { useRouter } from 'next/router'
import { categoryCodes } from '../../utils/categoryCodes'
import { ConfirmationModal } from './ConfirmationModal'

const DAY_GRAIN_THRESHOLD_IN_MONTHS = 12
const WEEK_GRAIN_THRESHOLD_IN_MONTHS = 36
Expand Down Expand Up @@ -139,8 +139,11 @@ export const Form = ({ onSubmit, query }) => {
return () => subscription.unsubscribe()
}, [watch])

const sortedCountries = localisedCountries(intl.locale).sort((a, b) =>
new Intl.Collator(intl.locale).compare(a.localisedCountryName, b.localisedCountryName)
const sortedCountries = useMemo(() => (
localisedCountries(intl.locale).sort((a, b) =>
new Intl.Collator(intl.locale).compare(a.localisedCountryName, b.localisedCountryName))
),
[intl.locale]
)

const showWebConnectivityFilters = useMemo(
Expand Down
52 changes: 26 additions & 26 deletions components/search/FilterSidebar.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import React, { useEffect, useMemo, useState } from 'react'
import styled from 'styled-components'
import { format } from 'date-fns'
import { Box, Button, Checkbox, Flex, Input, Label, RadioButton, RadioGroup, Select } from 'ooni-components'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { Controller, useForm } from 'react-hook-form'
import { useIntl } from 'react-intl'
import { Flex, Box, Button, Input, Label, RadioGroup, RadioButton, Checkbox, Select } from 'ooni-components'
import dayjs from 'services/dayjs'
import { useForm, Controller } from 'react-hook-form'

import DateRangePicker from '../DateRangePicker'
import { format } from 'date-fns'
import { TestNameOptions } from '../TestNameOptions'
import { categoryCodes } from '../utils/categoryCodes'
import { TestNameOptions } from 'components/TestNameOptions'
import { categoryCodes } from 'components/utils/categoryCodes'
import dayjs from 'services/dayjs'
import styled from 'styled-components'
import { getLocalisedRegionName } from 'utils/i18nCountries'
import DateRangePicker from '../DateRangePicker'

const StyledLabel = styled(Label).attrs({
mb: 1,
Expand Down Expand Up @@ -125,8 +125,6 @@ const FilterSidebar = ({
const { errors } = formState

const testNameFilterValue = watch('testNameFilter')
const debugg = categoryFilter
//const debugg = watch('categoryFilter')
const onlyFilterValue = watch('onlyFilter')

// Does the selected testName need a domain filter
Expand Down Expand Up @@ -171,7 +169,7 @@ const FilterSidebar = ({

const [showDatePicker, setShowDatePicker] = useState(false)

const handleRangeSelect = (range) => {
const handleRangeSelect = useCallback((range) => {
if (range?.from) {
setValue('sinceFilter', format(range.from, 'y-MM-dd'))
} else {
Expand All @@ -183,22 +181,24 @@ const FilterSidebar = ({
setValue('untilFilter', '')
}
setShowDatePicker(false)
}
}, [setValue])

//Insert an 'Any' option to test name filter
// testNameOptions.unshift({name: intl.formatMessage({id: 'Search.Sidebar.TestName.AllTests'}), id: 'XX'})
const countryOptions = useMemo(() => {
const options = [
...countries.map((c) => ({
...c,
name: getLocalisedRegionName(c.alpha_2, intl.locale),
})),
]

options.sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0))
options.unshift({
name: intl.formatMessage({ id: 'Search.Sidebar.Country.AllCountries' }),
alpha_2: 'XX',
})

const countryOptions = [
...countries.map((c) => ({
...c,
name: getLocalisedRegionName(c.alpha_2, intl.locale),
})),
]
countryOptions.sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0))
countryOptions.unshift({
name: intl.formatMessage({ id: 'Search.Sidebar.Country.AllCountries' }),
alpha_2: 'XX',
})
return options
}, [countries, intl])

return (
<form onSubmit={handleSubmit(onSubmit)}>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
"react-content-loader": "^6.2.1",
"react-day-picker": "^8.10.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.49.3",
"react-hook-form": "^7.51.1",
"react-icons": "^5.0.1",
"react-intl": "^6.6.0",
"react-json-view": "^1.21.3",
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6131,10 +6131,10 @@ react-fast-compare@^3.2.0:
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==

react-hook-form@^7.49.3:
version "7.49.3"
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.49.3.tgz#576a4567f8a774830812f4855e89f5da5830435c"
integrity sha512-foD6r3juidAT1cOZzpmD/gOKt7fRsDhXXZ0y28+Al1CHgX+AY1qIN9VSIIItXRq1dN68QrRwl1ORFlwjBaAqeQ==
react-hook-form@^7.51.1:
version "7.51.1"
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.51.1.tgz#3ce5f8b5ef41903b4054a641cef8c0dc8bf8ae85"
integrity sha512-ifnBjl+kW0ksINHd+8C/Gp6a4eZOdWyvRv0UBaByShwU8JbVx5hTcTWEcd5VdybvmPTATkVVXk9npXArHmo56w==

react-icons@^5.0.1:
version "5.0.1"
Expand Down

0 comments on commit a437373

Please sign in to comment.