Use MultiSelect in Sats Flow

Author: ShahanaFarooqui

apps/frontend/src/components/bookkeeper/SatsFlow/SatsFlowRoot.tsx

@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useState } from 'react';
 import './SatsFlowRoot.scss';
+import { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Card, Col, Row } from 'react-bootstrap';
 import { CloseSVG } from '../../../svgs/Close';
@@ -13,20 +13,46 @@ const SatsFlowRoot = () => {
   const navigate = useNavigate();
   const satsFlowPeriods = useSelector(selectSatsFlowPeriods);
   const [showZeroActivityPeriods, setShowZeroActivityPeriods] = useState<boolean>(false);
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [tagFilterMode, setTagFilterMode] = useState<string>('include');
   const [satsFlowData, setSatsFlowData] = useState<SatsFlowPeriod[]>(satsFlowPeriods);
 
-  const filterSatsFlowData = (periods, showZeroActivity) => {
-    return (showZeroActivity) ? periods : periods.filter(key => key.tag_groups.length > 0)
-  }
+  const applyFilters = useCallback((
+    periods: SatsFlowPeriod[],
+    showZeroActivity: boolean,
+    tags: string[],
+    filterMode: string
+  ): SatsFlowPeriod[] => {
+    const tagFiltered: SatsFlowPeriod[] = tags.length === 0
+      ? periods
+      : periods.map(period => ({
+          ...period,
+          tag_groups: period.tag_groups.filter(group => {
+            const isMatch = tags.includes(group.tag);
+            return filterMode === 'include' ? isMatch : !isMatch;
+          }),
+        }));
+    return showZeroActivity
+      ? tagFiltered
+      : tagFiltered.filter(period => period.tag_groups.length > 0);
+  }, []);
 
   const handleShowZeroActivityChange = useCallback((show: boolean) => {
     setShowZeroActivityPeriods(show);
-    setSatsFlowData(filterSatsFlowData(satsFlowPeriods, show));
-  }, [satsFlowPeriods]);
+    setSatsFlowData(applyFilters(satsFlowPeriods, show, selectedTags, tagFilterMode));
+  }, [satsFlowPeriods, selectedTags, tagFilterMode, applyFilters]);
+
+  const multiSelectChangeHandler = useCallback((selectedOptions: string[], filterMode: string) => {
+    setTimeout(() => {
+      setSelectedTags(selectedOptions);
+      setTagFilterMode(filterMode);
+      setSatsFlowData(applyFilters(satsFlowPeriods, showZeroActivityPeriods, selectedOptions, filterMode));
+    }, 0);
+  }, [satsFlowPeriods, showZeroActivityPeriods, applyFilters]);
 
   useEffect(() => {
-    setSatsFlowData(filterSatsFlowData(satsFlowPeriods, showZeroActivityPeriods));
-  }, [satsFlowPeriods, showZeroActivityPeriods]);
+    setSatsFlowData(applyFilters(satsFlowPeriods, showZeroActivityPeriods, selectedTags, tagFilterMode));
+  }, [satsFlowPeriods]);
 
   return (
     <div data-testid='satsflow-container' className='satsflow-container'>
@@ -37,15 +63,26 @@ const SatsFlowRoot = () => {
             <Col className='text-end'>
               <span
                 className='span-close-svg'
-                onClick={() => {
-                  navigate('..');
-                }}
+                onClick={() => navigate('..')}
               >
                 <CloseSVG />
               </span>
             </Col>
           </Row>
-          <DataFilterOptions filter='satsflow' onShowZeroActivityChange={handleShowZeroActivityChange} />
+          <DataFilterOptions
+            filter='satsflow'
+            onShowZeroActivityChange={handleShowZeroActivityChange}
+            multiSelectValues={[
+              { name: 'deposit', dataKey: 'deposit' },
+              { name: 'invoice_fee', dataKey: 'invoice_fee' },
+              { name: 'onchain_fee', dataKey: 'onchain_fee' },
+              { name: 'paid_invoice', dataKey: 'paid_invoice' },
+              { name: 'received_invoice', dataKey: 'received_invoice' },
+              { name: 'routed', dataKey: 'routed' },
+            ]}
+            multiSelectPlaceholder='Filter Events'
+            multiSelectChangeHandler={multiSelectChangeHandler}
+          />
         </Card.Header>
         <Card.Body className='pb-4 d-flex flex-column align-items-center'>
           <Col xs={12} className='sats-flow-graph-container'>