news localization

src/components/templates/news.js

@@ -1,38 +1,48 @@
 import React from 'react'
-import { Link, graphql } from 'gatsby'
+import { graphql } from 'gatsby'
+import { FormattedMessage, Link, useIntl, injectIntl } from "gatsby-plugin-intl"
 
 import { Timeline, TimelineItem }  from 'vertical-timeline-component-for-react'
 
 import Header from "../header"
 import Footer from "../footer"
 
-export default function(props) {
+const NewsTemplate = ( props ) => {
-  const news = props.data.news.edges.map(newsItem => newsItem.node)
+  const intl = useIntl()
+  const lang = intl.locale
+  console.log(lang)
+
+  var news = ""
+  if ( lang==="ru" ) { news = props.data.ru_news.edges} 
+  else if ( lang==="en" ) { news = props.data.en_news.edges; }
+
   const next = props.pageContext.next
   const prev = props.pageContext.prev
 
+  console.log(news)
+
   return (
     <>
     <Header/>
       <Timeline lineColor={'#ddd'} animate={false}>
         {/* <h2>Все новости</h2> */}
-        {news.map(newsItem => (
+        {news.map(({node}) => (
           <TimelineItem
-            key={newsItem.frontmatter.date}
+            key={node.frontmatter.date}
-            dateText={newsItem.frontmatter.date}
+            dateText={node.frontmatter.date}
             style={{ color: '#e86971' }} >
-            <h2>{newsItem.frontmatter.title}</h2>
+            <h2>{node.frontmatter.title}</h2>
-            <p dangerouslySetInnerHTML={{__html: newsItem.html}}/>
+            <p dangerouslySetInnerHTML={{__html: node.html}}/>
           </TimelineItem>
         ))}
       </Timeline>
       <nav style={{ display: 'flex', justifyContent: 'space-between', marginLeft: `15%` }}>
         <div>
-          {prev &&<Link to={prev}><h1 style={{padding: 10, color: `red`}}>{`<`}---</h1> </Link>}
+          {prev && <Link to={`/${prev}`}><h1 style={{padding: 10, color: `red`}}>{`<`}---</h1> </Link>}
         </div>
 
         <div style={{ justifySelf: 'flex-end', marginRight: `10%`}}>
-          {next && <Link to={next} ><h1 style={{padding: 10, color: `red`}}>---></h1></Link>}
+          {next && <Link to={`/${next}`} ><h1 style={{padding: 10, color: `red`}}>---></h1></Link>}
         </div>
       </nav>
     <Footer/>
@@ -40,10 +50,30 @@ export default function(props) {
   )
 }
 
+export default injectIntl(NewsTemplate)
+
 export const query = graphql`
   query NewsQuery($limit: Int!, $skip: Int!) {
-    news: allMarkdownRemark(
+    ru_news: allMarkdownRemark(
-      filter: {frontmatter: {content_type: {eq: "post"}, published: {eq: true}}},
+      filter: {frontmatter: {content_type: {eq: "post"}, published: {eq: true}, language: {eq: "ru"}}},
+      sort: {fields: [frontmatter___date], order: DESC},
+      limit: $limit
+      skip: $skip
+      ) {
+        edges {
+          node {
+            frontmatter {
+              title
+              slug
+              date(formatString: "DD.MM.YYYY")
+            }
+            html
+          }
+        }
+      }
+
+    en_news: allMarkdownRemark(
+      filter: {frontmatter: {content_type: {eq: "post"}, published: {eq: true}, language: {eq: "en"}}},
       sort: {fields: [frontmatter___date], order: DESC},
       limit: $limit
       skip: $skip