added local switch

src/client.js

@@ -20,9 +20,8 @@ import config from './config';
 import ApiClient from './helpers/ApiClient';
 import createStore from './redux/create';
 import routes from './routes';
-import localeData from './locale/ur.js';
+import getLocalMessages from './helpers/setLocal';
 
-const localMessages = localeData.messages;
 const client = new ApiClient();
 const store = createStore(browserHistory, client, window.reduxData);
 const history = syncHistoryWithStore(browserHistory, store);
@@ -41,6 +40,9 @@ window.clearCookies = () => {
   reactCookie.remove('content');
   reactCookie.remove('audio');
   reactCookie.remove('isFirstTime');
+  reactCookie.remove('currentLocale');
+  reactCookie.remove('smartbanner-closed');
+  reactCookie.remove('smartbanner-installed');
 };
 
 match({ history, routes: routes(store) }, (error, redirectLocation, renderProps) => {
@@ -63,7 +65,7 @@ match({ history, routes: routes(store) }, (error, redirectLocation, renderProps)
   debug('client', 'React Rendering');
 
   ReactDOM.render(
-    <IntlProvider locale='en' messages={localMessages}>
+    <IntlProvider locale='en' messages={getLocalMessages()}>
       <Provider  store={store} key="provider">
       {component}
       </Provider>

src/components/Footer/index.js

@@ -6,6 +6,7 @@ import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+import LocaleSwitcher from 'components/LocaleSwitcher'
 
 const styles = require('./style.scss');
 
@@ -15,7 +16,7 @@ const Footer = () => (
       <Col md={10} mdOffset={1}>
         <Row>
           <Col md={2} sm={4} xs={12} className={styles.about}>
-            <p>Navigate</p>
+            <p className={styles.header}>Navigate</p>
             <ul className={`source-sans ${styles.list}`}>
               <li>
                 <Link to="/about">
@@ -43,8 +44,9 @@ const Footer = () => (
               </li>
             </ul>
           </Col>
+
           <Col md={3} sm={4} xs={12} className={styles.links}>
-            <p>
+            <p className={styles.header}>
               <LocaleFormattedMessage
                 id={'nav.usefulSites'}
                 defaultMessage={'USEFUL SITES'}
@@ -61,8 +63,9 @@ const Footer = () => (
               </li>
             </ul>
           </Col>
+
           <Col md={3} sm={4} xs={12} className={styles.links}>
-            <p>
+            <p className={styles.header}>
               <LocaleFormattedMessage
                 id={'nav.otherLinks'}
                 defaultMessage={'Other links'}
@@ -90,15 +93,27 @@ const Footer = () => (
               </li>
             </ul>
           </Col>
+
           <Col md={4} sm={12} xs={12} className={styles.links}>
-            <p className="monserrat">
+            <p className={styles.header}>
               <LocaleFormattedMessage
-                id={'nav.aboutQuranProject'}
-                defaultMessage={'Quran.com (also known as The Noble Quran, Al Quran, Holy Quran, Koran) is a pro bono project.'}
+                id={'local.selectLabel'}
+                defaultMessage={'Site Language'}
               />
             </p>
 
-            <p className="monserrat">&copy; QURAN.COM. ALL RIGHTS RESERVED 2016</p>
+            <div className={styles.list}>
+              <LocaleSwitcher/>
+
+              <p className="monserrat">
+                <LocaleFormattedMessage
+                  id={'nav.aboutQuranProject'}
+                defaultMessage={'Quran.com (also known as The Noble Quran, Al Quran, Holy Quran, Koran) is a pro bono project.'}
+                />
+              </p>
+
+              <p className="monserrat">&copy; QURAN.COM. ALL RIGHTS RESERVED 2016</p>
+            </div>
           </Col>
         </Row>
       </Col>

src/components/Footer/style.scss

@@ -8,6 +8,11 @@
     padding-top: 30px;
     text-transform: uppercase;
 
+    .header{
+      line-height: 30px;
+      color: #fff;
+    }
+
     .list{
       padding-left: 0px;
       :global(li){
@@ -16,11 +21,6 @@
       }
     }
 
-    p{
-      line-height: 30px;
-      color: #fff;
-    }
-
     a{
       font-size: 13px;
       color: rgba(#fff, 0.5);
@@ -38,13 +38,4 @@
     -ms-transition: color .15s ease-in-out;
     transition: color .15s ease-in-out;
   }
-
-  .links {
-    &:last-child{
-      p{
-        color: rgba(#fff, 0.5);
-      }
-    }
-  }
-
 }

src/components/LocaleSwitcher/index.js

@@ -0,0 +1,65 @@
+import React, { Component, PropTypes } from "react";
+
+import { locales, defaultLocale } from "../../config";
+import cookie from 'react-cookie';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
+export default class LocaleSwitcher extends Component {
+  state = {
+    currentLocale: defaultLocale,
+  };
+
+  componentDidMount() {
+    if (__CLIENT__) {
+      this.setState({currentLocale: cookie.load('currentLocale') || defaultLocale});
+    }
+  }
+
+  handleLocaleClick(locale, e) {
+    e.preventDefault();
+    let expireDate = new Date();
+    expireDate.setYear(expireDate.getFullYear()+1);
+
+    this.setState({currentLocale: locale});
+
+    cookie.save('currentLocale', locale, {
+      path: '/',
+      expires: new Date(expireDate),
+    });
+
+    window.location.reload();
+  }
+
+  renderLocaleLink(locale, native) {
+
+    let className = "local-switch-link";
+    if (locale === this.state.currentLocale) {
+      className = `btn ${className} ${className}-active`;
+    }
+
+    return (
+      <a key={ locale }
+         className={className}
+         onClick={ this.handleLocaleClick.bind(this, locale) }
+         href={ `?local=${locale}` }
+      >
+        { locales[locale] }
+      </a>
+    );
+  }
+
+  render() {
+    const keys = Object.keys(locales);
+
+    return (
+      <div className='local-switcher'>
+        <p>
+          <LocaleFormattedMessage id={'local.changeLocal'} defaultMessage={'Choose language '} />
+        </p>
+
+        { keys.map(this.renderLocaleLink, this) }
+      </div>
+    );
+  }
+
+}

src/components/LocaleSwitcher/style.scss

@@ -0,0 +1,10 @@
+.local-switcher{
+  color: red;
+}
+.local-switch-link{
+
+}
+
+.local-switch-link-active{
+  color: #2CA4AB;
+}

src/components/SmartBanner/index.js

@@ -101,17 +101,24 @@ class SmartBanner extends Component {
 
   close() {
     this.hide();
+
+    let expireDate = new Date();
+    expireDate = new Date(expireDate.setDate(expireDate.getDate()+this.props.daysHidden));
+
     cookie.save('smartbanner-closed', 'true', {
       path: '/',
-      expires: +new Date() + this.props.daysHidden * 1000 * 60 * 60 * 24,
+      expires: expireDate,
     });
   }
 
   install() {
+    let expireDate = new Date();
+    expireDate = new Date(expireDate.setDate(expireDate.getDate()+this.props.daysReminder));
+
     this.hide();
     cookie.save('smartbanner-installed', 'true', {
       path: '/',
-      expires: +new Date() + this.props.daysReminder * 1000 * 60 * 60 * 24,
+      expires: expireDate,
     });
   }
 

src/config.js

@@ -19,7 +19,8 @@ module.exports = Object.assign({
   sentryServer: process.env.SENTRY_KEY_SERVER,
   facebookAppId: process.env.FACEBOOK_APP_ID,
   // Supported locales
-  locales: ["en", "ar", "ur"],
+  locales: {"en": 'English', "ar": 'العربية', "ur": 'اردو'},
+  defaultLocale: 'en',
   app: {
     head: {
       titleTemplate: `%s - ${title}`,

src/helpers/setLocal.js

@@ -0,0 +1,29 @@
+import config from "../config";
+import cookie from 'react-cookie';
+
+export function getLocalMessages(req) {
+  let currentLocal;
+  let expireDate = new Date();
+  expireDate.setYear(expireDate.getFullYear()+1);
+  const availableLocals = Object.keys(config.locales);
+
+  if (req && req.query.local) {
+    currentLocal =  req.query.local;
+  }
+  else{
+    currentLocal = cookie.load('currentLocale');
+  }
+
+  if(availableLocals.indexOf(currentLocal) == -1){
+    currentLocal = config.defaultLocale;
+  }
+
+  cookie.save('currentLocale', currentLocal, {
+    path: '/',
+    expires: new Date(expireDate),
+  });
+
+  let localeData = require('../locale/'+currentLocal+'.js');
+
+  return localeData.messages;
+}

src/locale/ar.js

@@ -0,0 +1,69 @@
+// jscs:disable disallowQuotedKeysInObjects
+export default {
+  messages: {
+    "local": "arabic",
+    "local.changeLocal": 'اختر اللغة التي تود عرض الموقع بها',
+    "local.navtiveName": 'العربية',
+    "local.selectLabel": 'اللغة',
+    "setting.title": "اختیارات",
+    "setting.surahs": "سورة",
+    "setting.verses": "آیت منتخب کریں",
+    "setting.reciters": "قاری منتخب کریں",
+    "setting.translations.title": "ترجمے",
+    "setting.translations.removeAll": "سب کو ہٹا دیں",
+    "setting.translations.english": "انگریزی",
+    "setting.translations.other": "دوسری زبانیں",
+    "setting.fontSize": "حرف کا سائز",
+    "setting.fontSize.arabic": "عربی",
+    "setting.reading": "پڑہائی",
+    "setting.tooltip": "لفظ کے اوپر",
+    "setting.tooltip.title": "لفظ کے اوپر کیا ہو",
+    "setting.tooltip.translation": "ترجمہ",
+    "setting.tooltip.transliteration": "تلفظ",
+    "setting.nightMode": "رات کا وقت",
+    "setting.nightMode.dayTip": "دن کے موڈ میں دیکھیں",
+    "setting.nightMode.nightTip": "رات کے موڈ میں دیکھیں",
+
+    "ayah.media.lectureFrom": "{from} کے لیکچرو دیکھے",
+
+    "search.placeholder": "تلاش کر یں",
+    "search.resultHeading": "{from}-{to} OF <span> {total} </span> SEARCH RESULTS FOR: <span>{query}</span>",
+    "search.error": "معذرت، آپ کی تلاش کے ساتھ ایک خرابی پیش آگئی.",
+    "search.noResult": "کوئی نتیجہ نہیں ملا",
+
+    "surah.next": "اگلی سورت",
+    "surah.previous": "پچھلی سورت",
+    "surah.info": "سورہ کی معلومات",
+    "surah.index.heading": "سورتیں",
+    "surah.index.quickLinks": "فوری لنک",
+    "surah.goToBeginning": "سورہ کے شروع میں جائیں",
+
+    "player.currentAyah": "آیت",
+    "player.nextAyah": "اگلی آیت",
+    "player.previousAyah": "پچھلی آیت",
+    "player.repeat.title": " دہرائیں",
+    "player.repeat.single": "اکیلی آیت",
+    "player.repeat.range": "مخصوص آیات",
+    "player.repeat.rangeStart": "سے",
+    "player.repeat.rangeEnd": "تک",
+    "player.repeat.times": "کتنی بار",
+    "player.repeat.loop": "چلاتے رہو",
+    "player.scrollButtonTip": "جو آیت چل رہیی ہو اس کو  صفہ پر سامنے رکھو",
+
+    "app.loading": "لوڈ ہو رہا ہے",
+    "actions.copy": "کاپی",
+    "actions.copied": "کاپی کر لیا",
+    "actions.play": "چلاو",
+    "actions.pause": "روک دیں",
+
+    "nav.contribute": "تعاون کریں",
+    "nav.aboutUs": "ہمارے متعلق",
+    "nav.developers": "ڈویلپرز",
+    "nav.usefulSites": "مفید سائٹس",
+    "nav.otherLinks": "دیگر لنکس",
+    "nav.contactUs": "ہم سے رابطہ",
+    "nav.aboutQuranProject": "قرآن کریم ایک فلاں عامہ (عوامی بہبود کے لئے) منصوبہ ہے",
+    "nav.mobile": "موبائل",
+    "nav.legacySite": "پرانی سائٹ"
+  }
+};

src/locale/en.js

@@ -1,7 +1,10 @@
 // jscs:disable disallowQuotedKeysInObjects
 export default {
   messages: {
-    "local": 'en',
+    "local": "en",
+    "local.changeLocal": 'Choose the language you want the site to display with',
+    "local.navtiveName": 'English',
+    "local.selectLabel": 'Language',
     "setting.title": "Options",
     "setting.surahs": "Surahs",
     "setting.verses": "Go to verse",

src/locale/ur.js

@@ -2,6 +2,9 @@
 export default {
   messages: {
     "local": "urdu",
+    "local.changeLocal": 'جس زبان میں سایٹ دیکہنا چاہتے ہیں اس زبان کا انتخاب کریں',
+    "local.navtiveName": 'اردو',
+    "local.selectLabel": 'زبان',
     "setting.title": "اختیارات",
     "setting.surahs": "سورة",
     "setting.verses": "آیت منتخب کریں",