Fix circumvention page form

components/dashboard/Form.js

@@ -10,15 +10,6 @@ import { getLocalisedRegionName } from '../../utils/i18nCountries'
 import { StyledLabel } from '../aggregation/mat/Form'
 import DateRangePicker from '../DateRangePicker'
 
-const tomorrow = dayjs.utc().add(1, 'day').format('YYYY-MM-DD')
-const lastMonthToday = dayjs.utc().subtract(30, 'day').format('YYYY-MM-DD')
-
-const defaultDefaultValues = {
-  since: lastMonthToday,
-  until: tomorrow,
-  probe_cc: ['CN', 'IR', 'RU']
-}
-
 export const Form = ({ onChange, query, availableCountries }) => {
   const intl = useIntl()
 
@@ -31,10 +22,10 @@ export const Form = ({ onChange, query, availableCountries }) => {
   , [availableCountries, intl])
 
   const query2formValues = useMemo(() => {
-    const countriesInQuery = query.probe_cc?.split(',') ?? defaultDefaultValues.probe_cc
+    const countriesInQuery = query.probe_cc?.split(',') ?? ''
     return {
-      since: query?.since ?? defaultDefaultValues.since,
-      until: query?.until ?? defaultDefaultValues.until,
+      since: query?.since,
+      until: query?.until,
       probe_cc: countryOptions.filter(country => countriesInQuery.includes(country.value)),
     }
   }, [countryOptions, query])

pages/chart/circumvention.js

@@ -17,19 +17,18 @@ const DashboardCircumvention = ({ availableCountries }) => {
 
   useEffect(() => {
     const { query } = router
-    if (Object.keys(query).length === 0) {
-      const tomorrow = dayjs.utc().add(1, 'day').format('YYYY-MM-DD')
-      const monthAgo = dayjs.utc().subtract(30, 'day').format('YYYY-MM-DD')
-      const probe_cc = ['CN', 'IR', 'RU'].join(',')
-      const href = {
-        query: {
-          since: monthAgo,
-          until: tomorrow,
-          probe_cc
-        },
-      }
-      router.replace(href, undefined, { shallow: true })
+    const tomorrow = dayjs.utc().add(1, 'day').format('YYYY-MM-DD')
+    const monthAgo = dayjs.utc().subtract(30, 'day').format('YYYY-MM-DD')
+    const probe_cc = ['CN', 'IR', 'RU'].join(',')
+    const href = {
+      query: {
+        since: monthAgo,
+        until: tomorrow,
+        probe_cc,
+        ...query
+      },
     }
+    router.replace(href, undefined, { shallow: true })
   }, [])
 
   // Sync page URL params with changes from form values
@@ -58,13 +57,15 @@ const DashboardCircumvention = ({ availableCountries }) => {
       <NavBar />
       <Container>
         <Heading h={1}><FormattedMessage id='ReachabilityDash.Heading.CircumventionTools' /></Heading>
-        {router.isReady && <>
           <Box my={2} bg='gray0' p={3}>
             <FormattedMarkdown id='ReachabilityDash.CircumventionTools.Description' />
           </Box>
-          <Form onChange={onChange} query={query} availableCountries={availableCountries} />
-          <Charts />
-        </>}
+          {Object.keys(query).length > 0 &&
+            <>
+              <Form onChange={onChange} query={query} availableCountries={availableCountries} />
+              <Charts />
+            </>
+          }
       </Container>
     </>
   )