Merge branch 'master' into 86-reasons-of-articles-and-voting

cofacts · May 20, 2018 · 1910921 · 1910921
2 parents 78a5bbc + 94ab5d6
commit 1910921
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 46 deletions.
diff --git a/components/App/AppFooter.js b/components/App/AppFooter.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { PROJECT_HACKFOLDR, CONTACT_EMAIL } from '../../constants/urls';
+import GoogleWebsiteTranslator from 'components/GoogleWebsiteTranslator';
 
 export default function AppFooter() {
   return (
@@ -21,6 +22,7 @@ export default function AppFooter() {
         ・
         <a href={`mailto:${CONTACT_EMAIL}`}>連絡信箱</a>
       </p>
+      <GoogleWebsiteTranslator />
       <style jsx>{`
         footer {
           margin: 0 20px 44px;

diff --git a/components/GoogleWebsiteTranslator/GoogleWebsiteTranslator.js b/components/GoogleWebsiteTranslator/GoogleWebsiteTranslator.js
@@ -0,0 +1,55 @@
+import React, { PureComponent } from 'react';
+
+export default class GoogleWebsiteTranslator extends PureComponent {
+  componentDidMount() {
+    window.googleTranslateElementInit = this.googleTranslateElementInit;
+    this.addGoogleTranslatorScript();
+  }
+
+  addGoogleTranslatorScript = () => {
+    const newScript = document.createElement('script');
+    newScript.src =
+      '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
+    this.refContainer.appendChild(newScript);
+  };
+
+  googleTranslateElementInit = () => {
+    this.translateInstance = new window.google.translate.TranslateElement(
+      {
+        pageLanguage: 'zh-TW',
+        includedLanguages: 'en,zh-TW',
+        layout:
+          window.google.translate.TranslateElement.FloatPosition.BOTTOM_RIGHT,
+        disableAutoTranslation: true, // Only translate when needed, to avoid conflict with React.js
+      },
+      'google_translate_element'
+    );
+  };
+
+  componentWillUnmount() {
+    if (this.translateInstance) {
+      this.translateInstance.dispose();
+    }
+  }
+
+  render() {
+    return (
+      <div
+        id="google_translate_container"
+        ref={container => (this.refContainer = container)}
+      >
+        <div id="google_translate_element" />
+        <style jsx>
+          {`
+            #google_translate_container {
+              position: fixed;
+              bottom: 0.5em;
+              right: 1em;
+              background: rgba(255, 255, 255, 0.6);
+            }
+          `}
+        </style>
+      </div>
+    );
+  }
+}
diff --git a/components/GoogleWebsiteTranslator/index.js b/components/GoogleWebsiteTranslator/index.js
@@ -0,0 +1,3 @@
+import GoogleWebsiteTranslator from './GoogleWebsiteTranslator';
+
+export default GoogleWebsiteTranslator;
diff --git a/pages/article.js b/pages/article.js
@@ -40,15 +40,27 @@ class ArticlePage extends React.Component {
 
   handleSearchReply = ({ target: { value: queryString } }, after) => {
     const { dispatch } = this.props;
-    dispatch(searchReplies({ q: queryString, after }));
-    dispatch(searchRepiedArticle({ q: queryString }));
+    dispatch(
+      searchReplies({
+        q: queryString,
+        after,
+      })
+    );
+    dispatch(
+      searchRepiedArticle({
+        q: queryString,
+      })
+    );
   };
 
   handleSubmit = reply => {
     const { dispatch, query: { id } } = this.props;
-    return dispatch(submitReply({ ...reply, articleId: id })).then(
-      this.scrollToReplySection
-    );
+    return dispatch(
+      submitReply({
+        ...reply,
+        articleId: id,
+      })
+    ).then(this.scrollToReplySection);
   };
 
   handleReplyConnectionDelete = conn => {
@@ -78,12 +90,16 @@ class ArticlePage extends React.Component {
   };
 
   handleTabChange = tab => () => {
-    this.setState({ tab });
+    this.setState({
+      tab,
+    });
   };
 
   scrollToReplySection = () => {
     if (!this._replySectionEl) return;
-    this._replySectionEl.scrollIntoView({ behavior: 'smooth' });
+    this._replySectionEl.scrollIntoView({
+      behavior: 'smooth',
+    });
   };
 
   componentWillUnmount() {
@@ -125,7 +141,6 @@ class ArticlePage extends React.Component {
           搜尋
         </li>
         <li className="empty" />
-
         <style jsx>{tabMenuStyle}</style>
       </ul>
     );
@@ -196,15 +211,18 @@ class ArticlePage extends React.Component {
         <Head>
           <title>{slicedArticleTitle}⋯⋯ | Cofacts 真的假的</title>
         </Head>
-
         <section className="section">
           <header className="header">
             <h2>訊息原文</h2>
             <ArticleInfo article={article} />
           </header>
           <article className="message">
             {nl2br(
-              linkify(article.get('text'), { props: { target: '_blank' } })
+              linkify(article.get('text'), {
+                props: {
+                  target: '_blank',
+                },
+              })
             )}
           </article>
           <footer>
@@ -222,7 +240,6 @@ class ArticlePage extends React.Component {
             })}
           </footer>
         </section>
-
         <section
           id="current-replies"
           className="section"
@@ -238,13 +255,11 @@ class ArticlePage extends React.Component {
             onVote={this.handleReplyConnectionVote}
           />
         </section>
-
         <section className="section">
           <h2>增加新回應</h2>
           {this.renderTabMenu()}
           <div className="tab-content">{this.renderNewReplyTab()}</div>
         </section>
-
         {relatedArticles.size ? (
           <section className="section">
             <h2>你可能也會對這些類似文章有興趣</h2>
@@ -257,7 +272,6 @@ class ArticlePage extends React.Component {
         ) : (
           ''
         )}
-
         <style jsx>{detailStyle}</style>
         <style jsx>{`
           .tab-content {

diff --git a/pages/articles.js b/pages/articles.js
@@ -91,12 +91,14 @@ class Articles extends ListPage {
           onKeyUp={this.handleKeywordKeyup}
           defaultValue={q}
         />
-        <style jsx>{`
-          .label-search {
-            display: block;
-            margin-bottom: 1em;
-          }
-        `}</style>
+        <style jsx>
+          {`
+            .label-search {
+              display: block;
+              margin-bottom: 1em;
+            }
+          `}
+        </style>
       </label>
     );
   };
@@ -198,11 +200,13 @@ class Articles extends ListPage {
           />{' '}
           列出包括僅有 1 人回報的文章
         </label>
-        <style jsx>{`
-          .reply-request-count {
-            width: 2em;
-          }
-        `}</style>
+        <style jsx>
+          {`
+            .reply-request-count {
+              width: 2em;
+            }
+          `}
+        </style>
       </div>
     );
   };
@@ -250,12 +254,14 @@ class Articles extends ListPage {
           })}
         </ul>
         {this.renderPagination()}
-        <style jsx>{`
-          .article-list {
-            padding: 0;
-            list-style: none;
-          }
-        `}</style>
+        <style jsx>
+          {`
+            .article-list {
+              padding: 0;
+              list-style: none;
+            }
+          `}
+        </style>
       </div>
     );
   };
@@ -274,8 +280,8 @@ class Articles extends ListPage {
         {searchUserByArticleId
           ? this.renderSearchedArticleHeader()
           : this.renderHeader()}
-        {this.renderSearch()}
-        Order By: {this.renderOrderBy()}
+        {this.renderSearch()} Order By:
+        {this.renderOrderBy()}
         {this.renderFilter()}
         {isLoading ? <p>Loading...</p> : this.renderList()}
         <span />

diff --git a/static/index.css b/static/index.css
@@ -5,7 +5,7 @@ body {
   margin: 0;
   padding: 0;
   font-size: 22px;
-  font-family: wt011, Helvetica, Arial, sans-serif;
+  font-family: Lato, Helvetica, Arial, sans-serif;
 }
 h1,
 h2,

diff --git a/static/index.html b/static/index.html