From bfc6eaef5ae7b17ac88b7d1160911fcfdd4c9f72 Mon Sep 17 00:00:00 2001
From: Sagar Bera <86586277+sboy99@users.noreply.github.com>
Date: Mon, 30 Jan 2023 01:59:05 +0530
Subject: [PATCH] fix: active links are persistent and does not get reset on
 reload (#58)

* Sidebar active file highlight issue fixed on reload
---
 src/components/guidespage/SubLinks.tsx |  1 -
 src/context/DocumentationContext.tsx   |  8 +-------
 src/layouts/DocumentationLayout.tsx    |  3 ++-
 src/pages/guides/[...guide].tsx        | 17 +++++++++++++++--
 4 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/guidespage/SubLinks.tsx b/src/components/guidespage/SubLinks.tsx
index c2f74b7..03ec3cd 100644
--- a/src/components/guidespage/SubLinks.tsx
+++ b/src/components/guidespage/SubLinks.tsx
@@ -11,7 +11,6 @@ type SubLinksProps = {
 
 const SubLinks: FC<SubLinksProps> = ({ fileList, onLinkClick }) => {
   const { activeLink, setActiveLink } = useDocumentationContext();
-  console.log(activeLink);
 
   fileList = [
     ...fileList.filter((file) => file.name === 'welcome'),
diff --git a/src/context/DocumentationContext.tsx b/src/context/DocumentationContext.tsx
index dff250b..b191504 100644
--- a/src/context/DocumentationContext.tsx
+++ b/src/context/DocumentationContext.tsx
@@ -7,7 +7,6 @@ import {
   SetStateAction,
   createContext,
   useContext,
-  useEffect,
   useState,
 } from 'react';
 
@@ -36,12 +35,7 @@ type DocumentationProps = {
 // Context Provider
 const DocumentationProvider: FC<DocumentationProps> = ({ children }) => {
   const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
-  const [activeLink, setActiveLink] = useState<PostFile['link']>(``);
-
-  useEffect(() => {
-    setActiveLink(links[2].to);
-    return () => setActiveLink(``);
-  }, []);
+  const [activeLink, setActiveLink] = useState<PostFile['link']>(links[2].to);
 
   // Functions...
   function openSidebar() {
diff --git a/src/layouts/DocumentationLayout.tsx b/src/layouts/DocumentationLayout.tsx
index 469f7b5..acb0b90 100644
--- a/src/layouts/DocumentationLayout.tsx
+++ b/src/layouts/DocumentationLayout.tsx
@@ -44,7 +44,8 @@ const DocumentationLayout: FC<DocumentationLayoutProps> = ({
                   {width < 1024 && <DocList mobile data={menu} />}
                   <BreadCrumb dirName={meta.dirName} fileName={meta.fileName} />
                 </div>
-                <a href={meta.edit}>
+                {/* edit on github */}
+                <a href={meta.edit} target="_blank" rel="noreferrer">
                   <ToolTip tip="Edit on Github" direction="button">
                     <DocEditIcon className="h-6 w-6" />
                   </ToolTip>
diff --git a/src/pages/guides/[...guide].tsx b/src/pages/guides/[...guide].tsx
index 705875f..3fa280f 100644
--- a/src/pages/guides/[...guide].tsx
+++ b/src/pages/guides/[...guide].tsx
@@ -1,5 +1,6 @@
 import mdxComponents from '@/components/mdxcomponents';
 import TypoComp from '@/components/utilities/TypoComponent';
+import { useDocumentationContext } from '@/context/DocumentationContext';
 import Container from '@/layouts/Container';
 import DocumentationLayout from '@/layouts/DocumentationLayout';
 import {
@@ -10,12 +11,22 @@ import {
 import type { FolderStructure, Post } from '@/types/client/FileSystem';
 import type { GetStaticPaths, GetStaticProps, NextPage } from 'next';
 import { MDXRemote } from 'next-mdx-remote';
+import { useEffect } from 'react';
 
 type DocsProps = Post & {
   menu: FolderStructure;
+  activeLink: string;
 };
 
-const Guides: NextPage<DocsProps> = ({ menu, meta, source }) => {
+const Guides: NextPage<DocsProps> = ({ activeLink, menu, meta, source }) => {
+  const { setActiveLink } = useDocumentationContext();
+
+  useEffect(() => {
+    setActiveLink(`/guides/${activeLink}`);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeLink]);
+
   return (
     <DocumentationLayout menu={menu} meta={meta} className="text-skin-base">
       <Container className="relative py-4">
@@ -44,13 +55,15 @@ export const getStaticProps: GetStaticProps<DocsProps> = async ({ params }) => {
     const menu = await getDocumentsMenu();
 
     const { guide } = params as { guide: string[] };
-    const { meta, source } = await getContentsFromSlug(guide.join('/'));
+    const activeLink = guide.join('/');
+    const { meta, source } = await getContentsFromSlug(activeLink);
 
     return {
       props: {
         meta,
         source,
         menu,
+        activeLink,
       },
     };
   } catch (error) {