Merge pull request #144 from elluga/feat-dfp-url-change

completed dfp url change in infinite scroll closes #22
elyface · Apr 11, 2019 · ff8dd08 · ff8dd08
2 parents 24d17d7 + 5bc4cbe
commit ff8dd08
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 19 deletions.
diff --git a/nested/pagedetaillayout/index.js b/nested/pagedetaillayout/index.js
@@ -5,10 +5,14 @@ import { Block } from "@comp/layouts";
 import Article from "@comp/article/";
 import Breadcrumb from "@comp/breadcrumb";
 import propTypes from "prop-types";
-import { StoreConsumerHOC, InfiniteProvider } from "@utils";
+import {
+  StoreConsumerHOC,
+  InfiniteConsumerHOC
+} from "@utils";
 import {
   DFPSlotsProvider,
-  AdSlot
+  AdSlot,
+  DFPManager
 } from "react-dfp";
 import CardManager from "@comp/cardmanager/";
 import Infinite from "@comp/infinite";
@@ -20,11 +24,23 @@ class PageDetailLayout extends Component {
     super(props);
   }
 
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (
+      nextProps.context.state.activeURL !==
+      this.props.context.state.activeURL
+    ) {
+      DFPManager.refresh();
+    }
+  }
+
   render() {
     const {
       content,
       store: {
         state: { adNetworkID }
+      },
+      context: {
+        state: { activeURL }
       }
     } = this.props;
     const {
@@ -48,6 +64,7 @@ class PageDetailLayout extends Component {
         url: path
       }
     };
+
     return (
       <DFPSlotsProvider
         dfpNetworkId={adNetworkID}
@@ -108,9 +125,7 @@ class PageDetailLayout extends Component {
                   slotId="HaberDetay_970x250"
                 />
               </Article>
-              <InfiniteProvider>
-                <Infinite dataset="cat-gundem" />
-              </InfiniteProvider>
+              <Infinite dataset="cat-gundem" />
             </Block>
           </Container>
         </Block>
@@ -121,7 +136,13 @@ class PageDetailLayout extends Component {
 
 PageDetailLayout.propTypes = {
   content: propTypes.object,
-  store: propTypes.object
+  store: propTypes.object,
+  context: propTypes.object
 };
 
+// eslint-disable-next-line
+PageDetailLayout = InfiniteConsumerHOC(
+  PageDetailLayout
+);
+
 export default StoreConsumerHOC(PageDetailLayout);
diff --git a/nested/pagelayout/index.js b/nested/pagelayout/index.js
@@ -8,6 +8,7 @@ import Icon from "@comp/icon/";
 import { faArrowAltCircleUp } from "@fortawesome/free-solid-svg-icons";
 import { StoreProvider } from "@utils";
 import { Block } from "@comp/layouts";
+import { InfiniteProvider } from "../../utils/providers/infinite";
 
 const PageLayout = props => {
   return (
@@ -23,7 +24,13 @@ const PageLayout = props => {
         type="section"
         className="content-section"
       >
-        {props.children}
+        {props.infinite ? (
+          <InfiniteProvider>
+            {props.children}
+          </InfiniteProvider>
+        ) : (
+          props.children
+        )}
       </Block>
       <Footer />
 
@@ -40,7 +47,8 @@ const PageLayout = props => {
 };
 
 PageLayout.propTypes = {
-  children: propTypes.node.isRequired
+  children: propTypes.node.isRequired,
+  infinite: propTypes.bool
 };
 
 export default PageLayout;
diff --git a/pages/newsdetail.js b/pages/newsdetail.js
@@ -38,7 +38,7 @@ class NewsDetail extends Component {
           <title>{title}</title>
         </Head>
 
-        <PageLayout>
+        <PageLayout infinite={true}>
             <PageDetailLayout content={data} />
         </PageLayout>
       </>

diff --git a/utils/providers/infinite/index.js b/utils/providers/infinite/index.js
@@ -9,6 +9,7 @@ export class InfiniteProvider extends Component {
     super(props);
     this.state = {
       activeURL: "",
+      ssrURL: "",
       nodesHash: {}
     };
   }
@@ -25,19 +26,51 @@ export class InfiniteProvider extends Component {
     if (this.state.nodesHash) {
       window.addEventListener(
         "scroll",
-        this.scrollListener,
-        true
+        this.scrollListener.bind(this),
+        false
       );
     }
   }
 
-  scrollListener(e) {
-    e.preventDefault();
+  manipulateURL(url, title) {
+    document.title = title;
+    window.history.pushState(null, title, url);
   }
 
-  @autobind
-  changeURL(url) {
-    this.updateValue("activeURL", url);
+  scrollListener(e) {
+    e.preventDefault();
+    if (this.state && this.state.nodesHash) {
+      let pageOffset = window.pageYOffset;
+      let nodes = this.state.nodesHash;
+      Object.entries(nodes).forEach(item => {
+        let offsetTop = item[1].offsetTop;
+        let height = item[1].height;
+        const { activeURL } = this.state;
+        if (
+          offsetTop &&
+          height &&
+          pageOffset >= offsetTop &&
+          pageOffset <= offsetTop + height
+        ) {
+          if (
+            activeURL &&
+            activeURL === item[1].url
+          ) {
+            return;
+          }
+          this.manipulateURL(
+            document.location.origin +
+              item[1].url,
+            item[1].title
+          );
+          this.updateValue(
+            "activeURL",
+            item[1].url
+          );
+
+        } 
+      });
+    }
   }
 
   @autobind
@@ -53,7 +86,8 @@ export class InfiniteProvider extends Component {
     elObj.offsetTop = elTop;
     elObj.id = item._id;
     elObj.url = item.url;
-    newNodesHash[`${elHeight}_${elTop}`] = elObj;
+    elObj.title = item.title;
+    newNodesHash[elObj.id] = elObj;
 
     this.updateValue("nodesHash", newNodesHash);
   }
@@ -63,8 +97,7 @@ export class InfiniteProvider extends Component {
       <InfiniteContext.Provider
         value={{
           state: this.state,
-          createNodeHash: this.createNodeHash,
-          changeURL: this.changeURL
+          createNodeHash: this.createNodeHash
         }}
       >
         {this.props.children}