Attempting to add a new row inline. any active filters could hide the row though... also, can I pin it to the top of the table?

frontend/src/components/AccountTable/AccountTable.js

@@ -150,6 +150,18 @@ export const useStyles = makeStyles(theme => ({
   column: {},
 }))
 
+function customFilter(rows, id, filterValue) {
+  return rows.filter(row => {
+    console.log(row)
+    const rowValue = row.values[id]
+    if (id === 'id' && rowValue === 0) {
+      return true
+    }
+
+    return rowValue !== undefined ? String(rowValue).toLowerCase().contains(String(filterValue).toLowerCase()) : true
+  })
+}
+
 // Create an editable cell renderer
 const EditableCell = ({
   value: initialValue,
@@ -232,7 +244,7 @@ function StatusIconButton(props) {
 
 function AccountFilter({ globalFilter, setGlobalFilter }) {
   const theme = useTheme()
-  const [value, setValue] = React.useState(globalFilter)
+  const [value, setValue] = useState(globalFilter)
   const onChange = useAsyncDebounce(value => {
     setGlobalFilter(value || undefined)
   }, 500)
@@ -336,7 +348,12 @@ export default function Account(props) {
     },
   )
   const transactions = useSelector(state => selectTransactions(state, props.accountId, showReconciled))
-  const data = useMemo(() => transactions, [transactions])
+  const [transactionData, setTransactionData] = useState(transactions)
+  const data = useMemo(() => transactionData, [transactionData, account])
+
+  const cancelAddTransaction = () => {
+    setTransactionData(transactionData.filter(trx => trx.id !== 0))
+  }
 
   const filter = createFilterOptions()
   const columns = useMemo(
@@ -638,6 +655,16 @@ export default function Account(props) {
     [currentTheme],
   )
 
+  const filterTypes = React.useMemo(
+    () => ({
+      globalFilter: customFilter,
+      // Or, override the default text filter to use
+      // "startWith"
+      text: customFilter,
+    }),
+    [],
+  )
+
   const {
     getTableProps,
     getTableBodyProps,
@@ -673,6 +700,8 @@ export default function Account(props) {
       // That way we can call this function from our
       // cell renderer!
       // updateMyData,
+
+      filterTypes,
     },
     useGlobalFilter,
     useSortBy,
@@ -720,13 +749,11 @@ export default function Account(props) {
       newRow.payeeId = (await createNewPayee(newRow.payeeId)).id
     }
 
-    const amount = dinero(newRow.amount)
-
     await dispatch(
       createTransaction({
         transaction: {
           accountId: props.accountId,
-          amount,
+          amount: newRow.amount,
           date: newRow.date,
           memo: newRow.memo,
           payeeId: newRow.payeeId,
@@ -954,15 +981,23 @@ export default function Account(props) {
   }
 
   const addTransactionClick = () => {
-    transactions.unshift({
-      id: 0,
-      date: new Date(),
-      payeeId: '',
-      categoryId: '',
-      memo: '',
-      amount: 0,
-      status: 0,
-    })
+    const now = new Date().toISOString()
+    setTransactionData([
+      {
+        id: 0,
+        accountId: props.accountId,
+        amount: 0,
+        categoryId: '',
+        created: now,
+        date: now,
+        filterField: '',
+        memo: '',
+        payeeId: '',
+        status: 0,
+        updated: now,
+      },
+      ...transactionData,
+    ])
   }
 
   return (
@@ -1169,6 +1204,8 @@ export default function Account(props) {
           onRowSave={onTransactionEdit}
           toggleRowSelected={toggleRowSelected}
           selectedRowIds={selectedRowIds}
+          cancelAddTransaction={cancelAddTransaction}
+          onTransactionAdd={onTransactionAdd}
         />
       </Table>
     </Box>

frontend/src/components/AccountTable/AccountTableBody.js

@@ -13,12 +13,22 @@ export default function AccountTableBody({
   classes,
   toggleRowSelected,
   selectedRowIds,
+  cancelAddTransaction,
+  onTransactionAdd,
   ...props
 }) {
-  const [editingRow, setEditingRow] = useState(null)
+  const [editingRow, setEditingRow] = useState(0)
 
   const onSave = (newData, oldData) => {
-    setEditingRow(null)
+    setEditingRow(0)
+
+    if (newData.id === 0) {
+      return onTransactionAdd({
+        ...newData,
+        amount: inputToDinero(newData.amount),
+      })
+    }
+
     onRowSave(
       {
         ...newData,
@@ -31,26 +41,30 @@ export default function AccountTableBody({
     )
   }
 
-  const onCancel = () => {
-    setEditingRow(null)
+  const onCancel = id => {
+    if (id !== 0) {
+      return setEditingRow(0)
+    }
+
+    cancelAddTransaction()
   }
 
   const onRowClick = id => {
-    if (editingRow === id) {
-      return
-    }
+    // if (editingRow === id) {
+    //   return
+    // }
 
-    if (selectedRowIds[id] === true) {
-      return setEditingRow(id)
-    }
+    // if (selectedRowIds[id] === true) {
+    return setEditingRow(id)
+    // }
 
-    toggleRowSelected({
-      id: true,
-      ...Object.keys(selectedRowIds).reduce((allIds, rowId) => {
-        allIds[rowId] = false
-        return allIds
-      }, {}),
-    })
+    // toggleRowSelected({
+    //   id: true,
+    //   ...Object.keys(selectedRowIds).reduce((allIds, rowId) => {
+    //     allIds[rowId] = false
+    //     return allIds
+    //   }, {}),
+    // })
   }
 
   const Row = ({ index, style }) => {

frontend/src/components/AccountTable/AccountTableRow.js

@@ -53,7 +53,7 @@ export default function AccountTableRow({
       ...row.original,
       amount: toUnit(valueToDinero(row.original.amount), { digits: 2 }),
     })
-    onCancel()
+    onCancel(row.original.id)
   }
 
   const onFocus = e => {
@@ -78,7 +78,6 @@ export default function AccountTableRow({
     <>
       <TableRow {...row.getRowProps()} onClick={onClick} {...props} sx={{ width: '100%', display: 'table-row' }}>
         {row.cells.map(cell => {
-          console.log(cell)
           return (
             <TableCell
               {...cell.getCellProps()}