demo site

README.md

@@ -17,6 +17,11 @@ FormatJS and it's corresponding bindings for React, Ember, Angular with Redux ar
  1. Location with slow internet speed and older browsers, meant the need for polyfills due to the absence of ECMAScript Internationalization API. This also means a relatively large dependency download which is not ideal.
  1. The main function in use was `formatMessage`.
 
+## Demo
+
+ - [Website](https://yeojz.github.io/redux-intl-connect)
+ - [Source](https://github.com/yeojz/redux-intl-connect/tree/master/src)
+
 ## Installation
 Install the library:
 

examples/package.json

@@ -14,7 +14,7 @@
     "react-dom": "^15.4.2",
     "react-redux": "^5.0.2",
     "redux": "^3.6.0",
-    "redux-intl-connect": "^0.1.4"
+    "redux-intl-connect": "^0.1.5"
   },
   "scripts": {
     "start": "react-scripts start",

examples/src/custom/App.css

@@ -2,7 +2,7 @@
   background: #f9f9f9;
   clear: both;
   color: #333;
-  height: calc(100vh - 8em);
+  min-height: calc(100vh - 12em);
   padding: 0;
   margin: 0;
 }
@@ -14,9 +14,23 @@
   font-weight: 300;
   text-align: center;
 }
+.app-footer {
+  box-sizing: border-box;
+  line-height: 2em;
+  padding: 0.5em 1em;
+  color: #666;
+  text-align: right;
+}
+.app-footer a {
+  color: rgb(112, 70, 178);
+  text-decoration: none;
+}
+.app-footer a:hover {
+  opacity: 0.8;
+}
 @media (min-width: 40em) {
   .app-content {
-    height: calc(100vh - 4em);
+    min-height: calc(100vh - 8em);
   }
   .app-content .tagline {
     font-size: 2em;

examples/src/custom/App.jsx

@@ -14,6 +14,8 @@ const links = [
   }
 ]
 
+const year = new Date().getUTCFullYear();
+
 const App = () => (
   <div className='app'>
     <Header links={links}/>
@@ -24,7 +26,9 @@ const App = () => (
         <Showcase />
       </div>
     </div>
-
+    <footer className='app-footer'>
+      &copy; {year} Gerald Yeo. <a href='https://github.com/yeojz/redux-intl-connect/blob/master/LICENSE'>BSD-licensed</a>
+    </footer>
   </div>
 );
 

examples/src/custom/Showcase.css

@@ -1,7 +1,7 @@
 .showcase {
   background: rgb(112, 70, 178);
   font-weight: 300;
-  margin: 1em;
+  margin: 1em 0;
   padding: 1em;
   text-align: center;
 }
@@ -34,7 +34,7 @@
   .showcase .words,
   .showcase .selector {
     display: inline-block;
-    font-size: 1.5em;
+    font-size: 1.4em;
   }
   .showcase .selector {
     margin: 0 0.5em;

examples/src/custom/Showcase.jsx

@@ -41,12 +41,14 @@ const selectLanguage = (value, updateIntl) => (
 
 const Showcase = (props) => {
   const text = props.intl.formatMessage({id: 'intro'}, {name: 'hello'});
+  const locale = props.intl.getLocale();
+
   return (
     <div className='showcase'>
-      <span className='words'>Say</span>
+      <span className='words'>Display</span>
       <span className='selector'>{displayLanguage(text)}</span>
       <span className='words'>in</span>
-      <span className='selector'>{selectLanguage(props.intl.locale, props.updateIntl)}</span>
+      <span className='selector'>{selectLanguage(locale, props.updateIntl)}</span>
       <span className='words'>or any other <strong className='word-highlight-white'>languages</strong></span>
     </div>
   );

examples/src/project/Header.css

@@ -24,19 +24,21 @@
   padding: 0;
 }
 .project-header-links li {
+  box-sizing: border-box;
   display: inline-block;
   margin-left: 1em;
 }
 .project-header-links li a {
   color: #333;
+  border-bottom: 2px transparent solid;
   display: inline-block;
   font-weight: 300;
   text-transform: capitalize;
   text-decoration: none;
 }
 .project-header-links li a:hover {
   color: #000;
-  border-bottom: 2px rgb(112, 70, 178) solid;
+  border-bottom-color: rgb(112, 70, 178);
 }
 @media (min-width: 40em) {
   .project-header-links {

examples/yarn.lock

@@ -4653,8 +4653,8 @@ redux:
     symbol-observable "^1.0.2"
 
 redux-intl-connect:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/redux-intl-connect/-/redux-intl-connect-0.1.4.tgz#40bec33c8b667212145a705418d11f97b7e7fe91"
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/redux-intl-connect/-/redux-intl-connect-0.1.5.tgz#6897b4c7ac6c2ffd9afdd1bf8544295f205647bf"
   dependencies:
     invariant "^2.2.2"
     lodash "^4.17.4"

src/createMapStateToProps.js

@@ -9,10 +9,7 @@ export function createMapStateToProps(intlSelector = defaultSelector) {
     const intl = intlSelector(state);
 
     return {
-      intl: {
-        ...intl,
-        ...createHelpers(intl)
-      },
+      intl: createHelpers(intl),
       key: intl.locale
     };
   };

src/formatMessage.js

@@ -20,7 +20,6 @@ function formatMessage(state = {}) {
 
     const message = get(state, ['messages', id], '');
 
-    // Optimization: Immediately returns possible values
     if (ENV === 'production' && isEmpty(values)) {
       return message || defaultMessage || id;
     }