add some features in balance and transaction list components

src/components/Balance.js

@@ -23,10 +23,14 @@ export const Balance = () => {
   const amounts = transactions.map(transaction => transaction.amount);
 
   const total = amounts.reduce((acc, item) => (acc += item), 0);
+
+  const today = new Date();
+  const option = {year : "numeric", month: "long", day: "numeric"}
 
   return (
     <>
       <h4>Your Balance</h4>
+      <h5>as of {today.toLocaleDateString("en-US", option)}</h5>
     <h1>{moneyFormatter(total)}</h1>
     </>
   )

src/components/TransactionList.js

@@ -5,13 +5,47 @@ import { GlobalContext } from '../context/GlobalState';
 
 export const TransactionList = () => {
   const { transactions } = useContext(GlobalContext);
+  const [filter, setFilter] = useState();
 
+  // added filtering
+
+  const incomes = transactions.filter(transaction => {
+    return transaction.amount > 0;
+  });
+
+  const expenses = transactions.filter(transaction => {
+    return transaction.amount < 0;
+  });
+
+  const all = transactions.map(transaction => {
+    return transaction
+  });
+
+  function handleChange(e){
+    const selectFilter = e.target.value;
+    setFilter(selectFilter);
+  }
+
   return (
     <>
-      <h3>History</h3>
+      <h3>History    
+        {/* add this Select for sorting */}
+        <select name="cars" id="cars" onChange={handleChange}>
+          <option value="Income">Sort By</option>
+          <option value="Income">Income</option>
+          <option value="Expense">Expense</option>
+          <option value="All">All</option>
+        </select>
+      </h3>
+    {/* add some condition */}
       <ul className="list">
-        {transactions.map(transaction => (<Transaction key={transaction.id} transaction={transaction} />))}
+      {(filter === "Income"
+        ? incomes
+        : filter === "Expense"
+        ? expenses
+        : all).map(transaction => (<Transaction key={transaction.id} transaction={transaction} />))}
       </ul>
+
     </>
   )
 }