From aaed77eed1cdca8a83b97cb2eb8a17e89096ec63 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Wed, 22 Jul 2020 02:57:00 +0300
Subject: [PATCH] wrap pages in layout

---
 gatsby-browser.js                                  |  6 ++++++
 gatsby-ssr.js                                      |  9 +++++++--
 src/components/Header/Header.js                    | 10 ++++++++--
 .../Header/ThemeSwitcher/ThemeSwitcher.js          | 14 +++++++-------
 src/pages/404.js                                   |  5 ++---
 src/pages/about.js                                 |  5 ++---
 src/pages/articles.js                              |  5 ++---
 src/pages/contacts.js                              |  5 ++---
 src/pages/index.js                                 |  5 ++---
 src/pages/snippets.js                              |  5 ++---
 src/templates/articleTemplate.js                   |  5 ++---
 src/templates/categoryTemplate.js                  |  5 ++---
 src/templates/snippetTemplate.js                   |  5 ++---
 src/templates/tagTemplate.js                       |  5 ++---
 14 files changed, 48 insertions(+), 41 deletions(-)

diff --git a/gatsby-browser.js b/gatsby-browser.js
index c6f7993..269d1bc 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -1,4 +1,6 @@
 import "firebase/database"
+import React from 'react';
+import Layout from './src/components/Layout/Layout'
 
 import "gatsby-remark-vscode/styles.css"
 
@@ -25,3 +27,7 @@ export const shouldUpdateScroll = ({ routerProps: { location } }) => {
 
   return window.scrollTo(0, 0)
 }
+
+export const wrapPageElement = ({ element, props }) => {
+  return <Layout {...props}>{element}</Layout>;
+};
\ No newline at end of file
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index c98faee..c2d8ea2 100644
--- a/gatsby-ssr.js
+++ b/gatsby-ssr.js
@@ -1,12 +1,13 @@
-import React from "react"
 import "firebase/database"
+import React from "react"
+import Layout from './src/components/Layout/Layout'
 
 const OnDark = () => {
   return (
     <script
       dangerouslySetInnerHTML={{
         __html: `
-        (() => {
+        (function() {
           window.__isDarkTheme = false
           
           window.__setTheme = function(theme) {
@@ -41,3 +42,7 @@ const OnDark = () => {
 export const onRenderBody = ({ setPreBodyComponents }) => {
   setPreBodyComponents(<OnDark key="isDarkTheme" />)
 }
+
+export const wrapPageElement = ({ element, props }) => {
+  return <Layout {...props}>{element}</Layout>;
+};
\ No newline at end of file
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 98b7334..a34bcd3 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -21,13 +21,19 @@ const Header = () => {
   const [isMobileOpen, setIsMobileOpen] = React.useState(false)
   const { pathname } = useLocation()
 
+  const [ready, setReady] = React.useState(false)
+  const [isDark, setIsDark] = React.useState(false)
+  
+
   React.useEffect(() => {
+    setIsDark(window.__isDarkTheme)
+    setReady(true)
     isMobileOpen
       ? (document.body.style.overflowY = "hidden")
       : (document.body.style.overflowY = "")
     document.body.onscroll = () =>
       window.pageYOffset >= 100 ? setIsScrolled(true) : setIsScrolled(false)
-  }, [isMobileOpen])
+  }, [isMobileOpen, setIsDark, setReady])
 
   const mobileHandler = () => {
     setIsMobileOpen(!isMobileOpen)
@@ -71,7 +77,7 @@ const Header = () => {
           <div className="header-nav__links">
             <nav>{renderLinks()}</nav>
           </div>
-          <ThemeSwitcher />
+          <ThemeSwitcher ready={ready} isDark={isDark} setIsDark={setIsDark} />
         </div>
         <div
           className={
diff --git a/src/components/Header/ThemeSwitcher/ThemeSwitcher.js b/src/components/Header/ThemeSwitcher/ThemeSwitcher.js
index fafa3c6..2940d51 100644
--- a/src/components/Header/ThemeSwitcher/ThemeSwitcher.js
+++ b/src/components/Header/ThemeSwitcher/ThemeSwitcher.js
@@ -3,14 +3,14 @@ import React from 'react';
 import MoonIcon from "../../../images/moon-icon.svg"
 import SunIcon from "../../../images/sun-icon.svg"
 
-const ThemeSwitcher = () => {
-  const [ready, setReady] = React.useState(false)
-  const [isDark, setIsDark] = React.useState(false)
+const ThemeSwitcher = ({ ready, isDark, setIsDark }) => {
+  // const [ready, setReady] = React.useState(false)
+  // const [isDark, setIsDark] = React.useState(false)
   
-  React.useEffect(() => {
-    setIsDark(window.__isDarkTheme)
-    setReady(true)
-  }, [setIsDark, setReady])
+  // React.useEffect(() => {
+  //   setIsDark(window.__isDarkTheme)
+  //   setReady(true)
+  // }, [setIsDark, setReady])
 
   return (
     <div className={ready ? 'header-nav__theme ready' : 'header-nav__theme'}>
diff --git a/src/pages/404.js b/src/pages/404.js
index 2d07f8f..32c10c0 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -3,11 +3,10 @@ import { Main } from "../ui/ui"
 import { Grid } from "react-flexbox-grid"
 import { Link } from "gatsby"
 import SEO from "../components/SEO/SEO"
-import Layout from "../components/Layout/Layout"
 
 const NotFound = () => {
   return (
-    <Layout>
+    <>
       <SEO />
       <Main>
         <Grid fluid>
@@ -18,7 +17,7 @@ const NotFound = () => {
           </div>
         </Grid>
       </Main>
-    </Layout>
+    </>
   )
 }
 
diff --git a/src/pages/about.js b/src/pages/about.js
index 469c6e9..9f9de45 100644
--- a/src/pages/about.js
+++ b/src/pages/about.js
@@ -3,7 +3,6 @@ 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"
 import Offers from "../components/Offers/Offers"
 import About from "../components/About/About"
 
@@ -12,7 +11,7 @@ const AboutPage = () => {
     siteMetadata: { title, menuLinks, social },
   } = useSiteMetadataQuery()
   return (
-    <Layout>
+    <>
       <SEO
         title="О сайте"
         description="Этот сайт придуман для того, чтобы помочь вам разобраться с вашей проблемой и решить её. Сайт содержит в себе статьи и руководства."
@@ -35,7 +34,7 @@ const AboutPage = () => {
           </Row>
         </Grid>
       </Main>
-    </Layout>
+    </>
   )
 }
 
diff --git a/src/pages/articles.js b/src/pages/articles.js
index 6a80ef0..bb16ef1 100644
--- a/src/pages/articles.js
+++ b/src/pages/articles.js
@@ -8,7 +8,6 @@ import useCategoriesQuery from "../hooks/useCategoriesQuery"
 import useSiteMetadataQuery from "../hooks/useSiteMetadataQuery"
 
 import SEO from "../components/SEO/SEO"
-import Layout from "../components/Layout/Layout"
 import Articles from "../components/Articles/Articles"
 import Categories from "../components/Articles/Categories/Categories"
 import CategoryItem from "../components/Articles/Categories/CategoryItem"
@@ -64,7 +63,7 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
   }, [setFiltredArticles, filterArticles, allArticles.edges, query, onPage])
 
   return (
-    <Layout>
+    <>
       <SEO title="Статьи" />
       <Main>
         <Grid fluid>
@@ -123,7 +122,7 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
           </Row>
         </Grid>
       </Main>
-    </Layout>
+    </>
   )
 }
 
diff --git a/src/pages/contacts.js b/src/pages/contacts.js
index e115652..951afda 100644
--- a/src/pages/contacts.js
+++ b/src/pages/contacts.js
@@ -3,7 +3,6 @@ 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 = () => {
@@ -13,7 +12,7 @@ const ContactsPage = () => {
     },
   } = useSiteMetadataQuery()
   return (
-    <Layout>
+    <>
       <SEO
         title="📝 Контакты"
         description="Для того чтобы задать вопрос, сообщить об ошибках или просто поздороваться, вы можете воспользоваться формой обратной связи или использовать контактные данные."
@@ -27,7 +26,7 @@ const ContactsPage = () => {
           </Row>
         </Grid>
       </Main>
-    </Layout>
+    </>
   )
 }
 
diff --git a/src/pages/index.js b/src/pages/index.js
index fecf601..38530e1 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -5,7 +5,6 @@ import { Grid, Row, Col } from "react-flexbox-grid"
 import useSiteMetadataQuery from "../hooks/useSiteMetadataQuery"
 import useSnippetsQuery from "../hooks/useSnippetsQuery"
 import SEO from "../components/SEO/SEO"
-import Layout from "../components/Layout/Layout"
 import Articles from "../components/Articles/Articles"
 import Snippets from "../components/Snippets/Snippets"
 import SnippetItem from "../components/Snippets/SnippetItem/SnippetItem"
@@ -23,7 +22,7 @@ const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
   let [limit, setLimit] = React.useState(onPage)
 
   return (
-    <Layout>
+    <>
       <SEO />
       <Main>
         <Grid fluid>
@@ -59,7 +58,7 @@ const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
           </Row>
         </Grid>
       </Main>
-    </Layout>
+    </>
   )
 }
 
diff --git a/src/pages/snippets.js b/src/pages/snippets.js
index dbf3c85..617f603 100644
--- a/src/pages/snippets.js
+++ b/src/pages/snippets.js
@@ -3,7 +3,6 @@ import { 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 Snippets from "../components/Snippets/Snippets"
 import SnippetItem from "../components/Snippets/SnippetItem/SnippetItem"
 
@@ -13,7 +12,7 @@ const SnippetsPage = ({
   },
 }) => {
   return (
-    <Layout>
+    <>
       <SEO />
       <Main>
         <Grid fluid>
@@ -39,7 +38,7 @@ const SnippetsPage = ({
           </Row>
         </Grid>
       </Main>
-    </Layout>
+    </>
   )
 }
 
diff --git a/src/templates/articleTemplate.js b/src/templates/articleTemplate.js
index 73ba898..4946e88 100644
--- a/src/templates/articleTemplate.js
+++ b/src/templates/articleTemplate.js
@@ -1,7 +1,6 @@
 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"
 import Offers from "../components/Offers/Offers"
 import MoreArticles from "../components/Articles/MoreArticles/MoreArticles"
@@ -14,7 +13,7 @@ const articleTemplate = ({
   },
 }) => {
   return (
-    <Layout>
+    <>
       <Main>
         <Grid fluid>
           <Row>
@@ -29,7 +28,7 @@ const articleTemplate = ({
           </Row>
         </Grid>
       </Main>
-    </Layout>
+    </>
   )
 }
 
diff --git a/src/templates/categoryTemplate.js b/src/templates/categoryTemplate.js
index 5511dff..260e77e 100644
--- a/src/templates/categoryTemplate.js
+++ b/src/templates/categoryTemplate.js
@@ -5,7 +5,6 @@ import { graphql } from "gatsby"
 import useSiteMetadataQuery from "../hooks/useSiteMetadataQuery"
 import useCategoriesQuery from "../hooks/useCategoriesQuery"
 import SEO from "../components/SEO/SEO"
-import Layout from "../components/Layout/Layout"
 import Articles from "../components/Articles/Articles"
 import Categories from "../components/Articles/Categories/Categories"
 import CategoryItem from "../components/Articles/Categories/CategoryItem"
@@ -28,7 +27,7 @@ const CategoryPage = ({
   let [limit, setLimit] = React.useState(onPage)
 
   return (
-    <Layout>
+    <>
       <SEO title={title} canonical={`${siteUrl}/articles`} />
       <Main>
         <Grid fluid>
@@ -63,7 +62,7 @@ const CategoryPage = ({
           </Row>
         </Grid>
       </Main>
-    </Layout>
+    </>
   )
 }
 
diff --git a/src/templates/snippetTemplate.js b/src/templates/snippetTemplate.js
index 4d52143..0fe508f 100644
--- a/src/templates/snippetTemplate.js
+++ b/src/templates/snippetTemplate.js
@@ -2,7 +2,6 @@ import React from "react"
 import { Main } from "../ui/ui"
 import { Grid, Row, Col } from "react-flexbox-grid"
 import Snippet from "../components/Snippet/Snippet"
-import Layout from "../components/Layout/Layout"
 import { graphql } from "gatsby"
 
 const snippetTemplate = ({
@@ -11,7 +10,7 @@ const snippetTemplate = ({
   },
 }) => {
   return (
-    <Layout>
+    <>
       <Main>
         <Grid fluid style={{ maxWidth: 900 }}>
           <Row>
@@ -21,7 +20,7 @@ const snippetTemplate = ({
           </Row>
         </Grid>
       </Main>
-    </Layout>
+    </>
   )
 }
 
diff --git a/src/templates/tagTemplate.js b/src/templates/tagTemplate.js
index adf48de..43004b5 100644
--- a/src/templates/tagTemplate.js
+++ b/src/templates/tagTemplate.js
@@ -5,7 +5,6 @@ import { graphql } from "gatsby"
 import useSiteMetadataQuery from "../hooks/useSiteMetadataQuery"
 import useCategoriesQuery from "../hooks/useCategoriesQuery"
 import SEO from "../components/SEO/SEO"
-import Layout from "../components/Layout/Layout"
 import Articles from "../components/Articles/Articles"
 import Categories from "../components/Articles/Categories/Categories"
 import CategoryItem from "../components/Articles/Categories/CategoryItem"
@@ -28,7 +27,7 @@ const TagPage = ({
   let [limit, setLimit] = React.useState(onPage)
 
   return (
-    <Layout>
+    <>
       <SEO title={title} canonical={`${siteUrl}/articles`} />
       <Main>
         <Grid fluid>
@@ -63,7 +62,7 @@ const TagPage = ({
           </Row>
         </Grid>
       </Main>
-    </Layout>
+    </>
   )
 }