Add filter logic for overview page

common/config.js

@@ -7,12 +7,13 @@ export const getPageNames = (radar) => {
   ]
 }
 
-const mappings = {
+const messages = {
   'languages-and-frameworks': 'Languages & Frameworks',
   'methods-and-patterns': 'Methods & Patterns',
   'platforms-and-aoe-services': 'Platforms and AOE Services',
   'tools': 'Tools',
 };
 
+export const translate = (key) => (messages[key] || '-');
 
 const formatRelease = (release) => moment(release, 'YYYY-MM-DD').format('MMM YYYY');

common/file.js

@@ -10,10 +10,6 @@ export const radarPath = (...pathInSrc) => (
   relativePath('radar', ...pathInSrc)
 );
 
-export const staticPath = (...pathInSrc) => (
-  relativePath('static-pages', ...pathInSrc)
-);
-
 export const stylesPath = (...pathInSrc) => (
   relativePath('styles', ...pathInSrc)
 );

common/model.js

@@ -0,0 +1,43 @@
+
+export const groupByQuadrants = (items) => (
+  items.reduce((quadrants, item) => ({
+    ...quadrants,
+    [item.quadrant]: addItemToQuadrant(quadrants[item.quadrant], item),
+  }), {})
+);
+
+export const groupByRing = (items) => (
+  items.reduce((rings, item) => ({
+    ...rings,
+    [item.ring]: addItemToList(rings[item.ring], item),
+  }), {})
+);
+
+export const groupByFirstLetter = (items) => {
+  const index = items.reduce((letterIndex, item) => ({
+    ...letterIndex,
+    [getFirstLetter(item)]: addItemToList(letterIndex[getFirstLetter(item)], item),
+  }), {});
+
+  return Object.keys(index).sort().map((letter) => ({
+    letter,
+    items: index[letter],
+  }));
+}
+
+const addItemToQuadrant = (quadrant = {}, item) => ({
+  ...quadrant,
+  [item.ring]: addItemToRing(quadrant[item.ring], item),
+});
+
+const addItemToList = (list = [], item) => ([
+  ...list,
+  item,
+]);
+
+const addItemToRing = (ring = [], item) => ([
+  ...ring,
+  item,
+]);
+
+export const getFirstLetter = (item) => item.title.substr(0,1).toUpperCase();

common/radar.js

@@ -21,40 +21,6 @@ export const createRadar = async (tree) => {
   };
 };
 
-export const groupByQuadrants = (items) => (
-  items.reduce((quadrants, item) => ({
-    ...quadrants,
-    [item.quadrant]: addItemToQuadrant(quadrants[item.quadrant], item),
-  }), {})
-);
-
-const addItemToQuadrant = (quadrant = {}, item) => ({
-  ...quadrant,
-  [item.ring]: addItemToRing(quadrant[item.ring], item),
-});
-
-export const groupByFirstLetter = (items) => (
-  items.reduce((letterIndex, item) => ({
-    ...letterIndex,
-    [getFirstLetter(item)]: addItemToList(letterIndex[getFirstLetter(item)], item),
-  }), {})
-);
-
-export const groupByRing = (items) => (
-  items.reduce((rings, item) => ({
-    ...rings,
-    [item.ring]: addItemToList(rings[item.ring], item),
-  }), {})
-);
-
-const addItemToList = (list = [], item) => ([
-  ...list,
-  item,
-]);
-
-export const getFirstLetter = (item) => item.title.substr(0,1).toUpperCase();
-
-
 const checkAttributes = (fileName, attributes) => {
   const rings = ['trial', 'assess', 'adopt', 'hold'];
   if (attributes.ring && !rings.includes(attributes.ring)) {
@@ -187,8 +153,3 @@ const flagWithIsNew = (items, allReleases) => (
 const isNewItem = (item, allReleases) => {
   return item.revisions.length > 1 && item.revisions[0].release === allReleases[allReleases.length-1]
 }
-
-const addItemToRing = (ring = [], item) => ([
-  ...ring,
-  item,
-]);

js/components/PageOverview.js

@@ -2,6 +2,8 @@ import React from 'react';
 import classNames from 'classnames';
 import HeadlineGroup from './HeadlineGroup';
 import HeroHeadline from './HeroHeadline';
+import { groupByFirstLetter } from '../../common/model';
+import { translate } from '../../common/config';
 
 const rings = ['all', 'assess', 'trial', 'hold', 'adopt'];
 
@@ -27,7 +29,19 @@ class PageOverview extends React.Component {
     return this.state.ring === ringName;
   }
 
+  getFilteredAndGroupedItems() {
+    const groups = groupByFirstLetter(this.props.items);
+    const groupsFiltered = groups.map(group => ({
+      ...group,
+      items: group.items.filter(item => this.state.ring === 'all' || item.ring === this.state.ring),
+    }));
+    const nonEmptyGroups = groupsFiltered.filter(group => group.items.length > 0);
+    return nonEmptyGroups;
+  }
+
   render() {
+    const groups = this.getFilteredAndGroupedItems();
+
     return (
       <div>
         <HeadlineGroup>
@@ -55,28 +69,37 @@ class PageOverview extends React.Component {
         </div>
 
         <div className="letter-index">
-          <div className="letter-index__group">
+          {
-            <div className="letter-index__letter">B</div>
+            groups.map(({ letter, items }) => (
-            <div className="letter-index__items">
+              <div key={letter} className="letter-index__group">
-              <div className="item-list">
+                <div className="letter-index__letter">{letter}</div>
-                <div className="item-list__list">
+                <div className="letter-index__items">
-                  <a className="item item--big item--no-leading-border item--no-trailing-border" href="/platforms-and-aoe-services/bar.html">
+                  <div className="item-list">
-                    <div className="split split--overview">
+                    <div className="item-list__list">
-                      <div className="split__left">
+                      {
-                        <div className="item__title">Bar</div>
+                        items.map((item) => (
-                      </div>
+                          <a key={item.name} className="item item--big item--no-leading-border item--no-trailing-border" href="/platforms-and-aoe-services/bar.html">
-                      <div className="split__right">
+                            <div className="split split--overview">
-                        <div className="nav">
+                              <div className="split__left">
-                          <div className="nav__item">Platforms and AOE Services</div>
+                                <div className="item__title">{item.title}</div>
-                          <div className="nav__item"><span className="badge badge--assess">assess</span></div>
+                              </div>
-                        </div>
+                              <div className="split__right">
-                      </div>
+                                <div className="nav">
+                                  <div className="nav__item">{translate(item.quadrant)}</div>
+                                  <div className="nav__item"><span className={`badge badge--${item.ring}`}>{item.ring}</span></div>
+                                </div>
+                              </div>
+                            </div>
+                          </a>
+                        ))
+                      }
                     </div>
-                  </a>
+                  </div>
                 </div>
               </div>
-            </div>
+            ))
-          </div>
+          }
+
         </div>
       </div>
     );

tasks/watch.js

@@ -8,9 +8,8 @@ import {
   jsPath,
   radarPath,
   staticPath,
-  templatesPath,
   distPath,
-} from './file';
+} from '../common/file';
 
 
 const runBuild = (name) => (
@@ -36,8 +35,6 @@ watch(stylesPath(), options, watchBuild('css'));
 watch(jsPath(), options, watchBuild('js'));
 watch(assetsPath(), options, watchBuild('assets'));
 watch(radarPath(), options, watchBuild('pages'));
-watch(staticPath(), options, watchBuild('pages'));
-watch(templatesPath(), options, watchBuild('pages'));
 
 var params = {
     root: distPath(),

webpack.config.js

@@ -14,6 +14,7 @@ module.exports = {
          test: /\.js?$/,
          include: [
            path.resolve(__dirname, "js"),
+           path.resolve(__dirname, "common"),
          ],
 
          loader: "babel-loader",