OCT-1405 Lack of back button on project view in patron mode (#39)

Co-authored-by: Jakub Mikołajczyk <[email protected]>

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','<path stroke="#CDD1CD" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.515 24.485 10.029 16l8.486-8.485"></path>');
+    });
   });
 });

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<LayoutProps> = ({
   isLoading,
   isNavigationVisible = true,
   classNameBody,
-  navigationTabs = navigationTabsDefault,
   isAbsoluteHeaderPosition = false,
 }) => {
   const { data: isPatronMode } = useIsPatronMode();
@@ -82,7 +82,7 @@ const Layout: FC<LayoutProps> = ({
   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<LayoutProps> = ({
       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) {

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[];
 }

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 <Layout isLoading navigationTabs={navigationTabs} />;
+    return <Layout isLoading />;
   }
 
   if (
@@ -151,11 +139,7 @@ const ProposalView = (): ReactElement => {
   }
 
   return (
-    <Layout
-      classNameBody={styles.mainLayoutBody}
-      dataTest="ProposalView"
-      navigationTabs={navigationTabs}
-    >
+    <Layout classNameBody={styles.mainLayoutBody} dataTest="ProposalView">
       <InfiniteScroll
         hasMore={loadedProposals?.length !== proposalsIpfsWithRewards?.length}
         initialLoad