├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── src
    ├── components
    │   ├── UI
    │   │   ├── Card.css
    │   │   └── Card.js
    │   ├── Expenses
    │   │   ├── Expenses.css
    │   │   ├── ExpensesList.css
    │   │   ├── ExpenseDate.css
    │   │   ├── ExpenseDate.js
    │   │   ├── ExpensesList.js
    │   │   ├── ExpenseItem.js
    │   │   ├── ExpensesChart.js
    │   │   ├── Expenses.js
    │   │   └── ExpenseItem.css
    │   ├── Chart
    │   │   ├── Chart.css
    │   │   ├── Chart.js
    │   │   ├── ChartBar.js
    │   │   └── ChartBar.css
    │   ├── ExpensesFilter
    │   │   ├── ExpensesFilter.css
    │   │   └── ExpensesFilter.js
    │   └── NewExpense
    │   │   ├── ExpenseForm.css
    │   │   ├── NewExpense.css
    │   │   ├── NewExpense.js
    │   │   └── ExpenseForm.js
    ├── index.js
    ├── index.css
    └── App.js
├── .idea
    ├── .gitignore
    ├── vcs.xml
    ├── inspectionProfiles
    │   └── Project_Default.xml
    ├── modules.xml
    └── 01-starting-setup.iml
├── .gitignore
├── package.json
└── .eslintcache


/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/somekindofwallflower/expenses-react-project/master/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/somekindofwallflower/expenses-react-project/master/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/somekindofwallflower/expenses-react-project/master/public/logo512.png


--------------------------------------------------------------------------------
/src/components/UI/Card.css:
--------------------------------------------------------------------------------
1 | .card {
2 |     border-radius: 12px;
3 |     box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
4 | }
5 | 


--------------------------------------------------------------------------------
/.idea/.gitignore:
--------------------------------------------------------------------------------
1 | # Default ignored files
2 | /shelf/
3 | /workspace.xml
4 | # Editor-based HTTP Client requests
5 | /httpRequests/
6 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import ReactDOM from 'react-dom';
2 | 
3 | import './index.css';
4 | import App from './App';
5 | 
6 | ReactDOM.render(<App />, document.getElementById('root'));
7 | 


--------------------------------------------------------------------------------
/src/components/Expenses/Expenses.css:
--------------------------------------------------------------------------------
1 | .expenses {
2 |     padding: 1rem;
3 |     background-color: rgb(31, 31, 31);
4 |     margin: 2rem auto;
5 |     width: 50rem;
6 |     max-width: 95%;
7 | }
8 | 


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="$PROJECT_DIR$" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/src/components/Expenses/ExpensesList.css:
--------------------------------------------------------------------------------
 1 | .expenses-list {
 2 |     list-style: none;
 3 |     padding: 0;
 4 | }
 5 | 
 6 | .expenses-list__fallback {
 7 |     color: white;
 8 |     text-align: center;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/components/UI/Card.js:
--------------------------------------------------------------------------------
1 | import './Card.css'
2 | 
3 | const Card = (props) => {
4 |     const classes = 'card ' + props.className
5 |     return <div className={classes}>{props.children}</div>
6 | }
7 | 
8 | export default Card
9 | 


--------------------------------------------------------------------------------
/src/components/Chart/Chart.css:
--------------------------------------------------------------------------------
 1 | .chart {
 2 |     padding: 1rem;
 3 |     border-radius: 12px;
 4 |     background-color: #f8dfff;
 5 |     text-align: center;
 6 |     display: flex;
 7 |     justify-content: space-around;
 8 |     height: 10rem;
 9 | }
10 | 


--------------------------------------------------------------------------------
/.idea/inspectionProfiles/Project_Default.xml:
--------------------------------------------------------------------------------
1 | <component name="InspectionProjectProfileManager">
2 |   <profile version="1.0">
3 |     <option name="myName" value="Project Default" />
4 |     <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
5 |   </profile>
6 | </component>


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
 2 | 
 3 | * {
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | html {
 8 |   font-family: 'Noto Sans JP', sans-serif;
 9 | }
10 | 
11 | body {
12 |   margin: 0;
13 |   background-color: #3f3f3f;
14 | }
15 | 
16 | 


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/.idea/01-starting-setup.iml" filepath="$PROJECT_DIR$/.idea/01-starting-setup.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | .vscode
 3 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 4 | 
 5 | # dependencies
 6 | /node_modules
 7 | /.pnp
 8 | .pnp.js
 9 | 
10 | # testing
11 | /coverage
12 | 
13 | # production
14 | /build
15 | 
16 | # misc
17 | .DS_Store
18 | .env.local
19 | .env.development.local
20 | .env.test.local
21 | .env.production.local
22 | 
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 


--------------------------------------------------------------------------------
/.idea/01-starting-setup.iml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <module type="WEB_MODULE" version="4">
 3 |   <component name="NewModuleRootManager">
 4 |     <content url="file://$MODULE_DIR$">
 5 |       <excludeFolder url="file://$MODULE_DIR$/temp" />
 6 |       <excludeFolder url="file://$MODULE_DIR$/.tmp" />
 7 |       <excludeFolder url="file://$MODULE_DIR$/tmp" />
 8 |     </content>
 9 |     <orderEntry type="inheritedJdk" />
10 |     <orderEntry type="sourceFolder" forTests="false" />
11 |   </component>
12 | </module>


--------------------------------------------------------------------------------
/src/components/ExpensesFilter/ExpensesFilter.css:
--------------------------------------------------------------------------------
 1 | .expenses-filter {
 2 |     color: white;
 3 |     padding: 0 1rem;
 4 | }
 5 | 
 6 | .expenses-filter__control {
 7 |     display: flex;
 8 |     width: 100%;
 9 |     align-items: center;
10 |     justify-content: space-between;
11 |     margin: 1rem 0;
12 | }
13 | 
14 | .expenses-filter label {
15 |     font-weight: bold;
16 |     margin-bottom: 0.5rem;
17 | }
18 | 
19 | .expenses-filter select {
20 |     font: inherit;
21 |     padding: 0.5rem 3rem;
22 |     font-weight: bold;
23 |     border-radius: 6px;
24 | }
25 | 


--------------------------------------------------------------------------------
/src/components/NewExpense/ExpenseForm.css:
--------------------------------------------------------------------------------
 1 | .new-expense__controls {
 2 |     display: flex;
 3 |     flex-wrap: wrap;
 4 |     gap: 1rem;
 5 |     margin-bottom: 1rem;
 6 |     text-align: left;
 7 | }
 8 | 
 9 | .new-expense__control label {
10 |     font-weight: bold;
11 |     margin-bottom: 0.5rem;
12 |     display: block;
13 | }
14 | 
15 | .new-expense__control input {
16 |     font: inherit;
17 |     padding: 0.5rem;
18 |     border-radius: 6px;
19 |     border: 1px solid #ccc;
20 |     width: 20rem;
21 |     max-width: 100%;
22 | }
23 | 
24 | .new-expense__actions {
25 |     text-align: right;
26 | }
27 | 


--------------------------------------------------------------------------------
/src/components/Expenses/ExpenseDate.css:
--------------------------------------------------------------------------------
 1 | .expense-date {
 2 |     display: flex;
 3 |     flex-direction: column;
 4 |     width: 5.5rem;
 5 |     height: 5.5rem;
 6 |     border: 1px solid #ececec;
 7 |     background-color: #2a2a2a;
 8 |     color: white;
 9 |     border-radius: 12px;
10 |     align-items: center;
11 |     justify-content: center;
12 | }
13 | 
14 | .expense-date__month {
15 |     font-size: 0.75rem;
16 |     font-weight: bold;
17 | }
18 | 
19 | .expense-date__year {
20 |     font-size: 0.75rem;
21 | }
22 | 
23 | .expense-date__day {
24 |     font-size: 1.5rem;
25 |     font-weight: bold;
26 | }
27 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/Expenses/ExpenseDate.js:
--------------------------------------------------------------------------------
 1 | import './ExpenseDate.css'
 2 | 
 3 | const ExpenseDate = (props) => {
 4 |     const month = props.date.toLocaleString('en-US', {month: 'long'})
 5 |     const day = props.date.toLocaleString('en-US', {day: '2-digit'})
 6 |     const year = props.date.getFullYear()
 7 | 
 8 |     return (
 9 |         <div className='expense-date'>
10 |             <div className="expense-date__month">{month}</div>
11 |             <div className="expense-date__year">{year}</div>
12 |             <div className="expense-date__day">{day}</div>
13 |         </div>
14 |     )
15 | }
16 | 
17 | export default ExpenseDate
18 | 


--------------------------------------------------------------------------------
/src/components/Chart/Chart.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import './Chart.css'
 3 | import ChartBar from "./ChartBar";
 4 | const Chart = (props) => {
 5 |     const dataPointsValue = props.dataPoints.map((dataPoint) => dataPoint.value)
 6 |     const totalMax = Math.max(...dataPointsValue)
 7 |     return (
 8 |         <div>
 9 |             {props.dataPoints && props.dataPoints.length &&  <div className="chart">
10 |                 {props.dataPoints.map(dataPoint => <ChartBar value={dataPoint.value} max={totalMax} label={dataPoint.label} key={dataPoint.label}/>)}
11 |             </div>}
12 |         </div>
13 |     )
14 | }
15 | 
16 | export default Chart
17 | 


--------------------------------------------------------------------------------
/src/components/Expenses/ExpensesList.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import './ExpensesList.css'
 3 | import ExpenseItem from "./ExpenseItem";
 4 | const ExpensesList = (props) => {
 5 |     if(props.items.length === 0) {
 6 |         return <h2 className="expenses-list__fallback">No expenses Found</h2>
 7 |     }
 8 |     return (
 9 |             <ul className="expenses-list">
10 |                 {props.items.map(expense => <ExpenseItem key={expense.id} title={expense.title} amount={expense.amount}
11 |                                                          date={expense.date}/>)}
12 |             </ul>
13 |     )
14 | }
15 | 
16 | export default ExpensesList
17 | 


--------------------------------------------------------------------------------
/src/components/Chart/ChartBar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import './ChartBar.css'
 3 | 
 4 | const ChartBar = (props) => {
 5 |     let barFillHeight = "0%"
 6 | 
 7 |     if(props.max > 0) {
 8 |         barFillHeight = Math.round((props.value / props.max) * 100) + '%'
 9 |     }
10 |     return (
11 |         <div className="chart-bar">
12 |             <div className="chart-bar__inner">
13 |                 <div className="chart-bar__fill" style={{height: barFillHeight}}></div>
14 |             </div>
15 |             <div className="chart-bar__label">
16 |                 {props.label}
17 |             </div>
18 |         </div>
19 |     )
20 | }
21 | 
22 | export default ChartBar
23 | 


--------------------------------------------------------------------------------
/src/components/Expenses/ExpenseItem.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import './ExpenseItem.css'
 3 | import ExpenseDate from './ExpenseDate'
 4 | import Card from '../UI/Card'
 5 | import React, { useState } from 'react'
 6 | 
 7 | const ExpenseItem = (props) => {
 8 |     return (
 9 |         <li>
10 |             <Card className="expense-item">
11 |                 <ExpenseDate date={props.date}/>
12 |                 <div className="expense-item__description">
13 |                     <h2>{props.title}</h2>
14 |                     <div className="expense-item__price">${props.amount}</div>
15 |                 </div>
16 |             </Card>
17 |         </li>
18 | 
19 |     )
20 | }
21 | 
22 | export default ExpenseItem;
23 | 


--------------------------------------------------------------------------------
/src/components/Chart/ChartBar.css:
--------------------------------------------------------------------------------
 1 | .chart-bar {
 2 |     height: 100%;
 3 |     display: flex;
 4 |     flex-direction: column;
 5 |     align-items: center;
 6 | }
 7 | 
 8 | .chart-bar__inner {
 9 |     height: 100%;
10 |     width: 100%;
11 |     border: 1px solid #313131;
12 |     border-radius: 12px;
13 |     background-color: #c3b4f3;
14 |     overflow: hidden;
15 |     display: flex;
16 |     flex-direction: column;
17 |     justify-content: flex-end;
18 | }
19 | 
20 | .chart-bar__fill {
21 |     background-color: #4826b9;
22 |     width: 100%;
23 |     transition: all 0.3s ease-out;
24 | }
25 | 
26 | .chart-bar__label {
27 |     font-weight: bold;
28 |     font-size: 0.5rem;
29 |     text-align: center;
30 | }
31 | 


--------------------------------------------------------------------------------
/src/components/ExpensesFilter/ExpensesFilter.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import './ExpensesFilter.css'
 3 | 
 4 | const ExpensesFilter = (props) => {
 5 |     const selectedFilterHandler = (event) => {
 6 |         props.onExpenseFilterSelect(event.target.value)
 7 |     }
 8 |     return (
 9 |         <div className="expenses-filter">
10 |             <div className="expenses-filter__control ">
11 |                 <label>Filter by year:</label>
12 | 
13 |                 <select name="years" id="years" value={props.selected}  onChange={selectedFilterHandler}>
14 |                     <option value="2024">2024</option>
15 |                     <option value="2023">2023</option>
16 |                     <option value="2022">2022</option>
17 |                     <option value="2021">2021</option>
18 |                 </select>
19 |             </div>
20 |         </div>
21 |     )
22 | }
23 | 
24 | export default ExpensesFilter
25 | 


--------------------------------------------------------------------------------
/src/components/Expenses/ExpensesChart.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Chart from "../Chart/Chart";
 3 | 
 4 | const ExpensesChart = (props) => {
 5 |     const chartDataPoints = [
 6 |         {label: 'Jan', value: 0},
 7 |         {label: 'Fab', value: 0},
 8 |         {label: 'Mar', value: 0},
 9 |         {label: 'Apr', value: 0},
10 |         {label: 'May', value: 0},
11 |         {label: 'Jun', value: 0},
12 |         {label: 'Jul', value: 0},
13 |         {label: 'Aug', value: 0},
14 |         {label: 'Set', value: 0},
15 |         {label: 'Oct', value: 0},
16 |         {label: 'Nov', value: 0},
17 |         {label: 'Dec', value: 0},
18 |     ]
19 | 
20 |     for (const expense of props.expenses) {
21 |         const expenseMonth = expense.date.getMonth()
22 |         chartDataPoints[expenseMonth].value += expense.amount
23 |     }
24 |     return (
25 |             <Chart dataPoints={chartDataPoints}></Chart>
26 |     )
27 | }
28 | 
29 | export default ExpensesChart
30 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-complete-guide",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.11.6",
 7 |     "@testing-library/react": "^11.2.2",
 8 |     "@testing-library/user-event": "^12.5.0",
 9 |     "react": "^17.0.1",
10 |     "react-dom": "^17.0.1",
11 |     "react-scripts": "4.0.1",
12 |     "web-vitals": "^0.2.4"
13 |   },
14 |   "scripts": {
15 |     "start": "react-scripts start",
16 |     "build": "react-scripts build",
17 |     "test": "react-scripts test",
18 |     "eject": "react-scripts eject"
19 |   },
20 |   "eslintConfig": {
21 |     "extends": [
22 |       "react-app",
23 |       "react-app/jest"
24 |     ]
25 |   },
26 |   "browserslist": {
27 |     "production": [
28 |       ">0.2%",
29 |       "not dead",
30 |       "not op_mini all"
31 |     ],
32 |     "development": [
33 |       "last 1 chrome version",
34 |       "last 1 firefox version",
35 |       "last 1 safari version"
36 |     ]
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/components/NewExpense/NewExpense.css:
--------------------------------------------------------------------------------
 1 | .new-expense {
 2 |     background-color: #a892ee;
 3 |     padding: 1rem;
 4 |     margin: 2rem auto;
 5 |     width: 50rem;
 6 |     max-width: 95%;
 7 |     border-radius: 12px;
 8 |     text-align: center;
 9 |     box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
10 | }
11 | 
12 | .new-expense button {
13 |     font: inherit;
14 |     cursor: pointer;
15 |     padding: 1rem 2rem;
16 |     border: 1px solid #40005d;
17 |     background-color: #40005d;
18 |     color: white;
19 |     border-radius: 12px;
20 |     margin-right: 1rem;
21 | }
22 | 
23 | .new-expense button:hover,
24 | .new-expense button:active {
25 |     background-color: #510674;
26 |     border-color: #510674;
27 | }
28 | 
29 | .new-expense button.alternative {
30 |     color: #220131;
31 |     border-color: transparent;
32 |     background-color: transparent;
33 | }
34 | 
35 | .new-expense button.alternative:hover,
36 | .new-expense button.alternative:active {
37 |     background-color: #ddb3f8;
38 | }
39 | 


--------------------------------------------------------------------------------
/src/components/NewExpense/NewExpense.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react'
 2 | import './NewExpense.css'
 3 | import ExpenseForm from "./ExpenseForm";
 4 | const NewExpense = (props) => {
 5 |     const saveExpenseDataHandler = (enteredExpenseData) => {
 6 |         const expenseData = {
 7 |             ...enteredExpenseData,
 8 |             id: Math.random().toString()
 9 |         }
10 |         props.onAddExpense(expenseData)
11 |     }
12 | 
13 |     const [showAddNewExpenseForm, setShowExpenseForm]= useState(false)
14 |     const showExpenseFormHandler = () => {
15 |         setShowExpenseForm((prevShowExpenseForm) => !prevShowExpenseForm)
16 |     }
17 |     return (
18 |         <div className="new-expense">
19 |             {showAddNewExpenseForm ?  <button type="button" onClick={showExpenseFormHandler}>Add new expense</button> :  <ExpenseForm onSaveExpenseData={saveExpenseDataHandler} showAddNewExpenseForm={showExpenseFormHandler}/>}
20 | 
21 | 
22 |         </div>
23 |     )
24 | }
25 | 
26 | export default NewExpense;
27 | 


--------------------------------------------------------------------------------
/src/components/Expenses/Expenses.js:
--------------------------------------------------------------------------------
 1 | import ExpenseItem from "./ExpenseItem";
 2 | import './Expenses.css'
 3 | import Card from "../UI/Card";
 4 | import ExpensesFilter from "../ExpensesFilter/ExpensesFilter";
 5 | import React, {useState} from 'react'
 6 | import ExpensesList from "./ExpensesList";
 7 | import ExpensesChart from "./ExpensesChart";
 8 | const Expenses = (props) => {
 9 |     const [filteredYear, setFilteredYear] = useState('2021')
10 |     const filteredExpenses = props.expenses.filter((expense) => expense.date.getFullYear().toString() === filteredYear)
11 |     const expenseFilterHandler = (selectedFilter) => {
12 |         setFilteredYear(selectedFilter)
13 |     }
14 |     return (
15 |         <Card className="expenses">
16 |             <ExpensesFilter selected={filteredYear} onExpenseFilterSelect={expenseFilterHandler}/>
17 |             <ExpensesChart expenses={filteredExpenses}/>
18 |             <ExpensesList items={filteredExpenses}></ExpensesList>
19 |         </Card>
20 | 
21 |     )
22 | }
23 | 
24 | export default Expenses
25 | 


--------------------------------------------------------------------------------
/src/components/Expenses/ExpenseItem.css:
--------------------------------------------------------------------------------
 1 | .expense-item {
 2 |     display: flex;
 3 |     justify-content: space-between;
 4 |     align-items: center;
 5 |     padding: 0.5rem;
 6 |     margin: 1rem 0;
 7 |     background-color: #4b4b4b;
 8 | }
 9 | 
10 | .expense-item__description {
11 |     display: flex;
12 |     flex-direction: column;
13 |     gap: 1rem;
14 |     align-items: flex-end;
15 |     flex-flow: column-reverse;
16 |     justify-content: flex-start;
17 |     flex: 1;
18 | }
19 | 
20 | .expense-item h2 {
21 |     color: #3a3a3a;
22 |     font-size: 1rem;
23 |     flex: 1;
24 |     margin: 0 1rem;
25 |     color: white;
26 | }
27 | 
28 | .expense-item__price {
29 |     font-size: 1rem;
30 |     font-weight: bold;
31 |     color: white;
32 |     background-color: #40005d;
33 |     border: 1px solid white;
34 |     padding: 0.5rem;
35 |     border-radius: 12px;
36 | }
37 | 
38 | @media (min-width: 580px) {
39 |     .expense-item__description {
40 |         flex-direction: row;
41 |         align-items: center;
42 |         justify-content: flex-start;
43 |         flex: 1;
44 |     }
45 | 
46 |     .expense-item__description h2 {
47 |         font-size: 1.25rem;
48 |     }
49 | 
50 |     .expense-item__price {
51 |         font-size: 1.25rem;
52 |         padding: 0.5rem 1.5rem;
53 |     }
54 | }
55 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import Expenses from "./components/Expenses/Expenses";
 2 | import NewExpense from "./components/NewExpense/NewExpense"
 3 | import React, {useState} from 'react'
 4 | const App = () => {
 5 |     const addExpenseHandler = (expense) => {
 6 |         setExpenses((prevExpense) => {
 7 |             return [expense, ...prevExpense]
 8 |         })
 9 |     }
10 |     const DUMMY_EXPENSES = [
11 |         {
12 |             id: 'e1',
13 |             title: 'Toilet Paper',
14 |             amount: 94.12,
15 |             date: new Date(2022, 7, 14),
16 |         },
17 |         {
18 |             id: 'e2',
19 |             title: 'New TV',
20 |             amount: 799.49,
21 |             date: new Date(2021, 2, 12) },
22 |         {
23 |             id: 'e3',
24 |             title: 'Car Insurance',
25 |             amount: 294.67,
26 |             date: new Date(2021, 2, 28),
27 |         },
28 |         {
29 |             id: 'e4',
30 |             title: 'New Desk (Wooden)',
31 |             amount: 450,
32 |             date: new Date(2021, 5, 12),
33 |         },
34 |     ];
35 | 
36 |     const [expenses, setExpenses] = useState(DUMMY_EXPENSES)
37 | 
38 |     return (
39 |         <div>
40 |             <NewExpense onAddExpense={addExpenseHandler}/>
41 |             <Expenses expenses={expenses}/>
42 |         </div>
43 |     );
44 | }
45 | 
46 | export default App;
47 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/components/NewExpense/ExpenseForm.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react'
 2 | import './ExpenseForm.css'
 3 | const ExpenseForm = (props) => {
 4 |     const submitHandler = (event) => {
 5 |         event.preventDefault()
 6 |         const expenseData = {
 7 |             title: userInput.enteredTitle,
 8 |             amount: +userInput.enteredAmount,
 9 |             date: userInput.enteredDate
10 |         }
11 |         props.onSaveExpenseData(expenseData)
12 | 
13 | 
14 | 
15 |     const [userInput, setUserInput] = useState({
16 |         enteredTitle: '',
17 |         enteredAmount: '',
18 |         enteredDate: ''
19 |     })
20 |     // const [enteredTitle, setEnteredTitle] = useState('')
21 |     // const [enteredAmount, setEnteredAmount] = useState('')
22 |     // const [enteredDate, setEnteredDate] = useState('')
23 |     const titleChangeHandler = (event) => {
24 |         setUserInput((prevState) => {
25 |             return {
26 |                 ...prevState,
27 |                 enteredTitle: event.target.value
28 |             }
29 |         })
30 |         // setEnteredTitle(event.target.value)
31 |     }
32 |     const dateChangeHandler = (event) => {
33 |         setUserInput((prevState) => {
34 |             return {
35 |                 ...prevState,
36 |                 enteredDate: new Date(event.target.value)
37 |             }
38 |         })
39 |         // setEnteredDate(event.target.value)
40 |     }
41 |     const amountChangeHandler = (event) => {
42 |         setUserInput((prevState) => {
43 |             return {
44 |                 ...prevState,
45 |                 enteredAmount: event.target.value
46 |             }
47 |         })
48 |         // setEnteredAmount(event.target.value)
49 |     }
50 |     const cancelNewExpenseHandler = () => {
51 |         props.showAddNewExpenseForm()
52 |     }
53 |  return (
54 |          <form onSubmit={submitHandler}>
55 |              <div className="new-expense__controls">
56 |                  <div className="new-expense__control">
57 |                      <label>Title</label>
58 |                      <input type="text" value={userInput.enteredTitle} onChange={titleChangeHandler}/>
59 |                  </div>
60 |                  <div className="new-expense__control">
61 |                      <label>Amount</label>
62 |                      <input type="number" min="0.01" step="0.01" value={userInput.enteredAmount} onChange={amountChangeHandler}/>
63 |                  </div>
64 |                  <div className="new-expense__control">
65 |                      <label>Date</label>
66 |                      <input type="date" min="2021-6-20" max="2024-06-20" value={userInput.date} onChange={dateChangeHandler}/>
67 |                  </div>
68 |              </div>
69 |              <div className="new-expense__actions">
70 |                  <button type="button" onClick={cancelNewExpenseHandler}>Cancel</button>
71 |                  <button type="submit">Add expense</button>
72 |              </div>
73 |          </form>
74 | 
75 |  )
76 | }
77 | 
78 | export default ExpenseForm;
79 | 


--------------------------------------------------------------------------------
/.eslintcache:
--------------------------------------------------------------------------------
1 | [{"/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/index.js":"1","/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/App.js":"2","/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/components/Expenses/Expenses.js":"3","/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/components/Expenses/ExpenseItem.js":"4","/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/components/UI/Card.js":"5","/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/components/Expenses/ExpenseDate.js":"6","/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/components/NewExpense/NewExpense.js":"7","/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/components/NewExpense/ExpenseForm.js":"8","/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/components/ExpensesFilter/ExpensesFilter.js":"9","/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/components/Expenses/ExpensesList.js":"10","/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/components/Chart/Chart.js":"11","/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/components/Chart/ChartBar.js":"12","/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/components/Expenses/ExpensesChart.js":"13"},{"size":142,"mtime":1616592305000,"results":"14","hashOfConfig":"15"},{"size":1168,"mtime":1624288696437,"results":"16","hashOfConfig":"15"},{"size":919,"mtime":1624292331591,"results":"17","hashOfConfig":"15"},{"size":568,"mtime":1624284053778,"results":"18","hashOfConfig":"15"},{"size":175,"mtime":1624020923872,"results":"19","hashOfConfig":"15"},{"size":529,"mtime":1624020923888,"results":"20","hashOfConfig":"15"},{"size":886,"mtime":1624286399790,"results":"21","hashOfConfig":"15"},{"size":2704,"mtime":1624300249619,"results":"22","hashOfConfig":"15"},{"size":786,"mtime":1624225282729,"results":"23","hashOfConfig":"15"},{"size":560,"mtime":1624283776062,"results":"24","hashOfConfig":"15"},{"size":567,"mtime":1624300072429,"results":"25","hashOfConfig":"15"},{"size":562,"mtime":1624300072453,"results":"26","hashOfConfig":"15"},{"size":816,"mtime":1624300033252,"results":"27","hashOfConfig":"15"},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},"1eh6kdm",{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"35","messages":"36","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"41","messages":"42","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"43","messages":"44","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"45","messages":"46","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"47","messages":"48","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"49","messages":"50","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"51","messages":"52","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"53","messages":"54","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/index.js",[],["55","56"],"/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/App.js",[],"/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/components/Expenses/Expenses.js",["57"],"/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/components/Expenses/ExpenseItem.js",["58"],"/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/components/UI/Card.js",[],"/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/components/Expenses/ExpenseDate.js",[],"/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/components/NewExpense/NewExpense.js",[],"/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/components/NewExpense/ExpenseForm.js",[],"/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/components/ExpensesFilter/ExpensesFilter.js",[],"/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/components/Expenses/ExpensesList.js",[],"/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/components/Chart/Chart.js",[],"/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/components/Chart/ChartBar.js",[],"/home/wallf/Documents/Stentle/Learn React/01-starting-setup/src/components/Expenses/ExpensesChart.js",[],{"ruleId":"59","replacedBy":"60"},{"ruleId":"61","replacedBy":"62"},{"ruleId":"63","severity":1,"message":"64","line":1,"column":8,"nodeType":"65","messageId":"66","endLine":1,"endColumn":19},{"ruleId":"63","severity":1,"message":"67","line":5,"column":17,"nodeType":"65","messageId":"66","endLine":5,"endColumn":25},"no-native-reassign",["68"],"no-negated-in-lhs",["69"],"no-unused-vars","'ExpenseItem' is defined but never used.","Identifier","unusedVar","'useState' is defined but never used.","no-global-assign","no-unsafe-negation"]


--------------------------------------------------------------------------------