From a437373e15f08ba935ec9772b1382535a78125c9 Mon Sep 17 00:00:00 2001
From: Maja <maja.komel@gmail.com>
Date: Tue, 19 Mar 2024 12:06:01 +0100
Subject: [PATCH] Improve form performance on MAT and search pages (#923)

---
 components/DateRangePicker.js      | 119 +++++++++++++++--------------
 components/aggregation/mat/Form.js |  23 +++---
 components/search/FilterSidebar.js |  52 ++++++-------
 package.json                       |   2 +-
 yarn.lock                          |   8 +-
 5 files changed, 107 insertions(+), 97 deletions(-)

diff --git a/components/DateRangePicker.js b/components/DateRangePicker.js
index 44a7976d..45dba90d 100644
--- a/components/DateRangePicker.js
+++ b/components/DateRangePicker.js
@@ -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;
@@ -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) {
@@ -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)
   }
@@ -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>
   )
diff --git a/components/aggregation/mat/Form.js b/components/aggregation/mat/Form.js
index 5bbf71eb..7bd5e4c9 100644
--- a/components/aggregation/mat/Form.js
+++ b/components/aggregation/mat/Form.js
@@ -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
@@ -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(
diff --git a/components/search/FilterSidebar.js b/components/search/FilterSidebar.js
index a212a514..96aee608 100644
--- a/components/search/FilterSidebar.js
+++ b/components/search/FilterSidebar.js
@@ -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,
@@ -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
@@ -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 {
@@ -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)}>
diff --git a/package.json b/package.json
index f9b500d3..46c5b1a0 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/yarn.lock b/yarn.lock
index 74d1088e..a86b12d6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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"