Loading...
);
21 |
22 | return (
23 |
24 |
25 |
26 |
Categories
27 | {
28 | Categories.map( category =>
29 |
30 | {category.name}
31 |
32 | )
33 |
34 | }
35 |
36 |
37 | );
38 | }
39 | }
40 |
41 | export default Category;
--------------------------------------------------------------------------------
/app/src/Expsenses.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import AppNav from './AppNav';
3 | import DatePicker from 'react-datepicker';
4 | import "react-datepicker/dist/react-datepicker.css";
5 | import './App.css';
6 | import { Table,Container,Input,Button,Label, FormGroup, Form} from 'reactstrap';
7 | import {Link} from 'react-router-dom';
8 | import Moment from 'react-moment';
9 |
10 | class Expsenses extends Component {
11 |
12 | // {
13 | // "id": 100,
14 | // "expensedate": "2019-06-16T17:00:00Z",
15 | // "description": "New York Business Trip",
16 | // "location": "New York",
17 | // "category": {
18 | // "id": 1,
19 | // "name": "Travel"
20 | // }
21 | // },
22 |
23 | emptyItem = {
24 | description : '' ,
25 | expensedate : new Date(),
26 | id:104,
27 | location : '',
28 | category : {id:1 , name:'Travel'}
29 | }
30 |
31 |
32 | constructor(props){
33 | super(props)
34 |
35 | this.state = {
36 | isLoading :false,
37 | Categories:[],
38 | Expsenses : [],
39 | date :new Date(),
40 | item : this.emptyItem
41 | }
42 |
43 | this.handleSubmit= this.handleSubmit.bind(this);
44 | this.handleChange= this.handleChange.bind(this);
45 | this.handleDateChange= this.handleDateChange.bind(this);
46 |
47 | }
48 |
49 | async handleSubmit(event){
50 |
51 | const item = this.state.item;
52 |
53 |
54 | await fetch(`/api/expenses`, {
55 | method : 'POST',
56 | headers : {
57 | 'Accept': 'application/json',
58 | 'Content-Type': 'application/json'
59 | },
60 | body : JSON.stringify(item),
61 | });
62 |
63 | event.preventDefault();
64 | this.props.history.push("/expenses");
65 | }
66 |
67 |
68 | handleChange(event){
69 | const target= event.target;
70 | const value= target.value;
71 | const name = target.name;
72 | let item={...this.state.item};
73 | item[name] = value;
74 | this.setState({item});
75 | console.log(item);
76 | }
77 |
78 |
79 | handleDateChange(date){
80 | let item={...this.state.item};
81 | item.expensedate= date;
82 | this.setState({item});
83 |
84 | }
85 |
86 |
87 |
88 |
89 |
90 |
91 | async remove(id){
92 | await fetch(`/api/expenses/${id}` , {
93 | method: 'DELETE' ,
94 | headers : {
95 | 'Accept' : 'application/json',
96 | 'Content-Type' : 'application/json'
97 | }
98 |
99 | }).then(() => {
100 | let updatedExpenses = [...this.state.Expsenses].filter(i => i.id !== id);
101 | this.setState({Expsenses : updatedExpenses});
102 | });
103 |
104 | }
105 |
106 |
107 | async componentDidMount() {
108 |
109 |
110 |
111 | const response= await fetch('/api/categories');
112 | const body= await response.json();
113 | this.setState({Categories : body , isLoading :false});
114 |
115 |
116 | const responseExp= await fetch('/api/expenses');
117 | const bodyExp = await responseExp.json();
118 | this.setState({Expsenses : bodyExp , isLoading :false});
119 | console.log(bodyExp);
120 |
121 | }
122 |
123 |
124 |
125 |
126 |
127 | render() {
128 | const title =Loading....
)
135 |
136 |
137 |
138 | let optionList =
139 | Categories.map( (category) =>
140 |