import React, { Component } from 'react';

import moment from 'moment';

import Tag from '../../components/Tag';

const splitTag = (raw = '') => raw.split(', ');

const parseDate = (date) => moment(date).locale('zh-hk').format('YYYY/MM/DD');

const getTag = (item) => {
  const { tags, url, createdDate } = item.node;

  if (tags) {
    const date = parseDate(createdDate);
    const postPath = url === 'about' ? url : `${date}/${url}`;
    return {
      tags: splitTag(item.node.tags),
      title: item.node.title,
      url: postPath,
      createdDate
    }
  }
  return item;
};

const flatten = (arr = []) => arr.reduce(
  (acc, cur) => acc.concat(cur), [],
);

const Item = ({ url = '', title = '', createdDate = '' }) => (
  <li key={title}>
    <a href={url}>{title} ({parseDate(createdDate)})</a>
  </li>
)

const TagSession = ({ tag = 'tag', articles = [], url = '' }) => (
  <div className="row" id={tag}>
    <div className="col">
      <h3>{tag}:</h3>
      <ol>
        {articles.map(article => (
        <Item
          url={article.url}
          title={article.title}
          createdDate={article.createdDate}
        />
        ))}
      </ol>
    </div>
</div>
)

class TagPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tags: {},
    };
  }

  componentWillMount() {
    const tags = {};
    const { edges } = this.props.data.tags;
    const temp = edges.map(item => getTag(item));

    // debugger;
    temp.forEach((x) => {
      const { title, url, createdDate } = x;

      for (var i = 0, n = x.tags.length; i < n; i += 1) {
        const item = { title, url, createdDate };
        if (tags[x.tags[i]]) {
          tags[x.tags[i]].push(item);
        }
        else {
          tags[x.tags[i]] = [item];
        }
      }
    });
    this.setState({ tags });
  }

  render() {
    const tags = Object.keys(this.state.tags).sort();

    return (
      <div className="container">
        <div className="row">
          <div className="col">
            <h2>Tags</h2>
          </div>
        </div>

        <div className="row">
          <div className="col">
            {tags.map(item => (
              <Tag
                name={item}
                count={this.state.tags[item].length}
                key={item}
              />))
            }
          </div>
        </div>

        {tags.map(tag => (
          <TagSession
            tag={tag}
            articles={this.state.tags[tag].filter((v, i, a) => a.indexOf(v) === i)}
            key={tag}
          />
          )
        )}
      </div>
    );
  }
}

export const pageQuery = graphql `
query myTags {
  tags: allContentfulMarkdown {
    edges {
      node {
        tags
        title
        url
        createdDate
      }
    }
  }
}
`;

export default TagPage;

@@ -32,24 +32,56 @@
 m 'react';%0A%0A
+import Link from 'gatsby-link';%0A
 import momen
@@ -206,22 +206,20 @@
 eDate = 
-(
 date
-)
  =%3E mome
@@ -579,22 +579,24 @@
 atedDate
+,
 %0A    %7D
+;
 %0A  %7D%0A  r
@@ -615,91 +615,8 @@
 %7D;%0A%0A
-const flatten = (arr = %5B%5D) =%3E arr.reduce(%0A  (acc, cur) =%3E acc.concat(cur), %5B%5D,%0A);%0A%0A
 cons
@@ -698,17 +698,20 @@
 %7D%3E%0A    %3C
-a
+Link
  href=%7Bu
@@ -713,17 +713,33 @@
 ef=%7Burl%7D
-%3E
+ to=%7Burl%7D%3E%0A      
 %7Btitle%7D 
@@ -768,11 +768,19 @@
 e)%7D)
-%3C/a
+%0A    %3C/Link
 %3E%0A  
@@ -786,16 +786,17 @@
  %3C/li%3E%0A)
+;
 %0A%0Aconst 
@@ -995,14 +995,18 @@
     
+  
 %3CItem%0A
+  
     
@@ -1035,24 +1035,26 @@
 %7D%0A          
+ 
+ 
 title=%7Bartic
@@ -1063,16 +1063,18 @@
 .title%7D%0A
+  
         
@@ -1109,16 +1109,18 @@
 edDate%7D%0A
+  
         
@@ -1161,16 +1161,18 @@
 iv%3E%0A
+  
 %3C/div%3E%0A)
 %0A%0Acl
@@ -1167,16 +1167,17 @@
 %3C/div%3E%0A)
+;
 %0A%0Aclass 
@@ -1537,11 +1537,11 @@
 or (
-var
+let
  i =
@@ -1708,24 +1708,16 @@
        %7D
-%0A       
  else %7B%0A
@@ -2536,25 +2536,16 @@
        )
-%0A        
 )%7D%0A     
@@ -2598,17 +2598,16 @@
  graphql
- 
 %60%0Aquery 

Use gatsby-link in tags page