merge with latest dev and fix translation

vote4hk · Nov 13, 2019 · fbe477f · fbe477f
2 parents 25701ba + 0de59ad
commit fbe477f
Show file tree

Hide file tree

Showing 17 changed files with 228 additions and 68 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 script/output/*
 .DS_Store
-node_modules
+node_modules
+.idea
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@apollo/react-hooks": "^3.1.3",
     "@babel/core": "7.2.2",
+    "@loadable/component": "^5.10.3",
     "@material-ui/core": "4.5.2",
     "@material-ui/icons": "^3.0.2",
     "@material-ui/system": "^4.3.0",

diff --git a/web/src/App.js b/web/src/App.js
@@ -2,33 +2,73 @@ import React from 'react'
 import { Route, Switch, useRouteMatch } from 'react-router-dom'
 import CssBaseline from '@material-ui/core/CssBaseline'
 import { ThemeProvider } from '@material-ui/core/styles/'
-import IndexPage from 'components/pages/landing'
-import ProfilePage from 'components/pages/profile'
-import DistrictPage from 'components/pages/district'
-import FavDistrictListPage from 'components/pages/fav-district'
-import DistrictListPage from 'components/pages/district/list'
-import BattleGroundPage from 'components/pages/battleground'
-import DisclaimerPage from 'components/pages/disclaimer'
-import AboutDCPage from 'components/pages/about/dc'
-import NotfoundPage from 'components/pages/notfound'
-import SupportUsPage from 'components/pages/support-us'
+import loadable from '@loadable/component'
 import ApolloClient from 'apollo-boost'
 import { ApolloProvider } from 'react-apollo'
 import theme from 'ui/theme'
 import './App.css'
 import Box from '@material-ui/core/Box'
 import styled from 'styled-components'
-import MobileAppBar from 'components/organisms/MobileAppBar'
-import ShareButton from 'components/organisms/ShareButton'
-import Footer from 'components/organisms/Footer'
 import { ContextStoreProvider } from 'ContextStore'
 import withTracker from './WithTracker'
-import SearchDrawer from 'components/pages/SearchDrawer'
-import DistrictOverviewPage from 'components/pages/district/overview'
-import DistrictAllPage from 'components/pages/district/all'
-import GlobalDisclaimer from 'components/organisms/GlobalDisclaimer'
-import { fireEvent } from 'utils/ga_fireevent'
 import i18n from 'i18n'
+import { fireEvent } from 'utils/ga_fireevent'
+
+const IndexPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/landing')
+)
+const ProfilePage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/profile')
+)
+const DistrictPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/district')
+)
+const DistrictListPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/district/list')
+)
+const BattleGroundPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/battleground')
+)
+const DisclaimerPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/disclaimer')
+)
+const AboutDCPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/about/dc')
+)
+
+const FavDistrictListPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/fav-district')
+)
+
+const NotfoundPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/notfound')
+)
+const SupportUsPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/support-us')
+)
+const DistrictOverviewPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/district/overview')
+)
+const DistrictAllPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/district/all')
+)
+
+const MobileAppBar = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/organisms/MobileAppBar')
+)
+const Footer = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/organisms/Footer')
+)
+const SearchDrawer = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/SearchDrawer')
+)
+const GlobalDisclaimer = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/organisms/GlobalDisclaimer')
+)
+
+const ShareButton = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/organisms/ShareButton')
+)
 
 const client = new ApolloClient({
   uri: process.env.REACT_APP_GRAPHQL_URI,

diff --git a/web/src/components/molecules/candidate/CandidatesTableContent.js b/web/src/components/molecules/candidate/CandidatesTableContent.js
@@ -12,7 +12,7 @@ import { COLORS } from 'ui/theme'
 import TableRow from '@material-ui/core/TableRow'
 import TableCell from '@material-ui/core/TableCell'
 import { HtmlTooltip } from 'components/atoms/Tooltip'
-import { useTranslation } from 'react-i18next'
+import { useTranslation, withTranslation } from 'react-i18next'
 
 const IMAGE_HOST_URI =
   process.env.REACT_APP_HOST_URI || 'https://hkvoteguide.github.io'
@@ -151,7 +151,13 @@ class CandidatesTableContent extends Component {
 
   render() {
     const { props, matchCamp } = this
-    const { candidates, showEstablishment, showDemocracy, showOthers } = props
+    const {
+      candidates,
+      showEstablishment,
+      showDemocracy,
+      showOthers,
+      t,
+    } = props
     const currentLanguage = getCurrentLanguage()
     return (
       <>
@@ -185,7 +191,10 @@ class CandidatesTableContent extends Component {
                 {candidate.person.related_organization || '-'}
               </StyledTableCell>
               <StyledTableCell>
-                {candidate.political_affiliation || '-'}
+                {withLanguage(
+                  candidate.political_affiliation_en,
+                  candidate.political_affiliation_zh
+                ) || t('candidate.noPoliticalAffiliation')}
               </StyledTableCell>
             </StyledTableRow>
           ))}
@@ -194,4 +203,4 @@ class CandidatesTableContent extends Component {
   }
 }
 
-export default withRouter(CandidatesTableContent)
+export default withTranslation()(withRouter(CandidatesTableContent))
diff --git a/web/src/components/organisms/Footer.js b/web/src/components/organisms/Footer.js
@@ -41,6 +41,9 @@ const LinkBox = styled(Box)`
 function Footer(props) {
   const { t } = useTranslation()
   const currentLanguage = getCurrentLanguage()
+  React.useEffect(() => {
+    window.FB.XFBML.parse()
+  }, [])
   return (
     <>
       <StyledFooter>

diff --git a/web/src/components/organisms/SearchMenu.js b/web/src/components/organisms/SearchMenu.js
@@ -78,7 +78,7 @@ const SearchMenu = props => {
           onClick={() => goToPage('/SelectedDistrict')}
         >
           {/* 己關注選區 */}
-          己關注選區⭐
+          {t('searchMenu.text4')}
         </Typography>
       </LeftMargin>
 

diff --git a/web/src/components/pages/battleground/index.js b/web/src/components/pages/battleground/index.js
@@ -248,7 +248,6 @@ class BattleGroundPage extends Component {
             const DCCAStatus =
               district.tags &&
               district.tags.find(tag => tag.type === 'boundary')
-            console.log(district)
             return (
               <>
                 <BreadcrumbsContainer>

diff --git a/web/src/components/pages/fav-district/index.js b/web/src/components/pages/fav-district/index.js
@@ -6,6 +6,7 @@ import ConstituencyCard from 'components/organisms/ConstituencyCard'
 import { Typography } from '@material-ui/core'
 import Paper from '@material-ui/core/Paper'
 import { Loading } from 'components/atoms/Loading'
+import { withTranslation } from 'react-i18next'
 import localforage from 'localforage'
 
 const Container = styled(Paper)`
@@ -29,6 +30,8 @@ class FavDistrictListPage extends Component {
   }
 
   render() {
+    const { t } = this.props
+
     return (
       <Query
         query={QUERY_GET_CONSTITUENCIES_BY_DISTRICT_CODES}
@@ -41,7 +44,10 @@ class FavDistrictListPage extends Component {
           return (
             <>
               <Container>
-                <Typography variant="h4">{`${data.dcd_constituencies.length}個選區`}</Typography>
+                <Typography variant="h4">
+                  {`${data.dcd_constituencies.length}`}
+                  {t('no_of_districts')}
+                </Typography>
               </Container>
               <Container>
                 {data.dcd_constituencies.map(c => (
@@ -56,4 +62,4 @@ class FavDistrictListPage extends Component {
   }
 }
 
-export default FavDistrictListPage
+export default withTranslation()(FavDistrictListPage)
diff --git a/web/src/components/pages/profile/index.js b/web/src/components/pages/profile/index.js
@@ -99,6 +99,7 @@ const FlexRowContainer = styled(Box)`
 const CandidateHeaderContainer = styled(FlexRowContainer)`
   && {
     height: 120px;
+    margin-bottom: 16px;
     position: relative;
     display: flex;
     background: linear-gradient(
@@ -121,6 +122,7 @@ const PersonName = styled.div`
     position: absolute;
     left: 116px;
     top: 36px;
+    margin-right: 16px;
     color: ${props => COLORS.camp[props.camp].text};
   }
 `
@@ -261,15 +263,42 @@ class ProfilePage extends Component {
       currentTerm.term_to &&
       Date.parse(new Date()) < Date.parse(currentTerm.term_to)
     ) {
-      text = `現任${currentTerm.district.dc_name_zh}區議員（${currentTerm.constituency.name_zh}）`
+      text = t('currentTerm.councilor.withDistrict', {
+        district_name: withLanguage(
+          currentTerm.district.dc_name_en,
+          currentTerm.district.dc_name_zh
+        ),
+        dcca_name: withLanguage(
+          currentTerm.constituency.name_en,
+          currentTerm.constituency.name_zh
+        ),
+      })
     } else {
-      const electionResult = person.candidates[0].is_won
+      text = person.candidates[0].is_won
         ? // '當選' :
-          t('election.tag1')
+          t('election.elected', {
+            year: person.candidates[0].year,
+            district_name: withLanguage(
+              person.candidates[0].constituency.district.dc_name_en,
+              person.candidates[0].constituency.district.dc_name_zh
+            ),
+            dcca_name: withLanguage(
+              person.candidates[0].constituency.name_en,
+              person.candidates[0].constituency.name_zh
+            ),
+          })
         : // '參選'
-          t('election.tag2')
-
-      text = `${electionResult}${person.candidates[0].year}年${person.candidates[0].constituency.district.dc_name_zh}區議員（${person.candidates[0].constituency.name_zh}）`
+          t('election.run_for', {
+            year: person.candidates[0].year,
+            district_name: withLanguage(
+              person.candidates[0].constituency.district.dc_name_en,
+              person.candidates[0].constituency.district.dc_name_zh
+            ),
+            dcca_name: withLanguage(
+              person.candidates[0].constituency.name_en,
+              person.candidates[0].constituency.name_zh
+            ),
+          })
     }
 
     return <Typography variant="h6">{text}</Typography>

diff --git a/web/src/components/templates/DCCAElectionHistories.js b/web/src/components/templates/DCCAElectionHistories.js
@@ -7,7 +7,8 @@ import { Typography } from '@material-ui/core'
 import DCCAElectionResult from 'components/templates/DCCAElectionResult'
 import Box from '@material-ui/core/Box'
 import { COLORS } from 'ui/theme'
-import { getColorFromCamp } from 'utils/helper'
+import { getColorFromCamp, geti18nFromCamp } from 'utils/helper'
+import { withTranslation } from 'react-i18next'
 
 const DCCAElectionResultContainer = styled(Box)`
   && {
@@ -34,6 +35,7 @@ class DCCAElectionHistories extends Component {
       code
       year
       name_zh
+      name_en
       candidates(where: { year: { _eq: $year${year} }, cacode: { _eq: $code${code} } }) {
         person {
           name_en
@@ -46,6 +48,8 @@ class DCCAElectionHistories extends Component {
         vote_percentage
         is_won
         political_affiliation
+        political_affiliation_en
+        political_affiliation_zh
       }
     }
     dcd_candidates_aggregate_${year}_${code}: dcd_candidates_aggregate(
@@ -81,7 +85,7 @@ class DCCAElectionHistories extends Component {
   }
 
   render() {
-    const { histories, presetTabIndex } = this.props
+    const { histories, presetTabIndex, t } = this.props
     const filteredHistories = histories.filter(
       history => history.year !== '2019'
     )
@@ -129,10 +133,13 @@ class DCCAElectionHistories extends Component {
                           .camp
                       )}
                     >
-                      {
-                        electionResult.candidates.find(candi => candi.is_won)
-                          .camp
-                      }
+                      {t(
+                        geti18nFromCamp(
+                          electionResult.candidates.find(candi => candi.is_won)
+                            .camp,
+                          true
+                        )
+                      )}
                     </CampText>
                     <Typography variant="body2">
                       {electionResult.year}
@@ -158,4 +165,4 @@ class DCCAElectionHistories extends Component {
   }
 }
 
-export default DCCAElectionHistories
+export default withTranslation()(DCCAElectionHistories)