Skip to content
Snippets Groups Projects
Commit c969b385 authored by VOGT VICTOR's avatar VOGT VICTOR
Browse files

Feature/trans

parent 1cb220ef
Branches
2 merge requests!10Develop,!9Feature/trans
Hide whitespace changes
Inline Side-by-side
frontend/src/actions/Bank.actions.js
+ 35
− 33
View file @ c969b385
import {userService} from "../services/authentication.service";
export const profileDataFetchSuccess = (data) => {
const MONEY_API_URL = 'https://money.erp.uni.princelle.org';
export const transactionDataFetchSuccess = (data) => {
return {
type:'PROFILE_DATA_REQ_SUCCESS',
type:'TRANS_DATA_REQ_SUCCESS',
data
}
}
export const profileDataFetchFailure = () => {
export const transactionDataFetchFailure = (message) => {
return {
type:'PROFILE_DATA_REQ_FAILURE'
type:'TRANS_DATA_REQ_FAILURE',
message
}
}
export const updateUserSuccess = () => {
export const profileDataFetchSuccess = (data) => {
return {
type:'UPDATE_USER_SUCCESS',
type:'PROFILE_DATA_REQ_SUCCESS',
data
}
}
export const updateUserFailure = (error) => {
export const profileDataFetchFailure = (message) => {
return {
type:'UPDATE_USER_FAILURE',
message:error,
type:'PROFILE_DATA_REQ_FAILURE',
message
}
}
export const fetchUserData = () => {
export const fetchUserTransactions = (student_number) => {
return async (dispatch) => {
const response = await fetch( "/api/me", {
const response = await fetch(MONEY_API_URL+'/transactions/get/'+student_number, {
method: 'GET',
headers: {
'Authorization': userService.getToken()
}
})
if(response.ok){
response.json().then(data => {
dispatch(profileDataFetchSuccess(data));
}).catch(err => dispatch(profileDataFetchFailure(err)));
console.log(data);
let balance = data.rows.map(data => data.amount).reduce((sum, amount) => sum + amount);
let data_sorted = data.rows.sort(function(a,b){return Date.parse(a.concluded_at) - Date.parse(b.concluded_at)});
dispatch(transactionDataFetchSuccess({balance: balance, transactions: data_sorted}));
}).catch(err => dispatch(transactionDataFetchFailure(err)));
}
else{
response.json().then(error => {
dispatch(profileDataFetchFailure(error));
}).catch(err => dispatch(profileDataFetchFailure(err)));
dispatch(transactionDataFetchFailure(error));
}).catch(err => dispatch(transactionDataFetchFailure(err)));
}
return response;
}
}
export const changeUserData = (data) => {
export const fetchUserData = () => {
return async (dispatch) => {
const response = await fetch( "/api/me/update", {
method: 'POST',
const response = await fetch( "/api/me", {
method: 'GET',
headers: {
'Authorization': userService.getToken(),
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(data),
})
'Authorization': userService.getToken()
}
});
if(response.ok){
dispatch(updateUserSuccess());
}
else{
response.json().then(data => {
dispatch(profileDataFetchFailure(data));
}).catch(err => dispatch(profileDataFetchFailure(err)));
} else {
response.json().then(error => {
dispatch(updateUserFailure(error));
}).catch(err => dispatch(updateUserFailure(err)));
dispatch(profileDataFetchFailure(error));
}).catch(err => dispatch(profileDataFetchFailure(err)));
}
return response;
......
frontend/src/containers/Bank.container.js
+ 38
− 63
View file @ c969b385
......@@ -3,68 +3,43 @@ import React from 'react';
import logo_trans from '../icons/transaction.png';
import logo_money from '../icons/dollar.png';
import { withRouter } from 'react-router-dom'
import { Table, Button, Card, Image, Row, Col, Nav } from "react-bootstrap";
import { Table, Button, Card, Image, Row, Col, Nav, NavItem } from "react-bootstrap";
import * as bankActions from "../actions/Bank.actions";
import { Link} from "react-router-dom";
import { Link } from "react-router-dom";
export class Bank extends React.Component {
constructor(props) {
super(props);
}
this.state = {
readOnly: true
};
this.switchToEditionMode = this.switchToEditionMode.bind(this);
componentDidUpdate(){
console.log('PROFILE', this.props.profile);
console.log('BANK', this.props.bank);
console.log('PROPS', this.props);
}
componentDidMount(){
this.props.fetchUserData();
this.props.reinitializeState();
}
componentDidUpdate(prevProps) {
if (prevProps.state !== this.props.state) {
this.setState({
readOnly: this.props.state.updateUserSuccess
});
}
}
handleChange = event => {
this.setState({
[event.target.id]: event.target.value,
});
this.props.fetchUserTransactions(this.props.profile.me.student_number);
console.log('MOUNT PROFILE', this.props.profile);
console.log('MOUNT BANK', this.props.bank);
console.log('MOUNT PROPS', this.props);
}
switchToEditionMode() {
this.setState({
readOnly: false
});
}
changeUserData() {
this.props.changeUserData(this.state);
}
render() {
return (
<div>
<Row style={{ width: '95%', margin: '0 auto', marginTop:'30px' }}>
<Col xs lg="4">
<Card className="block-example border border-dark" style={{ width: '100%', margin: '0 auto', marginTop:'200px', border:'none', textAlign: "center"}}>
<Row style={{ height: '100%', width: '95%', margin: '0 auto', marginTop:'30px' }}>
<Col lg="4" className='block-example border-right border-gray bg-light' style={{ marginTop:'20px', width: '100%', height: '100%', border: 'none', display: 'flex', justifyContent: 'center', alignItems: 'center', textAlign: 'center'}} >
<Card className='bg-light' style={{ width: '100%', height: '100%', border: 'none', display: 'flex', justifyContent: 'center', alignItems: 'center', textAlign: 'center'}}>
<Card.Body>
<Card.Title>Compte</Card.Title>
<Card.Text style={{display: 'flex', justifyContent: 'center'}}>
<Image src={logo_money} alt="argent" width={50} height={50} />
<Card.Title>Solde</Card.Title>
<Card.Img src={logo_money} alt="argent" width={50} height={50} />
<Card.Text style={{textAlign: 'center', fontSize:'20px'}}>
{this.props.bank.account ? this.props.bank.account.balance : 'NaN'} €
</Card.Text>
<div style={{display: 'flex', justifyContent: 'center', fontSize:"20px", fontWeight:"bold"}}>
<div className="p-3 block-example border border-dark rounded-pill">120 €</div>
</div>
<Button variant="primary">Ajouter des fonds </Button>
</Card.Body>
</Card>
</Col>
......@@ -74,30 +49,29 @@ export class Bank extends React.Component {
<Card.Title>Transactions</Card.Title>
<Table hover style={{ marginTop:'50px' }}>
<tbody>
<tr>
<td><Image src={logo_trans} alt="transaction" width={30} height={30} /></td>
<td colSpan="3">29/09/2021</td>
<td>-8€</td>
</tr>
<tr>
<td><Image src={logo_trans} alt="transaction" width={30} height={30} /></td>
<td colSpan="3">29/09/2021</td>
<td>-8€</td>
</tr>
<tr>
<td><Image src={logo_trans} alt="transaction" width={30} height={30} /></td>
<td colSpan="3">29/09/2021</td>
<td>-8€</td>
</tr>
{ this.props.bank.account ?
this.props.bank.account.transactions.map((transaction) => {
return (
<tr key={'trans'+transaction.id}>
<td><Image src={logo_trans} alt='transaction' width={30} height={30} /></td>
<td style={{fontStyle:'italic'}} colSpan='3'>{transaction.concluded_at}</td>
<td style={{fontStyle:'italic', color:'#242424'}} colSpan='3'>{transaction.comment}</td>
<td>{transaction.amount}€</td>
</tr>
);
})
:
null
}
</tbody>
</Table>
</Card.Body>
</Card>
</Col>
{this.props.state.updateUserError && <div><br/>{JSON.stringify(this.props.state.updateUserErrorMessage.message)}</div>}
{this.props.state.updateUserSuccess && <div><br/>Success! You can now use your new password.</div>}
{this.props.profile.updateUserError && <div><br/>{JSON.stringify(this.props.profile.updateUserErrorMessage.message)}</div>}
{this.props.profile.updateUserSuccess && <div><br/>Success! You can now use your new password.</div>}
</Row>
<footer className="footer mt-auto">
<footer className="footer mt-auto" style={{ position:'absolute', left:0, bottom:0, right:0}}>
<div className="container" style={{ textAlign : "center"}}>
<Nav.Link as={Link} to="/privacy/">
Politique de confidentialité
......@@ -112,14 +86,15 @@ export class Bank extends React.Component {
// map state from store to props
const mapStateToProps = (state) => {
return {
state: state.profile
profile: state.profile,
bank: state.bank
}
}
// map actions to props
const mapDispatchToProps = (dispatch) => {
return {
fetchUserData: () => dispatch(bankActions.fetchUserData()),
changeUserData: (data) => dispatch(bankActions.changeUserData(data)),
fetchUserTransactions: (data) => dispatch(bankActions.fetchUserTransactions(data)),
reinitializeState: () => dispatch(bankActions.reinitializeState()),
}
}
......
frontend/src/reducers/Bank.reducer.js
+ 12
− 17
View file @ c969b385
const INITIAL_STATE = {
me: {},
updateUserError: false,
updateUserErrorMessage: {},
updateUserSuccess: false,
loading: false,
profileDataError: false,
account: {balance: 0, transactions: []},
fetchBankError: false,
fetchBankErrorMessage: {},
loading: false
}
const forgotpasswordReducer = (currentState = INITIAL_STATE, action) => {
const bankReducer = (currentState = INITIAL_STATE, action) => {
console.log('BANK REDUCER', action);
switch (action.type) {
case 'REINITIALIZE_STATE':
return {...currentState, updateUserError: false, updateUserErrorMessage: {}, loading:false, updateUserSuccess:false};
case 'PROFILE_DATA_REQ_SUCCESS':
return {...currentState, me:action.data};
case 'PROFILE_DATA_REQ_FAILURE':
return {...currentState, profileDataError: true};
case 'UPDATE_USER_FAILURE':
return {...currentState, updateUserError:true, updateUserErrorMessage:action.message, loading: false, updateUserSuccess:false};
case 'UPDATE_USER_SUCCESS':
return {...currentState, updateUserError:false, updateUserErrorMessage:{}, updateUserSuccess: true, loading: false};
return {...currentState, fetchBankError: false, fetchBankErrorMessage: {}, loading:false};
case 'TRANS_DATA_REQ_FAILURE':
return {...currentState, fetchBankError:true, fetchBankErrorMessage:action.message, loading: false};
case 'TRANS_DATA_REQ_SUCCESS':
return {...currentState, account:action.data, fetchBankError:false, fetchBankErrorMessage:{}, loading: false};
default:
return currentState;
}
}
export default forgotpasswordReducer;
export default bankReducer;
frontend/src/reducers/index.js
+ 2
− 0
View file @ c969b385
......@@ -4,11 +4,13 @@ import appReducer from './App.reducer';
import signupReducer from './SignUp.reducer';
import loginReducer from './Login.reducer';
import profileReducer from './Profile.reducer';
import bankReducer from './Bank.reducer';
export default combineReducers({
app:appReducer,
signup:signupReducer,
login:loginReducer,
profile:profileReducer,
bank:bankReducer,
routing:routerReducer,
})
frontend/src/setupProxy.js
+ 1
− 1
View file @ c969b385
const proxy = require('http-proxy-middleware');
module.exports = function (app) {
app.use(proxy('/api', { target: 'http://localhost:8090/'}));
app.use(proxy('/api', { target: 'http://localhost:8005/'}));
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment