Changed to remove sessionStorage

This reverts commit 2476e45735.

packages/desktop-client/src/components/budget/BudgetCategories.jsx

@@ -37,7 +37,6 @@ export const BudgetCategories = memo(
     function onCollapse(value) {
       setCollapsedGroupIdsPref(value);
     }
-
     const [isAddingGroup, setIsAddingGroup] = useState(false);
     const [newCategoryForGroup, setNewCategoryForGroup] = useState(null);
     const items = useMemo(() => {

packages/desktop-client/src/components/budget/BudgetTable.jsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 
 import { useCategories } from '../../hooks/useCategories';
 import { useLocalPref } from '../../hooks/useLocalPref';
@@ -29,12 +30,38 @@ export function BudgetTable(props) {
     onBudgetAction,
   } = props;
 
+  const budgetCategoriesRef = useRef();
+  const scrollableDivRef = useRef();
+  const location = useLocation();
   const { grouped: categoryGroups } = useCategories();
   const [collapsedGroupIds = [], setCollapsedGroupIdsPref] =
     useLocalPref('budget.collapsed');
   const [showHiddenCategories, setShowHiddenCategoriesPef] = useLocalPref(
     'budget.showHiddenCategories',
   );
+
+  const getCurrentScrollPosition = () => {
+    return scrollableDivRef.current?.scrollTop || 0;
+  };
+
+  const onShowActivityWithScroll = (categoryId, month) => {
+    const scrollPosition = getCurrentScrollPosition();
+    onShowActivity(categoryId, month, scrollPosition);
+  };
+
+  useEffect(() => {
+    const savedScrollPosition = location.state?.scrollPosition;
+    
+    if (savedScrollPosition && scrollableDivRef.current) {
+      // Use requestAnimationFrame to ensure the DOM is ready
+      requestAnimationFrame(() => {
+        if (scrollableDivRef.current) {
+          scrollableDivRef.current.scrollTop = savedScrollPosition;
+        }
+      });
+    }
+  }, [location.state?.scrollPosition]);
+
   const [editing, setEditing] = useState(null);
 
   const onEditMonth = (id, month) => {
@@ -201,6 +228,7 @@ export function BudgetTable(props) {
           collapseAllCategories={collapseAllCategories}
         />
         <View
+          id="scrollableDiv"
           style={{
             overflowY: 'scroll',
             overflowAnchor: 'none',
@@ -208,6 +236,7 @@ export function BudgetTable(props) {
             paddingLeft: 5,
             paddingRight: 5,
           }}
+          innerRef={scrollableDivRef}
         >
           <View
             style={{
@@ -228,7 +257,7 @@ export function BudgetTable(props) {
               onReorderCategory={_onReorderCategory}
               onReorderGroup={_onReorderGroup}
               onBudgetAction={onBudgetAction}
-              onShowActivity={onShowActivity}
+              onShowActivity={onShowActivityWithScroll}
             />
           </View>
         </View>

packages/desktop-client/src/components/budget/index.tsx

@@ -276,7 +276,7 @@ function BudgetInner(props: BudgetInnerProps) {
     dispatch(applyBudgetAction(month, type, args));
   };
 
-  const onShowActivity = (categoryId, month) => {
+  const onShowActivity = (categoryId, month, scrollPosition) => {
     const conditions = [
       { field: 'category', op: 'is', value: categoryId, type: 'id' },
       {
@@ -287,6 +287,12 @@ function BudgetInner(props: BudgetInnerProps) {
         type: 'date',
       },
     ];
+    
+    navigate('/budget', {
+      replace: true,
+      state: { scrollPosition }
+    });
+    
     navigate('/accounts', {
       state: {
         goBack: true,

packages/desktop-client/src/components/budget/report/ReportComponents.tsx

@@ -302,7 +302,9 @@ export const CategoryMonth = memo(function CategoryMonth({
       <Field name="spent" width="flex" style={{ textAlign: 'right' }}>
         <span
           data-testid="category-month-spent"
-          onClick={() => onShowActivity(category.id, month)}
+          onClick={() => {
+            onShowActivity(category.id, month);
+          }}
         >
           <CellValue
             binding={reportBudget.catSumAmount(category.id)}

packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx

@@ -295,7 +295,9 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
       <Field name="spent" width="flex" style={{ textAlign: 'right' }}>
         <span
           data-testid="category-month-spent"
-          onClick={() => onShowActivity(category.id, month)}
+          onClick={() => {
+            onShowActivity(category.id, month);
+          }}
         >
           <CellValue
             binding={rolloverBudget.catSumAmount(category.id)}

packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx

@@ -1,5 +1,6 @@
-import React, { memo, useRef } from 'react';
+import React, { memo, useRef, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
+import { useLocation } from 'react-router-dom';
 
 import { AutoTextSize } from 'auto-text-size';
 import memoizeOne from 'memoize-one';
@@ -328,6 +329,8 @@ const ExpenseCategory = memo(function ExpenseCategory({
   onBudgetAction,
   show3Cols,
   showBudgetedCol,
+  setScrollPosition,
+  onShowActivityWithScroll,
 }) {
   const opacity = blank ? 0 : 1;
 
@@ -396,10 +399,6 @@ const ExpenseCategory = memo(function ExpenseCategory({
 
   const listItemRef = useRef();
   const format = useFormat();
-  const navigate = useNavigate();
-  const onShowActivity = () => {
-    navigate(`/categories/${category.id}?month=${month}`);
-  };
 
   const sidebarColumnWidth = getColumnWidth({ show3Cols, isSidebar: true });
   const columnWidth = getColumnWidth({ show3Cols });
@@ -517,7 +516,9 @@ const ExpenseCategory = memo(function ExpenseCategory({
             binding={spent}
             getStyle={makeAmountGrey}
             type="financial"
-            onClick={onShowActivity}
+            onClick={() => {
+              onShowActivityWithScroll(category.id, month);
+            }}
             formatter={value => (
               <Button
                 type="bare"
@@ -1235,6 +1236,8 @@ const ExpenseGroup = memo(function ExpenseGroup({
   showHiddenCategories,
   collapsed,
   onToggleCollapse,
+  setScrollPosition,
+  onShowActivityWithScroll,
 }) {
   function editable(content) {
     if (!editMode) {
@@ -1347,6 +1350,8 @@ const ExpenseGroup = memo(function ExpenseGroup({
               month={month}
               // onReorder={onReorderCategory}
               onBudgetAction={onBudgetAction}
+              setScrollPosition={setScrollPosition}
+              onShowActivityWithScroll={onShowActivityWithScroll}
             />
           );
         })}
@@ -1458,6 +1463,8 @@ function BudgetGroups({
   showBudgetedCol,
   show3Cols,
   showHiddenCategories,
+  setScrollPosition,
+  onShowActivityWithScroll,
 }) {
   const separateGroups = memoizeOne(groups => {
     return {
@@ -1507,6 +1514,8 @@ function BudgetGroups({
               showHiddenCategories={showHiddenCategories}
               collapsed={collapsedGroupIds.includes(group.id)}
               onToggleCollapse={onToggleCollapse}
+              setScrollPosition={setScrollPosition}
+              onShowActivityWithScroll={onShowActivityWithScroll}
             />
           );
         })}
@@ -1557,6 +1566,8 @@ export function BudgetTable({
 }) {
   const { width } = useResponsive();
   const show3Cols = width >= 360;
+  const location = useLocation();
+  const navigate = useNavigate();
 
   // let editMode = false; // neuter editMode -- sorry, not rewriting drag-n-drop right now
 
@@ -1564,6 +1575,44 @@ export function BudgetTable({
     'mobile.showSpentColumn',
   );
 
+  const getCurrentScrollPosition = () => {
+    const scrollableDiv = document.getElementById('scrollableDiv');
+    return scrollableDiv?.scrollTop || 0;
+  };
+
+  const setScrollPosition = () => {
+    const scrollPosition = getCurrentScrollPosition();
+    
+    navigate('/budget', {
+      replace: true,
+      state: { scrollPosition }
+    });
+  };
+
+  const onShowActivityWithScroll = (categoryId, month) => {
+    const scrollPosition = getCurrentScrollPosition();
+    
+    navigate('/budget', {
+      replace: true,
+      state: { scrollPosition }
+    });
+    
+    navigate(`/categories/${categoryId}?month=${month}`);
+  };
+
+  useEffect(() => {
+    const savedScrollPosition = location.state?.scrollPosition;
+    
+    if (savedScrollPosition) {
+      const scrollableDiv = document.getElementById('scrollableDiv');
+      if (scrollableDiv) {
+        requestAnimationFrame(() => {
+          scrollableDiv.scrollTop = savedScrollPosition;
+        });
+      }
+    }
+  }, [location.state?.scrollPosition]);
+
   function toggleSpentColumn() {
     setShowSpentColumnPref(!showSpentColumn);
   }
@@ -1623,9 +1672,12 @@ export function BudgetTable({
       <PullToRefresh onRefresh={onRefresh}>
         <View
           data-testid="budget-table"
+          id="scrollableDiv"
           style={{
             backgroundColor: theme.pageBackground,
             paddingBottom: MOBILE_NAV_HEIGHT,
+            overflowY: 'auto',
+            height: '100%',
           }}
         >
           <BudgetGroups
@@ -1647,6 +1699,8 @@ export function BudgetTable({
             onReorderCategory={onReorderCategory}
             onReorderGroup={onReorderGroup}
             onBudgetAction={onBudgetAction}
+            setScrollPosition={setScrollPosition}
+            onShowActivityWithScroll={onShowActivityWithScroll}
           />
         </View>
       </PullToRefresh>

upcoming-release-notes/2859.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [Crazypkr]
+---
+
+Add ability to return back to previous scroll location on Budget Table when clicking spent column to view transactions