From 6abd17b77bf9cb1abbaa4a07e724f702707c5ae9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20Loipf=C3=BChrer?= <michael.loipfuehrer@stusta.de>
Date: Fri, 16 Aug 2024 23:52:29 +0200
Subject: [PATCH] fix(web): #209 fix position usages not being updated properly

---
 .../src/screens/groups/TransactionDetail.tsx  |  8 ++--
 frontend/apps/web/src/main.tsx                | 22 +++++------
 .../purchase/TransactionPositions.tsx         | 39 +++++++------------
 .../src/lib/transactions/transactionSlice.ts  | 15 +++----
 4 files changed, 36 insertions(+), 48 deletions(-)

diff --git a/frontend/apps/mobile/src/screens/groups/TransactionDetail.tsx b/frontend/apps/mobile/src/screens/groups/TransactionDetail.tsx
index 22f0e628..6cb86719 100644
--- a/frontend/apps/mobile/src/screens/groups/TransactionDetail.tsx
+++ b/frontend/apps/mobile/src/screens/groups/TransactionDetail.tsx
@@ -5,7 +5,7 @@ import {
     selectCurrentUserPermissions,
     selectTransactionById,
     selectTransactionHasPositions,
-    selectWipTransactionPositions,
+    useWipTransactionPositions,
     wipTransactionUpdated,
 } from "@abrechnung/redux";
 import { TransactionPosition, TransactionValidator } from "@abrechnung/types";
@@ -49,14 +49,12 @@ export const TransactionDetail: React.FC<GroupStackScreenProps<"TransactionDetai
 
     const transaction = useAppSelector((state) =>
         selectTransactionById({ state: selectTransactionSlice(state), groupId, transactionId })
-    );
+    )!;
     const [showPositions, setShowPositions] = React.useState(false);
     const hasPositions = useAppSelector((state) =>
         selectTransactionHasPositions({ state: selectTransactionSlice(state), groupId, transactionId })
     );
-    const positions = useAppSelector((state) =>
-        selectWipTransactionPositions({ state: selectTransactionSlice(state), groupId, transactionId })
-    );
+    const positions = useWipTransactionPositions(transaction);
     const totalPositionValue = positions.reduce((acc, curr) => acc + curr.price, 0);
 
     const permissions = useAppSelector((state) => selectCurrentUserPermissions({ state: state, groupId }));
diff --git a/frontend/apps/web/src/main.tsx b/frontend/apps/web/src/main.tsx
index 160dc5d5..8f27db15 100644
--- a/frontend/apps/web/src/main.tsx
+++ b/frontend/apps/web/src/main.tsx
@@ -10,15 +10,15 @@ import { ConfigProvider } from "./core/config";
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 root.render(
-    // <React.StrictMode>
-    <Provider store={store}>
-        <PersistGate loading={<Loading />} persistor={persistor}>
-            <React.Suspense fallback={<Loading />}>
-                <ConfigProvider>
-                    <App />
-                </ConfigProvider>
-            </React.Suspense>
-        </PersistGate>
-    </Provider>
-    // </React.StrictMode>
+    <React.StrictMode>
+        <Provider store={store}>
+            <PersistGate loading={<Loading />} persistor={persistor}>
+                <React.Suspense fallback={<Loading />}>
+                    <ConfigProvider>
+                        <App />
+                    </ConfigProvider>
+                </React.Suspense>
+            </PersistGate>
+        </Provider>
+    </React.StrictMode>
 );
diff --git a/frontend/apps/web/src/pages/transactions/TransactionDetail/purchase/TransactionPositions.tsx b/frontend/apps/web/src/pages/transactions/TransactionDetail/purchase/TransactionPositions.tsx
index 8aac4dfc..babd4277 100644
--- a/frontend/apps/web/src/pages/transactions/TransactionDetail/purchase/TransactionPositions.tsx
+++ b/frontend/apps/web/src/pages/transactions/TransactionDetail/purchase/TransactionPositions.tsx
@@ -1,7 +1,7 @@
 import { AccountSelect } from "@/components/AccountSelect";
 import { MobilePaper } from "@/components/style/mobile";
 import { useFormatCurrency } from "@/hooks";
-import { RootState, selectAccountSlice, selectTransactionSlice, useAppDispatch, useAppSelector } from "@/store";
+import { selectAccountSlice, selectTransactionSlice, useAppDispatch, useAppSelector } from "@/store";
 import { getAccountSortFunc } from "@abrechnung/core";
 import {
     positionDeleted,
@@ -9,7 +9,7 @@ import {
     selectGroupAccounts,
     selectTransactionBalanceEffect,
     selectTransactionById,
-    selectWipTransactionPositions,
+    useWipTransactionPositions,
     wipPositionAdded,
     wipPositionUpdated,
 } from "@abrechnung/redux";
@@ -28,7 +28,6 @@ import {
     TableRow,
     Typography,
 } from "@mui/material";
-import memoize from "proxy-memoize";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ValidationErrors } from "./types";
@@ -40,24 +39,6 @@ interface TransactionPositionsProps {
     validationErrors?: ValidationErrors;
 }
 
-const selectPositions = memoize(
-    ({ state, groupId, transactionId }: { state: RootState; groupId: number; transactionId: number }) => {
-        const positions = selectWipTransactionPositions({
-            state: selectTransactionSlice(state),
-            groupId,
-            transactionId,
-        });
-        const positionsHaveComplexShares = positions.reduce(
-            (hasComplex, position) =>
-                hasComplex ||
-                (position.communist_shares !== 0 && position.communist_shares !== 1) ||
-                Object.values(position.usages).reduce((nonOne, usage) => nonOne || (usage !== 0 && usage !== 1), false),
-            false
-        );
-        return { positions, positionsHaveComplexShares };
-    }
-);
-
 export const TransactionPositions: React.FC<TransactionPositionsProps> = ({
     groupId,
     transactionId,
@@ -73,9 +54,17 @@ export const TransactionPositions: React.FC<TransactionPositionsProps> = ({
     const transaction = useAppSelector((state) =>
         selectTransactionById({ state: selectTransactionSlice(state), groupId, transactionId })
     )!;
-    const { positions, positionsHaveComplexShares } = useAppSelector((state) =>
-        selectPositions({ state, groupId, transactionId })
-    );
+    const positions = useWipTransactionPositions(transaction);
+    const positionsHaveComplexShares = React.useMemo(() => {
+        return positions.reduce(
+            (hasComplex, position) =>
+                hasComplex ||
+                (position.communist_shares !== 0 && position.communist_shares !== 1) ||
+                Object.values(position.usages).reduce((nonOne, usage) => nonOne || (usage !== 0 && usage !== 1), false),
+            false
+        );
+    }, [positions]);
+
     const transactionBalanceEffect = useAppSelector((state) =>
         selectTransactionBalanceEffect({ state: selectTransactionSlice(state), groupId, transactionId })
     );
@@ -210,7 +199,7 @@ export const TransactionPositions: React.FC<TransactionPositionsProps> = ({
                     </TableHead>
                     <TableBody>
                         {transaction.is_wip
-                            ? positions.map((position, idx) => (
+                            ? positions.map((position) => (
                                   <PositionTableRow
                                       key={position.id}
                                       position={position}
diff --git a/frontend/libs/redux/src/lib/transactions/transactionSlice.ts b/frontend/libs/redux/src/lib/transactions/transactionSlice.ts
index 4c1c4d49..98178506 100644
--- a/frontend/libs/redux/src/lib/transactions/transactionSlice.ts
+++ b/frontend/libs/redux/src/lib/transactions/transactionSlice.ts
@@ -1,3 +1,4 @@
+import * as React from "react";
 import {
     Api,
     NewFile,
@@ -20,6 +21,7 @@ import memoize from "proxy-memoize";
 import { leaveGroup } from "../groups";
 import { IRootState, StateStatus, TransactionSliceState, TransactionState } from "../types";
 import { addEntity, getGroupScopedState, removeEntity } from "../utils";
+import { useSelector } from "react-redux";
 
 export const initializeGroupState = (state: Draft<TransactionSliceState>, groupId: number) => {
     if (state.byGroupId[groupId]) {
@@ -101,17 +103,16 @@ export const selectNextLocalPositionId = memoize((args: { state: TransactionSlic
     return state.nextLocalPositionId;
 });
 
-export const selectWipTransactionPositions = memoize(
-    (args: { state: TransactionSliceState; groupId: number; transactionId: number }): TransactionPosition[] => {
-        const { state, groupId, transactionId } = args;
-        const transaction = selectTransactionByIdInternal({ state, groupId, transactionId });
+export const useWipTransactionPositions = (transaction: Transaction): TransactionPosition[] => {
+    const nextLocalPositionId = useSelector((state: IRootState) => state.transactions.nextLocalPositionId);
+    return React.useMemo(() => {
         const positions =
             transaction?.position_ids.map((id) => transaction.positions[id]).filter((p) => !p.deleted) ?? [];
         if (transaction?.is_wip) {
             return [
                 ...positions,
                 {
-                    id: state.nextLocalPositionId,
+                    id: nextLocalPositionId,
                     name: "",
                     communist_shares: 0,
                     is_changed: false,
@@ -124,8 +125,8 @@ export const selectWipTransactionPositions = memoize(
         } else {
             return positions;
         }
-    }
-);
+    }, [transaction, nextLocalPositionId]);
+};
 
 export const selectTransactionHasPositions = memoize(
     (args: { state: TransactionSliceState; groupId: number; transactionId: number }): boolean => {