feat(resources): open current path on page load

src/LocationProvider.tsx

@@ -1,9 +1,14 @@
 import { WindowLocation } from "@reach/router"
 import React, { FC, PropsWithChildren, useMemo } from "react"
 
+function appendSlashToPath(path: string): string {
+  return path.endsWith("/") ? path : `${path}/`
+}
+
 export interface ILocationContextInterface {
   location: WindowLocation | void
   isHome: boolean
+  isMatchingPath: (path: string) => boolean
 }
 
 interface ILocationProviderProps {
@@ -21,6 +26,11 @@ export const LocationProvider: FC<
     () => ({
       location,
       isHome: location ? location.pathname === "/" : false,
+      isMatchingPath: (path: string) => {
+        return location
+          ? appendSlashToPath(location.pathname).startsWith(path)
+          : false
+      },
     }),
     [location]
   )

src/components/ResourcesSidebar/index.tsx

@@ -10,6 +10,7 @@ import { ThemeToggler } from "../ThemeToggler"
 import useSidebar from "./../../hooks/useSidebar"
 import * as SC from "./styles"
 import useBuildTree from "./useBuildTree"
+import useMatchingPath from "./useMatchingPath"
 
 const ALL_RESOURCES = graphql`
   query {
@@ -49,6 +50,10 @@ function plantTree(item: IFileOrFolder, index?: number, firstLevel?: boolean) {
 function Folder({ item }: { item: IFolder }) {
   const [collapsed, setCollapse] = useState(true)
 
+  useMatchingPath(item.path, () => {
+    setCollapse(false)
+  })
+
   function toggleCollapse() {
     setCollapse(prevState => !prevState)
   }
@@ -66,6 +71,11 @@ function Folder({ item }: { item: IFolder }) {
 const FirstLevelFolder = memo(
   ({ item, index }: { item: IFolder; index: number }) => {
     const { current, setCurrent } = useSidebar()
+
+    useMatchingPath(item.path, () => {
+      setCurrent(index)
+    })
+
     const collapsed = current !== index
 
     return (

src/components/ResourcesSidebar/useMatchingPath.tsx

@@ -0,0 +1,12 @@
+import { useEffect } from "react"
+import useLocation from "../../hooks/useLocation"
+
+export default function useMatchingPath(path: string, callback: () => void) {
+  const { isMatchingPath } = useLocation()
+
+  useEffect(() => {
+    if (isMatchingPath(path)) {
+      callback()
+    }
+  }, [])
+}