{"version":3,"sources":["components/Transaction.js","components/TransactionsList.js","components/Search.js","components/AddTransactionForm.js","components/AccountContainer.js","components/App.js","index.js"],"names":["Transaction","props","date","description","category","amount","TransactionsList","transactions","search","mapTransaction","filter","transDescription","includes","map","transaction","id","className","Search","handleSearch","type","placeholder","onChange","value","AddTransactionForm","handleNewTransaction","useState","formData","setFormData","handleInput","e","name","target","onSubmit","preventDefault","step","AccountContainer","setSearch","App","url","setTransactions","useEffect","fetch","then","res","json","data","newTransaction","method","headers","body","JSON","stringify","newData","onAddTransaction","ReactDOM","render","document","getElementById"],"mappings":"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","file":"static/js/main.4d93883b.chunk.js","sourcesContent":["import React from \"react\";\n\nfunction Transaction(props) {\n  return (\n    <tr>\n      <td>{ props.date }</td>\n      <td>{ props.description }</td>\n      <td>{ props.category }</td>\n      <td>{ props.amount }</td>\n    </tr>\n  );\n}\n\nexport default Transaction;\n","import React from \"react\";\nimport Transaction from \"./Transaction\";\n\nfunction TransactionsList({ transactions, search }) {\n\n\n  const filteredTransactions = transactions.filter(transDescription => {\n    if(search === '') return true\n    return transDescription.description.includes(search)\n  })\n\n  const mapTransaction = filteredTransactions.map(transaction => {\n    return <Transaction key={transaction.id} date={transaction.date} amount={transaction.amount} \n    description={transaction.description} category={transaction.category} />\n  })\n\n  return (\n    <table className=\"ui celled striped padded table\">\n      <tbody>\n        <tr>\n          <th>\n            <h3 className=\"ui center aligned header\">Date</h3>\n          </th>\n          <th>\n            <h3 className=\"ui center aligned header\">Description</h3>\n          </th>\n          <th>\n            <h3 className=\"ui center aligned header\">Category</h3>\n          </th>\n          <th>\n            <h3 className=\"ui center aligned header\">Amount</h3>\n          </th>\n        </tr>\n        { mapTransaction }\n      </tbody>\n    </table>\n  );\n}\n\nexport default TransactionsList;\n","import React from \"react\";\n\nfunction Search({ search, handleSearch}) {\n  return (\n    <div className=\"ui large fluid icon input\">\n      <input\n        type=\"text\"\n        placeholder=\"Search your Recent Transactions\"\n        onChange={handleSearch} \n        value={search}\n      />\n      <i className=\"circular search link icon\"></i>\n    </div>\n  );\n}\n\nexport default Search;\n","import React, { useState } from \"react\";\n\nfunction AddTransactionForm({ handleNewTransaction }) {\n\n  const [formData, setFormData] = useState({\n    date: '',\n    description: '',\n    category: '',\n    amount: ''\n  })\n\n  function handleInput(e){\n    const name = e.target.name\n    let value = e.target.value\n\n    setFormData({...formData,\n    [name]: value\n    })\n  }\n\n  function handleSubmit(e){\n    e.preventDefault()\n    handleNewTransaction(formData);\n  }\n\n  return (\n    <div className=\"ui segment\">\n      <form onSubmit={handleSubmit} className=\"ui form\">\n        <div className=\"inline fields\">\n          <input value={formData.date} onChange={handleInput} type=\"date\" name=\"date\" />\n          <input value={formData.description} onChange={handleInput} type=\"text\" name=\"description\" placeholder=\"Description\" />\n          <input value={formData.category} onChange={handleInput} type=\"text\" name=\"category\" placeholder=\"Category\" />\n          <input value={formData.amount} onChange={handleInput} type=\"number\" name=\"amount\" placeholder=\"Amount\" step=\"0.01\" />\n        </div>\n        <button className=\"ui button\" type=\"submit\">\n          Add Transaction\n        </button>\n      </form>\n    </div>\n  );\n}\n\nexport default AddTransactionForm;\n","import React, { useState } from \"react\";\nimport TransactionsList from \"./TransactionsList\";\nimport Search from \"./Search\";\nimport AddTransactionForm from \"./AddTransactionForm\";\n\nfunction AccountContainer({ transactions, handleNewTransaction }) {\n\n  const [search, setSearch] = useState('')\n\n  function handleSearch(e){\n    setSearch(search => e.target.value)\n  }\n  return (\n    <div>\n      <Search search={search} handleSearch={handleSearch} />\n      <AddTransactionForm handleNewTransaction={handleNewTransaction} />\n      <TransactionsList search={search} transactions={transactions} />\n    </div>\n  );\n}\n\nexport default AccountContainer;\n","import React, { useState, useEffect } from \"react\";\nimport AccountContainer from \"./AccountContainer\";\n\nfunction App() {\n  const url = 'https://react-codechallenges.herokuapp.com/transactions'\n  const [transactions, setTransactions] = useState([])\n  \n  useEffect(() => {\n    fetch(url).then(res => res.json())\n      .then(data => setTransactions(data))\n  }, [])\n\n  function onAddTransaction(data){\n    const newData = [...transactions, data]\n    setTransactions(newData)\n  }\n\n  function handleNewTransaction(newTransaction){\n    const formData = {\n      method: 'POST',\n      headers: {'content-type': 'application/json'},\n      body: JSON.stringify(newTransaction)\n    }\n\n    fetch(url, formData)\n      .then(res => res.json())\n      .then(data => onAddTransaction(data))\n  }\n\n  return (\n    <div className=\"ui raised segment\">\n      <div className=\"ui segment violet inverted\">\n        <h2>The Royal Bank of Flatiron</h2>\n      </div>\n      <AccountContainer handleNewTransaction={handleNewTransaction} transactions={transactions} />\n    </div>\n  );\n}\n\nexport default App;\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./components/App\";\nimport \"semantic-ui-css/semantic.min.css\";\nimport \"./index.css\";\n\nReactDOM.render(<App />, document.getElementById(\"root\"));\n"],"sourceRoot":""}