Fix back button where params applied programmatically (#815)

* Fix back button where params applied programmatically

* Better fix

* Localized labels

* Cleanup

components/dashboard/Form.js

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useForm, Controller } from 'react-hook-form'
-import { Box, Flex, Input } from 'ooni-components'
+import { Box, Flex, Input, Button } from 'ooni-components'
 import { MultiSelect } from 'react-multi-select-component'
 import { useIntl } from 'react-intl'
 import dayjs from 'services/dayjs'
@@ -35,7 +35,7 @@ export const Form = ({ onChange, query, availableCountries }) => {
     return {
       since: query?.since ?? defaultDefaultValues.since,
       until: query?.until ?? defaultDefaultValues.until,
-      probe_cc: countryOptions.filter(country => countriesInQuery.includes(country.value))
+      probe_cc: countryOptions.filter(country => countriesInQuery.includes(country.value)),
     }
   }
 
@@ -71,21 +71,22 @@ export const Form = ({ onChange, query, availableCountries }) => {
   }
 
   const {since, until, probe_cc} = watch()
-
-  useEffect(() => {
+
+  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)
-  }, [onChange, since, until, probe_cc])
+  }
 
   return (
     <form>
       <Flex alignItems={['center']} flexDirection={['column', 'row']}>
         <Box width={[1, 1/4]} mr={3} sx={{ zIndex: 2 }}>
-          <StyledLabel>Country</StyledLabel>
+          <StyledLabel>{intl.formatMessage({id: 'Search.Sidebar.Country'})}</StyledLabel>
           {<Controller
             render={({field}) => (
               <MultiSelect
@@ -103,7 +104,7 @@ export const Form = ({ onChange, query, availableCountries }) => {
         <Box width={[1, 1/5]}>
           <Flex>
             <Box width={1/2} mr={3}>
-              <StyledLabel>Since</StyledLabel>
+              <StyledLabel>{intl.formatMessage({id: 'Search.Sidebar.From'})}</StyledLabel>
               <Controller
                 name='since'
                 control={control}
@@ -117,7 +118,7 @@ export const Form = ({ onChange, query, availableCountries }) => {
               />
             </Box>
             <Box width={1/2} mr={3}>
-              <StyledLabel>Until</StyledLabel>
+              <StyledLabel>{intl.formatMessage({id: 'Search.Sidebar.Until'})}</StyledLabel>
               <Controller
                 name='until'
                 control={control}
@@ -130,6 +131,11 @@ export const Form = ({ onChange, query, availableCountries }) => {
                 )}
               />
             </Box>
+            <Flex mb={1} alignItems='end'>
+              <Box>
+                <Button onClick={submit}>{intl.formatMessage({id: 'General.Apply'})}</Button>
+              </Box>
+            </Flex>
           </Flex>
           { showDatePicker &&
             <DateRangePicker

components/network/Form.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useForm, Controller } from 'react-hook-form'
-import { Box, Flex, Input } from 'ooni-components'
+import { Box, Button, Flex, Input } from 'ooni-components'
 import { useIntl } from 'react-intl'
 import dayjs from 'services/dayjs'
 import { format } from 'date-fns'
@@ -46,14 +46,11 @@ const Form = ({ onChange, query }) => {
     }
     setShowDatePicker(false)
   }
-
-  useEffect(() => {
-    const cleanedUpData = {
-      since,
-      until,
-    }
-    onChange(cleanedUpData)
-  }, [onChange, since, until])
+
+  const submit = (e) => {
+    e.preventDefault()
+    onChange({since, until})
+  }
 
   return (
     <form>
@@ -88,6 +85,11 @@ const Form = ({ onChange, query }) => {
                 )}
               />
             </Box>
+            <Flex mb={1} alignItems='end'>
+              <Box>
+                <Button onClick={submit}>{intl.formatMessage({id: 'General.Apply'})}</Button>
+              </Box>
+            </Flex>
           </Flex>
           { showDatePicker &&
             <DateRangePicker

pages/chart/circumvention.js

@@ -1,8 +1,9 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect } from 'react'
 import { useRouter } from 'next/router'
 import { Container, Heading, Box } from 'ooni-components'
 import { FormattedMessage } from 'react-intl'
 import axios from 'axios'
+import dayjs from 'dayjs'
 
 import NavBar from 'components/NavBar'
 import { MetaTags } from 'components/dashboard/MetaTags'
@@ -14,6 +15,23 @@ const DashboardCircumvention = ({ availableCountries }) => {
   const router = useRouter()
   const query = router.query
 
+  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 })
+    }
+  }, [])
+
   // Sync page URL params with changes from form values
   const onChange = useCallback(({ since, until, probe_cc }) => {
     // since: "2022-01-02",
@@ -26,17 +44,12 @@ const DashboardCircumvention = ({ availableCountries }) => {
     if (probe_cc) {
       params['probe_cc'] = probe_cc
     }
-    const href = {
-      pathname: router.pathname,
-      query: params,
-    }
     if (query.since !== since
       || query.until !== until
       || query.probe_cc !== probe_cc
     ) {
-      router.push(href, href, { shallow: true })
+      router.push({ query: params }, undefined, { shallow: true })
     }
-
   }, [router, query])
 
   return (

pages/chart/mat.js

@@ -97,15 +97,14 @@ const MeasurementAggregationToolkit = ({ testNames }) => {
       const today = dayjs.utc().add(1, 'day')
       const monthAgo = dayjs.utc(today).subtract(1, 'month')
       const href = {
-        pathname: router.pathname,
         query: {
           test_name: 'web_connectivity',
           axis_x: 'measurement_start_day',
           since: monthAgo.format('YYYY-MM-DD'),
           until: today.format('YYYY-MM-DD'),
         },
       }
-      router.push(href, href, { shallow: true })
+      router.replace(href, undefined, { shallow: true })
     }
   // Ignore the dependency on `router` because we want
   // this effect to run only once, on mount, if query is empty.

pages/network/[asn].js

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect } from 'react'
 import { useRouter } from 'next/router'
 import axios from 'axios'
 import { Container, Heading, Box, Flex, Text, Link } from 'ooni-components'
@@ -85,27 +85,36 @@ const Summary = ({ measurementsTotal, firstMeasurement, countriesData }) => {
 
 const NetworkDashboard = ({asn, calendarData = [], measurementsTotal, countriesData}) => {
   const router = useRouter()
-  const query = router.query
+  const { query } = router
   const displayASN = asn.replace('AS', '')
 
+  useEffect(() => {
+    if (Object.keys(query).length < 3) {
+      const today = dayjs.utc().add(1, 'day')
+      const monthAgo = dayjs.utc(today).subtract(1, 'month')
+      const href = {
+        query: {
+          since: monthAgo.format('YYYY-MM-DD'),
+          until: today.format('YYYY-MM-DD'),
+          asn: query.asn
+        },
+      }
+      router.replace(href, undefined, { shallow: true })
+    }
+  }, [])
+
   // Sync page URL params with changes from form values
   const onChange = useCallback(({ since, until }) => {
     // since: "2022-01-02",
     // until: "2022-02-01",
     const params = {
       since,
       until,
+      asn
     }
-    const href = {
-      pathname: router.pathname.replace('[asn]', asn),
-      query: params,
+    if (query.since !== since || query.until !== until) {
+      router.push({ query: params }, undefined, { shallow: true })
     }
-    if (query.since !== since
-      || query.until !== until
-    ) {
-      router.push(href, href, { shallow: true })
-    }
-
   }, [router, query, asn])
 
   return (