Unverified Commit eff4ef9c authored by andreswebs's avatar andreswebs
Browse files

refactor: user and wallet reducers

parent 9fb1ace1
......@@ -127,6 +127,7 @@ class Sidebar extends React.Component {
const photo = `${classes.photo} ${cx({
[classes.photoRTL]: rtlActive
})}`;
const userComponent = (
<div className={userWrapperClass}>
<div className={photo}>
......@@ -207,6 +208,7 @@ class Sidebar extends React.Component {
</List>
</div>
);
const links = (
<List className={classes.list}>
{routes.map(prop => {
......@@ -343,12 +345,15 @@ class Sidebar extends React.Component {
rtlActive && this.props.miniActive && this.state.miniActive,
[classes.logoNormalRTL]: rtlActive
})}`;
const logoMini = `${classes.logoMini} ${cx({
[classes.logoMiniRTL]: rtlActive
})}`;
const logoClasses = `${classes.logo} ${cx({
[classes.whiteAfter]: bgColor === 'white'
})}`;
const brand = (
<div className={logoClasses}>
<a href="https://bankofthecommons.coop/" className={logoMini}>
......@@ -359,15 +364,18 @@ class Sidebar extends React.Component {
</a>
</div>
);
const drawerPaper = `${classes.drawerPaper} ${cx({
[classes.drawerPaperMini]: this.props.miniActive && this.state.miniActive,
[classes.drawerPaperRTL]: rtlActive
})}`;
const sidebarWrapper = `${classes.sidebarWrapper} ${cx({
[classes.drawerPaperMini]: this.props.miniActive && this.state.miniActive,
[classes.sidebarWrapperWithPerfectScrollbar]:
navigator.platform.indexOf('Win') > -1
})}`;
return (
<div>
<Hidden mdUp implementation="css">
......
// Code from:
// https://usehooks.com/
// Useful for debugging
// but not used in prod
import { useEffect, useRef } from 'react';
function useWhyDidYouUpdate(name, props) {
// Get a mutable ref object where we can store props ...
// ... for comparison next time this hook runs.
const previousProps = useRef();
useEffect(() => {
if (previousProps.current) {
// Get all keys from previous and current props
const allKeys = Object.keys({ ...previousProps.current, ...props });
// Use this object to keep track of changed props
const changesObj = {};
// Iterate through keys
allKeys.forEach(key => {
// If previous is different from current
if (previousProps.current[key] !== props[key]) {
// Add to changesObj
changesObj[key] = {
from: previousProps.current[key],
to: props[key]
};
}
});
// If changesObj not empty then output to console
if (Object.keys(changesObj).length) {
console.log('[why-did-you-update]', name, changesObj);
}
}
// Finally update previousProps with current props for next hook call
previousProps.current = props;
});
}
export default useWhyDidYouUpdate;
......@@ -17,7 +17,9 @@ import appStyle from 'assets/jss/material-dashboard-react/layouts/dashboardStyle
import image from 'assets/img/sidebar-2.jpg';
import logo from 'logo.jpg';
import * as actions from './actions';
import { getUser } from 'store/user/actions';
import { getWallet } from 'store/wallet/actions';
const switchRoutes = (
<Switch>
......@@ -52,10 +54,11 @@ class DashboardLayout extends React.Component {
this.handleDrawerToggle = this.handleDrawerToggle.bind(this);
this.sidebarMinimize = this.sidebarMinimize.bind(this);
this.resizeFunction = this.resizeFunction.bind(this);
this.getDashboardData = this.getDashboardData.bind(this);
}
componentDidMount() {
this.props.getMe();
this.getDashboardData([this.props.getUser, this.props.getWallet]);
}
// TODO: fix me
......@@ -70,6 +73,10 @@ class DashboardLayout extends React.Component {
return this.props.location.pathname !== '/maps/full-screen-maps';
};
getDashboardData = (fetchers = [() => {}]) => {
fetchers.forEach(f => f());
};
handleDrawerToggle = () => {
this.setState(prevState => ({ mobileOpen: !prevState.mobileOpen }));
};
......@@ -132,7 +139,6 @@ const mapStateToProps = state => ({
walletStatus: state.wallet.status
});
export default connect(
mapStateToProps,
actions
)(withStyles(appStyle)(DashboardLayout));
export default connect(mapStateToProps, { getUser, getWallet })(
withStyles(appStyle)(DashboardLayout)
);
import DashboardLayout from './DashboardLayout';
export default DashboardLayout;
......@@ -3,12 +3,14 @@ import WalletBalance from 'widgets/WalletBalance';
import Transactions from 'widgets/Transactions';
import WalletActions from 'widgets/WalletActions';
const Wallet = () => (
<div>
<WalletBalance />
<WalletActions />
<Transactions />
</div>
);
const Wallet = () => {
return (
<div>
<WalletBalance />
<WalletActions />
<Transactions />
</div>
);
};
export default Wallet;
......@@ -2,10 +2,8 @@ import { combineReducers } from 'redux';
// reducers namespaces
import { walletActionsReducer as walletActions } from 'widgets/WalletActions/reducer';
import {
userReducer as user,
walletReducer as wallet
} from 'layouts/DashboardLayout/reducers';
import { walletReducer as wallet } from './wallet/reducer';
import { userReducer as user } from './user/reducer';
import { loginReducer as login } from './login/reducer';
import { currencyValuesReducer as currencyValues } from './currency-values/reducer';
import { earningsReducer as earnings } from './earnings/reducer';
......
import { fetchApi, logOut } from 'utils';
import { USER, WALLET } from './constants';
import { USER } from './constants';
const USER_WALLET_PATH = process.env.REACT_APP_USER_WALLET_PATH;
const USER_ACCOUNT_PATH = process.env.REACT_APP_USER_ACCOUNT_PATH;
function reset() {
......@@ -43,73 +42,16 @@ function success(user) {
};
}
function resetWallet() {
return {
type: WALLET,
payload: {
status: 'initial'
}
};
}
function beginWallet() {
return {
type: WALLET,
payload: {
status: 'pending'
}
};
}
function failureWallet(error) {
return {
type: WALLET,
payload: {
status: 'error',
error
},
error: true
};
}
function successWallet(wallet) {
return {
type: WALLET,
payload: {
status: 'success',
wallet
}
function getUser() {
return function(dispatch) {
dispatch(begin());
return fetchApi({ path: USER_ACCOUNT_PATH })
.then(response => dispatch(success(response.data)))
.catch(error => {
logOut();
dispatch(failure(error));
});
};
}
const getMe = () => dispatch => {
dispatch(begin());
dispatch(beginWallet());
Promise.all([
fetchApi({ path: USER_ACCOUNT_PATH }),
fetchApi({ path: USER_WALLET_PATH })
])
.then(responses => {
const user = responses[0];
const wallet = responses[1];
dispatch(success(user.data));
dispatch(successWallet(wallet.data));
})
.catch(error => {
logOut();
dispatch(failure(error));
dispatch(failureWallet(error));
});
};
export {
reset,
begin,
success,
failure,
resetWallet,
beginWallet,
successWallet,
failureWallet,
getMe
};
export { reset, begin, success, failure, getUser };
export const USER = 'USER';
import { USER } from './constants';
const initialState = {
status: 'initial',
user: {},
error: null
};
function userReducer(state = initialState, action) {
if (action.type === USER) {
const { status, user, error } = action.payload;
return {
status,
user: user || state.user,
error: error || state.error
};
}
return state;
}
export { userReducer };
import { fetchApi, logOut } from 'utils';
import { WALLET } from './constants';
const USER_WALLET_PATH = process.env.REACT_APP_USER_WALLET_PATH;
function reset() {
return {
type: WALLET,
payload: {
status: 'initial'
}
};
}
function begin() {
return {
type: WALLET,
payload: {
status: 'pending'
}
};
}
function failure(error) {
return {
type: WALLET,
payload: {
status: 'error',
error
},
error: true
};
}
function success(wallet) {
return {
type: WALLET,
payload: {
status: 'success',
wallet
}
};
}
function getWallet() {
return function(dispatch) {
dispatch(begin());
return fetchApi({ path: USER_WALLET_PATH })
.then(response => dispatch(success(response.data)))
.catch(error => {
logOut();
dispatch(failure(error));
});
};
}
export { reset, begin, success, failure, getWallet };
import { USER, WALLET } from './constants';
import { WALLET } from './constants';
function userReducer(
state = { status: 'initial', user: {}, error: null },
action
) {
if (action.type === USER) {
const { status, user, error } = action.payload;
const initialState = { status: 'initial', wallet: [], error: null };
return {
status,
user: user || state.user,
error: error || state.error
};
}
return state;
}
function walletReducer(
state = { status: 'initial', wallet: [], error: null },
action
) {
function walletReducer(state = initialState, action) {
if (action.type === WALLET) {
const { status, wallet, error } = action.payload;
......@@ -34,4 +16,4 @@ function walletReducer(
return state;
}
export { userReducer, walletReducer };
export { walletReducer };
Supports Markdown
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