feat(app): ScopeContext implemented, close #6 issue

ivankprod · Nov 4, 2022 · 8c4dc8c · 8c4dc8c
1 parent 3010c21
commit 8c4dc8c
Show file tree

Hide file tree

Showing 11 changed files with 118 additions and 92 deletions.
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -3,11 +3,7 @@ import { useStaticQuery, graphql } from "gatsby"
 
 import Navigation from "./navigation"
 
-interface HeaderProps {
-	scope?: string
-}
-
-const Header: React.FC<HeaderProps> = ({ scope = "" }) => {
+const Header: React.FC = () => {
 	const meta = useStaticQuery(
 		graphql`query {
 			allFile(filter: {relativePath: {eq: "meta.json"}}) {
@@ -40,7 +36,7 @@ const Header: React.FC<HeaderProps> = ({ scope = "" }) => {
 							</div>
 							<button className="rounded-all" data-href="/join/">Заполнить бриф</button>
 						</div>
-						<Navigation scope={scope} />
+						<Navigation />
 					</div>
 				</div>
 			</div>

diff --git a/src/components/layout.tsx b/src/components/layout.tsx
@@ -8,14 +8,13 @@ import "../fonts/fontawesome/css/solid.min.css"
 import "../styles/app.css"
 
 interface LayoutProps {
-	scope?: string
 	children?: ReactNode
 }
 
-const Layout: React.FC<LayoutProps> = ({ scope = "", children = undefined }) => {
+const Layout: React.FC<LayoutProps> = ({ children = undefined }) => {
 	return (
 		<div id="master-container" className="master-container">
-			<Header scope={scope}></Header>
+			<Header />
 			{children}
 			<Footer />
 		</div>

diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
@@ -1,6 +1,7 @@
-import React, { useEffect } from "react"
+import React, { useContext, useEffect } from "react"
 import { Link } from "gatsby"
 
+import ScopeContext from "../context/scopeContext"
 import animate from "../scripts/animate"
 import utils from "../scripts/utils"
 
@@ -14,13 +15,10 @@ const closeShowedSubnav = async () => {
 	document.querySelector(".subnav-container.showed")?.classList.remove("showed");
 }
 
-interface NavigationProps {
-	scope?: string
-}
+const Navigation: React.FC = () => {
+	const { scope } = useContext(ScopeContext);
 
-const Navigation: React.FC<NavigationProps> = ({ scope = "" }) => {
 	useEffect(() => {
-		//  Submenus
 		const elemSubnavWrappers = document.querySelectorAll('.subnav-container');
 
 		document.querySelectorAll("a.subnav").forEach(function (elem, i) {
@@ -80,18 +78,18 @@ const Navigation: React.FC<NavigationProps> = ({ scope = "" }) => {
 	return (
 		<nav className="nav-container">
 			<ul className="mnav">
-				<li><Link to="/" data-scope="home" className={checkActiveItem("home", scope)}>ГЛАВНАЯ</Link></li>
-				<li><Link to="/projects/" data-scope="projects"
+				<li><Link to="/" className={checkActiveItem("home", scope)}>ГЛАВНАЯ</Link></li>
+				<li><Link to="/projects/" 
 					className={"subnav " + checkActiveItem("projects", scope)}
 					onClick={closeShowedSubnav}>ПРОЕКТЫ
 				</Link></li>
-				<li><Link to="/services/" data-scope="services"
+				<li><Link to="/services/" 
 					className={"subnav " + checkActiveItem("services", scope)}
 					onClick={closeShowedSubnav}>УСЛУГИ
 				</Link></li>
-				<li><Link to="/blog/" data-scope="blog" className={checkActiveItem("blog", scope)}>БЛОГ</Link></li>
-				<li><Link to="/about/" data-scope="about" className={checkActiveItem("about", scope)}>О НАС</Link></li>
-				<li><Link to="/contacts/" data-scope="contacts" className={checkActiveItem("contacts", scope)}>КОНТАКТЫ</Link></li>
+				<li><Link to="/blog/" className={checkActiveItem("blog", scope)}>БЛОГ</Link></li>
+				<li><Link to="/about/" className={checkActiveItem("about", scope)}>О НАС</Link></li>
+				<li><Link to="/contacts/" className={checkActiveItem("contacts", scope)}>КОНТАКТЫ</Link></li>
 			</ul>
 			<div className="subnav-container animate-slidein-fadein-css">
 				<div className="subnav-column">

diff --git a/src/context/scopeContext.ts b/src/context/scopeContext.ts
@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+const ScopeContext = createContext({ scope: "" });
+
+export default ScopeContext;
diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx
@@ -1,5 +1,7 @@
 import React from "react"
 
+import ScopeContext from "../../context/scopeContext"
+
 import Layout from "../../components/layout"
 import SEO from "../../components/seo"
 import Breadcrumbs, { Page } from "../../components/breadcrumbs"
@@ -8,15 +10,17 @@ const AboutPage = () => {
 	const currentPage: Page = { title: "О нас" };
 
 	return (
-		<Layout scope="about">
-			<SEO title={currentPage.title} description="Информация о нашей компании" />
-			<section id="content-holder" className="container">
-				<Breadcrumbs page={currentPage} />
-				<div id="content" className="content animate-fadein-css">
-					<h1>О нас</h1>
-				</div>
-			</section>
-		</Layout>
+		<ScopeContext.Provider value={{ scope: "about" }}>
+			<Layout>
+				<SEO title={currentPage.title} description="Информация о нашей компании" />
+				<section id="content-holder" className="container">
+					<Breadcrumbs page={currentPage} />
+					<div id="content" className="content animate-fadein-css">
+						<h1>О нас</h1>
+					</div>
+				</section>
+			</Layout>
+		</ScopeContext.Provider>
 	)
 }
 

diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
@@ -1,5 +1,7 @@
 import React from "react"
 
+import ScopeContext from "../../context/scopeContext"
+
 import Layout from "../../components/layout"
 import SEO from "../../components/seo"
 import Breadcrumbs, { Page } from "../../components/breadcrumbs"
@@ -8,15 +10,17 @@ const BlogPage = () => {
 	const currentPage: Page = { title: "Блог" };
 
 	return (
-		<Layout scope="blog">
-			<SEO title={currentPage.title} description="Блог нашей компании" />
-			<section id="content-holder" className="container">
-				<Breadcrumbs page={currentPage} />
-				<div id="content" className="content animate-fadein-css">
-					<h1>Блог</h1>
-				</div>
-			</section>
-		</Layout>
+		<ScopeContext.Provider value={{ scope: "blog" }}>
+			<Layout>
+				<SEO title={currentPage.title} description="Блог нашей компании" />
+				<section id="content-holder" className="container">
+					<Breadcrumbs page={currentPage} />
+					<div id="content" className="content animate-fadein-css">
+						<h1>Блог</h1>
+					</div>
+				</section>
+			</Layout>
+		</ScopeContext.Provider>
 	)
 }
 

diff --git a/src/pages/contacts/index.tsx b/src/pages/contacts/index.tsx
@@ -1,6 +1,8 @@
 import React from "react"
 import { useStaticQuery, graphql } from "gatsby"
 
+import ScopeContext from "../../context/scopeContext"
+
 import Layout from "../../components/layout"
 import SEO from "../../components/seo"
 import Breadcrumbs, { Page } from "../../components/breadcrumbs"
@@ -27,26 +29,28 @@ const ContactsPage = () => {
 	).allFile?.nodes[0]?.childContentJson?.meta
 
 	return (
-		<Layout scope="contacts">
-			<SEO title={currentPage.title} description="Наши контакты" />
-			<section id="content-holder" className="container">
-				<Breadcrumbs page={currentPage} />
-				<div id="content" className="content animate-fadein-css">
-					<h1>Наши контакты</h1>
-					<div className="contacts-emails">
-						<div className="contacts-emails-column">
-							<h3>Обратная связь</h3>
-							<a href={`mailto:${meta.email_info}`}>{meta.email_info}</a>
-						</div>
-						<div className="contacts-emails-column">
-							<h3>Пресса / PR</h3>
-							<a href={`mailto:${meta.email_pr}`}>{meta.email_pr}</a>
+		<ScopeContext.Provider value={{ scope: "contacts" }}>
+			<Layout>
+				<SEO title={currentPage.title} description="Наши контакты" />
+				<section id="content-holder" className="container">
+					<Breadcrumbs page={currentPage} />
+					<div id="content" className="content animate-fadein-css">
+						<h1>Наши контакты</h1>
+						<div className="contacts-emails">
+							<div className="contacts-emails-column">
+								<h3>Обратная связь</h3>
+								<a href={`mailto:${meta.email_info}`}>{meta.email_info}</a>
+							</div>
+							<div className="contacts-emails-column">
+								<h3>Пресса / PR</h3>
+								<a href={`mailto:${meta.email_pr}`}>{meta.email_pr}</a>
+							</div>
 						</div>
+						<ContactsForm />
 					</div>
-					<ContactsForm />
-				</div>
-			</section>
-		</Layout>
+				</section>
+			</Layout>
+		</ScopeContext.Provider>
 	)
 }
 

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,18 +1,22 @@
 import React from "react"
 
+import ScopeContext from "../context/scopeContext"
+
 import Layout from "../components/layout"
 import SEO from "../components/seo"
 import Slider from "../components/slider"
 
 const IndexPage = () => (
-	<Layout scope="home">
-		<SEO title="Главная" />
-		<section id="content-holder" className="container">
-			<div id="content" className="content animate-fadein-css">
-				<Slider />
-			</div>
-		</section>
-	</Layout>
+	<ScopeContext.Provider value={{ scope: "home" }}>
+		<Layout>
+			<SEO title="Главная" />
+			<section id="content-holder" className="container">
+				<div id="content" className="content animate-fadein-css">
+					<Slider />
+				</div>
+			</section>
+		</Layout>
+	</ScopeContext.Provider>
 )
 
 export default IndexPage
diff --git a/src/pages/projects/index.tsx b/src/pages/projects/index.tsx
@@ -1,5 +1,7 @@
 import React from "react"
 
+import ScopeContext from "../../context/scopeContext"
+
 import Layout from "../../components/layout"
 import SEO from "../../components/seo"
 import Breadcrumbs, { Page } from "../../components/breadcrumbs"
@@ -8,15 +10,17 @@ const ProjectsPage = () => {
 	const currentPage: Page = { title: "Проекты" };
 
 	return (
-		<Layout scope="projects">
-			<SEO title={currentPage.title} description="Все проекты" />
-			<section id="content-holder" className="container">
-				<Breadcrumbs page={currentPage} />
-				<div id="content" className="content animate-fadein-css">
-					<h1>Наши проекты</h1>
-				</div>
-			</section>
-		</Layout>
+		<ScopeContext.Provider value={{ scope: "projects" }}>
+			<Layout>
+				<SEO title={currentPage.title} description="Все проекты" />
+				<section id="content-holder" className="container">
+					<Breadcrumbs page={currentPage} />
+					<div id="content" className="content animate-fadein-css">
+						<h1>Наши проекты</h1>
+					</div>
+				</section>
+			</Layout>
+		</ScopeContext.Provider>
 	)
 }
 

diff --git a/src/pages/projects/it.tsx b/src/pages/projects/it.tsx
@@ -1,5 +1,7 @@
 import React from "react"
 
+import ScopeContext from "../../context/scopeContext"
+
 import Layout from "../../components/layout"
 import SEO from "../../components/seo"
 import Breadcrumbs, { Page } from "../../components/breadcrumbs"
@@ -12,15 +14,17 @@ const ProjectsITPage = () => {
 	};
 
 	return (
-		<Layout scope="projects">
-			<SEO title="IT-проекты" description="Проекты в сфере IT и высоких технологий" />
-			<section id="content-holder" className="container">
-				<Breadcrumbs page={currentPage} parentPages={[parentPage]} />
-				<div id="content" className="content animate-fadein-css">
-					<h1>Наши проекты в IT-сфере</h1>
-				</div>
-			</section>
-		</Layout>
+		<ScopeContext.Provider value={{ scope: "projects" }}>
+			<Layout>
+				<SEO title="IT-проекты" description="Проекты в сфере IT и высоких технологий" />
+				<section id="content-holder" className="container">
+					<Breadcrumbs page={currentPage} parentPages={[parentPage]} />
+					<div id="content" className="content animate-fadein-css">
+						<h1>Наши проекты в IT-сфере</h1>
+					</div>
+				</section>
+			</Layout>
+		</ScopeContext.Provider>
 	)
 }
 

diff --git a/src/pages/services/index.tsx b/src/pages/services/index.tsx
@@ -1,5 +1,7 @@
 import React from "react"
 
+import ScopeContext from "../../context/scopeContext"
+
 import Layout from "../../components/layout"
 import SEO from "../../components/seo"
 import Breadcrumbs, { Page } from "../../components/breadcrumbs"
@@ -8,15 +10,17 @@ const ServicesPage = () => {
 	const currentPage: Page = { title: "Услуги" };
 
 	return (
-		<Layout scope="services">
-			<SEO title={currentPage.title} description="Услуги компании" />
-			<section id="content-holder" className="container">
-				<Breadcrumbs page={currentPage} />
-				<div id="content" className="content animate-fadein-css">
-					<h1>Наши услуги</h1>
-				</div>
-			</section>
-		</Layout>
+		<ScopeContext.Provider value={{ scope: "services" }}>
+			<Layout>
+				<SEO title={currentPage.title} description="Услуги компании" />
+				<section id="content-holder" className="container">
+					<Breadcrumbs page={currentPage} />
+					<div id="content" className="content animate-fadein-css">
+						<h1>Наши услуги</h1>
+					</div>
+				</section>
+			</Layout>
+		</ScopeContext.Provider>
 	)
 }