added a sorting feature

2019-06-23 19:57:55 +09:00 · 2019-06-23 19:57:55 +09:00 · 85bb71a64a
parent f5367b0bd0
commit 85bb71a64a
8 changed files with 287 additions and 284 deletions
--- a/src/components/langcard.js
+++ b/src/components/langcard.js
@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+class LangCard extends Component{
+    constructor(props){
+        super(props)
+        this.state = {
+            postItem: null
+        }
+    }
+    handleRemoveContentButton(event) {
+        if (this.props.didHandleRemove) {
+            this.props.didHandleRemove(this.props.post)
+        }
+    }
+
+    setPostStateOnProps() {
+        const { post } = this.props
+        this.setState({
+            postItem: post
+        })
+    }
+
+    componentDidMount() {
+        this.setPostStateOnProps()
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshop) {
+        if (this.props !== prevProps) {
+            this.setPostStateOnProps()
+        }
+    }
+
+    render(){
+        const { postItem } = this.state
+        return (
+            <div className="card align-center">
+                {postItem !== null
+                    ? 
+                    <div>
+                        <img src={require('../images/flags/' + postItem.langFlag)} className="flag" alt={postItem.lang} />
+                        <p className="language-title">{postItem.lang}</p>
+                        <a href={postItem.app} target="_blank" rel="noopener noreferrer"><p><FormattedMessage id="main.app-application" defaultMessage="App Translation" /></p></a>
+                        <a href={postItem.website} target="_blank" rel="noopener noreferrer"><p><FormattedMessage id="main.website-application" defaultMessage="Status.im Website Translation" /></p></a>
+                    </div>
+
+                    : ''}
+
+            </div>
+        );
+    }
+
+}
+
+export default LangCard;
--- a/src/components/langs.js
+++ b/src/components/langs.js
@ -1,9 +1,9 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';

-const languages = {
+const languages = [

-    korean: {
+    {
        code: 'ko',
        lang: {
            langFlag: require("../images/flags/korea.png"),
@ -15,7 +15,7 @@ const languages = {
        }
    },

-    chinese: {
+    {
        code: 'zh',
        lang: {
            langFlag: require("../images/flags/china.png"),
@ -27,7 +27,7 @@ const languages = {
        }
    },

-    russian: {
+    {
        code: 'ru',
        lang: {
            langFlag: require("../images/flags/russia.svg"),
@ -38,115 +38,7 @@ const languages = {
            website: "https://lokalise.co/signup/831920985cf29a3c550a85.62099336/ru/",
        }
    },
-    
-    spanish_es: {
-        code: 'es',
-        lang: {
-            langFlag: require("../images/flags/spain.png"),
-            langName: <FormattedMessage id="main.spanish" defaultMessage="Spanish (ES)" />,
-        },
-        link: {
-            app: "https://lokalise.co/signup/562366815b97551836b8f1.55149963/es/",
-            website: "https://lokalise.co/signup/831920985cf29a3c550a85.62099336/es/",
-        }
-    },

-    spanish_la: {
-        code: 'es_419',
-        lang: {
-            langFlag: require("../images/flags/latin_america.png"),
-            langName: <FormattedMessage id="main.spanish-latin" defaultMessage="Spanish (LA)" />,
-        },
-        link: {
-            app: "https://lokalise.co/signup/562366815b97551836b8f1.55149963/es_419/",
-            website: "https://lokalise.co/signup/831920985cf29a3c550a85.62099336/es_419/",
-        }
-    },
-
-    portguese_pt: {
-        code: 'pt_PT',
-        lang: {
-            langFlag: require("../images/flags/portugal.png"),
-            langName: <FormattedMessage id="main.portuguese-pt" defaultMessage="Portuguese (PT)" />,
-        },
-        link: {
-            app: "https://lokalise.co/signup/562366815b97551836b8f1.55149963/pt/",
-            website: "https://lokalise.co/signup/831920985cf29a3c550a85.62099336/pt/",
-        }
-    },
-
-    portguese_br: {
-        code: 'pt_BR',
-        lang: {
-            langFlag: require("../images/flags/brazil.png"),
-            langName: <FormattedMessage id="main.portuguese-br" defaultMessage="Portuguese (BR)" />,
-        },
-        link: {
-            app: "https://lokalise.co/signup/562366815b97551836b8f1.55149963/pt_BR/",
-            website: "https://lokalise.co/signup/831920985cf29a3c550a85.62099336/pt_BR/",
-        }
-    },
-
-    german: {
-        code: 'de',
-        lang: {
-            langFlag: require("../images/flags/germany.png"),
-            langName: <FormattedMessage id="main.german" defaultMessage="German" />,
-        },
-        link: {
-            app: "https://lokalise.co/signup/562366815b97551836b8f1.55149963/de/",
-            website: "https://lokalise.co/signup/831920985cf29a3c550a85.62099336/de/",
-        }
-    },
-
-    french: {
-        code: 'fr',
-        lang: {
-            langFlag: require("../images/flags/france.png"),
-            langName: <FormattedMessage id="main.france" defaultMessage="French" />,
-        },
-        link: {
-            app: "https://lokalise.co/signup/562366815b97551836b8f1.55149963/fr/",
-            website: "https://lokalise.co/signup/831920985cf29a3c550a85.62099336/fr/",
-        }
-    },
-
-    japanese: {
-        code: 'ja',
-        lang: {
-            langFlag: require("../images/flags/japan.png"),
-            langName: <FormattedMessage id="main.japan" defaultMessage="Japan" />,
-        },
-        link: {
-            app: "https://lokalise.co/signup/562366815b97551836b8f1.55149963/ja/",
-            website: "https://lokalise.co/signup/831920985cf29a3c550a85.62099336/ja/",
-        }
-    },
-
-    persian: {
-        code: 'fa',
-        lang: {
-            langFlag: require("../images/flags/iran.png"),
-            langName: <FormattedMessage id="main.iran" defaultMessage="Persian" />,
-        },
-        link: {
-            app: "https://lokalise.co/signup/562366815b97551836b8f1.55149963/fa/",
-            website: "https://lokalise.co/signup/831920985cf29a3c550a85.62099336/fa/",
-        }
-    },
-
-    dutch: {
-        code: 'nl',
-        lang: {
-            langFlag: require("../images/flags/netherlands.svg"),
-            langName: <FormattedMessage id="main.netherlands" defaultMessage="Dutch" />,
-        },
-        link: {
-            app: "https://lokalise.co/signup/562366815b97551836b8f1.55149963/nl/",
-            website: "https://lokalise.co/signup/831920985cf29a3c550a85.62099336/nl/",
-        }
-    },
-
-}
+]
 
 export default languages;
--- a/src/components/main.js
+++ b/src/components/main.js
@ -1,20 +1,54 @@
 import React, { Component } from 'react';
 import { FormattedMessage } from 'react-intl';
-import languages from './langs'
-
-function LangCard(props){
-  return (
-    <div>
-      <img src= {props.lang.langFlag} className="flag" alt={props.code} />
-      <p className = "language-title">{props.lang.langName}</p>
-      <a href = {props.link.app} target="_blank" rel="noopener noreferrer"><p><FormattedMessage id="main.app-application" defaultMessage="App Translation" /></p></a>
-      <a href = {props.link.website} target="_blank" rel="noopener noreferrer"><p><FormattedMessage id="main.website-application" defaultMessage="Status.im Website Translation" /></p></a>
-    </div>
-  );
-}
+import PostData from './posts.json';
+import LangCard from './langcard';

 class Main extends Component {
+  constructor(props) {
+    super(props)
+    this.toggleListReverse = this.toggleListReverse.bind(this)
+    this.toggleSortLang = this.toggleSortLang.bind(this)
+    this.state = {
+      postList: [],
+      isOldestFirst: true
+    }
+  }
+
+  sortByLang() {
+    const { postList } = this.state
+    let newPostList = postList.sort((a,b)=> {
+      if (a.lang < b.lang) { return -1; }
+      if (a.lang > b.lang) { return 1; }
+      return 0;
+    });
+
+    this.setState({
+      postList: newPostList
+    })
+  }
+
+  toggleSortLang(event) {
+    this.sortByLang();
+  }
+
+  toggleListReverse(event) {
+    const { postList } = this.state
+    let newPostList = postList.reverse()
+    this.setState({
+      postList: newPostList
+    })
+  }
+
+  componentDidMount() {
+    const postList = PostData;
+    this.setState({
+      isOldestFirst: true,
+      postList: postList
+    })
+  }
+
  render() {
+    const { postList } = this.state;
    return (

        <main>
@ -23,85 +57,26 @@ class Main extends Component {
            <h1><FormattedMessage id="main.language" defaultMessage="Languages to Translate" /></h1>
          </div>

+          <div className="align-center margin-bottom-20">
+            <button className="button" onClick={this.toggleSortLang}><FormattedMessage id="main.sort_alphabetical" defaultMessage="Alphabetical Order" /></button>
+            <button className="button" onClick={this.toggleListReverse}><FormattedMessage id="main.sort_reverse" defaultMessage="Reverse Order" /></button>
+          </div>
+
+          
+
+          <div className="languages">
+
+          {postList.map((item, index) => {
+            return <LangCard
+            post = {item}
+            key={`post-list-key ${index}`}
+            />
+          })}
+
+
+          </div>
+          
          <div>
-              
-              <div className="languages">
-
-                  <LangCard
-                    lang={languages.korean.lang}
-                    link={languages.korean.link}
-                  />
-
-                  <LangCard
-                    lang={languages.chinese.lang}
-                    link={languages.chinese.link}
-                  />
-
-                  <LangCard
-                    lang={languages.japanese.lang}
-                    link={languages.japanese.link}
-                  />                       
-
-              </div>
-
-              <div className="languages">
-
-                  <LangCard
-                    lang={languages.german.lang}
-                    link={languages.german.link}
-                  />
-
-                  <LangCard
-                    lang={languages.french.lang}
-                    link={languages.french.link}
-                  />
-
-                  <LangCard
-                    lang={languages.dutch.lang}
-                    link={languages.dutch.link}
-                  />
-                  
-              </div>
-
-              <div className="languages">
-
-                  <LangCard
-                    lang={languages.spanish_es.lang}
-                    link={languages.spanish_es.link}
-                  />   
-
-                  <LangCard
-                    lang={languages.spanish_la.lang}
-                    link={languages.spanish_la.link}
-                  />   
-
-
-                  <LangCard
-                    lang={languages.portguese_pt.lang}
-                    link={languages.portguese_pt.link}
-                  />
-                
-              </div>
-
-              <div className="languages">
-
-                  <LangCard
-                    lang={languages.portguese_br.lang}
-                    link={languages.portguese_br.link}
-                  />                
-
-                  <LangCard
-                    lang={languages.russian.lang}
-                    link={languages.russian.link}
-                  />   
-
-                  <LangCard
-                    lang={languages.persian.lang}
-                    link={languages.persian.link}
-                  />
-
-              </div>
-

              <div className="align-center">
                <p><FormattedMessage id="main.addlanguage" defaultMessage="Want to add your Language?" /></p>
--- a/src/components/posts.json
+++ b/src/components/posts.json
@ -0,0 +1,110 @@
+[ 
+    {
+        "id": 1,
+        "lang": "Korean",
+        "code": "ko",
+        "langFlag": "korea.png",
+        "app": "https://lokalise.co/signup/562366815b97551836b8f1.55149963/ko/",
+        "website": "https://lokalise.co/signup/831920985cf29a3c550a85.62099336/ko/"
+    },
+
+    {
+        "id": 2,
+        "lang": "Chinese",
+        "code": "zh",
+        "langFlag": "china.png",
+        "app": "https://lokalise.co/signup/562366815b97551836b8f1.55149963/zh_Hans_CN/",
+        "website": "https://lokalise.co/signup/831920985cf29a3c550a85.62099336/zh_CN/"
+    },
+
+    {
+        "id": 3,
+        "lang": "Japanese",
+        "code": "ja",        
+        "langFlag": "japan.png",
+        "app": "https://lokalise.co/signup/562366815b97551836b8f1.55149963/ja/",
+        "website": "https://lokalise.co/signup/831920985cf29a3c550a85.62099336/ja/"
+    },
+
+    {
+        "id": 4,
+        "lang": "German",
+        "code": "de",
+        "langFlag": "germany.png",
+        "app": "https://lokalise.co/signup/562366815b97551836b8f1.55149963/de/",
+        "website": "https://lokalise.co/signup/831920985cf29a3c550a85.62099336/de/"
+    },
+
+    {
+        "id": 5,
+        "lang": "French",
+        "code": "fR",
+        "langFlag": "france.png",
+        "app": "https://lokalise.co/signup/562366815b97551836b8f1.55149963/fr/",
+        "website": "https://lokalise.co/signup/831920985cf29a3c550a85.62099336/fr/"
+    },
+
+    {
+        "id": 6,
+        "lang": "Dutch",
+        "code": "nl",
+        "langFlag": "netherlands.svg",
+        "app": "https://lokalise.co/signup/562366815b97551836b8f1.55149963/nl/",
+        "website": "https://lokalise.co/signup/831920985cf29a3c550a85.62099336/nl/"
+    },
+
+    {
+        "id": 7,
+        "lang": "Spanish (ES)",
+        "code": "es",
+        "langFlag": "spain.png",
+        "app": "https://lokalise.co/signup/562366815b97551836b8f1.55149963/es/",
+        "website": "https://lokalise.co/signup/831920985cf29a3c550a85.62099336/es/"
+    },
+
+    {
+        "id": 8,
+        "lang": "Spanish (LM)",
+        "code": "es_419",
+        "langFlag": "latin_america.png",
+        "app": "https://lokalise.co/signup/562366815b97551836b8f1.55149963/es_419/",
+        "website": "https://lokalise.co/signup/831920985cf29a3c550a85.62099336/es_419/"
+    },
+
+    {
+        "id": 9,
+        "lang": "Portuguese (PT)",
+        "code": "pt",
+        "langFlag": "portugal.png",
+        "app": "https://lokalise.co/signup/562366815b97551836b8f1.55149963/pt/",
+        "website": "https://lokalise.co/signup/831920985cf29a3c550a85.62099336/pt/"
+    },
+
+    {
+        "id": 10,
+        "lang": "Portuguese (BR)",
+        "code": "pt_BR",
+        "langFlag": "brazil.png",
+        "app": "https://lokalise.co/signup/562366815b97551836b8f1.55149963/pt_BR/",
+        "website": "https://lokalise.co/signup/831920985cf29a3c550a85.62099336/pt_BR/"
+    },
+
+    {
+        "id": 11,
+        "lang": "Russian",
+        "code": "ru",
+        "langFlag": "russia.svg",
+        "app": "https://lokalise.co/signup/562366815b97551836b8f1.55149963/ru/",
+        "website": "https://lokalise.co/signup/831920985cf29a3c550a85.62099336/ru/"
+    },
+
+    {
+        "id": 12,
+        "lang": "Persian",
+        "code": "fa",
+        "langFlag": "iran.png",
+        "app": "https://lokalise.co/signup/562366815b97551836b8f1.55149963/fa/",
+        "website": "https://lokalise.co/signup/831920985cf29a3c550a85.62099336/fa/"
+    }
+
+]
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@ -23,22 +23,15 @@
  "main.documentation": "Documentation",
  "main.documentation-explanation": "We will refresh our documentation soon. Stay tunded and we will let you know when we are ready! You can see how our documentation's .md files look like",
  "main.finished": "That's all. Your passion for the private, secure and censorship-resistant communication platform will help build a better world that everyone can say what they want to say with Status. ",
-  "main.france": "French",
-  "main.german": "German",
  "main.how-to-contribute": "How to Contribute?",
-  "main.iran": "Persian",
-  "main.japan": "Japan",
  "main.korean": "Korean",
  "main.language": "Languages to Translate",
  "main.lokalise": "Lokalise!",
-  "main.netherlands": "Dutch",
-  "main.portuguese-br": "Portuguese (BR)",
-  "main.portuguese-pt": "Portuguese (PT)",
  "main.public-chat": "#Status-translate public chat",
  "main.pullrequest": "Submit a pull request to this Github repository",
  "main.russian": "Russian",
-  "main.spanish": "Spanish (ES)",
-  "main.spanish-latin": "Spanish (LA)",
+  "main.sort_alphabetical": "Alphabetical Order",
+  "main.sort_reverse": "Reverse Order",
  "main.step1": "Step 1 : ",
  "main.step1-1": "Click on the button you want to translate (e.g. App Translation) and sign up for Lokalise. It takes less than 1 minute.",
  "main.step2": "Step 2 : ",
--- a/src/i18n/locales/ko.json
+++ b/src/i18n/locales/ko.json
@ -23,22 +23,15 @@
  "main.documentation": "문서 (Documentation)",
  "main.documentation-explanation": "스테이터스는 곧 개발 문서(Documentation)를 개편할 예정입니다. 문서 번역이 준비되는대로 업데이트 할 예정이며, 문서 페이지 예시는 다음 링크에서 확인할 수 있습니다.",
  "main.finished": "이 3단계가 전부입니다. 여러분의 번역은 조금 더 많은 사람들이 검열로부터 자유로운 안전한 커뮤니케이션 플랫폼을 사용할 수 있도록 돕습니다.",
-  "main.france": "프랑스어",
-  "main.german": "독일어",
  "main.how-to-contribute": "어떻게 번역하나요?",
-  "main.iran": "이란어",
-  "main.japan": "일본어",
  "main.korean": "한국어",
  "main.language": "언 어",
  "main.lokalise": "로컬라이즈(Lokalise)",
-  "main.netherlands": "네덜란드어",
-  "main.portuguese-br": "포르투칼어 (브라질)",
-  "main.portuguese-pt": "포르투칼어",
  "main.public-chat": "#Status-translate 오픈 채팅방",
  "main.pullrequest": "깃허브에 Pull Request를 제출해주세요!",
  "main.russian": "러시아어",
-  "main.spanish": "스페인어",
-  "main.spanish-latin": "스페인어 (남미)",
+  "main.sort_alphabetical": "알파벳순 정렬",
+  "main.sort_reverse": "역순 정렬",
  "main.step1": "1 단계 : ",
  "main.step1-1": "번역을 희망하는 프로젝트(예: 스테이터스 앱 번역)를 클릭하시고, 로컬라이즈(Lokalise)에 등록합니다. 1분이면 됩니다.",
  "main.step2": "2 단계 : ",
--- a/src/i18n/messages/messages.json
+++ b/src/i18n/messages/messages.json
@ -69,6 +69,16 @@
    "defaultMessage": "How to contribute?",
    "filepath": "src/components/header.js"
  },
+  {
+    "id": "main.app-application",
+    "defaultMessage": "App Translation",
+    "filepath": "src/components/langcard.js"
+  },
+  {
+    "id": "main.website-application",
+    "defaultMessage": "Status.im Website Translation",
+    "filepath": "src/components/langcard.js"
+  },
  {
    "id": "main.korean",
    "defaultMessage": "Korean",
@ -84,66 +94,21 @@
    "defaultMessage": "Russian",
    "filepath": "src/components/langs.js"
  },
-  {
-    "id": "main.spanish",
-    "defaultMessage": "Spanish (ES)",
-    "filepath": "src/components/langs.js"
-  },
-  {
-    "id": "main.spanish-latin",
-    "defaultMessage": "Spanish (LA)",
-    "filepath": "src/components/langs.js"
-  },
-  {
-    "id": "main.portuguese-pt",
-    "defaultMessage": "Portuguese (PT)",
-    "filepath": "src/components/langs.js"
-  },
-  {
-    "id": "main.portuguese-br",
-    "defaultMessage": "Portuguese (BR)",
-    "filepath": "src/components/langs.js"
-  },
-  {
-    "id": "main.german",
-    "defaultMessage": "German",
-    "filepath": "src/components/langs.js"
-  },
-  {
-    "id": "main.france",
-    "defaultMessage": "French",
-    "filepath": "src/components/langs.js"
-  },
-  {
-    "id": "main.japan",
-    "defaultMessage": "Japan",
-    "filepath": "src/components/langs.js"
-  },
-  {
-    "id": "main.iran",
-    "defaultMessage": "Persian",
-    "filepath": "src/components/langs.js"
-  },
-  {
-    "id": "main.netherlands",
-    "defaultMessage": "Dutch",
-    "filepath": "src/components/langs.js"
-  },
-  {
-    "id": "main.app-application",
-    "defaultMessage": "App Translation",
-    "filepath": "src/components/main.js"
-  },
-  {
-    "id": "main.website-application",
-    "defaultMessage": "Status.im Website Translation",
-    "filepath": "src/components/main.js"
-  },
  {
    "id": "main.language",
    "defaultMessage": "Languages to Translate",
    "filepath": "src/components/main.js"
  },
+  {
+    "id": "main.sort_alphabetical",
+    "defaultMessage": "Alphabetical Order",
+    "filepath": "src/components/main.js"
+  },
+  {
+    "id": "main.sort_reverse",
+    "defaultMessage": "Reverse Orfer",
+    "filepath": "src/components/main.js"
+  },
  {
    "id": "main.addlanguage",
    "defaultMessage": "Want to add your Language?",
--- a/src/index.css
+++ b/src/index.css
@ -47,6 +47,10 @@ header a:link, header a:visited {
  margin-bottom: 40px;
 }

+.margin-bottom-20{
+  margin-bottom: 20px;
+}
+
 .cta-margin-top{
  margin-top: 20px;
 }
@ -67,6 +71,23 @@ nav {
  box-shadow: 0px 10px 54px -11px rgba(0,0,0,0.75);
 }

+.button {
+  margin: 20px;
+  font-size: 1rem;
+  padding: 6px 20px;
+  cursor: pointer;
+  overflow: visible;
+  text-decoration: none;
+  white-space: nowrap;
+  color: #ffffff;
+  border-radius: 10px;
+  background-color: rgb(173, 173, 173);
+}
+
+.button:hover {
+  background-color: rgb(121, 121, 121);
+}
+
 nav img {
  width: 6rem;
 }
@ -263,10 +284,10 @@ div.languages {
  height: auto;
  grid-template-columns: repeat(3,1fr);
  padding: 10px;
-
+  
 }

-.languages div {
+.card{
  text-align: center;
  background: #fff;
  width: 90%;
@ -535,9 +556,7 @@ footer ul li a {
   display: grid;
   grid-template-columns: 1fr;
  }
-   div.languages div {
-    width: 70%;
-  }
+

  .languages p.language-icon {
    font-size: 2.4rem;
@ -641,9 +660,6 @@ footer ul li a {
   display: grid;
   grid-template-columns: 1fr;
  }
-  div.languages div {
-    width: 80%;
-  }

  .languages p.language-icon {
    font-size: 2.4rem;
@ -698,5 +714,9 @@ footer ul li a {
  line-height: 160%;
  font-size: 1rem;
  }
+
+  .button {
+  margin: 10px;
+}
  
 }