Merge pull request #396 from CommonsBuild/fix/highlight-nav

Fix/highlight nav
givepraise · May 16, 2022 · 58af438 · 58af438
2 parents 5bcb5f7 + cbee89b
commit 58af438
Show file tree

Hide file tree

Showing 16 changed files with 48 additions and 39 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,8 +8,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Added
+- Hightlight active page in Navbar, update page routes to nest under top-level routes
 
 ### Fixed
+- Remove 1s login delay
 
 ## [0.6.0] - 2022-05-09
 

diff --git a/packages/frontend/src/components/periods/ActiveUserQuantificationsMessage.tsx b/packages/frontend/src/components/periods/ActiveUserQuantificationsMessage.tsx
@@ -12,7 +12,7 @@ const QuantifierPeriodMessage = ({
   if (!period?._id) return null;
   return (
     <li key={period._id}>
-      <Link to={`/quantify/period/${period._id}`}>{period.name}</Link>
+      <Link to={`/periods/${period._id}/quantify`}>{period.name}</Link>
     </li>
   );
 };

diff --git a/packages/frontend/src/navigation/AuthenticatedRoutes.tsx b/packages/frontend/src/navigation/AuthenticatedRoutes.tsx
@@ -74,43 +74,45 @@ const AuthRoute = ({ children, ...props }: AuthRouteProps): JSX.Element => {
 const Routes = (): JSX.Element => {
   return (
     <Switch>
-      <Route exact path="/mypraise">
+      <Route path="/mypraise">
         <MyPraisePage />
       </Route>
 
       <AuthRoute roles={[ROLE_ADMIN]} path={'/pool'}>
         <UsersPage />
       </AuthRoute>
 
-      <Route exact path={'/periods'}>
-        <PeriodsPage />
-      </Route>
-
       <AuthRoute roles={[ROLE_ADMIN]} path={'/periods/createupdate'}>
         <PeriodsCreateUpdatePage />
       </AuthRoute>
 
-      <Route exact path="/period/:periodId/receiver/:receiverId">
+      <Route path="/periods/:periodId/receiver/:receiverId">
         <PeriodReceiverSummaryPage />
       </Route>
-      <Route path={'/period/:periodId'}>
-        <PeriodDetailPage />
-      </Route>
-
-      <Route exact path="/praise/:praiseId">
-        <PraiseDetailsPage />
-      </Route>
 
       <AuthRoute
         roles={[ROLE_QUANTIFIER]}
-        path={'/quantify/period/:periodId/receiver/:receiverId'}
+        path={'/periods/:periodId/quantify/receiver/:receiverId'}
       >
         <QuantifyPage />
       </AuthRoute>
-      <AuthRoute roles={[ROLE_QUANTIFIER]} path={'/quantify/period/:periodId'}>
+
+      <AuthRoute roles={[ROLE_QUANTIFIER]} path={'/periods/:periodId/quantify'}>
         <QuantifyPeriodPage />
       </AuthRoute>
 
+      <Route path={'/periods/:periodId'}>
+        <PeriodDetailPage />
+      </Route>
+
+      <Route path={'/periods'}>
+        <PeriodsPage />
+      </Route>
+
+      <Route path="/praise/:praiseId">
+        <PraiseDetailsPage />
+      </Route>
+
       <AuthRoute roles={[ROLE_ADMIN]} path={'/settings'}>
         <SettingsPage />
       </AuthRoute>

diff --git a/packages/frontend/src/navigation/NavItem.tsx b/packages/frontend/src/navigation/NavItem.tsx
@@ -1,6 +1,6 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 
 interface NavProps {
   icon?: IconProp;
@@ -10,9 +10,13 @@ interface NavProps {
 
 const NavItem = ({ icon, description, to }: NavProps): JSX.Element => {
   return (
-    <Link
+    <NavLink
       to={to}
-      className="relative px-4 py-1 cursor-pointer hover:bg-gray-100 mr-[1px] no-underline flex items-center"
+      className={(isActive): string =>
+        `relative px-4 py-1 cursor-pointer mr-[1px] no-underline flex items-center text-black ${
+          isActive ? ' bg-gray-200' : ' hover:bg-gray-100'
+        }`
+      }
       id={to.substring(1) + '-nav-button'}
     >
       {icon && (
@@ -23,7 +27,7 @@ const NavItem = ({ icon, description, to }: NavProps): JSX.Element => {
       <div className="flex-auto inline-block my-1">
         <span>{description}</span>
       </div>
-    </Link>
+    </NavLink>
   );
 };
 

diff --git a/packages/frontend/src/pages/ErrorPage.tsx b/packages/frontend/src/pages/ErrorPage.tsx
@@ -1,15 +1,18 @@
 import { faPrayingHands } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useSetRecoilState } from 'recoil';
+import { ActiveTokenSet } from '@/model/auth';
 
 interface NotFoundProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   error: any;
 }
 
 const ErrorPage = ({ error }: NotFoundProps): JSX.Element => {
+  const setActiveTokenSet = useSetRecoilState(ActiveTokenSet);
+
   const logout = (): void => {
-    localStorage.clear();
-    window.location.href = '/';
+    setActiveTokenSet(undefined);
   };
 
   return (

diff --git a/packages/frontend/src/pages/Login/components/Login.tsx b/packages/frontend/src/pages/Login/components/Login.tsx
@@ -69,10 +69,7 @@ const LoginButton: React.FC = (): ReactElement | null => {
     // 4. Redirect after login success
 
     if (accessToken) {
-      const { from } = location.state || { from: { pathname: '/' } };
-      setTimeout(() => {
-        history.replace(from);
-      }, 1000);
+      history.replace('/');
     }
 
     if (!accessToken && !signatureReceived) {

diff --git a/packages/frontend/src/pages/Periods/Details/PeriodDetailsPage.tsx b/packages/frontend/src/pages/Periods/Details/PeriodDetailsPage.tsx
@@ -113,9 +113,6 @@ const PeriodDetailPage = (): JSX.Element | null => {
         <div className="w-full max-w-3xl praise-box">
           <Suspense fallback="Loading…">
             <Switch>
-              <Route exact path={`${path}`}>
-                <Redirect to={`${url}/receivers`} />
-              </Route>
               <Route path={`${path}/receivers`}>
                 <ReceiverTable />
               </Route>
@@ -128,6 +125,9 @@ const PeriodDetailPage = (): JSX.Element | null => {
                   disabled={period.status !== PeriodStatusType.OPEN || !isAdmin}
                 />
               </Route>
+              <Route path={`${path}`}>
+                <Redirect to={`${url}/receivers`} />
+              </Route>
             </Switch>
           </Suspense>
         </div>

diff --git a/packages/frontend/src/pages/Periods/Details/components/QuantifierMessage.tsx b/packages/frontend/src/pages/Periods/Details/components/QuantifierMessage.tsx
@@ -28,7 +28,7 @@ export const QuantifierMessage = (): JSX.Element | null => {
           <button
             className="block mt-5 praise-button"
             onClick={(): void => {
-              history.push(`/quantify/period/${periodId}`);
+              history.push(`/periods/${periodId}/quantify`);
             }}
           >
             <FontAwesomeIcon icon={faCalculator} size="1x" className="mr-2" />

diff --git a/packages/frontend/src/pages/Periods/Details/components/ReceiverTable.tsx b/packages/frontend/src/pages/Periods/Details/components/ReceiverTable.tsx
@@ -73,7 +73,7 @@ const ReceiverTable = (): JSX.Element | null => {
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleClick = (data: any) => (): void => {
-      history.push(`/period/${periodId}/receiver/${data._id}`);
+      history.push(`/periods/${periodId}/receiver/${data._id}`);
     };
 
     return (
@@ -89,6 +89,7 @@ const ReceiverTable = (): JSX.Element | null => {
               {headerGroup.headers.map((column) => (
                 // eslint-disable-next-line react/jsx-key
                 <th
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
                   className={(column as any).className}
                   {...column.getHeaderProps()}
                 >

diff --git a/packages/frontend/src/pages/Periods/ReceiverSummary/ReceiverSummaryPage.tsx b/packages/frontend/src/pages/Periods/ReceiverSummary/ReceiverSummaryPage.tsx
@@ -46,7 +46,7 @@ const QuantSummaryPeriodReceiverPage = (): JSX.Element => {
   return (
     <>
       <BreadCrumb name={'Receiver summary for period'} icon={faCalendarAlt} />
-      <BackLink to={`/period/${periodId}`} />
+      <BackLink to={`/periods/${periodId}`} />
 
       <React.Suspense fallback="Loading…">
         <PeriodReceiverMessage />

diff --git a/packages/frontend/src/pages/Periods/components/Table.tsx b/packages/frontend/src/pages/Periods/components/Table.tsx
@@ -65,7 +65,7 @@ const PeriodsTable = (): JSX.Element => {
     return <div>Create your first period to get started quantifying.</div>;
 
   const handleClick = (periodId: string) => (): void => {
-    history.push(`/period/${periodId}`);
+    history.push(`/periods/${periodId}/receivers`);
   };
   return (
     <table

diff --git a/packages/frontend/src/pages/PraiseDetails/PraiseDetailsPage.tsx b/packages/frontend/src/pages/PraiseDetails/PraiseDetailsPage.tsx
@@ -17,7 +17,7 @@ const PraiseDetailsPage = (): JSX.Element | null => {
   const period = useRecoilValue(SinglePeriodByDate(praise?.createdAt));
   const backLinkUrl =
     period?._id && praise?.receiver._id
-      ? `/period/${period?._id}/receiver/${praise?.receiver._id}`
+      ? `/periods/${period?._id}/receiver/${praise?.receiver._id}`
       : '/';
 
   const isAdmin = useRecoilValue(HasRole(ROLE_ADMIN));

diff --git a/packages/frontend/src/pages/QuantifyPeriod/QuantifyPeriodPage.tsx b/packages/frontend/src/pages/QuantifyPeriod/QuantifyPeriodPage.tsx
@@ -42,7 +42,7 @@ const QuantifyPeriodPage = (): JSX.Element => {
   return (
     <div className="max-w-2xl mx-auto">
       <BreadCrumb name="Quantify" icon={faCalendarAlt} />
-      <BackLink to={`/period/${periodId}`} />
+      <BackLink to={`/periods/${periodId}`} />
 
       <div className="praise-box">
         <React.Suspense fallback="Loading…">

diff --git a/packages/frontend/src/pages/QuantifyPeriod/components/QuantifyPeriodTable.tsx b/packages/frontend/src/pages/QuantifyPeriod/components/QuantifyPeriodTable.tsx
@@ -89,7 +89,7 @@ const QuantifyPeriodTable = (): JSX.Element => {
 
   const handleClick = (data: QuantifierReceiverData) => () => {
     history.push(
-      `/quantify/period/${data.periodId}/receiver/${data.receiverId}`
+      `/periods/${data.periodId}/quantify/receiver/${data.receiverId}`
     );
   };
   return (

diff --git a/packages/frontend/src/pages/QuantifyPeriodReceiver/QuantifyPeriodReceiverPage.tsx b/packages/frontend/src/pages/QuantifyPeriodReceiver/QuantifyPeriodReceiverPage.tsx
@@ -87,7 +87,7 @@ const QuantifyPeriodReceiverPage = (): JSX.Element => {
       <React.Suspense fallback="Loading…">
         <PeriodBreadCrumb />
       </React.Suspense>
-      <BackLink to={`/quantify/period/${periodId}`} />
+      <BackLink to={`/periods/${periodId}/quantify`} />
 
       <div className="praise-box">
         <React.Suspense fallback="Loading…">

diff --git a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/BackNextLink.tsx b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/BackNextLink.tsx
@@ -39,7 +39,7 @@ export const QuantifyBackNextLink = ({
         {backReceiver && (
           <Link
             replace
-            to={`/quantify/period/${periodId}/receiver/${backReceiver.receiverId}`}
+            to={`/periods/${periodId}/quantify/receiver/${backReceiver.receiverId}`}
           >
             <FontAwesomeIcon icon={faArrowLeft} size="1x" className="mr-2" />
             {usePseudonyms ? (
@@ -57,7 +57,7 @@ export const QuantifyBackNextLink = ({
         {forwardReceiver && (
           <Link
             replace
-            to={`/quantify/period/${periodId}/receiver/${forwardReceiver.receiverId}`}
+            to={`/periods/${periodId}/quantify/receiver/${forwardReceiver.receiverId}`}
           >
             {usePseudonyms ? (
               <UserPseudonym