From 15cb1e861a4a67d79caf0173bf6c9ce3bf40c440 Mon Sep 17 00:00:00 2001
From: NicolaLS <nicolaleonardo.susca@gmail.com>
Date: Wed, 5 Jun 2024 13:47:38 -0600
Subject: [PATCH] frontend: transform aopp.tsx to func. component

---
 frontends/web/src/components/aopp/aopp.tsx | 31 +++++++---------------
 1 file changed, 10 insertions(+), 21 deletions(-)

diff --git a/frontends/web/src/components/aopp/aopp.tsx b/frontends/web/src/components/aopp/aopp.tsx
index 562fac387a..09738e06ae 100644
--- a/frontends/web/src/components/aopp/aopp.tsx
+++ b/frontends/web/src/components/aopp/aopp.tsx
@@ -45,31 +45,20 @@ export const Aopp = () => {
   const [accountCode, setAccountCode] = useState<accountAPI.AccountCode>('');
   const [aopp, setAopp] = useState<aoppAPI.Aopp>();
 
-
-  const setAccountCodeDefault = (aopp: aoppAPI.Aopp | undefined) => {
-    if (aopp === undefined || aopp.state !== 'choosing-account') {
-      return;
-    }
-    if (aopp.accounts.length) {
+  const [prevAopp, setPrevAopp] = useState(aopp);
+  if (aopp !== prevAopp) {
+    setPrevAopp(aopp);
+    if (aopp?.state === 'choosing-account'
+      && aopp.accounts.length
+      && (prevAopp?.state !== 'choosing-account' || !equal(aopp.accounts, prevAopp?.accounts))) {
       setAccountCode(aopp.accounts[0].code);
     }
-  };
+  }
 
   useEffect(() => {
-    setAccountCodeDefault(aopp);
-    const unsubscribe = aoppAPI.subscribeAOPP((new_aopp: aoppAPI.Aopp) => {
-      if (new_aopp?.state === 'choosing-account'
-        && (
-          aopp?.state !== 'choosing-account'
-          || !equal(new_aopp.accounts, aopp?.accounts)
-        )) {
-        setAccountCodeDefault(new_aopp);
-      }
-      setAopp(new_aopp);
-    });
-    aoppAPI.getAOPP().then(aopp => setAopp(aopp));
-    return unsubscribe;
-  }, [aopp]);
+    aoppAPI.getAOPP().then(setAopp);
+    return aoppAPI.subscribeAOPP(setAopp);
+  }, []);
 
   const chooseAccount = (e: React.SyntheticEvent) => {
     if (accountCode) {