created global store

implemented DFPProvider for all pages

.babelrc

@@ -15,7 +15,7 @@
         "root": ["./"],
         "alias": {
           "@comp": "./components",
-          "@nest": "./nested",
+          "@nest":"./nested",
           "@globalstyle": "./globalstyles/styles.scss",
           "@mock": "./mocks",
           "@static": "./static",

.gitignore

@@ -4,6 +4,7 @@ node_modules
 .DS_Store
 npm-debug.log
 .netlify
+.vscode/
 
 # webpack output
 .next/

components/cards/index.js

@@ -10,12 +10,13 @@ import "./assets/styles.scss";
 class Cards extends Component {
   constructor(props) {
     super(props);
+    const items = this.props.registry.data.items[0];
     this.state = {
       limit: this.props.limit,
       registry: this.props.registry,
       catTitle: null,
       catSlug: null,
-      isGallery: this.props.registry.data.items[0].type === "galeri"
+      isGallery: items && items.type && items.type === "galeri"
     }
   }
 

components/infinite/index.js

@@ -5,7 +5,7 @@ import autobind from "autobind-decorator";
 import { getDataset } from "@utils";
 import { Block } from "@comp/layouts";
 import ArticleHead from "@nest/articleheading";
-import { URLConsumerHOC } from "@utils";
+import { StoreConsumerHOC } from "@utils";
 
 /**
  * @this State
@@ -146,4 +146,4 @@ Infinite.defaultProps = {
   dataset: "cat-gundem"
 };
 
-export default URLConsumerHOC(Infinite);
+export default StoreConsumerHOC(Infinite);

nested/catLayout/index.js

@@ -5,10 +5,31 @@ import Container from "@comp/container/";
 import Row from "@comp/row/";
 import Lists from "@comp/lists/";
 import propTypes from "prop-types";
+import {
+  DFPSlotsProvider,
+  AdSlot
+} from "react-dfp";
+import { StoreConsumerHOC } from "@utils";
 
 const CategoryLayout = props => {
+  const {
+    context: {
+      state: { adNetworkID }
+    }
+  } = props;
+
   return (
-    <Fragment>
+    <DFPSlotsProvider dfpNetworkId={adNetworkID}>
+      <AdSlot
+        sizes={[[970, 250]]}
+        adUnit={"AnasayfaMastHead"}
+        slotId="anasayfaMastHead"
+      />
+      <AdSlot
+        sizes={[[160, 600], [120, 600]]}
+        adUnit={"anasayfa_sol1"}
+        slotId="anasayfa_sol"
+      />
       <Container
         width={970}
         className="section-cards"
@@ -78,13 +99,22 @@ const CategoryLayout = props => {
           </Row>
         </Container>
       </Container>
-    </Fragment>
+    </DFPSlotsProvider>
   );
 };
 
 CategoryLayout.propTypes = {
   dataset: propTypes.object,
-  registry: propTypes.registry
+  registry: propTypes.registry,
+  context: propTypes.shape({
+    state: propTypes.shape({
+      activeURL: propTypes.string,
+      pageTitle: propTypes.string,
+      isHeaderSticky: propTypes.bool,
+      adNetworkID: propTypes.string,
+      updateValue: propTypes.func
+    })
+  })
 };
 
-export default CategoryLayout;
+export default StoreConsumerHOC(CategoryLayout);

nested/header/__tests__/header.test.js

@@ -14,6 +14,8 @@ describe("Header Component Testing", () => {
         LogoImage="http://cdn.haberiyakala.com/assets/default/desktop/img/logo.png"
         stickyClassName="orange-bg container"
         navElements={mockData}
+        activeClass="sticky-now"
+        releasedClass="released"
       />
     );
   });
@@ -25,20 +27,11 @@ describe("Header Component Testing", () => {
     debugger;
     expect(
       wrapper.children().get(0).props.activeClass
-    ).toBe("active");
+    ).toBe("sticky-now");
     expect(
-      wrapper.children().get(0).props.className
+      wrapper.children().get(0).props.stickyClassName
     ).toBe("orange-bg container");
-    expect(
-      wrapper.children().get(0).props.enabled
-    ).toBe(true);
-    expect(
-      wrapper.children().get(0).props
-        .onStateChange
-    ).not.toBeUndefined();
-    expect(
-      wrapper.children().get(0).props.shouldFreeze
-    ).not.toBeUndefined();
+
     expect(
       wrapper.children().get(0).props
         .releasedClass

nested/header/index.js

@@ -10,6 +10,7 @@ import SearchForm from "@comp/searchform/";
 import LinkButton from "@comp/linkButton/";
 import Icon from "@comp/icon/";
 import Container from "@comp/container/";
+import { StoreConsumerHOC } from "@utils";
 
 import {
   faCamera,
@@ -24,18 +25,15 @@ class Header extends Component {
   }
   @autobind
   handleStateChange(status) {
-    // FIXME: global state e bağla. burada değiştirmek doğru değil.
-    if (status.status === Sticky.STATUS_FIXED) {
-      console.log("the component is sticky");
-      const adLeft = document.getElementById("anasayfa_sol");
-      adLeft.style.top = 80 + "px";
+    if(status.status === 2) {
+      this.props.context.updateValue("isHeaderSticky", true)
     }
     else {
-      const adLeft = document.getElementById("anasayfa_sol");
-      adLeft.style.top = 150 + "px";
+      this.props.context.updateValue("isHeaderSticky", false)
     }
   }
   render() {
+
     let {
       sticky,
       top,
@@ -148,7 +146,14 @@ Header.propTypes = {
     propTypes.number
   ]),
   activeClass: propTypes.string,
-  releasedClass: propTypes.string
+  releasedClass: propTypes.string,
+  context: propTypes.shape({
+    activeURL: propTypes.string,
+    pageTitle: propTypes.string,
+    isHeaderSticky:propTypes.bool,
+    adNetworkID:propTypes.string,
+    updateValue:propTypes.func
+  })
 };
 
-export default Header;
+export default StoreConsumerHOC(Header);

nested/indexlayout/index.js

@@ -5,11 +5,21 @@ import Container from "@comp/container/";
 import Row from "@comp/row/";
 import Lists from "@comp/lists/";
 import propTypes from "prop-types";
-import { AdSlot } from "react-dfp";
+import {
+  DFPSlotsProvider,
+  AdSlot
+} from "react-dfp";
+import { StoreConsumerHOC } from "@utils";
 
 const IndexLayout = props => {
+  const {
+    context: {
+      state: { adNetworkID }
+    }
+  } = props;
+
   return (
-    <Fragment>
+    <DFPSlotsProvider dfpNetworkId={adNetworkID}>
       <AdSlot
         sizes={[[970, 250]]}
         adUnit={"AnasayfaMastHead"}
@@ -292,13 +302,24 @@ const IndexLayout = props => {
           </Row>
         </Container>
       </Container>
-    </Fragment>
+    </DFPSlotsProvider>
   );
 };
 
 IndexLayout.propTypes = {
   dataset: propTypes.object,
-  registry: propTypes.registry
+  registry: propTypes.registry,
+  context: propTypes.shape({
+    state: propTypes.shape({
+      activeURL: propTypes.string,
+      pageTitle: propTypes.string,
+      isHeaderSticky: propTypes.bool,
+      adNetworkID: propTypes.string,
+      updateValue: propTypes.func
+    })
+  })
 };
 
-export default IndexLayout;
+IndexLayout.displayName = "Index Layout"
+
+export default StoreConsumerHOC(IndexLayout);

nested/pagedetaillayout/index.js

@@ -7,7 +7,7 @@ import Container from "@comp/container/";
 import { Block } from "@comp/layouts";
 import Breadcrumb from "@comp/breadcrumb";
 import propTypes from "prop-types";
-import { URLConsumerHOC } from "@utils";
+import { StoreConsumerHOC } from "@utils";
 import autobind from "autobind-decorator";
 
 class PageDetailLayout extends Component {
@@ -94,4 +94,4 @@ PageDetailLayout.propTypes = {
   context: propTypes.object
 };
 
-export default URLConsumerHOC(PageDetailLayout);
+export default StoreConsumerHOC(PageDetailLayout);

nested/pagelayout/index.js

@@ -6,26 +6,25 @@ import propTypes from "prop-types";
 import ScrollToTop from "react-scroll-up";
 import Icon from "@comp/icon/";
 import { faArrowAltCircleUp } from "@fortawesome/free-solid-svg-icons";
-import { URLProvider } from "@utils";
+import { StoreProvider } from "@utils";
 import { Block } from "@comp/layouts";
 
 const PageLayout = props => {
   return (
-    <Fragment>
+    <StoreProvider>
       <Header
         LogoImage="/static/logo.png"
         navElements={mockData}
         zIndex={9}
         activeClass="sticky-now"
       />
-      <URLProvider>
-        <Block
-          type="section"
-          className="content-section"
-        >
-          {props.children}
-        </Block>
-      </URLProvider>
+
+      <Block
+        type="section"
+        className="content-section"
+      >
+        {props.children}
+      </Block>
       <Footer />
 
       <ScrollToTop showUnder={160}>
@@ -36,7 +35,7 @@ const PageLayout = props => {
           />
         </span>
       </ScrollToTop>
-    </Fragment>
+    </StoreProvider>
   );
 };
 

package.json

@@ -13,7 +13,7 @@
     "export": "next export",
     "test": "jest --no-cache --verbose --coverage",
     "test-debug": "/usr/local/bin/node --inspect-brk node_modules/jest/bin/jest.js --runInBand",
-    "test-debug-scope": "/usr/local/bin/node --inspect-brk node_modules/jest/bin/jest.js --runInBand linkbutton.test.js --testNamePattern='testing title and alt props'",
+    "test-debug-scope": "/usr/local/bin/node --inspect-brk node_modules/jest/bin/jest.js --runInBand header.test.js --testNamePattern='testing sticky header'",
     "story": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "lint": "esw ."
@@ -78,7 +78,7 @@
     "@storybook/react": "^4.1.11",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
-    "babel-plugin-module-resolver": "^3.1.3",
+    "babel-plugin-module-resolver": "^3.2.0",
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.9.1",
     "eslint": "^4.19.1",

pages/gundem.js

@@ -4,6 +4,7 @@ import PageLayout from "@nest/pagelayout";
 import propTypes from "prop-types";
 import CategoryLayout from "@nest/catLayout";
 import "static/styles/pages.scss";
+import "static/styles/indexAds.scss";
 
 const GundemPage = props => {
   return (

pages/index.js

@@ -3,20 +3,17 @@ import { getDataset, getContent } from "@utils";
 import PageLayout from "@nest/pagelayout";
 import propTypes from "prop-types";
 import IndexLayout from "@nest/indexlayout";
-import { DFPSlotsProvider, AdSlot } from "react-dfp";
 import "static/styles/pages.scss";
 import "static/styles/indexAds.scss";
 
 const IndexPage = props => {
   return (
     <Fragment>
       <PageLayout>
-        <DFPSlotsProvider dfpNetworkId="61966246">
           <IndexLayout
             registry={props.registry}
             dataset={props.dataset}
           />
-        </DFPSlotsProvider>
       </PageLayout>
     </Fragment>
   );

utils/consumers/urlconsumer.js → utils/consumers/storeconsumer.js

@@ -1,20 +1,21 @@
 import React, { Component } from "react";
-import { URLContext } from "@utils";
+import { StoreContext } from "@utils";
 
-export const URLConsumerHOC = WrappedComponent => {
+export const StoreConsumerHOC = WrappedComponent => {
   return class extends Component {
     static displayName = WrappedComponent.displayName;
     // eslint-disable-next-line
     constructor(props) {
       super(props);
     }
     render() {
+
       return (
-        <URLContext.Consumer>
+        <StoreContext.Consumer>
           {context => {
             return <WrappedComponent {...this.props} context={context} />;
           }}
-        </URLContext.Consumer>
+        </StoreContext.Consumer>
       );
     }
   };

utils/index.js

@@ -5,12 +5,12 @@ export {
 } from "./axios/index";
 
 export {
-  URLProvider,
-  URLContext
-} from "./providers/urlprovider";
+  StoreProvider,
+  StoreContext
+} from "./providers/storeprovider";
 
 export {
-  URLConsumerHOC
-} from "./consumers/urlconsumer";
+  StoreConsumerHOC
+} from "./consumers/storeconsumer";
 
 export { AdManager } from "./admanager";