Experimenting refactoring components and adding location and delete

src/App.js

@@ -1,39 +1,30 @@
-import Expenses from "./components/Expenses/Expenses";
-import NewExpense from "./components/NewExpense/NewExpense";
+import Expenses from './components/Expenses/Expenses';
+import NewExpense from './components/NewExpense/NewExpense';
+import { initialExpenses } from './data';
+import { useState } from 'react';
 
 const App = () => {
-  const expense = [
-    {
-      id: 'e1',
-      title: 'Toilet Paper',
-      amount: 94.12,
-      date: new Date(2020, 7, 14),
-    },
-    { id: 'e2', title: 'New TV', amount: 799.49, date: new Date(2021, 2, 12) },
-    {
-      id: 'e3',
-      title: 'Car Insurance',
-      amount: 294.67,
-      date: new Date(2021, 2, 28),
-    },
-    {
-      id: 'e4',
-      title: 'New Desk (Wooden)',
-      amount: 450,
-      date: new Date(2021, 5, 12),
-    },
-  ];
+  const [expenses, setExpenses] = useState(initialExpenses);
 
   const addExpenseHandler = expense => {
-    console.log('In App.js');
-    console.log(expense);
-  }
+    setExpenses(expenses.concat(expense));
+  };
+
+  const deleteExpenseHandler = id => {
+    setExpenses(expenses.filter(expense => expense.id !== id));
+  };
+
   return (
     <div>
-      <NewExpense onAddExpense={addExpenseHandler} />
-      <Expenses items={expense}/>
+      <NewExpense
+        onAddExpense={addExpenseHandler}
+      />
+      <Expenses
+        onDeleteExpense={deleteExpenseHandler}
+        items={expenses}
+      />
     </div>
   );
-}
+};
 
 export default App;

src/components/Expenses/ExpenseDate.js

@@ -1,17 +1,18 @@
-import './ExpenseDate.css';
-
-const ExpenseDate = (props) => {
-  const day = props.date.toLocaleString('en-GB', {day: '2-digit'});
-  const month = props.date.toLocaleString('en-GB', {month: 'long'});
-  const year =props.date.getFullYear();
+import './ExpenseDate.scss';
 
+const ExpenseDate = ({
+  date
+}) => {
+  const day = date.toLocaleDateString('en-GB', { day: '2-digit' });
+  const month = date.toLocaleDateString('en-GB', { month: 'long' });
+  const year = date.getFullYear();
   return (
     <div className="expense-date">
       <div className="expense-date__day">{day}</div>
       <div className="expense-date__month">{month}</div>
       <div className="expense-date__year">{year}</div>
     </div>
   );
-}
+};
 
 export default ExpenseDate;

src/components/Expenses/ExpenseDate.scss

@@ -9,18 +9,18 @@
   border-radius: 12px;
   align-items: center;
   justify-content: center;
-}
 
-.expense-date__month {
-  font-size: 0.75rem;
-  font-weight: bold;
-}
+  &__month {
+    font-size: 0.75rem;
+    font-weight: bold;
+  }
 
-.expense-date__year {
-  font-size: 0.75rem;
-}
+  &__year {
+    font-size: 0.75rem;
+  }
 
-.expense-date__day {
-  font-size: 1.5rem;
-  font-weight: bold;
+  &__day {
+    font-size: 1.5rem;
+    font-weight: bold;
+  }
 }

src/components/Expenses/ExpenseItem.css

@@ -17,14 +17,18 @@
   flex: 1;
 }
 
-.expense-item h2 {
+.expense-item__info {
   color: #3a3a3a;
   font-size: 1rem;
   flex: 1;
   margin: 0 1rem;
   color: white;
 }
 
+.expense-item__info p {
+  color: #111;
+}
+
 .expense-item__price {
   font-size: 1rem;
   font-weight: bold;
@@ -35,6 +39,15 @@
   border-radius: 12px;
 }
 
+.expense-item__delete button {
+  border-radius: 50%;
+  border: none;
+  width: 3em;
+  height: 3em;
+  background-color: #2a2a2a;
+  color: #fff;
+}
+
 @media (min-width: 580px) {
   .expense-item__description {
     flex-direction: row;

src/components/Expenses/ExpenseItem.js

@@ -1,19 +1,33 @@
 import React from 'react';
+import Card from '../UI/Card';
 
 import ExpenseDate from './ExpenseDate';
 import './ExpenseItem.css';
-import Card from '../UI/Card';
 
-const ExpenseItem = (props) => {
-
-  return (
-  <Card className="expense-item"> 
-    <ExpenseDate date={props.date}/>
+const ExpenseItem = ({
+  id,
+  title,
+  amount,
+  location,
+  date,
+  onDelete
+}) => (
+  <Card className="expense-item">
+    <ExpenseDate date={date}/>
     <div className="expense-item__description">
-      <h2>{props.title}</h2>
-      <div className="expense-item__price">£{props.amount}</div>
+      <div className="expense-item__info">
+        <h2>{title}</h2>
+        <p>{location}</p>
+      </div>
+      <div className="expense-item__price">
+        £{parseFloat(amount).toFixed(2)}
+      </div>
+      <div className="expense-item__delete">
+        <button onClick={() => onDelete(id)}>X</button>
+      </div>
     </div>
-  </Card>); 
-}
+  </Card>
+);
+
 
 export default ExpenseItem;

src/components/Expenses/Expenses.js

@@ -1,41 +1,29 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 
 import Card from '../UI/Card';
 import ExpenseItem from './ExpenseItem';
 import ExpensesFilter from './ExpensesFilter';
 import './Expenses.css';
 
-const Expenses = (props) => {
+const Expenses = ({
+  items,
+  onDeleteExpense
+}) => {
   const [filteredYear, setFilteredYear] = useState('2021');
 
-  const filterChangeHandler = selectedYear => {
-    setFilteredYear(selectedYear);
+  const expenseDeleteHandler = (id) => {
+    onDeleteExpense(id)
   }
+
   return (
     <Card className="expenses">
-      <ExpensesFilter selected={filteredYear} onChangeFilter={filterChangeHandler} />
-      <ExpenseItem 
-        title={props.items[0].title} 
-        amount={props.items[0].amount} 
-        date={props.items[0].date}
-      />
-      <ExpenseItem 
-        title={props.items[1].title} 
-        amount={props.items[1].amount} 
-        date={props.items[1].date}
-      />
-      <ExpenseItem 
-        title={props.items[2].title} 
-        amount={props.items[2].amount} 
-        date={props.items[2].date}
-      />
-      <ExpenseItem 
-        title={props.items[3].title} 
-        amount={props.items[3].amount} 
-        date={props.items[3].date}
-      />
+      <ExpensesFilter selected={filteredYear} onChangeFilter={setFilteredYear}/>
+      {items
+        .filter(item => item.date.getFullYear() === parseInt(filteredYear))
+        .map(({ id, title, amount, date, location }, key) => <ExpenseItem {...{ key, id, title, amount, date, location }} onDelete={expenseDeleteHandler} />)
+      }
     </Card>
   );
-}
+};
 
 export default Expenses;

src/components/Expenses/ExpensesFilter.js

@@ -2,23 +2,22 @@ import React from 'react';
 
 import './ExpensesFilter.css';
 
-const ExpensesFilter = (props) => {
-  const dropdownChangeHandler = (event) => {
-    props.onChangeFilter(event.target.value);
-  };
+const ExpensesFilter = ({
+  selected,
+  onChangeFilter
+}) => {
+  const currentYear = new Date().getFullYear();
+  const years = [1, 0, -1, -2, -3].map(offset => currentYear + offset)
 
   return (
-      <div className='expenses-filter'>
-        <div className='expenses-filter__control'>
-          <label>Filter by year</label>
-          <select value={props.selected} onChange={dropdownChangeHandler}>
-            <option value='2022'>2022</option>
-            <option value='2021'>2021</option>
-            <option value='2020'>2020</option>
-            <option value='2019'>2019</option>
-          </select>
-        </div>
+    <div className="expenses-filter">
+      <div className="expenses-filter__control">
+        <label>Filter by year</label>
+        <select value={selected} onChange={(event) => onChangeFilter(event.target.value)}>
+          {years.map((year, i) => <option key={i} value={year}>{year}</option>)}
+        </select>
       </div>
+    </div>
   );
 };