Update inputs when navigating back circumvention page (#837)

* Update inputs when navigating back circumvention page * Fixed time grain
ooni · Feb 15, 2023 · 8d039a8 · 8d039a8 · vercel · Feb 15, 2023
1 parent daee5f6
commit 8d039a8
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 36 deletions.
diff --git a/components/dashboard/Charts.js b/components/dashboard/Charts.js
@@ -55,7 +55,8 @@ const Chart = React.memo(function Chart({ testName }) {
     ...fixedQuery,
     test_name: testName,
     since: since,
-    until: until
+    until: until,
+    time_grain: 'day'
   }), [since, testName, until])
 
   const apiQuery = useMemo(() => {
@@ -64,7 +65,7 @@ const Chart = React.memo(function Chart({ testName }) {
   }, [query])
 
   const { data, error } = useSWR(
-    apiQuery,
+    () => since && until ? apiQuery : null,
     fetcher,
     swrOptions
   )

diff --git a/components/dashboard/Form.js b/components/dashboard/Form.js
@@ -30,14 +30,14 @@ export const Form = ({ onChange, query, availableCountries }) => {
     .sort((a, b) => (new Intl.Collator(intl.locale).compare(a.label, b.label)))
   , [availableCountries, intl])
 
-  const query2formValues = (query) => {
+  const query2formValues = useMemo(() => {
     const countriesInQuery = query.probe_cc?.split(',') ?? defaultDefaultValues.probe_cc
     return {
       since: query?.since ?? defaultDefaultValues.since,
       until: query?.until ?? defaultDefaultValues.until,
       probe_cc: countryOptions.filter(country => countriesInQuery.includes(country.value)),
     }
-  }
+  }, [countryOptions, query])
 
   const multiSelectStrings = useMemo(() => ({
     'allItemsAreSelected': intl.formatMessage({ id: 'ReachabilityDash.Form.Label.CountrySelect.AllSelected' }),
@@ -51,10 +51,23 @@ export const Form = ({ onChange, query, availableCountries }) => {
     // 'create': 'Create',
   }), [intl])
 
-  const { control, getValues, watch, setValue } = useForm({
-    defaultValues: query2formValues(query)
+  const { control, getValues, watch, setValue, reset } = useForm({
+    defaultValues: query2formValues
   })
 
+  useEffect(()=> {
+    reset(query2formValues)
+  }, [query2formValues, reset])
+
+  const cleanedUpData = (values) => {
+    const { since, until, probe_cc } = values
+    return {
+      since,
+      until,
+      probe_cc: probe_cc.length > 0 ? probe_cc.map(d => d.value).join(',') : undefined
+    }
+  }
+
   const [showDatePicker, setShowDatePicker] = useState(false)
   const handleRangeSelect = (range) => {
     if (range?.from) {
@@ -68,19 +81,15 @@ export const Form = ({ onChange, query, availableCountries }) => {
       setValue('until', '')
     }
     setShowDatePicker(false)
+    onChange(cleanedUpData(getValues()))
   }
 
-  const {since, until, probe_cc} = watch()
-
-  const submit = (e) => {
-    e.preventDefault()
-    const cleanedUpData = {
-      since,
-      until,
-      probe_cc: probe_cc.length > 0 ? probe_cc.map(d => d.value).join(',') : undefined
-    }
-    onChange(cleanedUpData)
-  }
+  useEffect(() => {
+    const subscription = watch((value, { name, type }) => {
+      if (name === 'probe_cc' && type === 'change') onChange(cleanedUpData(getValues()))
+    })
+    return () => subscription.unsubscribe()
+  }, [watch, getValues])
 
   return (
     <form>
@@ -113,6 +122,9 @@ export const Form = ({ onChange, query, availableCountries }) => {
                     {...field}
                     onFocus={() => setShowDatePicker(true)}
                     onKeyDown={() => setShowDatePicker(false)}
+                    name={field.name}
+                    value={field.value}
+                    onChange={field.onChange}
                   />
                 )}
               />
@@ -127,15 +139,13 @@ export const Form = ({ onChange, query, availableCountries }) => {
                     {...field}
                     onFocus={() => setShowDatePicker(true)}
                     onKeyDown={() => setShowDatePicker(false)}
+                    name={field.name}
+                    value={field.value}
+                    onChange={field.onChange}
                   />
                 )}
               />
             </Box>
-            <Flex mb={1} alignItems='end'>
-              <Box>
-                <Button onClick={submit}>{intl.formatMessage({id: 'General.Apply'})}</Button>
-              </Box>
-            </Flex>
           </Flex>
           { showDatePicker &&
             <DateRangePicker

diff --git a/components/network/Form.js b/components/network/Form.js
@@ -47,13 +47,12 @@ const Form = ({ onSubmit, query }) => {
     setShowDatePicker(false)
   }
 
-  const submit = (e) => {
-    e.preventDefault()
+  useEffect(() => {
     onSubmit({since, until})
-  }
+  }, [onSubmit, since, until])
 
   return (
-    <form onSubmit={submit}>
+    <form>
       <Flex alignItems={['center']}>
         <Box width={[1, 1/5]}>
           <Flex>
@@ -85,11 +84,6 @@ const Form = ({ onSubmit, query }) => {
                 )}
               />
             </Box>
-            <Flex mb={1} alignItems='end'>
-              <Box>
-                <Button onClick={submit}>{intl.formatMessage({id: 'General.Apply'})}</Button>
-              </Box>
-            </Flex>
           </Flex>
           { showDatePicker &&
             <DateRangePicker

diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
     "react-content-loader": "^6.2.0",
     "react-day-picker": "^8.1.0",
     "react-dom": "17.0.2",
-    "react-hook-form": "^7.34.2",
+    "react-hook-form": "^7.43.1",
     "react-icons": "4.4.0",
     "react-intl": "^6.0.5",
     "react-json-view": "^1.21.3",

diff --git a/yarn.lock b/yarn.lock
@@ -6733,10 +6733,10 @@ react-fast-compare@^2.0.0:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
-react-hook-form@^7.34.2:
-  version "7.34.2"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.34.2.tgz#9ac6d1a309a7c4aaa369d1269357a70e9e9bf4de"
-  integrity sha512-1lYWbEqr0GW7HHUjMScXMidGvV0BE2RJV3ap2BL7G0EJirkqpccTaawbsvBO8GZaB3JjCeFBEbnEWI1P8ZoLRQ==
+react-hook-form@^7.43.1:
+  version "7.43.1"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.43.1.tgz#0d0d7822f3f7fc05ffc41d5f012b49b90fcfa0f0"
+  integrity sha512-+s3+s8LLytRMriwwuSqeLStVjRXFGxgjjx2jED7Z+wz1J/88vpxieRQGvJVvzrzVxshZ0BRuocFERb779m2kNg==
 
 react-icon-base@^2.1.2:
   version "2.1.2"