From f3f22d6cc45d9efe61fdce65e4f8760f82036bd6 Mon Sep 17 00:00:00 2001
From: wingkwong <wingkwong.code@gmail.com>
Date: Sun, 10 Nov 2019 10:58:07 +0800
Subject: [PATCH 1/7] Revise ShareButton

---
 web/src/components/organisms/ShareButton.js | 25 ++++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/web/src/components/organisms/ShareButton.js b/web/src/components/organisms/ShareButton.js
index ce8e5209..09e5f0f3 100644
--- a/web/src/components/organisms/ShareButton.js
+++ b/web/src/components/organisms/ShareButton.js
@@ -1,11 +1,13 @@
 import React from 'react'
 import IconButton from '@material-ui/core/IconButton'
-import ShareIcon from '@material-ui/icons/Share'
 import CopyIcon from '@material-ui/icons/Link'
 import styled from 'styled-components'
 import Menu from '@material-ui/core/Menu'
 import MenuItem from '@material-ui/core/MenuItem'
+import Fab from '@material-ui/core/Fab'
+import AddIcon from '@material-ui/icons/Add'
 import { getCurrentUrl } from 'utils/helper'
+import { COLORS } from 'ui/theme'
 import {
   FacebookShareButton,
   TelegramShareButton,
@@ -31,6 +33,18 @@ const StyledCopyIcon = styled(CopyIcon)`
   }
 `
 
+const StyledFab = styled(Fab)`
+  && {
+    margin: 0px;
+    top: auto;
+    right: 20px;
+    bottom: 20px;
+    left: auto;
+    position: fixed;
+    color: ${COLORS.main.background};
+  }
+`
+
 function getShareUrl(url, platform) {
   return updateUrlParameter(
     updateUrlParameter(url, 'utm_source', platform),
@@ -80,16 +94,15 @@ function ShareButton(props) {
 
   return (
     <>
-      <RightIconButton
-        color="inherit"
-        component="span"
+      <StyledFab
+        color="primary"
         aria-label="Share"
         aria-controls="share-menu"
         aria-haspopup="true"
         onClick={handleShareButtonClick}
       >
-        <ShareIcon />
-      </RightIconButton>
+        <AddIcon />
+      </StyledFab>
       <Menu
         id="share-menu"
         anchorEl={anchorEl}

From a0773dd930913946f85938a73e84830ac0158c3b Mon Sep 17 00:00:00 2001
From: wingkwong <wingkwong.code@gmail.com>
Date: Sun, 10 Nov 2019 10:58:25 +0800
Subject: [PATCH 2/7] Include ShareButton to every page

---
 web/src/App.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/web/src/App.js b/web/src/App.js
index e451bcd4..f16b569f 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -18,6 +18,7 @@ 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'
@@ -25,6 +26,7 @@ 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'
 
 const client = new ApolloClient({
@@ -165,6 +167,15 @@ const App = props => {
                   </Switch>
                 </main>
               </Wrapper>
+              <ShareButton
+                onClick={() =>
+                  fireEvent({
+                    ca: 'general',
+                    ac: 'click',
+                    lb: 'share_button',
+                  })
+                }
+              />
               <Footer />
             </ContentContainer>
             <SearchDrawer />

From 4ababe088d3e122c9744c7fb8e19c18ec6359a61 Mon Sep 17 00:00:00 2001
From: wingkwong <wingkwong.code@gmail.com>
Date: Sun, 10 Nov 2019 10:59:04 +0800
Subject: [PATCH 3/7] Replace ShareButton with LanguageSwitcher on Appbar

---
 web/src/components/organisms/MobileAppBar.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/components/organisms/MobileAppBar.js b/web/src/components/organisms/MobileAppBar.js
index 71aa19a4..210cf214 100644
--- a/web/src/components/organisms/MobileAppBar.js
+++ b/web/src/components/organisms/MobileAppBar.js
@@ -8,7 +8,7 @@ import styled from 'styled-components'
 import ContextStore from 'ContextStore'
 import { DRAWER_OPEN } from '../../reducers/drawer'
 import { UnstyledNavLink } from '../atoms/Link'
-import ShareButton from './ShareButton'
+import LanguageSwitcher from './LanguageSwitcher'
 import { fireEvent } from 'utils/ga_fireevent'
 
 const StyledAppBar = styled(AppBar)`
@@ -59,12 +59,12 @@ function MobileAppBar(props) {
           >
             <MenuIcon />
           </IconButton>
-          <ShareButton
+          <LanguageSwitcher
             onClick={() =>
               fireEvent({
                 ca: 'general',
                 ac: 'click',
-                lb: 'share_button',
+                lb: 'xxxxxxx', //FIXME
               })
             }
           />

From 244c83395b9bc5409556cf387be0d4795e27d359 Mon Sep 17 00:00:00 2001
From: wingkwong <wingkwong.code@gmail.com>
Date: Sun, 10 Nov 2019 16:42:14 +0800
Subject: [PATCH 4/7] Update translation files

---
 web/src/locales/en/translation.json | 6 ++++--
 web/src/locales/zh/translation.json | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/web/src/locales/en/translation.json b/web/src/locales/en/translation.json
index 03d1ee90..e4661636 100644
--- a/web/src/locales/en/translation.json
+++ b/web/src/locales/en/translation.json
@@ -30,7 +30,7 @@
   "voteStats.text1": "Not allowed to vote",
   "voteStats.text2": "Did not vote",
   "voteStats.text3": "Invalid vote",
-  "voteStats.text4": "Vote for <name>",
+  "voteStats.text4": "Vote for {{name}}",
   "metrics.text1": "Demographics",
   "camp.democracy": "Pro-democratic",
   "camp.establishment": "Pro-establishment",
@@ -153,5 +153,7 @@
   "summary.tag.clash": "Two or more same camp candidates running in the same constituency - {{n}} districts",
   "summary.tag.highlight": "Highlighted districts - {{n}} districts",
   "summary.tag.highlight_text": "是次選舉，該選區有超過2個候選人。另外，該選區於2015區議會選舉競爭激烈（當選者得票與第二高得票者相差少於10個百分比）或自動當選。",
-  "summary.tag.uncontested": "Uncontested in last election - {{n}} districts"
+  "summary.tag.uncontested": "Uncontested in last election - {{n}} districts",
+  "lang.en": "English",
+  "lang.zh": "中文"
 }
diff --git a/web/src/locales/zh/translation.json b/web/src/locales/zh/translation.json
index a7d34a50..e4612d8d 100644
--- a/web/src/locales/zh/translation.json
+++ b/web/src/locales/zh/translation.json
@@ -30,7 +30,7 @@
   "voteStats.text1": "不能投票",
   "voteStats.text2": "沒有投票",
   "voteStats.text3": "投票失效",
-  "voteStats.text4": "投給<name>",
+  "voteStats.text4": "投給{{name}}",
   "metrics.text1": "人口資料",
   "camp.democracy": "民主",
   "camp.establishment": "建制",
@@ -153,5 +153,7 @@
   "summary.tag.clash": "撞區 - {{n}}區",
   "summary.tag.highlight": "焦點選區 - {{n}}區",
   "summary.tag.highlight_text": "是次選舉，該選區有超過2個候選人。另外，該選區於2015區議會選舉競爭激烈（當選者得票與第二高得票者相差少於10個百分比）或自動當選。",
-  "summary.tag.uncontested": "上屆自動當選 - {{n}}區"
+  "summary.tag.uncontested": "上屆自動當選 - {{n}}區",
+  "lang.en": "English",
+  "lang.zh": "中文"
 }

From 7391d4ad4bf098cc365719128ff91a97cf46b647 Mon Sep 17 00:00:00 2001
From: wingkwong <wingkwong.code@gmail.com>
Date: Sun, 10 Nov 2019 16:42:28 +0800
Subject: [PATCH 5/7] Update lb

---
 web/src/components/organisms/MobileAppBar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/organisms/MobileAppBar.js b/web/src/components/organisms/MobileAppBar.js
index 210cf214..acf9d89c 100644
--- a/web/src/components/organisms/MobileAppBar.js
+++ b/web/src/components/organisms/MobileAppBar.js
@@ -64,7 +64,7 @@ function MobileAppBar(props) {
               fireEvent({
                 ca: 'general',
                 ac: 'click',
-                lb: 'xxxxxxx', //FIXME
+                lb: 'lang_switcher_button', //TODO: do we need that?
               })
             }
           />

From 78be94b1fc891c3055bdcf78eaa48b30ab913d8f Mon Sep 17 00:00:00 2001
From: wingkwong <wingkwong.code@gmail.com>
Date: Sun, 10 Nov 2019 16:44:00 +0800
Subject: [PATCH 6/7] Fix lint

---
 web/src/components/organisms/ShareButton.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/web/src/components/organisms/ShareButton.js b/web/src/components/organisms/ShareButton.js
index 09e5f0f3..c7c5aefd 100644
--- a/web/src/components/organisms/ShareButton.js
+++ b/web/src/components/organisms/ShareButton.js
@@ -19,13 +19,6 @@ import {
   TwitterIcon,
 } from 'react-share'
 
-const RightIconButton = styled(IconButton)`
-  && {
-    position: absolute;
-    right: 0;
-  }
-`
-
 const StyledCopyIcon = styled(CopyIcon)`
   && {
     width: 32px;

From c3b717a8706127dc24514500d5691cb6a05ea47d Mon Sep 17 00:00:00 2001
From: wingkwong <wingkwong.code@gmail.com>
Date: Sun, 10 Nov 2019 16:44:48 +0800
Subject: [PATCH 7/7] Create LanguageSwitcher.js

---
 .../components/organisms/LanguageSwitcher.js  | 77 +++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 web/src/components/organisms/LanguageSwitcher.js

diff --git a/web/src/components/organisms/LanguageSwitcher.js b/web/src/components/organisms/LanguageSwitcher.js
new file mode 100644
index 00000000..5209c1b7
--- /dev/null
+++ b/web/src/components/organisms/LanguageSwitcher.js
@@ -0,0 +1,77 @@
+import React from 'react'
+import IconButton from '@material-ui/core/IconButton'
+import styled from 'styled-components'
+import Menu from '@material-ui/core/Menu'
+import MenuItem from '@material-ui/core/MenuItem'
+import LanguageIcon from '@material-ui/icons/Language'
+import { useTranslation } from 'react-i18next'
+
+const RightIconButton = styled(IconButton)`
+  && {
+    position: absolute;
+    right: 0;
+  }
+`
+
+function LanguageSwitcher(props) {
+  const [anchorEl, setAnchorEl] = React.useState(null)
+
+  const handleButtonClick = event => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleButtonClose = () => {
+    setAnchorEl(null)
+  }
+
+  const changeLanguage = lng => {
+    var path = window.location.pathname
+    if (path.includes('/en/') && lng === 'zh') {
+      path = path.replace('/en/', '/zh/')
+      window.location.pathname = path
+    } else if (path.includes('/zh/') && lng === 'en') {
+      path = path.replace('/zh/', '/en/')
+      window.location.pathname = path
+    } else if (!path.includes('/en/') && !path.includes('/zh/')) {
+      path = `${lng}${path}`
+      window.location.pathname = path
+    } else {
+      handleButtonClose()
+    }
+  }
+
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <RightIconButton
+        color="inherit"
+        component="span"
+        aria-label="Language Switcher"
+        aria-controls="lang-menu"
+        aria-haspopup="true"
+        onClick={handleButtonClick}
+      >
+        <LanguageIcon />
+      </RightIconButton>
+      <Menu
+        id="lang-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={handleButtonClose}
+      >
+        <MenuItem onClick={() => changeLanguage('zh')}>
+          {/* 中文 */}
+          {t('lang.zh')}
+        </MenuItem>
+        <MenuItem onClick={() => changeLanguage('en')}>
+          {/* English */}
+          {t('lang.en')}
+        </MenuItem>
+      </Menu>
+    </>
+  )
+}
+
+export default LanguageSwitcher