From 952136039bd495dfc4d3797d3b3c07413c52c21a Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Thu, 7 Sep 2023 22:06:50 -0700
Subject: [PATCH] Functional mobile components

---
 .../components/budget/MobileBudgetTable.js    | 918 +++++++++---------
 1 file changed, 442 insertions(+), 476 deletions(-)

diff --git a/packages/desktop-client/src/components/budget/MobileBudgetTable.js b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
index 758fb9355b8..4016d961976 100644
--- a/packages/desktop-client/src/components/budget/MobileBudgetTable.js
+++ b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
@@ -1,4 +1,4 @@
-import React, { Component, PureComponent, useState } from 'react';
+import React, { memo, useState } from 'react';
 // import {
 //   RectButton,
 //   PanGestureHandler,
@@ -93,19 +93,17 @@ function Saved({ projected }) {
   );
 }
 
-function BudgetCell(props) {
-  const {
-    name,
-    binding,
-    editing,
-    style,
-    textStyle,
-    categoryId,
-    month,
-    onBudgetAction,
-    onEdit,
-  } = props;
-
+function BudgetCell({
+  name,
+  binding,
+  editing,
+  style,
+  textStyle,
+  categoryId,
+  month,
+  onBudgetAction,
+  onEdit,
+}) {
   let sheetValue = useSheetValue(binding);
 
   function updateBudgetAmount(amount) {
@@ -235,308 +233,279 @@ function BudgetCategoryPreview({ name, pending, style }) {
   );
 }
 
-class BudgetCategory extends PureComponent {
-  constructor(props) {
-    super(props);
+const BudgetCategory = memo(function BudgetCategory({
+  category,
+  editing,
+  index,
+  // gestures,
+  editMode,
+  blank,
+  style,
+  month,
+  onEdit,
+  onBudgetAction,
+}) {
+  // let opacity = new Animated.Value(editMode || blank ? 0 : 1);
+  let opacity = editMode || blank ? 0 : 1;
 
-    let { editMode, blank } = props;
-    // this.opacity = new Animated.Value(editMode || blank ? 0 : 1);
-    this.opacity = editMode || blank ? 0 : 1;
-  }
+  // useEffect(() => {
+  //   if (editing && ACTScrollViewManager) {
+  //     ACTScrollViewManager.setFocused(findNodeHandle(container.current));
+  //   }
+  // }, [editing]);
 
-  //   componentDidUpdate(prevProps) {
-  //     if (prevProps.editing !== this.props.editing) {
-  //       if (this.props.editing && ACTScrollViewManager) {
-  //         ACTScrollViewManager.setFocused(findNodeHandle(this.container));
-  //       }
-  //     }
+  // useEffect(() => {
+  //   Animated.timing(this.opacity, {
+  //     toValue: this.props.editMode ? 0 : 1,
+  //     duration: 200,
+  //     easing: Easing.inOut(Easing.ease),
+  //   }).start();
+  // }, [editMode]);
 
-  //     if (prevProps.editMode !== this.props.editMode) {
-  //       Animated.timing(this.opacity, {
-  //         toValue: this.props.editMode ? 0 : 1,
-  //         duration: 200,
-  //         easing: Easing.inOut(Easing.ease)
-  //       }).start();
-  //     }
-  //   }
+  let budgeted = rolloverBudget.catBudgeted(category.id);
+  let balance = rolloverBudget.catBalance(category.id);
 
-  render() {
-    let {
-      category,
-      editing,
-      index,
-      // gestures,
-      // editMode,
-      style,
-      month,
-      onEdit,
-      onBudgetAction,
-    } = this.props;
-
-    let budgeted = rolloverBudget.catBudgeted(category.id);
-    let balance = rolloverBudget.catBalance(category.id);
-
-    let content = !category.hidden && (
-      <ListItem
-        // ref={el => (this.container = el)}
+  let content = !category.hidden && (
+    <ListItem
+      // ref={el => (container.current = el)}
+      style={{
+        backgroundColor: editing ? colors.p11 : 'transparent',
+        borderBottomWidth: 0,
+        borderTopWidth: index > 0 ? 1 : 0,
+        ...style,
+      }}
+      data-testid="row"
+    >
+      <View style={{ flex: 1 }}>
+        <Text style={styles.smallText} data-testid="category-name">
+          {category.name}
+        </Text>
+      </View>
+      {/* <Animated.View
         style={{
-          backgroundColor: editing ? colors.p11 : 'transparent',
-          borderBottomWidth: 0,
-          borderTopWidth: index > 0 ? 1 : 0,
-          ...style,
+          flexDirection: 'row',
+          alignItems: 'center',
+          opacity: opacity
+        }}
+      > */}
+      <View
+        style={{
+          alignItems: 'center',
+          flexDirection: 'row',
+          opacity: opacity,
         }}
-        data-testid="row"
       >
-        <View style={{ flex: 1 }}>
-          <Text style={styles.smallText} data-testid="category-name">
-            {category.name}
-          </Text>
-        </View>
-        {/* <Animated.View
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            opacity: this.opacity
-          }}
-        > */}
-        <View
+        <BudgetCell
+          name="budgeted"
+          binding={budgeted}
+          editing={editing}
+          style={{ width: 90 }}
+          textStyle={{ ...styles.smallText, textAlign: 'right' }}
+          categoryId={category.id}
+          month={month}
+          onBudgetAction={onBudgetAction}
+          onEdit={onEdit}
+        />
+        <CellValue
+          name="balance"
+          binding={balance}
           style={{
-            alignItems: 'center',
-            flexDirection: 'row',
-            opacity: this.opacity,
+            ...styles.smallText,
+            width: 90,
+            textAlign: 'right',
           }}
-        >
-          <BudgetCell
-            name="budgeted"
-            binding={budgeted}
-            editing={editing}
-            style={{ width: 90 }}
-            textStyle={{ ...styles.smallText, textAlign: 'right' }}
-            categoryId={category.id}
-            month={month}
-            onBudgetAction={onBudgetAction}
-            onEdit={onEdit}
-          />
-          <CellValue
-            name="balance"
-            binding={balance}
-            style={{
-              ...styles.smallText,
-              width: 90,
-              textAlign: 'right',
-            }}
-            getStyle={value => value < 0 && { color: colors.r4 }}
-            type="financial"
-          />
-        </View>
-        {/* </Animated.View> */}
-      </ListItem>
-    );
-
-    return <View>{content}</View>;
-
-    // <Draggable
-    //   id={category.id}
-    //   type="category"
-    //   preview={({ pending, style }) => (
-    //     <BudgetCategoryPreview
-    //       name={category.name}
-    //       pending={pending}
-    //       style={style}
-    //     />
-    //   )}
-    //   gestures={gestures}
-    // >
-    //   <Droppable
-    //     type="category"
-    //     getActiveStatus={(x, y, { layout }, { id }) => {
-    //       let pos = (y - layout.y) / layout.height;
-    //       return pos < 0.5 ? 'top' : 'bottom';
-    //     }}
-    //     onDrop={(id, type, droppable, status) =>
-    //       this.props.onReorder(id.replace('category:', ''), {
-    //         aroundCategory: {
-    //           id: category.id,
-    //           position: status
-    //         }
-    //       })
-    //     }
-    //   >
-    //     {() => content}
-    //   </Droppable>
-    // </Draggable>
-  }
-}
-
-class TotalsRow extends PureComponent {
-  constructor(props) {
-    super(props);
-
-    let { editMode, blank } = props;
-    // this.animation = new Animated.Value(editMode || blank ? 0 : 1);
-    this.opacity = editMode || blank ? 0 : 1;
-  }
+          getStyle={value => value < 0 && { color: colors.r4 }}
+          type="financial"
+        />
+      </View>
+      {/* </Animated.View> */}
+    </ListItem>
+  );
 
-  //   componentDidUpdate(prevProps) {
-  //     if (prevProps.editMode !== this.props.editMode) {
-  //       Animated.timing(this.animation, {
-  //         toValue: this.props.editMode ? 0 : 1,
-  //         duration: 200,
-  //         easing: Easing.inOut(Easing.ease)
-  //       }).start();
+  return <View>{content}</View>;
+
+  // <Draggable
+  //   id={category.id}
+  //   type="category"
+  //   preview={({ pending, style }) => (
+  //     <BudgetCategoryPreview
+  //       name={category.name}
+  //       pending={pending}
+  //       style={style}
+  //     />
+  //   )}
+  //   gestures={gestures}
+  // >
+  //   <Droppable
+  //     type="category"
+  //     getActiveStatus={(x, y, { layout }, { id }) => {
+  //       let pos = (y - layout.y) / layout.height;
+  //       return pos < 0.5 ? 'top' : 'bottom';
+  //     }}
+  //     onDrop={(id, type, droppable, status) =>
+  //       props.onReorder(id.replace('category:', ''), {
+  //         aroundCategory: {
+  //           id: category.id,
+  //           position: status
+  //         }
+  //       })
   //     }
-  //   }
-
-  render() {
-    let { group, editMode, onAddCategory } = this.props;
-
-    let content = (
-      <ListItem
+  //   >
+  //     {() => content}
+  //   </Droppable>
+  // </Draggable>
+});
+
+const TotalsRow = memo(function TotalsRow({
+  group,
+  editMode,
+  blank,
+  onAddCategory,
+}) {
+  // useEffect(() => {
+  //   Animated.timing(this.animation, {
+  //     toValue: this.props.editMode ? 0 : 1,
+  //     duration: 200,
+  //     easing: Easing.inOut(Easing.ease),
+  //   }).start();
+  // }, [editMode]);
+
+  // let animation = new Animated.Value(editMode || blank ? 0 : 1);
+  let opacity = editMode || blank ? 0 : 1;
+
+  let content = (
+    <ListItem
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: colors.n11,
+      }}
+      data-testid="totals"
+    >
+      <View style={{ flex: 1 }}>
+        <Text
+          style={{ ...styles.smallText, fontWeight: '500' }}
+          data-testid="name"
+        >
+          {group.name}
+        </Text>
+      </View>
+      {/* <Animated.View
         style={{
           flexDirection: 'row',
           alignItems: 'center',
-          backgroundColor: colors.n11,
+          opacity: animation
+        }}
+      > */}
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          opacity: opacity,
         }}
-        data-testid="totals"
       >
-        <View style={{ flex: 1 }}>
-          <Text
-            style={{ ...styles.smallText, fontWeight: '500' }}
-            data-testid="name"
-          >
-            {group.name}
-          </Text>
-        </View>
-        {/* <Animated.View
+        <CellValue
+          binding={rolloverBudget.groupBudgeted(group.id)}
           style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            opacity: this.animation
+            ...styles.smallText,
+            width: 90,
+            fontWeight: '500',
+            textAlign: 'right',
           }}
-        > */}
-        <View
+          type="financial"
+        />
+        <CellValue
+          binding={rolloverBudget.groupBalance(group.id)}
           style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            opacity: this.opacity,
+            ...styles.smallText,
+            width: 90,
+            fontWeight: '500',
+            textAlign: 'right',
           }}
-        >
-          <CellValue
-            binding={rolloverBudget.groupBudgeted(group.id)}
-            style={{
-              ...styles.smallText,
-              width: 90,
-              fontWeight: '500',
-              textAlign: 'right',
-            }}
-            type="financial"
-          />
-          <CellValue
-            binding={rolloverBudget.groupBalance(group.id)}
-            style={{
-              ...styles.smallText,
-              width: 90,
-              fontWeight: '500',
-              textAlign: 'right',
-            }}
-            type="financial"
-          />
+          type="financial"
+        />
+      </View>
+      {/* </Animated.View> */}
+
+      {editMode && (
+        //   <Animated.View
+        //     style={{
+        //       flexDirection: 'row',
+        //       alignItems: 'center',
+        //       opacity: opacity,
+        //       position: 'absolute',
+        //       top: 0,
+        //       bottom: 0,
+        //       right: animation.interpolate({
+        //         inputRange: [0, 1],
+        //         outputRange: [5, -30]
+        //       })
+        //     }}
+        //   >
+        <View>
+          <Button
+            onClick={() => onAddCategory(group.id)}
+            style={{ padding: 10 }}
+          >
+            <Add width={15} height={15} />
+          </Button>
         </View>
-        {/* </Animated.View> */}
-
-        {editMode && (
-          //   <Animated.View
-          //     style={{
-          //       flexDirection: 'row',
-          //       alignItems: 'center',
-          //       opacity: this.opacity,
-          //       position: 'absolute',
-          //       top: 0,
-          //       bottom: 0,
-          //       right: this.animation.interpolate({
-          //         inputRange: [0, 1],
-          //         outputRange: [5, -30]
-          //       })
-          //     }}
-          //   >
-          <View>
-            <Button
-              onClick={() => onAddCategory(group.id)}
-              style={{ padding: 10 }}
-            >
-              <Add width={15} height={15} />
-            </Button>
-          </View>
-          //   </Animated.View>
-        )}
-      </ListItem>
-    );
-
-    if (!editMode) {
-      return content;
-    }
+        //   </Animated.View>
+      )}
+    </ListItem>
+  );
 
+  if (!editMode) {
     return content;
-    // <Droppable
-    //   type="category"
-    //   getActiveStatus={(x, y, { layout }, { id }) => {
-    //     return 'bottom';
-    //   }}
-    //   onDrop={(id, type, droppable, status) =>
-    //     this.props.onReorderCategory(id, { inGroup: group.id })
-    //   }
-    // >
-    //   {() => content}
-    // </Droppable>
   }
-}
 
-class IncomeCategory extends PureComponent {
-  render() {
-    const {
-      name,
-      budget,
-      hidden,
-      balance,
-      style,
-      nameTextStyle,
-      amountTextStyle,
-    } = this.props;
-    if (hidden) {
-      return null;
-    }
-    return (
-      <ListItem
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          padding: 10,
-          backgroundColor: 'transparent',
-          ...style,
-        }}
-      >
-        <View style={{ flex: 1 }}>
-          <Text
-            style={{ ...styles.smallText, ...nameTextStyle }}
-            data-testid="name"
-          >
-            {name}
-          </Text>
-        </View>
-        {budget && (
-          <CellValue
-            binding={budget}
-            style={{
-              ...styles.smallText,
-              width: 90,
-              textAlign: 'right',
-              ...amountTextStyle,
-            }}
-            type="financial"
-          />
-        )}
+  return content;
+  // <Droppable
+  //   type="category"
+  //   getActiveStatus={(x, y, { layout }, { id }) => {
+  //     return 'bottom';
+  //   }}
+  //   onDrop={(id, type, droppable, status) =>
+  //     props.onReorderCategory(id, { inGroup: group.id })
+  //   }
+  // >
+  //   {() => content}
+  // </Droppable>
+});
+
+const IncomeCategory = memo(function IncomeCategory({
+  name,
+  budget,
+  hidden,
+  balance,
+  style,
+  nameTextStyle,
+  amountTextStyle,
+}) {
+  if (hidden) {
+    return null;
+  }
+  return (
+    <ListItem
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 10,
+        backgroundColor: 'transparent',
+        ...style,
+      }}
+    >
+      <View style={{ flex: 1 }}>
+        <Text
+          style={{ ...styles.smallText, ...nameTextStyle }}
+          data-testid="name"
+        >
+          {name}
+        </Text>
+      </View>
+      {budget && (
         <CellValue
-          binding={balance}
+          binding={budget}
           style={{
             ...styles.smallText,
             width: 90,
@@ -545,10 +514,20 @@ class IncomeCategory extends PureComponent {
           }}
           type="financial"
         />
-      </ListItem>
-    );
-  }
-}
+      )}
+      <CellValue
+        binding={balance}
+        style={{
+          ...styles.smallText,
+          width: 90,
+          textAlign: 'right',
+          ...amountTextStyle,
+        }}
+        type="financial"
+      />
+    </ListItem>
+  );
+});
 
 // export function BudgetAccessoryView() {
 //   let emitter = useContext(AmountAccessoryContext);
@@ -589,206 +568,193 @@ class IncomeCategory extends PureComponent {
 //   );
 // }
 
-class BudgetGroup extends PureComponent {
-  render() {
-    const {
-      group,
-      editingId,
-      editMode,
-      // gestures,
-      month,
-      onEditCategory,
-      // onReorderCategory,
-      // onReorderGroup,
-      onAddCategory,
-      onBudgetAction,
-    } = this.props;
-
-    function editable(content) {
-      if (!editMode) {
-        return content;
-      }
-
+const BudgetGroup = memo(function BudgetGroup({
+  group,
+  editingId,
+  editMode,
+  // gestures,
+  month,
+  onEditCategory,
+  // onReorderCategory,
+  // onReorderGroup,
+  onAddCategory,
+  onBudgetAction,
+}) {
+  function editable(content) {
+    if (!editMode) {
       return content;
-      // <Draggable
-      //   id={group.id}
-      //   type="group"
-      //   preview={({ pending, style }) => (
-      //     <BudgetGroupPreview group={group} pending={pending} style={style} />
-      //   )}
-      //   gestures={gestures}
-      // >
-      //   <Droppable
-      //     type="group"
-      //     getActiveStatus={(x, y, { layout }, { id }) => {
-      //       let pos = (y - layout.y) / layout.height;
-      //       return pos < 0.5 ? 'top' : 'bottom';
-      //     }}
-      //     onDrop={(id, type, droppable, status) => {
-      //       onReorderGroup(id, group.id, status);
-      //     }}
-      //   >
-      //     {() => content}
-      //   </Droppable>
-      // </Draggable>
     }
-    if (!group.hidden) {
-      return editable(
-        <Card
-          style={{
-            marginTop: 7,
-            marginBottom: 7,
-          }}
-        >
-          <TotalsRow
-            group={group}
-            budgeted={rolloverBudget.groupBudgeted(group.id)}
-            balance={rolloverBudget.groupBalance(group.id)}
-            editMode={editMode}
-            onAddCategory={onAddCategory}
-            // onReorderCategory={onReorderCategory}
-          />
 
-          {group.categories.map((category, index) => {
-            const editing = editingId === category.id;
-            return (
-              <BudgetCategory
-                key={category.id}
-                index={index}
-                category={category}
-                editing={editing}
-                editMode={editMode}
-                // gestures={gestures}
-                month={month}
-                onEdit={onEditCategory}
-                // onReorder={onReorderCategory}
-                onBudgetAction={onBudgetAction}
-              />
-            );
-          })}
-        </Card>,
-      );
-    } else {
-      return null;
-    }
+    return content;
+    // <Draggable
+    //   id={group.id}
+    //   type="group"
+    //   preview={({ pending, style }) => (
+    //     <BudgetGroupPreview group={group} pending={pending} style={style} />
+    //   )}
+    //   gestures={gestures}
+    // >
+    //   <Droppable
+    //     type="group"
+    //     getActiveStatus={(x, y, { layout }, { id }) => {
+    //       let pos = (y - layout.y) / layout.height;
+    //       return pos < 0.5 ? 'top' : 'bottom';
+    //     }}
+    //     onDrop={(id, type, droppable, status) => {
+    //       onReorderGroup(id, group.id, status);
+    //     }}
+    //   >
+    //     {() => content}
+    //   </Droppable>
+    // </Draggable>
   }
-}
 
-class IncomeBudgetGroup extends Component {
-  render() {
-    const { type, group } = this.props;
-    return (
-      <View>
-        <View
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'flex-end',
-            marginTop: 50,
-            marginBottom: 5,
-            marginRight: 14,
-          }}
-        >
-          {type === 'report' && (
-            <Label title="BUDGETED" style={{ width: 90 }} />
-          )}
-          <Label title="RECEIVED" style={{ width: 90 }} />
-        </View>
+  if (group.hidden) {
+    return null;
+  }
+
+  return editable(
+    <Card
+      style={{
+        marginTop: 7,
+        marginBottom: 7,
+      }}
+    >
+      <TotalsRow
+        group={group}
+        budgeted={rolloverBudget.groupBudgeted(group.id)}
+        balance={rolloverBudget.groupBalance(group.id)}
+        editMode={editMode}
+        onAddCategory={onAddCategory}
+        // onReorderCategory={onReorderCategory}
+      />
 
-        <Card style={{ marginTop: 0 }}>
-          <IncomeCategory
-            name={group.name}
-            budget={
-              type === 'report' ? reportBudget.groupBudgeted(group.id) : null
-            }
-            balance={
-              type === 'report'
-                ? reportBudget.groupSumAmount(group.id)
-                : rolloverBudget.groupSumAmount(group.id)
-            }
-            nameTextStyle={{ fontWeight: '500' }}
-            amountTextStyle={{ fontWeight: '500' }}
-            style={{ backgroundColor: colors.n11 }}
+      {group.categories.map((category, index) => {
+        const editing = editingId === category.id;
+        return (
+          <BudgetCategory
+            key={category.id}
+            index={index}
+            category={category}
+            editing={editing}
+            editMode={editMode}
+            // gestures={gestures}
+            month={month}
+            onEdit={onEditCategory}
+            // onReorder={onReorderCategory}
+            onBudgetAction={onBudgetAction}
           />
+        );
+      })}
+    </Card>,
+  );
+});
 
-          {group.categories.map((category, index) => {
-            return (
-              <IncomeCategory
-                key={category.id}
-                type={type}
-                name={category.name}
-                hidden={category.hidden}
-                budget={
-                  type === 'report'
-                    ? reportBudget.catBudgeted(category.id)
-                    : null
-                }
-                balance={
-                  type === 'report'
-                    ? reportBudget.catSumAmount(category.id)
-                    : rolloverBudget.catSumAmount(category.id)
-                }
-                index={index}
-              />
-            );
-          })}
-        </Card>
+function IncomeBudgetGroup({ type, group }) {
+  return (
+    <View>
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+          marginTop: 50,
+          marginBottom: 5,
+          marginRight: 14,
+        }}
+      >
+        {type === 'report' && <Label title="BUDGETED" style={{ width: 90 }} />}
+        <Label title="RECEIVED" style={{ width: 90 }} />
       </View>
-    );
-  }
+
+      <Card style={{ marginTop: 0 }}>
+        <IncomeCategory
+          name="Income"
+          budget={
+            type === 'report' ? reportBudget.groupBudgeted(group.id) : null
+          }
+          balance={
+            type === 'report'
+              ? reportBudget.groupSumAmount(group.id)
+              : rolloverBudget.groupSumAmount(group.id)
+          }
+          nameTextStyle={{ fontWeight: '500' }}
+          amountTextStyle={{ fontWeight: '500' }}
+          style={{ backgroundColor: colors.n11 }}
+        />
+
+        {group.categories.map((category, index) => {
+          return (
+            <IncomeCategory
+              key={category.id}
+              type={type}
+              name={category.name}
+              hidden={category.hidden}
+              budget={
+                type === 'report' ? reportBudget.catBudgeted(category.id) : null
+              }
+              balance={
+                type === 'report'
+                  ? reportBudget.catSumAmount(category.id)
+                  : rolloverBudget.catSumAmount(category.id)
+              }
+              index={index}
+            />
+          );
+        })}
+      </Card>
+    </View>
+  );
 }
 
-class BudgetGroups extends Component {
-  getGroups = memoizeOne(groups => {
+function BudgetGroups({
+  type,
+  categoryGroups,
+  editingId,
+  editMode,
+  gestures,
+  month,
+  onEditCategory,
+  onAddCategory,
+  onReorderCategory,
+  onReorderGroup,
+  onBudgetAction,
+}) {
+  const getGroups = memoizeOne(groups => {
     return {
       incomeGroup: groups.find(group => group.is_income),
       expenseGroups: groups.filter(group => !group.is_income),
     };
   });
 
-  render() {
-    const {
-      type,
-      categoryGroups,
-      editingId,
-      editMode,
-      gestures,
-      month,
-      onEditCategory,
-      onAddCategory,
-      onReorderCategory,
-      onReorderGroup,
-      onBudgetAction,
-    } = this.props;
-    const { incomeGroup, expenseGroups } = this.getGroups(categoryGroups);
-
-    return (
-      <View
-        data-testid="budget-groups"
-        style={{ flex: '1 0 auto', overflowY: 'auto', paddingBottom: 15 }}
-      >
-        {expenseGroups.map(group => {
-          return (
-            <BudgetGroup
-              key={group.id}
-              group={group}
-              editingId={editingId}
-              editMode={editMode}
-              gestures={gestures}
-              month={month}
-              onEditCategory={onEditCategory}
-              onAddCategory={onAddCategory}
-              onReorderCategory={onReorderCategory}
-              onReorderGroup={onReorderGroup}
-              onBudgetAction={onBudgetAction}
-            />
-          );
-        })}
+  const { incomeGroup, expenseGroups } = getGroups(categoryGroups);
 
-        {incomeGroup && <IncomeBudgetGroup type={type} group={incomeGroup} />}
-      </View>
-    );
-  }
+  return (
+    <View
+      data-testid="budget-groups"
+      style={{ flex: '1 0 auto', overflowY: 'auto', paddingBottom: 15 }}
+    >
+      {expenseGroups.map(group => {
+        return (
+          <BudgetGroup
+            key={group.id}
+            group={group}
+            editingId={editingId}
+            editMode={editMode}
+            gestures={gestures}
+            month={month}
+            onEditCategory={onEditCategory}
+            onAddCategory={onAddCategory}
+            onReorderCategory={onReorderCategory}
+            onReorderGroup={onReorderGroup}
+            onBudgetAction={onBudgetAction}
+          />
+        );
+      })}
+
+      {incomeGroup && <IncomeBudgetGroup type={type} group={incomeGroup} />}
+    </View>
+  );
 }
 
 export function BudgetTable(props) {