🎁 feat: Enhance the scroll feature in useCategory hook

hughesgoon · jbee37142 · commit 9b26af96e8e5 · 2022-02-05T18:42:16.000+09:00
Modify the hooks that scroll to tag-container for respond any width
Change DEST_POS to the state value that based on bio.div using forwardRef
diff --git a/src/components/bio/index.jsx b/src/components/bio/index.jsx
@@ -1,17 +1,17 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { StaticQuery, graphql, Link } from 'gatsby'
 import Image from 'gatsby-image'
 
 import './index.scss'
 
-export const Bio = () => (
-  <StaticQuery
+export const Bio = forwardRef((props, ref) => {
+  return <StaticQuery
     query={bioQuery}
     render={data => {
       const { author, social, introduction } = data.site.siteMetadata
 
       return (
-        <div className="bio">
+        <div ref={ref} className="bio">
           <div className="author">
             <div className="author-description">
               <Image
@@ -63,7 +63,7 @@ export const Bio = () => (
       )
     }}
   />
-)
+})
 
 const bioQuery = graphql`
   query BioQuery {
diff --git a/src/hooks/useCategory.js b/src/hooks/useCategory.js
@@ -3,10 +3,11 @@ import qs from 'query-string'
 import { CATEGORY_TYPE } from '../constants'
 import * as ScrollManager from '../utils/scroll'
 
-const DEST_POS = 316
+let DEST_POS
 
-export function useCategory() {
+export function useCategory(DEST) {
   const [category, setCategory] = useState(CATEGORY_TYPE.ALL)
+  DEST_POS = DEST
   const adjustScroll = () => {
     if (window.scrollY > DEST_POS) {
       ScrollManager.go(DEST_POS)
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -1,6 +1,6 @@
 import { graphql } from 'gatsby'
 import _ from 'lodash'
-import React, { useMemo } from 'react'
+import React, { useMemo, useRef, useEffect, useState } from 'react'
 import { Bio } from '../components/bio'
 import { Category } from '../components/category'
 import { Contents } from '../components/contents'
@@ -28,8 +28,14 @@ export default ({ data, location }) => {
     () => _.uniq(posts.map(({ node }) => node.frontmatter.category)),
     []
   )
+  const bioRef = useRef(null)
+  const [DEST, setDEST] = useState(316)
   const [count, countRef, increaseCount] = useRenderedCount()
-  const [category, selectCategory] = useCategory()
+  const [category, selectCategory] = useCategory(DEST)
+
+  useEffect( tabRef => {
+    setDEST(!bioRef.current ? 316 : bioRef.current.getBoundingClientRect().bottom + window.pageYOffset + 24 )
+  }, [bioRef.current])
 
   useIntersectionObserver()
   useScrollEvent(() => {
@@ -47,7 +53,7 @@ export default ({ data, location }) => {
   return (
     <Layout location={location} title={siteMetadata.title}>
       <Head title={HOME_TITLE} keywords={siteMetadata.keywords} />
-      <Bio />
+      <Bio ref={bioRef} />
       <Category
         categories={categories}
         category={category}
