From 9ee9890895531df74fa1cb61b6726352e6309fd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andrzej=20Zi=C3=B3=C5=82ek?= Date: Tue, 5 Mar 2024 00:31:59 +0100 Subject: [PATCH] OCT-1405 Lack of back button on project view in patron mode (#39) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Jakub Mikołajczyk --- client/cypress/e2e/patronMode.cy.ts | 10 +++++++++ .../src/components/shared/Layout/Layout.tsx | 22 ++++++++++++------- client/src/components/shared/Layout/types.ts | 3 --- .../src/views/ProposalView/ProposalView.tsx | 22 +++---------------- 4 files changed, 27 insertions(+), 30 deletions(-) diff --git a/client/cypress/e2e/patronMode.cy.ts b/client/cypress/e2e/patronMode.cy.ts index 8dd53630e3..854b0a8ca1 100644 --- a/client/cypress/e2e/patronMode.cy.ts +++ b/client/cypress/e2e/patronMode.cy.ts @@ -708,5 +708,15 @@ Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isDes }); }); }); + + it('when entering project view, button icon changes to chevronLeft', () => { + visitWithLoader(ROOT_ROUTES.proposals.absolute); + cy.get('[data-test^=ProposalsView__ProposalsListItem').first().click(); + cy + .get('[data-test=Navbar__Button--Projects]') + .find('svg') + // HTML tag can't be self-closing in CY. + .should('have.html',''); + }); }); }); diff --git a/client/src/components/shared/Layout/Layout.tsx b/client/src/components/shared/Layout/Layout.tsx index 5bcc87b06e..f5f28668be 100644 --- a/client/src/components/shared/Layout/Layout.tsx +++ b/client/src/components/shared/Layout/Layout.tsx @@ -27,6 +27,7 @@ import useUserTOS from 'hooks/queries/useUserTOS'; import { ROOT_ROUTES } from 'routes/RootRoutes/routes'; import { octant } from 'svg/logo'; import { chevronBottom } from 'svg/misc'; +import { chevronLeft } from 'svg/navigation'; import getDifferenceInWeeks from 'utils/getDifferenceInWeeks'; import getIsPreLaunch from 'utils/getIsPreLaunch'; import getTimeDistance from 'utils/getTimeDistance'; @@ -44,7 +45,6 @@ const Layout: FC = ({ isLoading, isNavigationVisible = true, classNameBody, - navigationTabs = navigationTabsDefault, isAbsoluteHeaderPosition = false, }) => { const { data: isPatronMode } = useIsPatronMode(); @@ -82,7 +82,7 @@ const Layout: FC = ({ const [currentPeriod, setCurrentPeriod] = useState(() => getCurrentPeriod()); const tabsWithIsActive = useMemo(() => { - let tabs = navigationTabs; + let tabs = navigationTabsDefault; if (isPatronMode) { tabs = patronNavigationTabs; @@ -91,12 +91,18 @@ const Layout: FC = ({ tabs = adminNavigationTabs; } - return tabs.map(tab => ({ - ...tab, - isActive: tab.isActive || pathname === tab.to, - isDisabled: isPreLaunch && tab.to !== ROOT_ROUTES.earn.absolute, - })); - }, [isPatronMode, isProjectAdminMode, isPreLaunch, pathname, navigationTabs]); + return tabs.map(tab => { + const isProjectView = + pathname.includes(`${ROOT_ROUTES.proposal.absolute}/`) && + tab.to === ROOT_ROUTES.proposals.absolute; + return { + ...tab, + icon: isProjectView ? chevronLeft : tab.icon, + isActive: tab.isActive || pathname === tab.to || isProjectView, + isDisabled: isPreLaunch && tab.to !== ROOT_ROUTES.earn.absolute, + }; + }); + }, [isPatronMode, isProjectAdminMode, isPreLaunch, pathname]); const isAllocationPeriodIsHighlighted = useMemo(() => { if (isDecisionWindowOpen && timeCurrentAllocationEnd) { diff --git a/client/src/components/shared/Layout/types.ts b/client/src/components/shared/Layout/types.ts index 5e49d65031..81018f5471 100644 --- a/client/src/components/shared/Layout/types.ts +++ b/client/src/components/shared/Layout/types.ts @@ -1,7 +1,5 @@ import { ReactNode } from 'react'; -import { NavigationTab } from 'constants/navigationTabs/types'; - export default interface LayoutProps { children?: ReactNode; classNameBody?: string; @@ -11,5 +9,4 @@ export default interface LayoutProps { isLoading?: boolean; isNavigationVisible?: boolean; navigationBottomSuffix?: ReactNode; - navigationTabs?: NavigationTab[]; } diff --git a/client/src/views/ProposalView/ProposalView.tsx b/client/src/views/ProposalView/ProposalView.tsx index c61bc7d4e8..efb24a460a 100644 --- a/client/src/views/ProposalView/ProposalView.tsx +++ b/client/src/views/ProposalView/ProposalView.tsx @@ -1,6 +1,6 @@ import { AnimatePresence } from 'framer-motion'; import throttle from 'lodash/throttle'; -import React, { ReactElement, useState, useEffect, useMemo } from 'react'; +import React, { ReactElement, useState, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import InfiniteScroll from 'react-infinite-scroller'; import { Navigate, Route, Routes, useParams } from 'react-router-dom'; @@ -9,7 +9,6 @@ import ProposalBackToTopButton from 'components/Proposal/ProposalBackToTopButton import ProposalList from 'components/Proposal/ProposalList'; import Layout from 'components/shared/Layout'; import Loader from 'components/ui/Loader'; -import { navigationTabs as navigationTabsDefault } from 'constants/navigationTabs/navigationTabs'; import useAreCurrentEpochsProjectsHiddenOutsideAllocationWindow from 'hooks/helpers/useAreCurrentEpochsProjectsHiddenOutsideAllocationWindow'; import useCurrentEpoch from 'hooks/queries/useCurrentEpoch'; import useIsDecisionWindowOpen from 'hooks/queries/useIsDecisionWindowOpen'; @@ -19,7 +18,6 @@ import useProposalsIpfsWithRewards, { } from 'hooks/queries/useProposalsIpfsWithRewards'; import { ROOT_ROUTES } from 'routes/RootRoutes/routes'; import toastService from 'services/toastService'; -import { chevronLeft } from 'svg/navigation'; import styles from './ProposalView.module.scss'; @@ -39,16 +37,6 @@ const ProposalView = (): ReactElement => { const { data: matchedProposalRewards } = useMatchedProposalRewards(epoch); const { data: proposalsIpfsWithRewards } = useProposalsIpfsWithRewards(epoch); - const navigationTabs = useMemo(() => { - const navTabs = [...navigationTabsDefault]; - navTabs[0] = { - ...navTabs[0], - icon: chevronLeft, - isActive: true, - }; - return navTabs; - }, []); - const isEpoch1 = currentEpoch === 1; const areMatchedProposalsReady = !!currentEpoch && @@ -130,7 +118,7 @@ const ProposalView = (): ReactElement => { }, [loadedProposals.length, proposalsIpfsWithRewards.length]); if (!initialElement || !areMatchedProposalsReady || proposalsIpfsWithRewards.length === 0) { - return ; + return ; } if ( @@ -151,11 +139,7 @@ const ProposalView = (): ReactElement => { } return ( - +