Replace department totals with SFN subtotal footer

src/AD419/ClientApp/src/components/expenses/ExpenseTable.tsx

@@ -1,7 +1,8 @@
 import React, { useMemo, useState } from 'react';
-import { Expense, UngroupedExpense } from '../../models';
+import { UngroupedExpense } from '../../models';
 import NumberDisplay from '../NumberDisplay';
 import { TableFilter } from '../Filter';
+import { groupBy } from '../../utilities';
 
 interface Props {
   expenses: UngroupedExpense[];
@@ -75,15 +76,21 @@ export default function ExpenseTable(props: Props): JSX.Element {
         </tbody>
         <tfoot>
           <tr>
-            <td colSpan={4}>Total</td>
-            <td>
-              <NumberDisplay
-                value={data.reduce((sum, exp) => sum + exp.expenses, 0)}
-                precision={2}
-                type='currency'
-              ></NumberDisplay>
-            </td>
+            <th colSpan={4}></th>
+            <th>SFN Subtotal</th>
           </tr>
+          {groupBy(data, (d) => d.sfn).map(([sfn, expenses]) => (
+            <tr key={sfn}>
+              <td colSpan={4}>{sfn}</td>
+              <td>
+                <NumberDisplay
+                  value={expenses.reduce((sum, exp) => sum + exp.expenses, 0)}
+                  precision={2}
+                  type='currency'
+                ></NumberDisplay>
+              </td>
+            </tr>
+          ))}
         </tfoot>
       </table>
       {data.length === 0 && (

src/AD419/ClientApp/src/components/expenses/ExpensesContainer.tsx

@@ -4,24 +4,13 @@ import { useHistory } from 'react-router-dom';
 
 import ExpenseTable from './ExpenseTable';
 
-import {
-  Organization,
-  AssociationTotal,
-  SFNRecord,
-  UngroupedExpense,
-} from '../../models';
-import Totals from '../summary/Totals';
-
-const JSONHeader = {
-  'Content-type': 'application/json; charset=UTF-8',
-};
+import { Organization, SFNRecord, UngroupedExpense } from '../../models';
 
 export default function ExpensesContainer(): JSX.Element {
   const [orgs, setOrgs] = useState<Organization[]>([]);
   const [sfns, setSFNs] = useState<SFNRecord[]>([]);
   const [selectedOrg, setSelectedOrg] = useState<Organization>();
   const [selectedSFN, setSelectedSFN] = useState<SFNRecord>();
-  const [totals, setTotals] = useState<AssociationTotal[]>([]);
 
   const [expenses, setExpenses] = useState<UngroupedExpense[]>([]);
 
@@ -82,22 +71,12 @@ export default function ExpensesContainer(): JSX.Element {
     setExpensesLoading(false);
   }, [selectedOrg, selectedSFN]);
 
-  const getTotalsCallback = useCallback(async (): Promise<void> => {
-    const result = await fetch(
-      `/Summary/ExpensesByDepartment/${selectedOrg?.code}`
-    );
-    const data = (await result.json()) as AssociationTotal[];
-
-    setTotals(data);
-  }, [selectedOrg]);
-
   // requery whenever our grouping or org changes
   useEffect(() => {
     if (selectedOrg) {
       getExpensesCallback();
-      getTotalsCallback();
     }
-  }, [selectedOrg, getExpensesCallback, getTotalsCallback]);
+  }, [selectedOrg, getExpensesCallback]);
 
   const orgSelected = (e: React.ChangeEvent<HTMLSelectElement>): void => {
     const val = e.target.value;
@@ -157,14 +136,7 @@ export default function ExpensesContainer(): JSX.Element {
               expenses={expenses}
             ></ExpenseTable>
           </div>
-          <div className='card mt-5'>
-            <div className='card-body'>
-              <label>Department Totals</label>
-              <Totals totals={totals}></Totals>
-            </div>
-          </div>
         </div>
-        {/* <div className='col-12 col-md-5 right-side'></div> */}
       </div>
     </>
   );

src/AD419/ClientApp/src/utilities.ts

@@ -0,0 +1,8 @@
+export const groupBy = <T, K extends keyof any>(arr: T[], key: (i: T) => K) =>
+  Object.entries<T[]>(
+    arr.reduce((groups, item) => {
+      groups[key(item)] = groups[key(item)] || [];
+      groups[key(item)].push(item);
+      return groups;
+    }, {} as Record<K, T[]>)
+  );