From 84103a30a755602e15388f584e0122c5f281d5df Mon Sep 17 00:00:00 2001
From: aainasantos <103295944+aainasantos@users.noreply.github.com>
Date: Mon, 6 Jun 2022 05:14:47 +0800
Subject: [PATCH 1/2] add current date

---
 src/components/Balance.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/Balance.js b/src/components/Balance.js
index 58482dbc3..c729244b9 100644
--- a/src/components/Balance.js
+++ b/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>
     </>
   )

From 4ecee34b6588fe2e5625e77e1e9af1f0d40e2dab Mon Sep 17 00:00:00 2001
From: aainasantos <103295944+aainasantos@users.noreply.github.com>
Date: Mon, 6 Jun 2022 05:19:13 +0800
Subject: [PATCH 2/2] adding some condition for sorting the history

---
 src/components/TransactionList.js | 38 +++++++++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/components/TransactionList.js b/src/components/TransactionList.js
index 3a050772c..aba412b4e 100644
--- a/src/components/TransactionList.js
+++ b/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>
+      
     </>
   )
 }