Fix i18n issue + Include lang in url

README.md

@@ -129,6 +129,17 @@ and pass an object with the key defined in curly brackets and the dynamic value
 </Typography>
 ````
 
+Use ``getCurrentLanguage()`` to retrieve the current language
+````javascript
+// Example: CandidatesContainer.js
+// ---------------------------------------------
+// 1. import getCurrentLanguage from utils/helper
+import { getCurrentLanguage } from 'utils/helper'
+// 2. call getCurrentLanguage() to retrieve the current language
+const currentLanguage = getCurrentLanguage()
+// possible currentLanguage value: en or zh (default)
+````
+
 ## Reference
 
 [立場區議會選舉專頁 - 2015](https://dce2015.thestandnews.com)  

web/src/App.js

@@ -65,7 +65,7 @@ const Wrapper = styled(Box)`
 const LangSwitch = props => {
   const { path, url } = useRouteMatch()
   if (url !== '/') {
-    i18n.changeLanguage(url.replace('/', ''))
+    i18n.changeLanguage(url.replace(/\//g, ''))
   }
 
   return (

web/src/components/containers/CandidatesContainer.js

@@ -14,6 +14,7 @@ import {
   getColorFromCamp,
   getConstituencyTagsByCandidateCamps,
   withLanguage,
+  getCurrentLanguage,
 } from 'utils/helper'
 import { COLORS } from 'ui/theme'
 
@@ -104,6 +105,8 @@ const CandidatesContainer = props => {
           data.dcd_candidates &&
           data.dcd_candidates.filter(c => c.election_type === 'ordinary')
 
+        const currentLanguage = getCurrentLanguage()
+
         const tags = getConstituencyTagsByCandidateCamps(candidates)
         return (
           <>
@@ -136,8 +139,8 @@ const CandidatesContainer = props => {
                           }
                         >
                           <UnstyledNavLink
-                            to={`/profile/${candidate.person.name_zh ||
-                              candidate.person.name_en}/${
+                            to={`/${currentLanguage}/profile/${candidate.person
+                              .name_zh || candidate.person.name_en}/${
                               candidate.person.uuid
                             }`}
                           >

web/src/components/district/Councillor.js

@@ -12,6 +12,7 @@ import { useTranslation } from 'react-i18next'
 import {
   getColorFromPoliticalAffiliation,
   getElectionResults,
+  getCurrentLanguage,
 } from 'utils/helper'
 import moment from 'moment'
 
@@ -67,6 +68,7 @@ class Councillor extends Component {
 
     const tags = [] // ['競逐連任'] //getTagsForPerson(councillor.person)
     const { t } = useTranslation()
+    const currentLanguage = getCurrentLanguage()
 
     return (
       <PlainCard>
@@ -80,7 +82,7 @@ class Councillor extends Component {
         {councillors.map(councillor => (
           <UnstyledNavLink
             key={councillor.code}
-            to={`/profile/${councillor.person.name_zh ||
+            to={`/${currentLanguage}/profile/${councillor.person.name_zh ||
               councillor.person.name_en}/${councillor.person.uuid}`}
           >
             <Box>

web/src/components/molecules/SearchBoxOption.js

@@ -7,7 +7,7 @@ import Columns from 'components/atoms/Columns'
 import { withRouter } from 'react-router-dom'
 import ContextStore from 'ContextStore'
 import { DRAWER_CLOSE } from 'reducers/drawer'
-import { getProfilePath } from 'utils/helper'
+import { getProfilePath, getCurrentLanguage } from 'utils/helper'
 // import { fireEvent } from 'utils/ga_fireevent'
 
 const AddressOption = props => {
@@ -96,7 +96,8 @@ export default withRouter(props => {
   } = React.useContext(ContextStore)
 
   function handleAddressSelected({ year, code }) {
-    props.history.push(`/district/${year}/${code}`)
+    const currentLanguage = getCurrentLanguage()
+    props.history.push(`/${currentLanguage}/district/${year}/${code}`)
     dispatch({ type: DRAWER_CLOSE })
   }
 

web/src/components/molecules/candidate/CandidatesTableContent.js

@@ -3,7 +3,11 @@ import { PeopleAvatar } from 'components/atoms/Avatar'
 import { withRouter } from 'react-router-dom'
 import { Box, Grid } from '@material-ui/core'
 import styled from 'styled-components'
-import { getColorFromCamp } from 'utils/helper'
+import {
+  getColorFromCamp,
+  getCurrentLanguage,
+  withLanguage,
+} from 'utils/helper'
 import { COLORS } from 'ui/theme'
 import TableRow from '@material-ui/core/TableRow'
 import TableCell from '@material-ui/core/TableCell'
@@ -93,7 +97,7 @@ const CandidateGrid = props => {
         />
       </Grid>
       <Grid item>
-        {candidate.person.name_zh || candidate.person.name_en}
+        {withLanguage(candidate.person.name_en, candidate.person.name_zh)}
         {candidate.tags.findIndex(
           tag => tag.type === 'camp' && tag.tag === '有爭議'
         ) > -1 && (
@@ -148,6 +152,7 @@ class CandidatesTableContent extends Component {
   render() {
     const { props, matchCamp } = this
     const { candidates, showEstablishment, showDemocracy, showOthers } = props
+    const currentLanguage = getCurrentLanguage()
     return (
       <>
         {candidates
@@ -159,7 +164,7 @@ class CandidatesTableContent extends Component {
               key={candidate.person.id}
               onClick={() => {
                 props.history.push(
-                  `/profile/${candidate.person.name_zh ||
+                  `/${currentLanguage}/profile/${candidate.person.name_zh ||
                     candidate.person.name_en}/${candidate.person.uuid}`
                 )
               }}

web/src/components/molecules/constituency/ConstituencyTableContent.js

@@ -3,7 +3,11 @@ import styled from 'styled-components'
 import { withRouter } from 'react-router-dom'
 import CandidatesTableContent from 'components/molecules/candidate/CandidatesTableContent'
 import { TableRow, TableCell, Box, Typography } from '@material-ui/core'
-import { getConstituencyTagsByCandidateCamps, withLanguage } from 'utils/helper'
+import {
+  getConstituencyTagsByCandidateCamps,
+  withLanguage,
+  getCurrentLanguage,
+} from 'utils/helper'
 import { SecondaryTag } from 'components/atoms/Tag'
 import { SeperatedColumns } from 'components/atoms/Columns'
 
@@ -34,12 +38,15 @@ const ConstituencyTableContent = props => {
     showOthers,
   } = props
   const tags = getConstituencyTagsByCandidateCamps(constituency.candidates)
+  const currentLanguage = getCurrentLanguage()
 
   return (
     <>
       <ConstituencyNameTableRow
         onClick={() => {
-          props.history.push(`/district/${year}/${constituency.code}`)
+          props.history.push(
+            `/${currentLanguage}/district/${year}/${constituency.code}`
+          )
         }}
       >
         <TableCell colSpan={5}>

web/src/components/molecules/district/DistrictTableContent.js

@@ -6,7 +6,7 @@ import TableCell from '@material-ui/core/TableCell'
 import { Typography } from '@material-ui/core'
 import TableRow from '@material-ui/core/TableRow'
 import { useTranslation } from 'react-i18next'
-import { withLanguage } from 'utils/helper'
+import { withLanguage, getCurrentLanguage } from 'utils/helper'
 
 const DistrictNameTableRow = styled(TableRow)`
   && {
@@ -25,11 +25,14 @@ const DistrictTableContent = props => {
   } = props
 
   const { t } = useTranslation()
+  const currentLanguage = getCurrentLanguage()
   return (
     <>
       <DistrictNameTableRow
         onClick={() => {
-          props.history.push(`/district/${year}/${district.dc_code}`)
+          props.history.push(
+            `/${currentLanguage}/district/${year}/${district.dc_code}`
+          )
         }}
       >
         <TableCell colSpan={5}>

web/src/components/organisms/ConstituencyCard.js

@@ -5,7 +5,7 @@ import { withRouter } from 'react-router-dom'
 import { SecondaryTag } from 'components/atoms/Tag'
 import Box from '@material-ui/core/Box'
 import Columns from 'components/atoms/Columns'
-import { getDistrictListUriFromTag } from 'utils/helper'
+import { getDistrictListUriFromTag, getCurrentLanguage } from 'utils/helper'
 import CandidatesContainer from 'components/containers/CandidatesContainer'
 
 const StyledCard = styled(Card)`
@@ -29,11 +29,13 @@ const ConstituencyCard = props => {
   const sortedTags = tags.sort((a, b) =>
     a.type === 'boundary' ? -1 : a.type === b.type ? 0 : 1
   )
-
+  const currentLanguage = getCurrentLanguage()
   return (
     <StyledCard
       onClick={() => {
-        props.history.push(`/district/2019/${constituency.code}`)
+        props.history.push(
+          `/${currentLanguage}/district/2019/${constituency.code}`
+        )
       }}
     >
       <Typography variant="h6" gutterBottom>

web/src/components/organisms/Footer.js

@@ -7,6 +7,7 @@ import Columns from 'components/atoms/Columns'
 import { withRouter } from 'react-router-dom'
 import { Disclaimer } from 'components/templates/Disclaimer'
 import { useTranslation } from 'react-i18next'
+import { getCurrentLanguage } from 'utils/helper'
 
 const StyledFooter = styled(Box)`
   && {
@@ -39,6 +40,7 @@ const LinkBox = styled(Box)`
 
 function Footer(props) {
   const { t } = useTranslation()
+  const currentLanguage = getCurrentLanguage()
   return (
     <>
       <StyledFooter>
@@ -49,7 +51,7 @@ function Footer(props) {
           <LinkBox>
             <DefaultLink
               onClick={
-                () => props.history.push(`/about-us`)
+                () => props.history.push(`/${currentLanguage}/about-us`)
                 // console.log(props)
               }
             >
@@ -68,7 +70,7 @@ function Footer(props) {
           <LinkBox>
             <StyledFooterLink
               onClick={
-                () => props.history.push(`/disclaimer`)
+                () => props.history.push(`/${currentLanguage}/disclaimer`)
                 // console.log(props)
               }
             >

web/src/components/organisms/SearchTab.js

@@ -7,6 +7,7 @@ import { withRouter } from 'react-router-dom'
 import ContextStore from 'ContextStore'
 import { DRAWER_CLOSE } from 'reducers/drawer'
 import DistrictSelector from 'components/molecules/DistrictSelector'
+import { getCurrentLanguage } from 'utils/helper'
 
 const Container = styled(Paper)`
   && {
@@ -51,8 +52,10 @@ function SearchTab(props) {
       When user select click previous button in district page,
       the CACODE should follow follow the above result
     */
-
-    props.history.push(`/district/${result.year}/${result.code}`)
+    const currentLanguage = getCurrentLanguage()
+    props.history.push(
+      `/${currentLanguage}/district/${result.year}/${result.code}`
+    )
     dispatch({ type: DRAWER_CLOSE })
   }
 

web/src/components/pages/battleground/index.js

@@ -23,6 +23,7 @@ import {
   getDistrictOverviewUriFromTag,
   getParameterByName,
   withLanguage,
+  getCurrentLanguage,
 } from 'utils/helper'
 import {
   getCentroidFromYearAndCode,
@@ -90,7 +91,8 @@ class BattleGroundPage extends Component {
       (selectedYear == null && selectedCode == null) ||
       (year !== selectedYear || code !== selectedCode)
     ) {
-      this.props.history.push(`/district/${year}/${code}`)
+      const currentLanguage = getCurrentLanguage()
+      this.props.history.push(`/${currentLanguage}/district/${year}/${code}`)
     }
   }
 
@@ -137,7 +139,8 @@ class BattleGroundPage extends Component {
         params: { code },
       },
     } = this.props
-    this.props.history.push(`/district/2015/${code}`)
+    const currentLanguage = getCurrentLanguage()
+    this.props.history.push(`/${currentLanguage}/district/2015/${code}`)
   }
 
   onNextElection() {
@@ -146,7 +149,10 @@ class BattleGroundPage extends Component {
         params: { year, code },
       },
     } = this.props
-    this.props.history.push(`/district/${parseInt(year, 10) + 4}/${code}`)
+    const currentLanguage = getCurrentLanguage()
+    this.props.history.push(
+      `/${currentLanguage}/district/${parseInt(year, 10) + 4}/${code}`
+    )
   }
 
   render() {
@@ -185,7 +191,7 @@ class BattleGroundPage extends Component {
             const DCCAStatus =
               district.tags &&
               district.tags.find(tag => tag.type === 'boundary')
-
+            console.log(district)
             return (
               <>
                 <BreadcrumbsContainer>
@@ -195,7 +201,10 @@ class BattleGroundPage extends Component {
                   >
                     <UnstyledLink
                       onClick={() => {
-                        this.props.history.push(`/district/2019`)
+                        const currentLanguage = getCurrentLanguage()
+                        this.props.history.push(
+                          `/${currentLanguage}/district/2019`
+                        )
                       }}
                     >
                       <Typography color="textPrimary"> {year}</Typography>

web/src/components/pages/disclaimer/index.js

@@ -47,10 +47,10 @@ const DisclaimerPage = props => {
 
         <p>
           {/* 本屆區議會選舉的候選人政治陣營取自 */}
-          {t('disclaimer.paragraph2.segment1')}
+          {t('disclaimer.paragraph2.segment1')}{' '}
           <DefaultLink target="_blank" href="https://hkfactcheck.io">
             {/* 選區事實處 */}
-            {t('thirdParty.dfo')}
+            {t('thirdParty.dfo')}{' '}
           </DefaultLink>
           {/* ，該網站收集大眾意見，並跟據以下資料綜合判斷： */}
           {t('disclaimer.paragraph2.segment2')}

web/src/components/pages/district/index.js

@@ -7,6 +7,7 @@ import MainAreas from 'components/district/MainAreas'
 import Metrics from 'components/district/Metrics'
 import styled from 'styled-components'
 import { bps } from 'ui/responsive'
+import { getCurrentLanguage } from 'utils/helper'
 
 import { QUERY_CONSTITUENCIES } from 'queries/gql'
 
@@ -65,14 +66,18 @@ class DistrictPage extends Component {
   }
 
   handleCandidateSelected = person => {
+    const currentLanguage = getCurrentLanguage()
     this.props.history.push(
-      `/profile/${person.name_zh || person.name_en}/${person.uuid}`
+      `/${currentLanguage}/profile/${person.name_zh || person.name_en}/${
+        person.uuid
+      }`
     )
   }
 
   handleChangeDistrict = (year, code) => {
     if (!year || !code) return
-    this.props.history.push(`/district/${year}/${code}`)
+    const currentLanguage = getCurrentLanguage()
+    this.props.history.push(`/${currentLanguage}/district/${year}/${code}`)
   }
 
   onPrevElection() {
@@ -81,7 +86,10 @@ class DistrictPage extends Component {
         params: { year, code },
       },
     } = this.props
-    this.props.history.push(`/district/${parseInt(year, 10) - 4}/${code}`)
+    const currentLanguage = getCurrentLanguage()
+    this.props.history.push(
+      `/${currentLanguage}/district/${parseInt(year, 10) - 4}/${code}`
+    )
   }
 
   onNextElection() {
@@ -90,7 +98,10 @@ class DistrictPage extends Component {
         params: { year, code },
       },
     } = this.props
-    this.props.history.push(`/district/${parseInt(year, 10) + 4}/${code}`)
+    const currentLanguage = getCurrentLanguage()
+    this.props.history.push(
+      `/${currentLanguage}/district/${parseInt(year, 10) + 4}/${code}`
+    )
   }
 
   render() {