www(доработка имеющегося функционала): fix anchor routing

fix anchor routing

Author: nauchikus

www/components/driver-content-nav/DriverContentNav.tsx

@@ -5,6 +5,7 @@ import {Menu} from "antd";
 import {observer} from "mobx-react-lite";
 import {useContentNav} from "../../contexts/content-nav-context";
 import { useSharedStore } from "../../stores/shared-store";
+import { goToAnchor } from "../../utils/scroll.utls";
 
 
 interface IDriverContentNav {
@@ -30,8 +31,9 @@ export const DriverContentNav = observer<IDriverContentNav>( ( { className } ) =
 
       // event.preventDefault();
 
-      //   let link = event.target as HTMLLinkElement;
-      //   let elementId = link.href.replace( /(.*)?#/, `` );
+        // let link = event.target as HTMLLinkElement;
+        // let elementId = link.href.replace( /(.*)?#/, `` );
+        // goToAnchor()
       //   let element = document.getElementById( decodeURIComponent( elementId ) ) as HTMLElement;
       //   let clientRect = element.getBoundingClientRect();
       //

www/hooks/content-autoscroll-hook.ts

@@ -5,7 +5,12 @@ import { goToAnchor } from "../utils/scroll.utls";
 
 export function useContentAutoscroll(){
     const router = useRouter();
-
+    useLayoutEffect(()=>{
+        let hash = location.hash.slice( 1 );
+        if ( hash ) {
+            goToAnchor( hash );
+        }
+    },[])
     useEffect(() => {
         function scrollHandler() {
             // if (window.scrollX === 0) {
@@ -24,15 +29,17 @@ export function useContentAutoscroll(){
         }
 
         function startHashChangeHandler() {
-            setTimeout( () => {
-                let hash = location.hash.slice( 1 );
 
+
+            requestAnimationFrame(()=>{
+                let hash = location.hash.slice( 1 );
                 goToAnchor( hash );
-                window.addEventListener( "scroll", scrollHandler );
-            }, 100 );
+            })
+            // window.addEventListener( "scroll", scrollHandler );
         }
 
-        window.addEventListener("scroll", scrollHandler);
+
+        // window.addEventListener("scroll", scrollHandler);
 
 
         router.events.on(`hashChangeStart`, startHashChangeHandler);

www/hooks/use-doc-search.ts

@@ -5,29 +5,29 @@ export const useDocSearch = () => {
     const router = useRouter();
 
 
-    useLayoutEffect(() => {
+    useLayoutEffect( () => {
         // @ts-ignore
-        let ds = docsearch({
+        let ds = docsearch( {
             apiKey: '0260af6591f616d3300bc3b89d75cfd1',
             indexName: 'nauchikus_typescript-definitive-guide',
             inputSelector: '#algolia-search',
             debug: false,
             /// TODO: [refactoring] add types
-            handleSelected: function (input: any, event: any, suggestion: any, datasetNumber: any, context: any) {
-                if (context.selectionMethod === 'click') {
-                    input.setVal('');
+            handleSelected: function ( input: any, event: any, suggestion: any, datasetNumber: any, context: any ) {
+                if ( context.selectionMethod === 'click' ) {
+                    input.setVal( '' );
 
                     let url = suggestion.url;
                     let pattern = `/#gatsby-focus-wrapper`;
 
-                    if (url.endsWith(pattern)) {
-                        url = url.substring(0, url.length - pattern.length);
+                    if ( url.endsWith( pattern ) ) {
+                        url = url.substring( 0, url.length - pattern.length );
                     }
 
                     let origin = `https://typescript-definitive-guide.ru`;
 
 
-                    if (process.env.NODE_ENV === `development`) {
+                    if ( process.env.NODE_ENV === `development` ) {
                         origin = `http://localhost:8000`;
 
                         url = url.replace(
@@ -37,24 +37,24 @@ export const useDocSearch = () => {
                     }
 
 
-                    url = url.replace(origin, ``);
+                    url = url.replace( origin, `` );
 
                     router.push( url );
                 }
             }
-        });
+        } );
 
-        let input = ds.autocomplete[0];
+        let input = ds.autocomplete[ 0 ];
         let autocomplete = ds.autocomplete.autocomplete;
 
         const input_blurHandler = () => {
-            autocomplete.setVal('');
+            autocomplete.setVal( '' );
         };
 
-        input.addEventListener(`blur`, input_blurHandler);
+        input.addEventListener( `blur`, input_blurHandler );
 
         return () => {
-            input.removeEventListener(`blur`, input_blurHandler);
+            input.removeEventListener( `blur`, input_blurHandler );
         };
-    });
+    }, [] );
 }

www/pages/book/chapters/[chapterId].tsx

@@ -2,7 +2,7 @@ import type {GetStaticPaths, GetStaticProps, NextPage} from 'next'
 import Link from 'next/link';
 import Head from "next/head";
 import {ContentSlideLayer, DriverSlideLayer, SlideLayer} from "../../../components/layers/slide-layer/SlideLayer";
-import React, {useEffect, useMemo} from "react";
+import React, { useEffect, useLayoutEffect, useMemo } from "react";
 import {createBox, generateContentSectionIncrementalId, generateIndex} from "../../../utils/string-utils";
 
 
@@ -92,12 +92,12 @@ const Chapters = observer<Chapters>(({pageDescription, urlResolver, sectionInfoA
         contentNavService.update(contentNavData);
     }, [contentNavData]);
 
+
+
     const contentNavStore = useContentNavStore(contentNavService);
 
     useContentAutoscroll();
 
-    // http://localhost:3000/book/chapters/Readonly,Partial,Required,Pick,Record
-
 
     const sections = sectionInfoAll.map(({key, elementId, markdown}) => {
         return (

www/services/Scroll.ts

@@ -43,10 +43,10 @@ export class Scroll {
         Scroll.getClientRectById(Scroll.getCurrentAnchor());
     static scrollToCurrentHash = () => {
         if (Scroll.isHash) {
-            window.scrollTo({
-                left: 0,
-                top: Scroll.isAutoscrollComplete ? pageYOffset - Scroll.offset.offset : pageYOffset
-            });
+            // window.scrollTo({
+            //     left: 0,
+            //     top: Scroll.isAutoscrollComplete ? pageYOffset - Scroll.offset.offset : pageYOffset
+            // });
         }
     }
     static scrollTo = () => {
@@ -55,9 +55,9 @@ export class Scroll {
     static scrollToAnchor = (anchor: string) => {
         let clientRect = Scroll.getClientRectById(anchor);
 
-        window.scrollTo({
-            left: 0,
-            top: clientRect.top + pageYOffset - Scroll.offset.offset
-        });
+        // window.scrollTo({
+        //     left: 0,
+        //     top: clientRect.top + pageYOffset - Scroll.offset.offset
+        // });
     }
-}
+}

www/stores/use-content-active-section-store.ts

@@ -72,4 +72,4 @@ export const useContentActiveSectionStore = (): ContentActiveSectionStore =>{
 
 
     return store;
-}
+}