From 1dd12522e5c3ea2619cd21f9a3e282856723c545 Mon Sep 17 00:00:00 2001 From: Yanda Huang Date: Sun, 6 May 2018 15:32:25 -0400 Subject: [PATCH 1/3] Refactor duplicate GraphQL to Fragment, eliminate all the spread syntax --- .../CategoryTemplateDetails/index.jsx | 4 +-- src/components/Disqus/Disqus.jsx | 9 +++---- src/components/PageTemplateDetails/index.jsx | 4 +-- src/components/PostTemplateDetails/index.jsx | 8 +++--- src/components/Sidebar/index.jsx | 23 +++++++++++++++- src/components/TagTemplateDetails/index.jsx | 4 +-- src/pages/404.jsx | 19 ++------------ src/pages/categories.jsx | 19 ++------------ src/pages/index.jsx | 19 ++------------ src/pages/tags.jsx | 19 ++------------ src/templates/category-template.jsx | 26 +++++-------------- src/templates/page-template.jsx | 25 +++++------------- src/templates/post-template.jsx | 6 ++--- src/templates/tag-template.jsx | 21 +++------------ 14 files changed, 62 insertions(+), 144 deletions(-) diff --git a/src/components/CategoryTemplateDetails/index.jsx b/src/components/CategoryTemplateDetails/index.jsx index 47b4f1e..d284733 100644 --- a/src/components/CategoryTemplateDetails/index.jsx +++ b/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 posts = this.props.data.allMarkdownRemark.edges; + const { category } = this.props.category; + const posts = this.props.posts; posts.forEach((post) => { items.push(); }); diff --git a/src/components/Disqus/Disqus.jsx b/src/components/Disqus/Disqus.jsx index 2486c63..52d73df 100644 --- a/src/components/Disqus/Disqus.jsx +++ b/src/components/Disqus/Disqus.jsx @@ -19,15 +19,12 @@ class Disqus extends Component { this.setState({ toasts }); } render() { - const { postNode, siteMetadata } = this.props; - if (!siteMetadata.disqusShortname) { - return null; - } + const { postNode, shortName, url:siteUrl } = this.props; const post = postNode.frontmatter; - const url = siteMetadata.url + postNode.fields.slug; + const url = siteUrl + postNode.fields.slug; return ( - +
diff --git a/src/components/PostTemplateDetails/index.jsx b/src/components/PostTemplateDetails/index.jsx index b5b2b88..a1c0101 100644 --- a/src/components/PostTemplateDetails/index.jsx +++ b/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 post = this.props.data.markdownRemark; + const { subtitle, author, disqusShortname, url } = this.props.siteMetadata; + const post = this.props.post; const tags = post.fields.tagSlugs; const homeBlock = ( @@ -32,7 +32,7 @@ class PostTemplateDetails extends React.Component { const commentsBlock = (
- +
); @@ -56,7 +56,7 @@ class PostTemplateDetails extends React.Component {
{author.name} on Twitter

- {commentsBlock} + {disqusShortname && commentsBlock}
diff --git a/src/components/Sidebar/index.jsx b/src/components/Sidebar/index.jsx index 7bc54f0..d11a6bb 100644 --- a/src/components/Sidebar/index.jsx +++ b/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,24 @@ 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 + } + } +`; \ No newline at end of file diff --git a/src/components/TagTemplateDetails/index.jsx b/src/components/TagTemplateDetails/index.jsx index cd967cf..ac44314 100644 --- a/src/components/TagTemplateDetails/index.jsx +++ b/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 posts = this.props.data.allMarkdownRemark.edges; + const tagTitle = this.props.tag; + const posts = this.props.posts; posts.forEach((post) => { items.push(); }); diff --git a/src/pages/404.jsx b/src/pages/404.jsx index f162776..0f9665e 100644 --- a/src/pages/404.jsx +++ b/src/pages/404.jsx @@ -5,7 +5,7 @@ class NotFoundRoute extends React.Component { render() { return (
- +
@@ -27,22 +27,7 @@ export const pageQuery = graphql` query NotFoundQuery { site { siteMetadata { - title - subtitle - copyright - menu { - label - path - } - author { - name - email - telegram - twitter - github - rss - vk - } + ...sidebarFragment } } } diff --git a/src/pages/categories.jsx b/src/pages/categories.jsx index c41a583..1db0020 100644 --- a/src/pages/categories.jsx +++ b/src/pages/categories.jsx @@ -12,7 +12,7 @@ class CategoriesRoute extends React.Component { return (
- +
@@ -44,22 +44,7 @@ export const pageQuery = graphql` query CategoryesQuery { site { siteMetadata { - title - subtitle - copyright - menu { - label - path - } - author { - name - email - telegram - twitter - github - rss - vk - } + ...sidebarFragment } } allMarkdownRemark( diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 9aa3d72..5274d54 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -18,7 +18,7 @@ class IndexRoute extends React.Component { {title} - +
{items} @@ -35,22 +35,7 @@ export const pageQuery = graphql` query IndexQuery { site { siteMetadata { - title - subtitle - copyright - menu { - label - path - } - author { - name - email - telegram - twitter - github - rss - vk - } + ...sidebarFragment } } allMarkdownRemark( diff --git a/src/pages/tags.jsx b/src/pages/tags.jsx index 22939de..6b87f50 100644 --- a/src/pages/tags.jsx +++ b/src/pages/tags.jsx @@ -12,7 +12,7 @@ class TagsRoute extends React.Component { return (
- +
@@ -44,22 +44,7 @@ export const pageQuery = graphql` query TagsQuery { site { siteMetadata { - title - subtitle - copyright - menu { - label - path - } - author { - name - email - telegram - twitter - github - rss - vk - } + ...sidebarFragment } } allMarkdownRemark( diff --git a/src/templates/category-template.jsx b/src/templates/category-template.jsx index 713b8d1..ca05402 100644 --- a/src/templates/category-template.jsx +++ b/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 { category } = this.props.pathContext; + const title = this.props.data.site.siteMetadata.title; + const category = this.props.pathContext.category; + const posts = this.props.data.allMarkdownRemark.edges return (
- - + +
); } @@ -24,22 +25,7 @@ export const pageQuery = graphql` query CategoryPage($category: String) { site { siteMetadata { - title - subtitle - copyright - menu { - label - path - } - author { - name - email - telegram - twitter - github - rss - vk - } + ...sidebarFragment } } allMarkdownRemark( diff --git a/src/templates/page-template.jsx b/src/templates/page-template.jsx index b5e4d56..0a60b37 100644 --- a/src/templates/page-template.jsx +++ b/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 { {`${pageTitle} - ${title}`} - +
); } @@ -27,22 +31,7 @@ export const pageQuery = graphql` query PageBySlug($slug: String!) { site { siteMetadata { - title - subtitle - copyright - menu { - label - path - } - author { - name - email - telegram - twitter - github - rss - vk - } + ...sidebarFragment } } markdownRemark(fields: { slug: { eq: $slug } }) { diff --git a/src/templates/post-template.jsx b/src/templates/post-template.jsx index 9ddfb93..4853a52 100644 --- a/src/templates/post-template.jsx +++ b/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 { {`${postTitle} - ${title}`} - +
); } @@ -29,7 +30,6 @@ export const pageQuery = graphql` siteMetadata { title subtitle - copyright author { name twitter diff --git a/src/templates/tag-template.jsx b/src/templates/tag-template.jsx index 2eff8eb..979f108 100644 --- a/src/templates/tag-template.jsx +++ b/src/templates/tag-template.jsx @@ -11,8 +11,8 @@ class TagTemplate extends React.Component { return (
- - + +
); } @@ -24,22 +24,7 @@ export const pageQuery = graphql` query TagPage($tag: String) { site { siteMetadata { - title - subtitle - copyright - menu { - label - path - } - author { - name - email - telegram - twitter - github - rss - vk - } + ...sidebarFragment } } allMarkdownRemark( From 448541831f3bb7197cf9e1854d8b10419c548189 Mon Sep 17 00:00:00 2001 From: Yanda Huang Date: Sun, 6 May 2018 15:43:52 -0400 Subject: [PATCH 2/3] Fix format --- src/components/Disqus/Disqus.jsx | 2 +- src/components/PostTemplateDetails/index.jsx | 2 +- src/components/Sidebar/index.jsx | 2 +- src/templates/category-template.jsx | 2 +- src/templates/tag-template.jsx | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Disqus/Disqus.jsx b/src/components/Disqus/Disqus.jsx index 52d73df..d7a58be 100644 --- a/src/components/Disqus/Disqus.jsx +++ b/src/components/Disqus/Disqus.jsx @@ -19,7 +19,7 @@ class Disqus extends Component { this.setState({ toasts }); } render() { - const { postNode, shortName, url:siteUrl } = this.props; + const { postNode, shortName, url: siteUrl } = this.props; const post = postNode.frontmatter; const url = siteUrl + postNode.fields.slug; return ( diff --git a/src/components/PostTemplateDetails/index.jsx b/src/components/PostTemplateDetails/index.jsx index a1c0101..cdf18a9 100644 --- a/src/components/PostTemplateDetails/index.jsx +++ b/src/components/PostTemplateDetails/index.jsx @@ -32,7 +32,7 @@ class PostTemplateDetails extends React.Component { const commentsBlock = (
- +
); diff --git a/src/components/Sidebar/index.jsx b/src/components/Sidebar/index.jsx index d11a6bb..cba0f3d 100644 --- a/src/components/Sidebar/index.jsx +++ b/src/components/Sidebar/index.jsx @@ -78,4 +78,4 @@ export const conponentQuery = graphql` vk } } -`; \ No newline at end of file +`; diff --git a/src/templates/category-template.jsx b/src/templates/category-template.jsx index ca05402..668d120 100644 --- a/src/templates/category-template.jsx +++ b/src/templates/category-template.jsx @@ -7,7 +7,7 @@ class CategoryTemplate extends React.Component { render() { const title = this.props.data.site.siteMetadata.title; const category = this.props.pathContext.category; - const posts = this.props.data.allMarkdownRemark.edges + const posts = this.props.data.allMarkdownRemark.edges; return (
diff --git a/src/templates/tag-template.jsx b/src/templates/tag-template.jsx index 979f108..50c51ed 100644 --- a/src/templates/tag-template.jsx +++ b/src/templates/tag-template.jsx @@ -12,7 +12,7 @@ class TagTemplate extends React.Component {
- +
); } From 2ceac61daf8e5c971742a157ee04776b5f5d4e10 Mon Sep 17 00:00:00 2001 From: Yanda Huang Date: Sun, 6 May 2018 15:48:03 -0400 Subject: [PATCH 3/3] Try fix the new line format again --- src/components/Sidebar/index.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Sidebar/index.jsx b/src/components/Sidebar/index.jsx index cba0f3d..dd2dc87 100644 --- a/src/components/Sidebar/index.jsx +++ b/src/components/Sidebar/index.jsx @@ -79,3 +79,4 @@ export const conponentQuery = graphql` } } `; +