Merge pull request #70 from yodahuang/master

Refactor the React logic and introduce Fragment

src/components/CategoryTemplateDetails/index.jsx

@@ -4,8 +4,8 @@ import Post from '../Post';
 class CategoryTemplateDetails extends React.Component {
   render() {
     const items = [];
-    const { category } = this.props.pathContext;
+    const { category } = this.props.category;
-    const posts = this.props.data.allMarkdownRemark.edges;
+    const posts = this.props.posts;
     posts.forEach((post) => {
       items.push(<Post data={post} key={post.node.fields.slug} />);
     });

src/components/Disqus/Disqus.jsx

@@ -19,15 +19,12 @@ class Disqus extends Component {
     this.setState({ toasts });
   }
   render() {
-    const { postNode, siteMetadata } = this.props;
+    const { postNode, shortName, url: siteUrl } = this.props;
-    if (!siteMetadata.disqusShortname) {
-      return null;
-    }
     const post = postNode.frontmatter;
-    const url = siteMetadata.url + postNode.fields.slug;
+    const url = siteUrl + postNode.fields.slug;
     return (
       <ReactDisqusComments
-        shortname={siteMetadata.disqusShortname}
+        shortname={shortName}
         identifier={post.title}
         title={post.title}
         url={url}

src/components/PageTemplateDetails/index.jsx

@@ -4,11 +4,11 @@ import './style.scss';
 
 class PageTemplateDetails extends React.Component {
   render() {
-    const page = this.props.data.markdownRemark;
+    const page = this.props.page;
 
     return (
       <div>
-        <Sidebar {...this.props} />
+        <Sidebar siteMetadata={this.props.siteMetadata} />
         <div className="content">
           <div className="content__inner">
             <div className="page">

src/components/PostTemplateDetails/index.jsx

@@ -6,8 +6,8 @@ import './style.scss';
 
 class PostTemplateDetails extends React.Component {
   render() {
-    const { subtitle, author } = this.props.data.site.siteMetadata;
+    const { subtitle, author, disqusShortname, url } = this.props.siteMetadata;
-    const post = this.props.data.markdownRemark;
+    const post = this.props.post;
     const tags = post.fields.tagSlugs;
 
     const homeBlock = (
@@ -32,7 +32,7 @@ class PostTemplateDetails extends React.Component {
 
     const commentsBlock = (
       <div>
-        <Disqus postNode={post} siteMetadata={this.props.data.site.siteMetadata} />
+        <Disqus postNode={post} shortName={disqusShortname} url={url} />
       </div>
     );
 
@@ -56,7 +56,7 @@ class PostTemplateDetails extends React.Component {
                 <br /> <strong>{author.name}</strong> on Twitter
               </a>
             </p>
-            {commentsBlock}
+            {disqusShortname && commentsBlock}
           </div>
         </div>
       </div>

src/components/Sidebar/index.jsx

@@ -9,7 +9,7 @@ import './style.scss';
 class Sidebar extends React.Component {
   render() {
     const { location } = this.props;
-    const { author, subtitle, copyright, menu } = this.props.data.site.siteMetadata;
+    const { author, subtitle, copyright, menu } = this.props.siteMetadata;
     const isHomePage = get(location, 'pathname', '/') === '/';
 
     /* eslint-disable jsx-a11y/img-redundant-alt */
@@ -58,3 +58,25 @@ class Sidebar extends React.Component {
 }
 
 export default Sidebar;
+
+export const conponentQuery = graphql`
+  fragment sidebarFragment on siteMetadata_2{
+    title
+    subtitle
+    copyright
+    menu {
+      label
+      path
+    }
+    author {
+      name
+      email
+      telegram
+      twitter
+      github
+      rss
+      vk
+    }
+  }
+`;
+

src/components/TagTemplateDetails/index.jsx

@@ -4,8 +4,8 @@ import Post from '../Post';
 class TagTemplateDetails extends React.Component {
   render() {
     const items = [];
-    const tagTitle = this.props.pathContext.tag;
+    const tagTitle = this.props.tag;
-    const posts = this.props.data.allMarkdownRemark.edges;
+    const posts = this.props.posts;
     posts.forEach((post) => {
       items.push(<Post data={post} key={post.node.fields.slug} />);
     });

src/pages/404.jsx

@@ -5,7 +5,7 @@ class NotFoundRoute extends React.Component {
   render() {
     return (
       <div>
-        <Sidebar {...this.props} />
+        <Sidebar siteMetadata={this.props.data.site.siteMetadata} />
         <div className="content">
           <div className="content__inner">
             <div className="page">
@@ -27,22 +27,7 @@ export const pageQuery = graphql`
   query NotFoundQuery {
     site {
       siteMetadata {
-        title
+        ...sidebarFragment
-        subtitle
-        copyright
-        menu {
-          label
-          path
-        }
-        author {
-          name
-          email
-          telegram
-          twitter
-          github
-          rss
-          vk
-        }
       }
     }
   }

src/pages/categories.jsx

@@ -12,7 +12,7 @@ class CategoriesRoute extends React.Component {
     return (
       <div>
         <Helmet title={`All Categories - ${title}`} />
-        <Sidebar {...this.props} />
+        <Sidebar siteMetadata={this.props.data.site.siteMetadata} />
         <div className="content">
           <div className="content__inner">
             <div className="page">
@@ -44,22 +44,7 @@ export const pageQuery = graphql`
   query CategoryesQuery {
     site {
       siteMetadata {
-        title
+        ...sidebarFragment
-        subtitle
-        copyright
-        menu {
-          label
-          path
-        }
-        author {
-          name
-          email
-          telegram
-          twitter
-          github
-          rss
-          vk
-        }
       }
     }
     allMarkdownRemark(

src/pages/index.jsx

@@ -18,7 +18,7 @@ class IndexRoute extends React.Component {
           <title>{title}</title>
           <meta name="description" content={subtitle} />
         </Helmet>
-        <Sidebar {...this.props} />
+        <Sidebar siteMetadata={this.props.data.site.siteMetadata} />
         <div className="content">
           <div className="content__inner">
             {items}
@@ -35,22 +35,7 @@ export const pageQuery = graphql`
   query IndexQuery {
     site {
       siteMetadata {
-        title
+        ...sidebarFragment
-        subtitle
-        copyright
-        menu {
-          label
-          path
-        }
-        author {
-          name
-          email
-          telegram
-          twitter
-          github
-          rss
-          vk
-        }
       }
     }
     allMarkdownRemark(

src/pages/tags.jsx

@@ -12,7 +12,7 @@ class TagsRoute extends React.Component {
     return (
       <div>
         <Helmet title={`All Tags - ${title}`} />
-        <Sidebar {...this.props} />
+        <Sidebar siteMetadata={this.props.data.site.siteMetadata} />
         <div className="content">
           <div className="content__inner">
             <div className="page">
@@ -44,22 +44,7 @@ export const pageQuery = graphql`
   query TagsQuery {
     site {
       siteMetadata {
-        title
+        ...sidebarFragment
-        subtitle
-        copyright
-        menu {
-          label
-          path
-        }
-        author {
-          name
-          email
-          telegram
-          twitter
-          github
-          rss
-          vk
-        }
       }
     }
     allMarkdownRemark(

src/templates/category-template.jsx

@@ -5,14 +5,15 @@ import CategoryTemplateDetails from '../components/CategoryTemplateDetails';
 
 class CategoryTemplate extends React.Component {
   render() {
-    const { title } = this.props.data.site.siteMetadata;
+    const title = this.props.data.site.siteMetadata.title;
-    const { category } = this.props.pathContext;
+    const category = this.props.pathContext.category;
+    const posts = this.props.data.allMarkdownRemark.edges;
 
     return (
       <div>
         <Helmet title={`${category} - ${title}`} />
-        <Sidebar {...this.props} />
+        <Sidebar siteMetadata={this.props.data.site.siteMetadata} />
-        <CategoryTemplateDetails {...this.props} />
+        <CategoryTemplateDetails category={category} posts={posts} />
       </div>
     );
   }
@@ -24,22 +25,7 @@ export const pageQuery = graphql`
   query CategoryPage($category: String) {
     site {
       siteMetadata {
-        title
+        ...sidebarFragment
-        subtitle
-        copyright
-        menu {
-          label
-          path
-        }
-        author {
-          name
-          email
-          telegram
-          twitter
-          github
-          rss
-          vk
-        }
       }
     }
     allMarkdownRemark(

src/templates/page-template.jsx

@@ -4,7 +4,8 @@ import PageTemplateDetails from '../components/PageTemplateDetails';
 
 class PageTemplate extends React.Component {
   render() {
-    const { title, subtitle } = this.props.data.site.siteMetadata;
+    const siteMetadata = this.props.data.site.siteMetadata;
+    const { title, subtitle } = siteMetadata;
     const page = this.props.data.markdownRemark;
     const { title: pageTitle, description: pageDescription } = page.frontmatter;
     const description = pageDescription !== null ? pageDescription : subtitle;
@@ -15,7 +16,10 @@ class PageTemplate extends React.Component {
           <title>{`${pageTitle} - ${title}`}</title>
           <meta name="description" content={description} />
         </Helmet>
-        <PageTemplateDetails {...this.props} />
+        <PageTemplateDetails
+          siteMetadata={siteMetadata}
+          page={page}
+        />
       </div>
     );
   }
@@ -27,22 +31,7 @@ export const pageQuery = graphql`
   query PageBySlug($slug: String!) {
     site {
       siteMetadata {
-        title
+        ...sidebarFragment
-        subtitle
-        copyright
-        menu {
-          label
-          path
-        }
-        author {
-          name
-          email
-          telegram
-          twitter
-          github
-          rss
-          vk
-        }
       }
     }
     markdownRemark(fields: { slug: { eq: $slug } }) {

src/templates/post-template.jsx

@@ -4,7 +4,8 @@ import PostTemplateDetails from '../components/PostTemplateDetails';
 
 class PostTemplate extends React.Component {
   render() {
-    const { title, subtitle } = this.props.data.site.siteMetadata;
+    const siteMetadata = this.props.data.site.siteMetadata;
+    const { title, subtitle } = siteMetadata;
     const post = this.props.data.markdownRemark;
     const { title: postTitle, description: postDescription } = post.frontmatter;
     const description = postDescription !== null ? postDescription : subtitle;
@@ -15,7 +16,7 @@ class PostTemplate extends React.Component {
           <title>{`${postTitle} - ${title}`}</title>
           <meta name="description" content={description} />
         </Helmet>
-        <PostTemplateDetails {...this.props} />
+        <PostTemplateDetails siteMetadata={siteMetadata} post={post} />
       </div>
     );
   }
@@ -29,7 +30,6 @@ export const pageQuery = graphql`
       siteMetadata {
         title
         subtitle
-        copyright
         author {
           name
           twitter

src/templates/tag-template.jsx

@@ -11,8 +11,8 @@ class TagTemplate extends React.Component {
     return (
       <div>
         <Helmet title={`All Posts tagged as "${tag}" - ${title}`} />
-        <Sidebar {...this.props} />
+        <Sidebar siteMetadata={this.props.data.site.siteMetadata} />
-        <TagTemplateDetails {...this.props} />
+        <TagTemplateDetails posts={this.props.data.allMarkdownRemark.edges} tag={tag} />
       </div>
     );
   }
@@ -24,22 +24,7 @@ export const pageQuery = graphql`
   query TagPage($tag: String) {
     site {
       siteMetadata {
-        title
+        ...sidebarFragment
-        subtitle
-        copyright
-        menu {
-          label
-          path
-        }
-        author {
-          name
-          email
-          telegram
-          twitter
-          github
-          rss
-          vk
-        }
       }
     }
     allMarkdownRemark(