fix(on-this-page): close on this page when user clicks a heading

vtexdocs · Aug 2, 2022 · 8f5bc78 · 8f5bc78
1 parent d229bd3
commit 8f5bc78
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 8 deletions.
diff --git a/src/components/on-this-page/index.tsx b/src/components/on-this-page/index.tsx
@@ -1,19 +1,23 @@
-import { useState } from 'react'
+import { useContext } from 'react'
 import { Box, Flex, Text } from '@vtex/brand-ui'
 import AnimateHeight from 'react-animate-height'
 
+import { APIGuideContext } from 'utils/contexts/api-guide'
+
 import MenuIcon from 'components/icons/menu-icon'
 import CloseIcon from 'components/icons/close-icon'
 
-import styles from './styles'
 import TableOfContents from 'components/table-of-contents'
 
+import styles from './styles'
+
 const OnThisPage = () => {
-  const [open, setOpen] = useState(false)
+  const { onThisPageOpenStatus, setOnThisPageOpenStatus } =
+    useContext(APIGuideContext)
 
   return (
     <Flex sx={styles.container}>
-      <AnimateHeight duration={300} height={open ? 'auto' : 0}>
+      <AnimateHeight duration={300} height={onThisPageOpenStatus ? 'auto' : 0}>
         <Box sx={styles.contentContainer}>
           <Text sx={styles.onThisPageTitle}>On this page</Text>
           <Box>
@@ -24,11 +28,15 @@ const OnThisPage = () => {
 
       <Flex
         sx={styles.buttonContainer}
-        onClick={() => setOpen((open) => !open)}
+        onClick={() => setOnThisPageOpenStatus((open) => !open)}
       >
-        <Text sx={styles.title(open)}>On this page</Text>
+        <Text sx={styles.title(onThisPageOpenStatus)}>On this page</Text>
         <Box sx={styles.iconContainer}>
-          {!open ? <MenuIcon size={32} /> : <CloseIcon size={32} />}
+          {!onThisPageOpenStatus ? (
+            <MenuIcon size={32} />
+          ) : (
+            <CloseIcon size={32} />
+          )}
         </Box>
       </Flex>
     </Flex>

diff --git a/src/components/table-of-contents/index.tsx b/src/components/table-of-contents/index.tsx
@@ -17,7 +17,8 @@ export interface Item extends SubItem {
 }
 
 const TableOfContents = () => {
-  const { headings, activeItem, setActiveItem } = useContext(APIGuideContext)
+  const { headings, activeItem, setActiveItem, setOnThisPageOpenStatus } =
+    useContext(APIGuideContext)
 
   const Item = ({
     title,
@@ -34,6 +35,7 @@ const TableOfContents = () => {
       <Link href={`#${slug}`}>
         <a
           onClick={() => {
+            setOnThisPageOpenStatus(false)
             setActiveItem(({ item }) => ({
               item: level === 1 ? slug : item,
               subItem: level === 1 ? '' : slug,

diff --git a/src/utils/contexts/api-guide.tsx b/src/utils/contexts/api-guide.tsx
@@ -11,7 +11,9 @@ type ActiveItem = {
 type ContextType = {
   headings: Item[]
   activeItem: ActiveItem
+  onThisPageOpenStatus: boolean
   setActiveItem: Dispatch<SetStateAction<ActiveItem>>
+  setOnThisPageOpenStatus: Dispatch<SetStateAction<boolean>>
   goToPreviousItem: () => void
   goToPreviousSubItem: () => void
 }
@@ -22,7 +24,9 @@ export const APIGuideContext = createContext<ContextType>({
     item: '',
     subItem: '',
   },
+  onThisPageOpenStatus: false,
   setActiveItem: () => undefined,
+  setOnThisPageOpenStatus: () => undefined,
   goToPreviousItem: () => undefined,
   goToPreviousSubItem: () => undefined,
 })
@@ -32,6 +36,7 @@ interface Props {
 }
 
 const APIGuideContextProvider: React.FC<Props> = ({ children, headings }) => {
+  const [onThisPageOpenStatus, setOnThisPageOpenStatus] = useState(false)
   const [activeItem, setActiveItem] = useState<ActiveItem>({
     item: '',
     subItem: '',
@@ -76,7 +81,9 @@ const APIGuideContextProvider: React.FC<Props> = ({ children, headings }) => {
       value={{
         headings,
         activeItem,
+        onThisPageOpenStatus,
         setActiveItem,
+        setOnThisPageOpenStatus,
         goToPreviousItem,
         goToPreviousSubItem,
       }}