From 2793d867c3980b069f0ec3b12a76dd6c48212fc9 Mon Sep 17 00:00:00 2001 From: Nikhil Date: Thu, 6 Jun 2024 17:52:57 +0530 Subject: [PATCH 1/4] feat(web): setup extra path to the notifications and onboarding miniguide --- web/src/app.tsx | 2 ++ web/src/layout/Header/DesktopHeader.tsx | 16 ++++++++++++++-- .../layout/Header/navbar/Menu/Settings/index.tsx | 4 ++-- web/src/layout/Header/navbar/index.tsx | 1 + web/src/pages/Home/index.tsx | 11 ++++++++++- 5 files changed, 29 insertions(+), 5 deletions(-) diff --git a/web/src/app.tsx b/web/src/app.tsx index 6bda75e35..1029e1f03 100644 --- a/web/src/app.tsx +++ b/web/src/app.tsx @@ -35,6 +35,8 @@ const App: React.FC = () => { }> } /> + } /> + } /> } /> } /> } /> diff --git a/web/src/layout/Header/DesktopHeader.tsx b/web/src/layout/Header/DesktopHeader.tsx index 0409b87f2..1f8efc3db 100644 --- a/web/src/layout/Header/DesktopHeader.tsx +++ b/web/src/layout/Header/DesktopHeader.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import styled, { css } from "styled-components"; import { useToggle } from "react-use"; @@ -90,6 +90,18 @@ const DesktopHeader = () => { const [isDappListOpen, toggleIsDappListOpen] = useToggle(false); const [isHelpOpen, toggleIsHelpOpen] = useToggle(false); const [isSettingsOpen, toggleIsSettingsOpen] = useToggle(false); + const [initialTab, setInitialTab] = useState(0); + + const initializeNotifications = () => { + const hasNotifications = window.location.hash.includes("#notifications"); + toggleIsSettingsOpen(hasNotifications); + setInitialTab(hasNotifications ? 1 : 0); + }; + + useEffect(() => { + initializeNotifications(); + }, []); + useLockOverlayScroll(isDappListOpen || isHelpOpen || isSettingsOpen); return ( @@ -124,7 +136,7 @@ const DesktopHeader = () => { {isDappListOpen && } {isHelpOpen && } - {isSettingsOpen && } + {isSettingsOpen && } )} diff --git a/web/src/layout/Header/navbar/Menu/Settings/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/index.tsx index fb683cd5f..19d734c5f 100644 --- a/web/src/layout/Header/navbar/Menu/Settings/index.tsx +++ b/web/src/layout/Header/navbar/Menu/Settings/index.tsx @@ -73,8 +73,8 @@ const TABS = [ }, ]; -const Settings: React.FC = ({ toggleIsSettingsOpen }) => { - const [currentTab, setCurrentTab] = useState(0); +const Settings: React.FC = ({ toggleIsSettingsOpen, initialTab }) => { + const [currentTab, setCurrentTab] = useState(initialTab || 0); const containerRef = useRef(null); useClickAway(containerRef, () => toggleIsSettingsOpen()); diff --git a/web/src/layout/Header/navbar/index.tsx b/web/src/layout/Header/navbar/index.tsx index c58742477..0c6fc8a0c 100644 --- a/web/src/layout/Header/navbar/index.tsx +++ b/web/src/layout/Header/navbar/index.tsx @@ -82,6 +82,7 @@ const PopupContainer = styled.div` export interface ISettings { toggleIsSettingsOpen: () => void; + initialTab?: number; } export interface IHelp { diff --git a/web/src/pages/Home/index.tsx b/web/src/pages/Home/index.tsx index 70e69d75d..cc322e4f3 100644 --- a/web/src/pages/Home/index.tsx +++ b/web/src/pages/Home/index.tsx @@ -1,6 +1,8 @@ -import React from "react"; +import React, { useEffect } from "react"; import styled from "styled-components"; +import { useToggle } from "react-use"; + import { HomePageProvider } from "hooks/useHomePageContext"; import { getOneYearAgoTimestamp } from "utils/date"; @@ -8,6 +10,7 @@ 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"; @@ -22,8 +25,14 @@ const Container = styled.div` `; const Home: React.FC = () => { + const [isOnboardingMiniGuidesOpen, toggleIsOnboardingMiniGuidesOpen] = useToggle(false); + useEffect(() => { + toggleIsOnboardingMiniGuidesOpen(window.location.hash.includes("#onboarding")); + }, []); + return ( + {isOnboardingMiniGuidesOpen && } From e3c32fb5020f53a27cdc234208904a9c98f28978 Mon Sep 17 00:00:00 2001 From: Nikhil Date: Thu, 6 Jun 2024 19:10:16 +0530 Subject: [PATCH 2/4] refactor(web): used useLocation hook instead of window object --- web/src/layout/Header/DesktopHeader.tsx | 11 ++++++----- web/src/pages/Home/index.tsx | 8 +++++--- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/web/src/layout/Header/DesktopHeader.tsx b/web/src/layout/Header/DesktopHeader.tsx index 1f8efc3db..81a1c0564 100644 --- a/web/src/layout/Header/DesktopHeader.tsx +++ b/web/src/layout/Header/DesktopHeader.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from "react"; import styled, { css } from "styled-components"; -import { useToggle } from "react-use"; +import { useLocation, useToggle } from "react-use"; import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg"; @@ -91,16 +91,17 @@ const DesktopHeader = () => { const [isHelpOpen, toggleIsHelpOpen] = useToggle(false); const [isSettingsOpen, toggleIsSettingsOpen] = useToggle(false); const [initialTab, setInitialTab] = useState(0); + const location = useLocation(); const initializeNotifications = () => { - const hasNotifications = window.location.hash.includes("#notifications"); - toggleIsSettingsOpen(hasNotifications); - setInitialTab(hasNotifications ? 1 : 0); + const hasNotificationsPath: boolean = location.hash.includes("#notifications"); + toggleIsSettingsOpen(hasNotificationsPath); + setInitialTab(hasNotificationsPath ? 1 : 0); }; useEffect(() => { initializeNotifications(); - }, []); + }, [location.hash]); useLockOverlayScroll(isDappListOpen || isHelpOpen || isSettingsOpen); diff --git a/web/src/pages/Home/index.tsx b/web/src/pages/Home/index.tsx index cc322e4f3..1df14d048 100644 --- a/web/src/pages/Home/index.tsx +++ b/web/src/pages/Home/index.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from "react"; import styled from "styled-components"; -import { useToggle } from "react-use"; +import { useLocation, useToggle } from "react-use"; import { HomePageProvider } from "hooks/useHomePageContext"; import { getOneYearAgoTimestamp } from "utils/date"; @@ -26,9 +26,11 @@ const Container = styled.div` const Home: React.FC = () => { const [isOnboardingMiniGuidesOpen, toggleIsOnboardingMiniGuidesOpen] = useToggle(false); + const location = useLocation(); + useEffect(() => { - toggleIsOnboardingMiniGuidesOpen(window.location.hash.includes("#onboarding")); - }, []); + toggleIsOnboardingMiniGuidesOpen(location.hash.includes("#onboarding")); + }, [location.hash]); return ( From 9a733c74b10e64f164ce9542aaca0c1ddc726755 Mon Sep 17 00:00:00 2001 From: Nikhil Date: Thu, 6 Jun 2024 20:06:45 +0530 Subject: [PATCH 3/4] fix(web): we don't need routes --- web/src/app.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/web/src/app.tsx b/web/src/app.tsx index 1029e1f03..6bda75e35 100644 --- a/web/src/app.tsx +++ b/web/src/app.tsx @@ -35,8 +35,6 @@ const App: React.FC = () => { }> } /> - } /> - } /> } /> } /> } /> From 39a5466612b3233332d4601cfafa51c6f36dd44b Mon Sep 17 00:00:00 2001 From: Nikhil Date: Fri, 7 Jun 2024 17:52:42 +0530 Subject: [PATCH 4/4] fix(web): remove FragmentURL on modal close --- .../MiniGuides/MainStructureTemplate.tsx | 19 +++++++++++++-- web/src/layout/Header/DesktopHeader.tsx | 23 +++++++++++-------- .../Header/navbar/Menu/Settings/index.tsx | 8 ++++++- web/src/pages/Home/index.tsx | 13 +---------- 4 files changed, 39 insertions(+), 24 deletions(-) diff --git a/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx b/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx index 086a7b97c..198a34749 100644 --- a/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx +++ b/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 = ({ 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 = ({ /> - Close + { + onClose(); + removeOnboardingHashPath(); + }} + > + Close + {RightContent} diff --git a/web/src/layout/Header/DesktopHeader.tsx b/web/src/layout/Header/DesktopHeader.tsx index 81a1c0564..1398ffb9f 100644 --- a/web/src/layout/Header/DesktopHeader.tsx +++ b/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(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 && } )} + {isOnboardingMiniGuidesOpen && } ); }; diff --git a/web/src/layout/Header/navbar/Menu/Settings/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/index.tsx index 19d734c5f..ef98e831d 100644 --- a/web/src/layout/Header/navbar/Menu/Settings/index.tsx +++ b/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 = ({ toggleIsSettingsOpen, initialTab }) => { const [currentTab, setCurrentTab] = useState(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 ( <> diff --git a/web/src/pages/Home/index.tsx b/web/src/pages/Home/index.tsx index 1df14d048..70e69d75d 100644 --- a/web/src/pages/Home/index.tsx +++ b/web/src/pages/Home/index.tsx @@ -1,8 +1,6 @@ -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"; @@ -10,7 +8,6 @@ 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 ( - {isOnboardingMiniGuidesOpen && }