fix(expenses): fix navigation between categories

also stop scrolling to top when navigating Closes #400
opencollective · May 17, 2018 · 886eaaa · 886eaaa
1 parent d6eb9ed
commit 886eaaa
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/src/components/Expense.js b/src/components/Expense.js
@@ -262,7 +262,11 @@ class Expense extends React.Component {
                 <span className="collective"><Link route={`/${expense.collective.slug}`}>{expense.collective.slug}</Link> (balance: {formatCurrency(expense.collective.stats.balance, expense.collective.currency)}) | </span>
               }
                 <span className="status">{intl.formatMessage(this.messages[status])}</span> |
-                <span className="metaItem"><Link route={`/${expense.collective.slug}/expenses/${expense.category}`}>{capitalize(expense.category)}</Link></span>
+                <span className="metaItem">
+                  <Link route="expenses" params={{collectiveSlug: expense.collective.slug, filter: 'categories', value: expense.category }} scroll={false}>
+                    {capitalize(expense.category)}
+                  </Link>
+                </span>
                 { editable && LoggedInUser && LoggedInUser.canEditExpense(expense) &&
                 <span> | <a className="toggleEditExpense" onClick={this.toggleEdit}>{intl.formatMessage(this.messages[`${mode === 'edit' ? 'cancelEdit' : 'edit'}`])}</a></span>
               }

diff --git a/src/components/ExpensesStatsWithData.js b/src/components/ExpensesStatsWithData.js
@@ -47,6 +47,7 @@ class ExpensesStatsWithData extends React.Component {
             font-size: 1.2rem;
           }
         `}</style>
+
         <h1><FormattedMessage id="collective.stats.balance.title" defaultMessage="Available balance" /></h1>
         <Currency value={Collective.stats.balance} currency={Collective.currency} precision={2} />
         <h1><FormattedMessage id="expenses.stats.distribution.title" defaultMessage="Distribution" /></h1>
@@ -55,7 +56,7 @@ class ExpensesStatsWithData extends React.Component {
           <ol>
             { topExpenses.byCategory.map(category => (
               <li key={category.category}>
-                <Link route={`/${slug}/expenses/categories/${category.category}`}>{category.category}</Link> (<Currency value={category.totalExpenses} currency={Collective.currency} />)
+                <Link route={`/${slug}/expenses/categories/${category.category}`} scroll={false}>{category.category}</Link> (<Currency value={category.totalExpenses} currency={Collective.currency} />)
               </li>
           ))}
           </ol>
@@ -65,7 +66,7 @@ class ExpensesStatsWithData extends React.Component {
           <ol>
             { topExpenses.byCollective.map(recipientCollective => (
               <li key={recipientCollective.slug}>
-                <Link route={`/${slug}/expenses/recipients/${recipientCollective.slug}`}>{recipientCollective.name}</Link> (<Currency value={-recipientCollective.totalExpenses} currency={Collective.currency} />)
+                <Link route={`/${slug}/expenses/recipients/${recipientCollective.slug}`} scroll={false}>{recipientCollective.name}</Link> (<Currency value={-recipientCollective.totalExpenses} currency={Collective.currency} />)
               </li>
           ))}
           </ol>

diff --git a/src/components/Link.js b/src/components/Link.js
@@ -33,7 +33,7 @@ class Link extends React.Component {
       const path = routeFromRouter ? routeFromRouter.getAs(params) : `https://opencollective.com${route}`;
       return (<a href={path} title={title} target="_top" className={className} {...otherProps}>{children}</a>);
     } else {
-      return (<router.Link {...pick(this.props, ['route', 'params', 'href'])}><a className={className} title={title}>{children}</a></router.Link>);
+      return (<router.Link {...pick(this.props, ['route', 'params', 'href', 'scroll'])}><a className={className} title={title}>{children}</a></router.Link>);
     }
   }
 }

diff --git a/src/components/SectionTitle.js b/src/components/SectionTitle.js
@@ -92,11 +92,12 @@ class SectionTitle extends React.Component {
             }
           }
         `}</style>
+
         <div className="content">
           <div className="title">
             <h1>{title}</h1>
             { action &&
-              <Link route={action.href} className="action">{action.label}</Link>
+              <Link route={action.href} className="action" scroll={false}>{action.label}</Link>
             }
           </div>
           { subtitle && <div className="subtitle">{subtitle}</div> }