Modify GeotagCloudPage according to latest API changes

Lokiedu · May 8, 2016 · 1aa9d00 · 1aa9d00
1 parent 3a7231c
commit 1aa9d00
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 18 deletions.
diff --git a/src/components/continent.js b/src/components/continent.js
@@ -8,6 +8,7 @@ export default class Continent extends React.Component {
   static displayName = 'Continent';
   static propTypes = {
     code: PropTypes.string.isRequired,
+    count: PropTypes.number.isRequired,
     geotags: PropTypes.arrayOf(PropTypes.shape({
       url_name: PropTypes.string
     })).isRequired
@@ -16,6 +17,7 @@ export default class Continent extends React.Component {
   render() {
     const {
       code,
+      count,
       geotags
     } = this.props;
 
@@ -30,7 +32,7 @@ export default class Continent extends React.Component {
         }}
       >
         <Link className="continent__title" to={`/geo/${url_name}`}>
-          {name} <span className="continent__amount">({geotags.length})</span>
+          {name} <span className="continent__amount">({count})</span>
         </Link>
         <div className="layout__row">
           <TagCloud geotags={geotags} />

diff --git a/src/pages/geotag-cloud.js b/src/pages/geotag-cloud.js
@@ -18,7 +18,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import Helmet from 'react-helmet';
-import { has, transform } from 'lodash';
 
 import {
   Page,
@@ -55,19 +54,10 @@ class GeotagCloudPage extends Component {
       geotag_cloud
     } = this.props;
 
-    const geotagsForCloud = geotag_cloud.map(url_name => geotags[url_name]);
-
-    let geotagsByContinents = {};
-    geotagsForCloud.forEach(geotag => {
-      if (geotag.continent_code) {
-        const code = geotag.continent_code;
-
-        if (!has(geotagsByContinents, code)) {
-          geotagsByContinents[code] = [geotag];
-        } else {
-          geotagsByContinents[code].push(geotag);
-        }
-      }
+    const geotagsByContinents = geotag_cloud.map(continent => {
+      return Object.assign(continent, {
+        geotags: continent.geotags.map(urlName => geotags[urlName])
+      });
     });
 
     return (
@@ -88,9 +78,15 @@ class GeotagCloudPage extends Component {
             <PageBody>
               <PageContent>
                 <PageCaption>Geotag cloud</PageCaption>
-                {transform(geotagsByContinents, (arr, value, key) =>
-                  arr.push(<Continent code={key} geotags={value} key={key} />)
-                  , [])
+                {
+                  geotagsByContinents.map(continent => (
+                    <Continent
+                      code={continent.continent_code}
+                      count={continent.geotag_count}
+                      geotags={continent.geotags}
+                      key={continent.continent_code}
+                    />
+                  ))
                 }
               </PageContent>
             </PageBody>