open project site 4 transaction record
add sam transaction
sam is added
change sam transaction, housing->childcare, amount -234.56->-456.78
sam transaction is updated
delete sam transaction
sam transaction is delete
//package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^1.3.1",
"@material-ui/icons": "^1.1.0",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"react-scripts": "1.1.4",
"react-text-mask": "^5.4.2",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-promise-middleware": "^5.1.1",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"redux-devtools": "^3.4.1"
}
}
-------------------------------------------------
src folder
--store
--actions
--transactionAction
--reducers
--index
--transactionReducer
--forms
--create
--delete
--display
--icons
--update
--app
--index
---------------------------------
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { Provider } from "react-redux";
import store from "./store";
ReactDOM.render(
<Provider store={store}><App /></Provider>,
document.getElementById('root'));
registerServiceWorker();
-------------------------------------------------
store.js
import { applyMiddleware, createStore } from 'redux';
import logger from 'redux-logger';
import thunk from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware';
import reducer from "./reducers";
const middleware = applyMiddleware(promiseMiddleware(), thunk, logger);
export default createStore(reducer, middleware);
-----------------------------------------------------------
transactionAction.js
export function createAction(name, category, amount) {
return {
type: "create",
payload: {
name: name,
category: category,
amount: amount,
}
}
}
export function deleteAction(id) {
return {
type: "delete",
payload: {
id:id,
}
}
}
export function updateAction(id, name, category, amount) {
return {
type: "update",
payload: {
id: id,
name: name,
category: category,
amount: amount,
}
}
}
--------------------------------------------
reducer index.js
import { combineReducers } from 'redux';
import transactions from "./transactionReducer";
export default combineReducers(
{
transactions
})
------------------------------------------
transactionReducer.js
export default function reducer(
state = {
transactions: [
{ name: "bob", category: 1, amount: 1000 },
{ name: "bob", category: 3, amount: -23.45 },
{ name: "bob", category: 5, amount: -34.56 },
{ name: "bob", category: 7, amount: -45.67 },
]
},
action
) {
switch (action.type) {
case "create": {
const newTransaction = {
name: action.payload.name,
category: action.payload.category,
amount: action.payload.amount,
};
const newTransactions = [...state.transactions];
newTransactions.push(newTransaction);
return { ...state, transactions: newTransactions }
}
case "delete": {
const newTransactions = [...state.transactions];
newTransactions.splice(action.payload.id, 1);
return { ...state, transactions: newTransactions }
}
case "update": {
const newTransactions = [...state.transactions];
newTransactions[action.payload.id] = {
name: action.payload.name,
category: action.payload.category,
amount: action.payload.amount,
}
return { ...state, transactions: newTransactions }
}
default:
break;
}
return state;
}
--------------------------------------------
app.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createAction, updateAction, deleteAction } from './actions/transactionAction';
import Display from './forms/display';
import Create from './forms/create';
import Update from './forms/update';
import Delete from './forms/delete';
import { categoryText } from './forms/icons';
import './App.css';
import Paper from '@material-ui/core/Paper';
class App extends Component {
constructor(props) {
super(props);
this.state = {
createFormOpen: false,
updateFormOpen: false,
deleteFormOpen: false,
updateId: "",
updateName: "",
updateCategory: 0,
updateAmount: 0,
deleteId: "",
};
}
handleClick_addButton() {
this.setState({ createFormOpen:true })
}
handleClick_updateButton(id) {
const profile = this.props.transactions[id];
this.setState({
updateFormOpen: true,
updateId: id,
updateName: profile.name,
updateCategory: profile.category,
updateAmount: profile.amount,
})
}
handleClick_deleteButton(id) {
this.setState({
deleteFormOpen: true,
deleteId: id,
})
}
handleNameChange(e) {
this.setState({ updateName: e.target.value, });
}
handleCategoryChange( e) {
this.setState({ updateCategory: parseInt( e.target.value) });
}
handleAmountChange(e) {
this.setState({ updateAmount: parseFloat(e.target.value) });
}
handleClick_createCancel() {
this.setState({ createFormOpen: false })
}
handleClick_updateCancel() {
this.setState({ updateFormOpen: false })
}
handleClick_deleteCancel() {
this.setState({deleteFormOpen: false})
}
handleClick_createSubmit(a,b,c) {
this.setState({ createFormOpen: false, });
this.handle_createProfile(a, b, c);
}
handleClick_updateSubmit() {
this.setState({ updateFormOpen: false, });
this.handle_updateProfile(
this.state.updateId,
this.state.updateName,
this.state.updateCategory,
this.state.updateAmount );
}
handleClick_deleteSubmit() {
this.setState({ deleteFormOpen: false });
this.handle_deleteProfile(this.state.deleteId);
}
handle_createProfile(a,b,c) {
this.props.dispatch(createAction(a,b,c))
}
handle_deleteProfile(id) {
this.props.dispatch(deleteAction(id))
}
handle_updateProfile(id, a, b, c) {
this.props.dispatch(updateAction(id, a, b, c))
}
render() {
console.log(this.props.transactions);
const profiles =(
<div>
{/* ------------display list------------------- */}
<Display
profiles={this.props.transactions}
callBack_add={() => this.handleClick_addButton()}
callBack_delete={(id) => this.handleClick_deleteButton(id)}
callBack_update={(id) => this.handleClick_updateButton(id)}/>
{/* ------------create dialog------------------- */}
<Create open={this.state.createFormOpen}
callBack_cancel={() => this.handleClick_createCancel()}
callBack_submit={(name, category, amount) => this.handleClick_createSubmit(name, category, amount)} />
{/* ------------delete dialog------------------- */}
{
this.state.deleteId !== "" ?
<Delete open={this.state.deleteFormOpen}
callBack_cancel={() => this.handleClick_deleteCancel()}
callBack_submit={() => this.handleClick_deleteSubmit()} />
: null
}
{/* ------------update dialog------------------- */}
{
this.state.updateId!==""?
<Update open={this.state.updateFormOpen}
name={this.state.updateName}
category={this.state.updateCategory}
amount={this.state.updateAmount}
nameChange_callBack={( e) => this.handleNameChange( e)}
categoryChange_callBack={( e) => this.handleCategoryChange( e)}
amountChange_callBack={(e)=>this.handleAmountChange(e)}
callBack_cancel={() => this.handleClick_updateCancel()}
callBack_submit={() =>this.handleClick_updateSubmit()} />
: null
}
</div> )
return (
<div style={{ display: "flex" }}>
<div className="transaction-list">
<Paper elevation={1}>
{profiles}
</Paper>
</div>
</div>
);
}
}
export default connect(
(store) => {
return {
transactions: store.transactions.transactions,
};
}
)(App);
reference:
No comments:
Post a Comment