Move strings to localization file, localized date formatting, RTL sup…

…port (#824)
ooni · Dec 22, 2022 · 2eb3711 · 2eb3711 · vercel · Dec 22, 2022
1 parent acc70fe
commit 2eb3711
Show file tree

Hide file tree

Showing 92 changed files with 1,252 additions and 990 deletions.
diff --git a/.env.test b/.env.test
@@ -4,3 +4,8 @@
 
 NEXT_PUBLIC_OONI_API=https://api.ooni.io
 NEXT_PUBLIC_EXPLORER_URL=https://explorer-test.ooni.io
+
+RUN_GIT_COMMIT_SHA_SHORT=yarn --silent git:getCommitSHA:short
+RUN_GIT_COMMIT_SHA=yarn --silent git:getCommitSHA
+RUN_GIT_COMMIT_REF=yarn --silent git:getCommitRef
+RUN_GIT_COMMIT_TAGS=yarn --silent git:getReleasesAndTags
diff --git a/components/DateRangePicker.js b/components/DateRangePicker.js
@@ -6,6 +6,17 @@ import OutsideClickHandler from 'react-outside-click-handler'
 import { useIntl } from 'react-intl'
 import styled from 'styled-components'
 import { Button } from 'ooni-components'
+import { getDirection } from 'components/withIntl'
+
+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 zh from 'date-fns/locale/zh-CN'
 
 const StyledDatetime = styled.div`
 z-index: 99999;
@@ -42,10 +53,33 @@ justify-content: right;
 gap: 6px;
 `
 
+const getDateFnsLocale = locale => {
+  switch (locale) {
+    case 'de':
+      return de
+    case 'es':
+      return es
+    case 'fa':
+      return fa
+    case 'fr':
+      return fr
+    case 'is':
+      return is
+    case 'ru':
+      return ru
+    case 'tr':
+      return tr
+    case 'zh':
+      return zh
+    default:
+      return en
+  }
+}
+
 const DateRangePicker = ({handleRangeSelect, initialRange, close, ...props}) => {
   const intl = useIntl()
-
   const ranges = ['Today', 'LastWeek', 'LastMonth', 'LastYear']
+
   const selectRange = (range) => {
     switch (range) {
       case 'Today':
@@ -99,6 +133,8 @@ const DateRangePicker = ({handleRangeSelect, initialRange, close, ...props}) =>
         <StyledRangeButtons>{rangesList}</StyledRangeButtons>
         <DayPicker 
           {...props}
+          dir={getDirection(intl.locale)}
+          locale={getDateFnsLocale(intl.locale)}
           mode="range"
           toDate={tomorrow}
           selected={range}

diff --git a/components/Footer.js b/components/Footer.js
@@ -55,7 +55,7 @@ const FooterText = styled.div`
 
 const Footer = () => {
   const intl = useIntl()
-  const currentYear = dayjs().get('year')
+  const currentYear = new Intl.DateTimeFormat(intl.locale, { year: 'numeric' }).format(new Date())
   return (
     <StyledFooter>
       <Container>
@@ -65,15 +65,15 @@ const Footer = () => {
               <Box p={[1, 0]} mb={[0, 3]} width={[1/2, 1]}>
                 <ExplorerLogo height='32px' />
               </Box>
-              <Box p={[1, 0]} pr={[0, '50%']} width={[1/2, 1]}> <FooterText>{intl.formatMessage({ id: 'Footer.Text.Slogan' })}</FooterText> </Box>
+              <Box width={[1/2, 2/3]}> <FooterText>{intl.formatMessage({ id: 'Footer.Text.Slogan' })}</FooterText> </Box>
             </Flex>
           </FooterBox>
           <FooterBox width={[1/2, 1/5]}>
             <FooterHead>{intl.formatMessage({ id: 'Footer.Heading.About' })}</FooterHead>
             <FooterLink href='https://ooni.org/about/' label={intl.formatMessage({ id: 'Footer.Link.About' })} />
             <FooterLink href='https://ooni.org/about/data-policy/' label={intl.formatMessage({ id: 'Footer.Link.DataPolicy' })} />
             <FooterLink href='https://github.com/ooni/license/tree/master/data' label={intl.formatMessage({ id: 'Footer.Link.DataLicense' })} />
-            <FooterLink href='https://github.com/ooni/explorer' label='Source Code / Issues' />
+            <FooterLink href='https://github.com/ooni/explorer' label={intl.formatMessage({ id: 'Footer.Link.Code' })} />
             <FooterLink href='https://ooni.org/about/#contact' label={intl.formatMessage({ id: 'Footer.Link.Contact' })} />
           </FooterBox>
           <FooterBox width={[1/2, 1/5]}>

diff --git a/components/Header.js b/components/Header.js
@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import { useIntl } from 'react-intl'
 
 const Header = () => {
-  const canonical = 'https://explorer.ooni.org' + useRouter().pathname
+  const canonical = 'https://explorer.ooni.org' + useRouter().asPath.split('?')[0]
 
   const intl = useIntl()
   const description = intl.formatMessage({ id: 'Home.Meta.Description' })

diff --git a/components/Layout.js b/components/Layout.js
@@ -6,7 +6,8 @@ import { theme } from 'ooni-components'
 
 import Header from './Header'
 import Footer from './Footer'
-import withIntl from './withIntl'
+import { useIntl } from 'react-intl'
+import { getDirection } from 'components/withIntl'
 // import FeedbackButton from '../components/FeedbackFloat'
 
 theme.maxWidth = 1024
@@ -17,6 +18,7 @@ const GlobalStyle = createGlobalStyle`
     box-sizing: border-box;
   }
   body, html {
+    direction: ${props => props.direction};
     margin: 0;
     padding: 0;
     font-family: "Fira Sans";
@@ -51,14 +53,15 @@ const matomoInstance = createInstance({
 })
 
 const Layout = ({ children, disableFooter = false }) => {
+  const { locale } = useIntl()
   useEffect(() => {
     matomoInstance.trackPageView()
   }, [])
 
   return (
     <MatomoProvider value={matomoInstance}>
       <ThemeProvider theme={theme}>
-        <GlobalStyle />
+        <GlobalStyle direction={getDirection(locale)} />
         <div className="site">
           <Header />
           <div className="content">
@@ -77,4 +80,4 @@ Layout.propTypes = {
   disableFooter: PropTypes.bool
 }
 
-export default withIntl(Layout)
+export default Layout
diff --git a/components/NavBar.js b/components/NavBar.js
@@ -1,17 +1,19 @@
 import React from 'react'
-
-import { withRouter } from 'next/router'
+import { useRouter, withRouter } from 'next/router'
 import NLink from 'next/link'
 import styled from 'styled-components'
-import { FormattedMessage } from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
+
+import { getLocalisedLanguageName } from 'utils/i18nCountries'
 
 import ExplorerLogo from 'ooni-components/components/svgs/logos/Explorer-HorizontalMonochromeInverted.svg'
 
 import {
   Link,
   Flex,
   Box,
-  Container
+  Container,
+  Select,
 } from 'ooni-components'
 
 const StyledNavItem = styled.a`
@@ -45,6 +47,15 @@ const Underline = styled.span`
   }
 `
 
+const LanguageSelect = styled.select`
+  color: ${props => props.theme.colors.white};
+  background: none;
+  opacity: 0.6;
+  border: none;
+  text-transform: capitalize;
+  cursor: pointer;
+`
+
 const NavItemComponent = ({router, label, href}) => {
   const active = router.pathname === href
   return (
@@ -66,31 +77,51 @@ const StyledNavBar = styled.div`
   padding-bottom: 20px;
   z-index: 999;
 `
+const languages = process.env.LOCALES
 
-export const NavBar = ({color}) => (
-  <StyledNavBar color={color}>
-    <Container>
-      <Flex
-        flexDirection={['column', 'row']}
-        justifyContent={['flex-start', 'space-around']}
-        alignItems={['flex-start', 'center']}
-      >
-        <Box style={{zIndex: 1}}>
-          <NLink href='/' passHref>
-            <Link><ExplorerLogo height='26px' /></Link>
-          </NLink>
-        </Box>
-        <Box ml={[0,'auto']} mt={[2, 0]}>
-          <Flex flexDirection={['column', 'row']} >
-            <NavItem label={<FormattedMessage id='Navbar.Search' />} href='/search' />
-            <NavItem label={<FormattedMessage id='Navbar.Charts.MAT' />} href='/chart/mat' />
-            <NavItem label={<FormattedMessage id='Navbar.Charts.Circumvention' />} href='/chart/circumvention' />
-            <NavItem label={<FormattedMessage id='Navbar.Countries' />} href='/countries' />
-          </Flex>
-        </Box>
-      </Flex>
-    </Container>
-  </StyledNavBar>
-)
+export const NavBar = ({color}) => {
+  const { locale } = useIntl()
+  const router = useRouter()
+  const { pathname, asPath, query } = router
+
+  const handleLocaleChange = (event) => {
+    router.push({ pathname, query }, asPath, { locale: event.target.value })
+  }
+
+  return (
+    <StyledNavBar color={color}>
+      <Container>
+        <Flex
+          flexDirection={['column', 'row']}
+          justifyContent={['flex-start', 'space-between']}
+          alignItems={['flex-start', 'center']}
+        >
+          <Box style={{zIndex: 1}}>
+            <NLink href='/' passHref>
+              <Link><ExplorerLogo height='26px' /></Link>
+            </NLink>
+          </Box>
+          <Box mt={[2, 0]}>
+            <Flex flexDirection={['column', 'row']} alignItems={'center'} >
+              <NavItem label={<FormattedMessage id='Navbar.Search' />} href='/search' />
+              <NavItem label={<FormattedMessage id='Navbar.Charts.MAT' />} href='/chart/mat' />
+              <NavItem label={<FormattedMessage id='Navbar.Charts.Circumvention' />} href='/chart/circumvention' />
+              <NavItem label={<FormattedMessage id='Navbar.Countries' />} href='/countries' />
+              {/* <Box ml={[0, 4]} my={[2, 0]}>
+                <LanguageSelect ml={[0, 4]} onChange={handleLocaleChange} value={locale}>
+                  {languages.map((c) => (
+                    <option key={c} value={c}>
+                      {getLocalisedLanguageName(c,c)}
+                    </option>
+                  ))}
+                </LanguageSelect>
+              </Box> */}
+            </Flex>
+          </Box>
+        </Flex>
+      </Container>
+    </StyledNavBar>
+  )
+}
 
 export default NavBar
diff --git a/components/SocialButtons.js b/components/SocialButtons.js
@@ -2,17 +2,22 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Link, Flex, Text } from 'ooni-components'
 import { MdShare } from 'react-icons/md'
+import { useIntl } from 'react-intl'
+
+const SocialButtons = ({ url }) => {
+  const intl = useIntl()
 
-function SocialButtons({ url }){
-  const text = 'Data from OONI Explorer'
   return(
     <Flex px={2} alignItems='center'>
       <MdShare height='20px' width='20px'/>
       <Text pl={2} textAlign='right'>
-        Share on
-        <Link color='blue7' target="_blank" href={`https://www.facebook.com/sharer/sharer.php?u=https://explorer.ooni.org/${url}`}> Facebook </Link>
-        or
-        <Link color='blue7' target="_blank" href={`https://twitter.com/intent/tweet?text=${text}&url=https://explorer.ooni.org/${url}`}> Twitter</Link>
+        {intl.formatMessage(
+          {id: 'SocialButtons.CTA'},
+          {
+            'facebook-link': (string) => (<Link color='blue7' target="_blank" href={`https://www.facebook.com/sharer/sharer.php?u=https://explorer.ooni.org/${url}`}>{string}</Link>),
+            'twitter-link': (string) => (<Link color='blue7' target="_blank" href={`https://twitter.com/intent/tweet?text=${intl.formatMessage({id: 'SocialButtons.Text'})}&url=https://explorer.ooni.org/${url}`}>{string}</Link>)
+          }
+        )}
       </Text>
     </Flex>
   )

diff --git a/components/TestNameOptions.js b/components/TestNameOptions.js
@@ -9,6 +9,7 @@ export const TestNameOptions = ({ testNames, includeAllOption = true}) => {
       const option = {
         id: test.id,
         name: test.name,
+        intlKey: testNamesIntl[test.id]?.id,
         group
       }
       if (group in grouped) {
@@ -32,9 +33,9 @@ export const TestNameOptions = ({ testNames, includeAllOption = true}) => {
     includeAllOption && <option key='XX' value='XX'>{intl.formatMessage({id: 'Search.Sidebar.TestName.AllTests'})}</option>,
     [...sortedGroupedTestNameOptions].map(([group, tests]) => {
       const groupName = group in testGroups ? intl.formatMessage({id: testGroups[group].id}) : group
-      const testOptions = tests.map(({id, name}) => (
-        <option key={id} value={id}>{name}</option>
-      ))
+      const testOptions = tests.map(({id, name, intlKey}) => {
+        return <option key={id} value={id}>{intlKey ? intl.formatMessage({id: intlKey}) : name}</option>
+    })
       return [<optgroup key={group} label={groupName} />, ...testOptions]
     })
   ])

diff --git a/components/aggregation/mat/CalendarChart.js b/components/aggregation/mat/CalendarChart.js