From 8810effae8bf7a91493f2aea046307f1bd308f80 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Thu, 9 Jul 2020 13:24:50 +0300
Subject: [PATCH] ui upd

---
 src/components/Contacts/Contacts.js | 12 ++++++++----
 src/pages/404.js                    |  5 +++--
 src/pages/about.js                  |  5 +++--
 src/pages/articles.js               |  5 +++--
 src/pages/books.js                  |  5 +++--
 src/pages/contacts.js               |  9 ++++++---
 src/pages/index.js                  |  8 ++++----
 src/templates/articleTemplate.js    | 10 ++++------
 src/templates/categoryTemplate.js   |  5 +++--
 src/templates/tagTemplate.js        |  5 +++--
 src/ui/ui.js                        | 12 ++++++++++++
 11 files changed, 52 insertions(+), 29 deletions(-)
 create mode 100644 src/ui/ui.js

diff --git a/src/components/Contacts/Contacts.js b/src/components/Contacts/Contacts.js
index 0a43209..b3010c1 100644
--- a/src/components/Contacts/Contacts.js
+++ b/src/components/Contacts/Contacts.js
@@ -1,12 +1,11 @@
 import React from 'react';
+import PropTypes from 'prop-types'
 import ContactsFrom from './ContactsForm/ContactsForm';
-import useSiteMetadataQuery from '../../hooks/useSiteMetadataQuery'
 import './Contacts.scss'
 
 import MemoIcon from '../../images/memo-icon.svg'
 
-const Contacts = () => {
-  const { siteMetadata: { social: { email, telegram } } } = useSiteMetadataQuery()
+const Contacts = ({ email, telegram }) => {
   return (
     <div className="contacts">
       <div className="contacts-heading">
@@ -30,4 +29,9 @@ const Contacts = () => {
   )
 }
 
-export default Contacts
\ No newline at end of file
+export default Contacts
+
+Contacts.propTypes = {
+  email: PropTypes.string,
+  telegram: PropTypes.string
+}
\ No newline at end of file
diff --git a/src/pages/404.js b/src/pages/404.js
index cfd15ae..80ef32e 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Main } from '../ui/ui'
 import { Grid } from 'react-flexbox-grid'
 import { Link } from 'gatsby'
 import Layout from '../components/Layout/Layout'
@@ -6,7 +7,7 @@ import Layout from '../components/Layout/Layout'
 const NotFound = () => {
   return (
     <Layout>
-      <main>
+      <Main>
         <Grid fluid>
           <div className="error">
             <span>#404</span>
@@ -14,7 +15,7 @@ const NotFound = () => {
             <Link to='/'>вернуться на главную</Link>
           </div>
         </Grid>
-      </main>
+      </Main>
     </Layout>
   )
 }
diff --git a/src/pages/about.js b/src/pages/about.js
index e657132..a43423c 100644
--- a/src/pages/about.js
+++ b/src/pages/about.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Grid, Row, Col } from 'react-flexbox-grid'
+import { Main } from '../ui/ui'
 import useSiteMetadataQuery from '../hooks/useSiteMetadataQuery'
 import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
@@ -11,7 +12,7 @@ const AboutPage = () => {
   return (
     <Layout>
       <SEO title='О сайте' description='Этот сайт придуман для того, чтобы помочь вам разобраться с вашей проблемой и решить её. Сайт содержит в себе статьи и руководства.' />
-      <main>
+      <Main>
         <Grid fluid>
           <Row>
             <Col lg={9} xs={12}>
@@ -22,7 +23,7 @@ const AboutPage = () => {
             </Col>
           </Row>
         </Grid>
-      </main>
+      </Main>
     </Layout>
   )
 }
diff --git a/src/pages/articles.js b/src/pages/articles.js
index 1323207..efe2b76 100644
--- a/src/pages/articles.js
+++ b/src/pages/articles.js
@@ -1,4 +1,5 @@
 import React from "react"
+import { Main } from '../ui/ui'
 import { Grid, Row, Col } from 'react-flexbox-grid'
 import { graphql } from 'gatsby'
 import useCategoriesQuery from '../hooks/useCategoriesQuery'
@@ -16,7 +17,7 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
   return (
     <Layout>
       <SEO title='Статьи' />
-      <main>
+      <Main>
         <Grid fluid>
           <Row>
             <Col lg={9} xs={12}>
@@ -41,7 +42,7 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
             </Col >
           </Row>
         </Grid>
-      </main>
+      </Main>
     </Layout>
   )
 }
diff --git a/src/pages/books.js b/src/pages/books.js
index decf65c..fd35214 100644
--- a/src/pages/books.js
+++ b/src/pages/books.js
@@ -1,4 +1,5 @@
 import React from "react"
+import { Main } from '../ui/ui'
 import { Grid, Row, Col } from 'react-flexbox-grid'
 import { graphql } from 'gatsby'
 import SEO from '../components/SEO/SEO'
@@ -13,7 +14,7 @@ const BooksPage = ({ data: { allMarkdownRemark: edges } }) => {
   return (
     <Layout>
       <SEO title='Ресурсы' />
-      <main>
+      <Main>
         <Grid fluid>
           <Row>
             <Col lg={9} xs={12}>
@@ -40,7 +41,7 @@ const BooksPage = ({ data: { allMarkdownRemark: edges } }) => {
             </Col>
           </Row>
         </Grid>
-      </main>
+      </Main>
     </Layout>
   )
 }
diff --git a/src/pages/contacts.js b/src/pages/contacts.js
index 3f7ce6d..415f140 100644
--- a/src/pages/contacts.js
+++ b/src/pages/contacts.js
@@ -1,22 +1,25 @@
 import React from 'react';
+import { Main } from '../ui/ui'
 import { Grid, Row, Col } from 'react-flexbox-grid'
+import useSiteMetadataQuery from '../hooks/useSiteMetadataQuery'
 import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
 import Contacts from '../components/Contacts/Contacts'
 
 const ContactsPage = () => {
+  const { siteMetadata: { social: { email, telegram } } } = useSiteMetadataQuery()
   return (
     <Layout>
       <SEO title='📝 Контакты' description='Для того чтобы задать вопрос, сообщить об ошибках или просто поздороваться, вы можете воспользоваться формой обратной связи или использовать контактные данные.' />
-      <main>
+      <Main>
         <Grid fluid>
           <Row>
             <Col lg={10} lgOffset={1}>
-              <Contacts />
+              <Contacts email={email} telegram={telegram} />
             </Col>
           </Row>
         </Grid>
-      </main>
+      </Main>
     </Layout>
   )
 }
diff --git a/src/pages/index.js b/src/pages/index.js
index f3ee4d0..cefb2fc 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,5 +1,7 @@
 import React from "react"
 import { Link, graphql } from 'gatsby'
+import { Main } from '../ui/ui'
+import { Grid, Row, Col } from 'react-flexbox-grid'
 import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
 import Description from '../components/Description/Description'
@@ -9,14 +11,12 @@ import Newsletter from '../components/Newsletter/Newsletter'
 
 import ArrowNext from '../images/arrow-next.svg'
 
-import { Grid, Row, Col } from 'react-flexbox-grid'
-
 const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
   return (
     <Layout>
       <SEO />
       <Description />
-      <main>
+      <Main>
         <Grid fluid>
           <Row>
             <Col xs={12}>
@@ -38,7 +38,7 @@ const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
             </Col>
           </Row>
         </Grid>
-      </main>
+      </Main>
     </Layout>
   )
 }
diff --git a/src/templates/articleTemplate.js b/src/templates/articleTemplate.js
index 7c08abd..bc4746c 100644
--- a/src/templates/articleTemplate.js
+++ b/src/templates/articleTemplate.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import { Main } from '../ui/ui'
 import { Grid, Row, Col } from 'react-flexbox-grid'
 import Layout from '../components/Layout/Layout'
 import Article from '../components/Article/Article'
@@ -7,13 +8,10 @@ import MoreArticles from '../components/Articles/MoreArticles/MoreArticles'
 import Newsletter from '../components/Newsletter/Newsletter'
 import { graphql } from "gatsby"
 
-const articleTemplate = ({ data }) => {
-  const { markdownRemark } = data
-  const { frontmatter, html } = markdownRemark
-
+const articleTemplate = ({ data: { markdownRemark: { frontmatter, html } } }) => {
   return (
     <Layout>
-      <main>
+      <Main>
         <Grid fluid>
           <Row>
             <Col lg={9} xs={12}>
@@ -26,7 +24,7 @@ const articleTemplate = ({ data }) => {
             </Col>
           </Row>
         </Grid>
-      </main>
+      </Main>
     </Layout>
   )
 }
diff --git a/src/templates/categoryTemplate.js b/src/templates/categoryTemplate.js
index 2bf6a8e..1e01426 100644
--- a/src/templates/categoryTemplate.js
+++ b/src/templates/categoryTemplate.js
@@ -1,4 +1,5 @@
 import React from "react"
+import { Main } from '../ui/ui'
 import { Grid, Row, Col } from 'react-flexbox-grid'
 import { graphql } from 'gatsby'
 import useCategoriesQuery from '../hooks/useCategoriesQuery'
@@ -16,7 +17,7 @@ const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title
   return (
     <Layout>
       <SEO title={title} />
-      <main>
+      <Main>
         <Grid fluid>
           <Row>
             <Col lg={9} xs={12}>
@@ -44,7 +45,7 @@ const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title
             </Col>
           </Row>
         </Grid>
-      </main>
+      </Main>
     </Layout>
   )
 }
diff --git a/src/templates/tagTemplate.js b/src/templates/tagTemplate.js
index a32461c..5dc3329 100644
--- a/src/templates/tagTemplate.js
+++ b/src/templates/tagTemplate.js
@@ -1,4 +1,5 @@
 import React from "react"
+import { Main } from '../ui/ui'
 import { Grid, Row, Col } from 'react-flexbox-grid'
 import { graphql } from 'gatsby'
 import useCategoriesQuery from '../hooks/useCategoriesQuery'
@@ -16,7 +17,7 @@ const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } })
   return (
     <Layout>
       <SEO title={title} />
-      <main>
+      <Main>
         <Grid fluid>
           <Row>
             <Col lg={9} xs={12}>
@@ -44,7 +45,7 @@ const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } })
             </Col>
           </Row>
         </Grid>
-      </main>
+      </Main>
     </Layout>
   )
 }
diff --git a/src/ui/ui.js b/src/ui/ui.js
new file mode 100644
index 0000000..c066aef
--- /dev/null
+++ b/src/ui/ui.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Main = ({ children, ...props }) => {
+  return (
+    <main {...props}>
+      {children}
+    </main>
+  )
+}
+
+
+export { Main }
\ No newline at end of file