Skip to content

Instantly share code, notes, and snippets.

@jermsam
Last active May 16, 2018 10:36
Show Gist options
  • Save jermsam/501667a8a2cd479242777b13c8a72861 to your computer and use it in GitHub Desktop.
Save jermsam/501667a8a2cd479242777b13c8a72861 to your computer and use it in GitHub Desktop.
My this.props.history tends to get lost before it reaches my authenticated component
TypeError: Cannot read property 'push' of undefined
UserPageUI._this.onSubmit
E:/code/auth/cash/tav/tav-c/src/pages/UserPage.js:21
18 |
19 | class UserPageUI extends Component {
20 |
> 21 | onSubmit= (user) => {
22 | const {onPatch, history:{push},authUser } = this.props;
23 | // const {onPatch, authUser} = this.props;
24 | console.log ('babababababa: ',user)
View compiled
▶ 26 stack frames were collapsed.
import React,{Component} from 'react'
import PropTypes from 'prop-types'
import {compose} from 'recompose'
import {connect} from 'react-redux'
import {
Divider, Message,Container
} from 'semantic-ui-react';
import { withRouter,} from 'react-router-dom'
import withAuthorization from './hocs/withAuthorization'
import SetUpProfile from './dashboardComponents/SetUpProfile'
import DashboardLayout from './frames/DashboardLayout'
import DashboardTopMenu from './navs/DashboardTopMenu'
import ManageRoleAndPasswordForm from './forms/ManageRoleAndPasswordForm'
import {services} from '../services';
class UserPageUI extends Component {
onSubmit= (user) => {
const {onPatch, history:{push},authUser } = this.props;
// const {onPatch, authUser} = this.props;
console.log ('babababababa: ',user)
return onPatch(authUser.id,user).then(
()=>push(`/${user.role}s/${authUser.id}`)
)
}
render(){
const {authUser,loading,errors,history} = this.props
const errs =(errors)? errors.message.split(","):'';
return (
<DashboardLayout
topMenu={<DashboardTopMenu stProfileIsSet={false} homeURL='/student'/>}
profileIsSet={false}
mainContent=
{// !profileIsSet ?
<SetUpProfile intro={`Welcome ${authUser.firstname}`} subintro="All of us @ Takesavillage are excited to have you:" uploadAction='Add'
instruction="Please tell us more about your intensions:"
>
<Divider section hidden/>
{
errors &&
<Container text textAlign='justified'>
<Message
error
header='There are some errors with your submission'
list={errs.map(e=>e)}
/>
</Container>
}
<Divider hidden />
<Divider hidden />
<ManageRoleAndPasswordForm
onSubmit={this.onSubmit}
user={authUser}
errors={errors}
loading={loading}
history={history}
/>
</SetUpProfile>
// :
// <StudentHomeContent />
}
// sideContent={sideContent}
/>
);
}
}
UserPageUI.propTypes={
// users:PropTypes.arrayOf(PropTypes.shape({})).isRequired,
authUser:PropTypes.shape({}).isRequired,
loading:PropTypes.bool,
errors:PropTypes.shape({}),
history:PropTypes.shape({
push:PropTypes.func.isRequired
}).isRequired,
onPatch:PropTypes.func.isRequired,
}
UserPageUI.defaultProps={
errors:{},
loading:false
}
const mapStateToProps=state=>({
authUser: state.authUserState.authUser,
errors: state.userState.isError ,
loading:state.userState.isLoading
})
const mapDispatchToProps = (dispatch) => ({
onPatch:(id,user)=>dispatch(services.users.patch(id,user))
});
const authCondition = (authUser) => !!(authUser);
const UserPage=compose( withAuthorization(authCondition,mapDispatchToProps),connect(mapStateToProps))(UserPageUI)
export default UserPage
import React from 'react';
// import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { compose } from 'recompose';
import { withRouter,} from 'react-router-dom'
import {
getUserFromJwtTocken,
session} from '../../services';
/* eslint-disable no-console */
const withAuthorization = (authCondition) => (MyComponent) => {
class WithAuthorization extends React.Component {
componentDidMount(){
const {authUser,history:{push}, isLoggedin,onLogon,retrieveAuthUserFromJWT} = this.props
// const token = localStorage.getItem('feathers-jwt');
// retrieveAuthUserFromJWT(token).then((u)=>{
// console.log('LLLOOO: ',u)
const token = localStorage.getItem('feathers-jwt');
// console.log('MyMyMY: ',token)
if(token)
{
onLogon().then(res=>res.value.accessToken)
.then(t=>retrieveAuthUserFromJWT(t))
.then(u=>u.value)
.then(u=>{
console.log('AuthUserObject: ',u)
return u
}).then(()=>{
if(!isLoggedin&&!authCondition(authUser)){
push('/signin')
}
})
}
// })
console.log('EEEEEEeeeeeeeeee ',authUser)
}
render() {
const {authUser} = this.props
console.log('AAAAAAAAAAaaaaaaaaaaaaaaaaaaa ',authUser)
return authUser ? <MyComponent /> : null;
}
}
WithAuthorization.propTypes={
// retrieveAuthUserFromJWT:PropTypes.func.isRequired,
authUser:PropTypes.shape({}),
history:PropTypes.shape({
push:PropTypes.func
}).isRequired,
isLoggedin:PropTypes.bool.isRequired,
retrieveAuthUserFromJWT:PropTypes.func.isRequired,
onLogon:PropTypes.func.isRequired
}
WithAuthorization.defaultProps={
authUser:null
}
const mapStateToProps = (state) => ({
authUser: state.authUserState.authUser,
isLoggedin: state.sessionState.isSignedIn,
});
const mapDispatchToProps = (dispatch) => ({
onLogon: () =>dispatch(session.authenticate()),
retrieveAuthUserFromJWT : jwt=> dispatch({
type: 'RETRIEVE_AUTH_USER_FROMJWT',
// payload:authUser
payload: getUserFromJwtTocken(jwt)
}),
});
return compose(
withRouter,
connect(mapStateToProps,mapDispatchToProps),
)(WithAuthorization);
}
export default withAuthorization;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment