fix(web): remove FragmentURL on modal close

Author: nikhilverma360

web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx

@@ -1,6 +1,7 @@
-import React, { Dispatch, SetStateAction, useRef } from "react";
+import React, { Dispatch, SetStateAction, useCallback, useRef } from "react";
 import styled, { css } from "styled-components";
 
+import { useLocation, useNavigate } from "react-router-dom";
 import { useClickAway } from "react-use";
 import BookOpenIcon from "tsx:assets/svgs/icons/book-open.svg";
 
@@ -164,9 +165,16 @@ const Template: React.FC<ITemplate> = ({
   isVisible,
 }) => {
   const containerRef = useRef(null);
+  const location = useLocation();
+  const navigate = useNavigate();
+  const removeOnboardingHashPath = useCallback(() => {
+    if (isOnboarding && location.hash.includes("#onboarding")) navigate("#", { replace: true });
+  }, [location.hash, navigate, isOnboarding]);
+
   useClickAway(containerRef, () => {
     if (canClose) {
       onClose();
+      removeOnboardingHashPath();
     }
   });
 
@@ -196,7 +204,14 @@ const Template: React.FC<ITemplate> = ({
           />
         </LeftContainer>
         <RightContainer>
-          <Close onClick={onClose}>Close</Close>
+          <Close
+            onClick={() => {
+              onClose();
+              removeOnboardingHashPath();
+            }}
+          >
+            Close
+          </Close>
           {RightContent}
         </RightContainer>
       </Container>

web/src/layout/Header/DesktopHeader.tsx

@@ -1,7 +1,8 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import styled, { css } from "styled-components";
 
-import { useLocation, useToggle } from "react-use";
+import { useLocation } from "react-router-dom";
+import { useToggle } from "react-use";
 
 import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
 
@@ -13,6 +14,7 @@ import { responsiveSize } from "styles/responsiveSize";
 import ConnectWallet from "components/ConnectWallet";
 import LightButton from "components/LightButton";
 import { Overlay } from "components/Overlay";
+import Onboarding from "components/Popup/MiniGuides/Onboarding";
 
 import Logo from "./Logo";
 import DappList from "./navbar/DappList";
@@ -86,22 +88,24 @@ const PopupContainer = styled.div`
   z-index: 30;
 `;
 
-const DesktopHeader = () => {
+const DesktopHeader: React.FC = () => {
   const [isDappListOpen, toggleIsDappListOpen] = useToggle(false);
   const [isHelpOpen, toggleIsHelpOpen] = useToggle(false);
   const [isSettingsOpen, toggleIsSettingsOpen] = useToggle(false);
+  const [isOnboardingMiniGuidesOpen, toggleIsOnboardingMiniGuidesOpen] = useToggle(false);
   const [initialTab, setInitialTab] = useState<number>(0);
   const location = useLocation();
 
-  const initializeNotifications = () => {
-    const hasNotificationsPath: boolean = location.hash.includes("#notifications");
+  const initializeFragmentURL = useCallback(() => {
+    const hash = location.hash;
+    const hasOnboardingPath = hash.includes("#onboarding");
+    const hasNotificationsPath = hash.includes("#notifications");
+    toggleIsOnboardingMiniGuidesOpen(hasOnboardingPath);
     toggleIsSettingsOpen(hasNotificationsPath);
     setInitialTab(hasNotificationsPath ? 1 : 0);
-  };
+  }, [location.hash, toggleIsSettingsOpen, toggleIsOnboardingMiniGuidesOpen]);
 
-  useEffect(() => {
-    initializeNotifications();
-  }, [location.hash]);
+  useEffect(initializeFragmentURL, [initializeFragmentURL]);
 
   useLockOverlayScroll(isDappListOpen || isHelpOpen || isSettingsOpen);
 
@@ -140,6 +144,7 @@ const DesktopHeader = () => {
           {isSettingsOpen && <Settings {...{ toggleIsSettingsOpen, isSettingsOpen, initialTab }} />}
         </PopupContainer>
       )}
+      {isOnboardingMiniGuidesOpen && <Onboarding toggleMiniGuide={toggleIsOnboardingMiniGuidesOpen} />}
     </>
   );
 };

web/src/layout/Header/navbar/Menu/Settings/index.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from "react";
 import styled, { css } from "styled-components";
 
+import { useLocation, useNavigate } from "react-router-dom";
 import { useClickAway } from "react-use";
 
 import { Tabs } from "@kleros/ui-components-library";
@@ -76,7 +77,12 @@ const TABS = [
 const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen, initialTab }) => {
   const [currentTab, setCurrentTab] = useState<number>(initialTab || 0);
   const containerRef = useRef(null);
-  useClickAway(containerRef, () => toggleIsSettingsOpen());
+  const location = useLocation();
+  const navigate = useNavigate();
+  useClickAway(containerRef, () => {
+    toggleIsSettingsOpen();
+    if (location.hash.includes("#notifications")) navigate("#", { replace: true });
+  });
 
   return (
     <>

web/src/pages/Home/index.tsx

@@ -1,16 +1,13 @@
-import React, { useEffect } from "react";
+import React from "react";
 import styled from "styled-components";
 
-import { useLocation, useToggle } from "react-use";
-
 import { HomePageProvider } from "hooks/useHomePageContext";
 import { getOneYearAgoTimestamp } from "utils/date";
 
 import { responsiveSize } from "styles/responsiveSize";
 
 import HeroImage from "components/HeroImage";
 import LatestCases from "components/LatestCases";
-import Onboarding from "components/Popup/MiniGuides/Onboarding";
 
 import Community from "./Community";
 import CourtOverview from "./CourtOverview";
@@ -25,16 +22,8 @@ const Container = styled.div`
 `;
 
 const Home: React.FC = () => {
-  const [isOnboardingMiniGuidesOpen, toggleIsOnboardingMiniGuidesOpen] = useToggle(false);
-  const location = useLocation();
-
-  useEffect(() => {
-    toggleIsOnboardingMiniGuidesOpen(location.hash.includes("#onboarding"));
-  }, [location.hash]);
-
   return (
     <HomePageProvider timeframe={getOneYearAgoTimestamp()}>
-      {isOnboardingMiniGuidesOpen && <Onboarding toggleMiniGuide={toggleIsOnboardingMiniGuidesOpen} />}
       <HeroImage />
       <Container>
         <CourtOverview />