From 2800184cfea62386743e55d3a5938b3b70da4d35 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Wed, 24 May 2023 11:29:12 +0300
Subject: [PATCH] Components/Output: set active key after calculation results

---
 apps/web/Components/Output/index.jsx | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/apps/web/Components/Output/index.jsx b/apps/web/Components/Output/index.jsx
index 406f946..9e6ff98 100644
--- a/apps/web/Components/Output/index.jsx
+++ b/apps/web/Components/Output/index.jsx
@@ -5,6 +5,7 @@ import Background from '@/Components/Layout/Background';
 import { useStore } from '@/stores/hooks';
 import { min } from '@/styles/mq';
 import { observer } from 'mobx-react-lite';
+import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Badge, Tabs } from 'ui/elements';
 
@@ -46,12 +47,27 @@ const Wrapper = styled(Background)`
   }
 `;
 
-function Output() {
+const Output = observer(() => {
+  const { $results } = useStore();
+  const [activeKey, setActiveKey] = useState(undefined);
+
+  useEffect(() => {
+    if ($results.payments.length > 0) {
+      setActiveKey('payments-table');
+    }
+  }, [$results.payments.length]);
+
   return (
     <Wrapper>
-      <Tabs items={items} />
+      <Tabs
+        items={items}
+        activeKey={activeKey}
+        onChange={(key) => {
+          setActiveKey(key);
+        }}
+      />
     </Wrapper>
   );
-}
+});
 
 export default Output;