Monday 9 July 2018

react+redux+material-UI transaction paper

project link: https://chuanshuoge1-transaction-paper.herokuapp.com/

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