fix(webapp): Switch between uncategorized transactions tabs

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsUncategorizeFilter.tsx

@@ -1,6 +1,9 @@
 // @ts-nocheck
 import styled from 'styled-components';
 import { Tag } from '@blueprintjs/core';
+import { useAppQueryString } from '@/hooks';
+import { useUncontrolled } from '@/hooks/useUncontrolled';
+import { Group } from '@/components';
 
 const Root = styled.div`
   display: flex;
@@ -23,15 +26,56 @@ const FilterTag = styled(Tag)`
 `;
 
 export function AccountTransactionsUncategorizeFilter() {
+  const [locationQuery, setLocationQuery] = useAppQueryString();
+
+  const handleTabsChange = (value) => {
+    setLocationQuery({ uncategorizedFilter: value });
+  };
+
+  return (
+    <Group position={'apart'}>
+      <SegmentedTabs
+        options={[
+          { value: 'all', label: 'All' },
+          { value: 'recognized', label: 'Recognized' },
+        ]}
+        value={locationQuery?.uncategorizedFilter || 'all'}
+        onValueChange={handleTabsChange}
+      />
+      <SegmentedTabs
+        options={[{ value: 'excluded', label: 'Excluded' }]}
+        value={locationQuery?.uncategorizedFilter || 'all'}
+        onValueChange={handleTabsChange}
+      />
+    </Group>
+  );
+}
+
+interface SegmentedTabs {
+  options: Array<{ label: string; value: string }>;
+  initialValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+}
+
+function SegmentedTabs({ options, initialValue, value, onValueChange }) {
+  const [_value, handleChange] = useUncontrolled({
+    initialValue,
+    value,
+    onChange: onValueChange,
+  });
   return (
     <Root>
-      <FilterTag round interactive>
+      {options.map((option) => (
-        All <strong>(2)</strong>
+        <FilterTag
-      </FilterTag>
+          round
-
+          interactive
-      <FilterTag round minimal interactive>
+          onClick={() => handleChange(option.value)}
-        Recognized <strong>(0)</strong>
+          minimal={option.value !== _value}
-      </FilterTag>
+        >
+          {option.label}
+        </FilterTag>
+      ))}
     </Root>
   );
 }

packages/webapp/src/containers/CashFlow/AccountTransactions/AllTransactionsUncategorized.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { useEffect } from 'react';
+import { useEffect, lazy } from 'react';
 import styled from 'styled-components';
 import * as R from 'ramda';
 
@@ -7,29 +7,16 @@ import '@/style/pages/CashFlow/AccountTransactions/List.scss';
 
 import { AccountTransactionsUncategorizeFilter } from './AccountTransactionsUncategorizeFilter';
 import { UncategorizedTransactionsFilterProvider } from './AccountUncategorizedTransactionsFilterProvider';
-import { RecognizedTransactionsTableBoot } from './RecognizedTransactions/RecognizedTransactionsTableBoot';
-import { RecognizedTransactionsTable } from './RecognizedTransactions/RecognizedTransactionsTable';
 import {
   WithBankingActionsProps,
   withBankingActions,
 } from '../withBankingActions';
-import { AccountUncategorizedTransactionsBoot } from './AllTransactionsUncategorizedBoot';
+import { useAppQueryString } from '@/hooks';
-import AccountTransactionsUncategorizedTable from './AccountTransactionsUncategorizedTable';
-import { ExcludedBankTransactionsTableBoot } from './ExcludedTransactions/ExcludedTransactionsTableBoot';
-import { ExcludedTransactionsTable } from './ExcludedTransactions/ExcludedTransactionsTable';
 
 const Box = styled.div`
   margin: 30px 15px;
 `;
 
-const CashflowTransactionsTableCard = styled.div`
-  border: 2px solid #f0f0f0;
-  border-radius: 10px;
-  padding: 30px 18px;
-  background: #fff;
-  flex: 0 1;
-`;
-
 interface AllTransactionsUncategorizedProps extends WithBankingActionsProps {}
 
 function AllTransactionsUncategorizedRoot({
@@ -47,27 +34,45 @@ function AllTransactionsUncategorizedRoot({
     <UncategorizedTransactionsFilterProvider>
       <Box>
         <AccountTransactionsUncategorizeFilter />
-
+        <AccountTransactionsSwitcher />
-        <ExcludedBankTransactionsTableBoot>
-          <CashflowTransactionsTableCard>
-            <ExcludedTransactionsTable />
-          </CashflowTransactionsTableCard>
-        </ExcludedBankTransactionsTableBoot>
-
-        {/* <RecognizedTransactionsTableBoot>
-          <CashflowTransactionsTableCard>
-            <RecognizedTransactionsTable />
-          </CashflowTransactionsTableCard>
-        </RecognizedTransactionsTableBoot> */}
-
-        {/* <AccountUncategorizedTransactionsBoot>
-          <CashflowTransactionsTableCard>
-            <AccountTransactionsUncategorizedTable />
-          </CashflowTransactionsTableCard>
-        </AccountUncategorizedTransactionsBoot> */}
       </Box>
     </UncategorizedTransactionsFilterProvider>
   );
 }
 
+const AccountExcludedTransactins = lazy(() =>
+  import('./UncategorizedTransactions/AccountExcludedTransactions').then(
+    (module) => ({ default: module.AccountExcludedTransactions }),
+  ),
+);
+const AccountRecognizedTransactions = lazy(() =>
+  import('./UncategorizedTransactions/AccountRecgonizedTranasctions').then(
+    (module) => ({ default: module.AccountRecognizedTransactions }),
+  ),
+);
+const AccountUncategorizedTransactions = lazy(() =>
+  import(
+    './UncategorizedTransactions/AccountUncategorizedTransactionsAll'
+  ).then((module) => ({ default: module.AccountUncategorizedTransactionsAll })),
+);
+
+/**
+ * Switches between the account transactions tables.
+ * @returns {React.ReactNode}
+ */
+function AccountTransactionsSwitcher() {
+  const [locationQuery] = useAppQueryString();
+  const uncategorizedTab = locationQuery?.uncategorizedFilter;
+
+  switch (uncategorizedTab) {
+    case 'excluded':
+      return <AccountExcludedTransactins />;
+    case 'recognized':
+      return <AccountRecognizedTransactions />;
+    case 'all':
+    default:
+      return <AccountUncategorizedTransactions />;
+  }
+}
+
 export default R.compose(withBankingActions)(AllTransactionsUncategorizedRoot);

packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountExcludedTransactions.tsx

@@ -0,0 +1,13 @@
+import { ExcludedTransactionsTable } from "../ExcludedTransactions/ExcludedTransactionsTable";
+import { ExcludedBankTransactionsTableBoot } from "../ExcludedTransactions/ExcludedTransactionsTableBoot";
+import { AccountTransactionsCard } from "./AccountTransactionsCard";
+
+export function AccountExcludedTransactions() {
+  return (
+    <ExcludedBankTransactionsTableBoot>
+      <AccountTransactionsCard>
+        <ExcludedTransactionsTable />
+      </AccountTransactionsCard>
+    </ExcludedBankTransactionsTableBoot>
+  );
+}

packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountRecgonizedTranasctions.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { RecognizedTransactionsTableBoot } from '../RecognizedTransactions/RecognizedTransactionsTableBoot';
+import { RecognizedTransactionsTable } from '../RecognizedTransactions/RecognizedTransactionsTable';
+import { AccountTransactionsCard } from './AccountTransactionsCard';
+
+export function AccountRecognizedTransactions() {
+  return (
+    <RecognizedTransactionsTableBoot>
+      <AccountTransactionsCard>
+        <RecognizedTransactionsTable />
+      </AccountTransactionsCard>
+    </RecognizedTransactionsTableBoot>
+  );
+}

packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsCard.tsx

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+
+export const AccountTransactionsCard = styled.div`
+  border: 2px solid #f0f0f0;
+  border-radius: 10px;
+  padding: 30px 18px;
+  background: #fff;
+  flex: 0 1;
+`;

packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountUncategorizedTransactionsAll.tsx

@@ -0,0 +1,13 @@
+import AccountTransactionsUncategorizedTable from '../AccountTransactionsUncategorizedTable';
+import { AccountUncategorizedTransactionsBoot } from '../AllTransactionsUncategorizedBoot';
+import { AccountTransactionsCard } from './AccountTransactionsCard';
+
+export function AccountUncategorizedTransactionsAll() {
+  return (
+    <AccountUncategorizedTransactionsBoot>
+      <AccountTransactionsCard>
+        <AccountTransactionsUncategorizedTable />
+      </AccountTransactionsCard>
+    </AccountUncategorizedTransactionsBoot>
+  );
+}