cash-stacks/frontend/src/widgets/FundBar/index.tsx

import { useState } from 'react'
import { Modal } from '../../layout/Modal'
import { TransactionForm } from '../../forms/TransactionForm'
import { Stack } from '../../types'
import _ from 'lodash'

import './style.scss'

type Props = {
  stack: Stack
}

export const FundBar = ({ stack }: Props) => {
  const amount = _.sumBy(stack.transactions, (tx) => parseFloat(tx.amount))
  const max = parseFloat(stack.amount)
  const current = max - amount
  const u = Math.max(current / max, 0)

  const [newTx, setNewTx] = useState(false)

  const addTransaction = () => {
    console.log(`adding transaction to => ${stack.name}`)
    setNewTx(true)
  }

  const handleCancel = () => {
    console.log('cancelling tx')
    setNewTx(false)
  }

  const handleSave = () => {
    console.log('tx saved!')
  }

  return (
    <>
      <div className="fundbar">
        <div className="back" onClick={addTransaction}>
          <h3>{stack.name}</h3>
        </div>
        <div
          className="front"
          style={{
            background: `hsl(${u * 120}, 100%, 50%)`,
            height: `${u * 100}%`,
          }}
        ></div>
        <div className="totals">
          ${Math.floor(current)} / ${max}
        </div>
      </div>
      <Modal visible={newTx}>
        <TransactionForm
          stackId={stack.id}
          onSave={handleSave}
          onCancel={handleCancel}
        />
      </Modal>
    </>
  )
}